<template>
  <div class="info-box">
    <div class="info-left-box">
      <div class="status" v-if="liveNowStatus" v-html="liveNowStatus"></div>
      <div class="watch" v-if="channelInfo.isDisplayWatchNum === 1">
        <div class="icon"></div>
        <span class="title">{{ allWatchNum | formatNum }}观看</span>
      </div>
    </div>
    <div class="info-right-box">
      <div class="follow" v-if="wechatInfo.status" @click="_showFollow">关注</div>
      <div v-if="wechatInfo.status" v-transfer-dom>
        <transition name="fade">
          <follow-box v-show="wechatInfo.isShow" v-model="wechatInfo"></follow-box>
        </transition>
      </div>
    </div>
  </div>
</template>

<script>
import { getWatchNum, getWechatInfo } from '@/plugins/API/apiAll';
import { mapGetters } from 'vuex';
const followBox = resolve => require(['@/components/modules-pc/followBox'], resolve);

export default {
  name: 'pc-info-box',
  components: {
    followBox
  },
  data() {
    return {
      watchNum: {
        custom: 0,
        real: 0
      },
      wechatInfo: {}
    };
  },
  computed: {
    ...mapGetters({
      channelInfo: 'channelInfo'
    }),
    allWatchNum() {
      return this.watchNum.custom + this.watchNum.real;
    },
    liveNowStatus() {
      const status = this.channelInfo.liveNowStatus;
      if (status === 1) {
        return '<span class="type green"><span class="icon"></span><span class="title">直播中</span></span>';
      }
      if (status === -1) {
        return '<span class="type red"><span class="icon"></span><span class="title">直播已结束</span></span>';
      }
      if (status === 0) {
        return '<span class="type"><span class="icon"></span><span class="title">未直播</span></span>';
      }
      if (status === 4) {
        return '<span class="type"><span class="icon"></span><span class="title">直播未开始</span></span>';
      }
      return false;
    }
  },
  mounted() {
    this.getWatchNum();
    this.getWechatInfo();
    this.$Bus.$on('bus-realWatchNum', this.changeWatchNum);
    this.$Bus.$on('bus-customWatchNum', this.changeWatchNumCustom);
  },
  methods: {
    async getWatchNum() {
      const res = await getWatchNum({
        id: this.channelInfo.id,
        uin: this.channelInfo.uin
      });
      if (res.code === 200 && res.errorCode === 0) {
        const { customWatchNum, watchNum } = res.data;
        this.watchNum = {
          custom: Number(customWatchNum) || 0,
          real: Number(watchNum) || 0
        };
      }
    },
    changeWatchNum(num) {
      if (num) {
        this.watchNum.real = Number(num) || 0;
      }
    },
    changeWatchNumCustom(num) {
      if (num) {
        this.watchNum.custom += Number(num) || 0;
      }
    },
    async getWechatInfo() {
      const res = await getWechatInfo({
        id: this.channelInfo.id
      });
      if (res.code === 200 && res.errorCode === 0) {
        this.wechatInfo = res.data || {};
      }
    },
    _showFollow() {
      this.wechatInfo.isShow = true;
    }
  },
  beforeDestroy() {
    this.$Bus.$off('bus-customWatchNum', this.changeWatchNumCustom);
    this.$Bus.$off('bus-realWatchNum', this.changeWatchNum);
  }
};
</script>
<style lang="less" scoped>
.info-box {
  height: 100%;
  display: flex;
  align-items: center;
  .info-left-box {
    flex: 1;
    .status {
      display: inline-block;
      margin-right: 20px;
      ::v-deep .type {
        display: inline-block;
        color: #999;
        font-size: 18px;
        .icon {
          margin-right: 8px;
          vertical-align: middle;
          display: inline-block;
          width: 8px;
          height: 8px;
          border-radius: 100%;
          background: #999;
        }
        .title {
          vertical-align: middle;
        }
        &.green {
          color: #29ce42;
          .icon {
            background: #29ce42;
          }
        }
        &.red {
          color: #ff3b3b;
          .icon {
            background: #ff3b3b;
          }
        }
      }
    }
    .watch {
      vertical-align: middle;
      display: inline-block;
      .icon {
        vertical-align: middle;
        margin-right: 4px;
        display: inline-block;
        width: 20px;
        height: 20px;
        background: url(./img/icon-user.png) no-repeat center center;
        background-size: 100% 100%;
      }
      .title {
        vertical-align: middle;
        font-size: 18px;
      }
    }
  }
  .info-right-box {
    flex: 0 0 auto;
    .follow {
      width: 80px;
      height: 36px;
      line-height: 36px;
      background: var(--main-color);
      text-align: center;
      font-size: 18px;
      border-radius: 2px;
      cursor: pointer;
    }
  }
}
</style>
