<template>
  <div class="watch-chat">
    <div class="icon-box">
      <div class="icon"></div>
    </div>
    <div class="text" :class="{ all: isWatchChat }">
      <div class="watch" v-if="channelInfo.isDisplayWatchNum === 1">
        {{ allWatchNum | formatNum }}观看
      </div>
      <div class="chat" v-if="channelInfo.chatCountStatus === 1">
        {{ allChatNum | formatNum }}评论
      </div>
    </div>
  </div>
</template>

<script>
import { getWatchNum, getChatCount } from '@/plugins/API/apiAll';

import { mapGetters } from 'vuex';
export default {
  name: 'player-watch-chat',
  data() {
    return {
      watchNum: {
        custom: 0,
        real: 0
      },
      chatNum: {
        real: 0
      }
    };
  },
  computed: {
    ...mapGetters({
      channelInfo: 'channelInfo'
    }),
    isWatchChat() {
      return this.channelInfo.isDisplayWatchNum === 1 && this.channelInfo.chatCountStatus === 1;
    },
    allWatchNum() {
      return this.watchNum.custom + this.watchNum.real;
    },
    allChatNum() {
      return this.chatNum.real;
    }
  },
  mounted() {
    this.getWatchNum();
    this.$Bus.$on('bus-realWatchNum', this.changeWatchNum);
    this.$Bus.$on('bus-customWatchNum', this.changeWatchNumCustom);
    this.$Bus.$on('bus-chatNum', this.changeChatNum);
    if (this.channelInfo.chatCountStatus === 1) {
      this.getChatCount();
    }
  },
  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 getChatCount() {
      const res = await getChatCount({
        id: this.channelInfo.id,
        uin: this.channelInfo.uin
      });
      if (res.code === 200 && res.errorCode === 0) {
        this.chatNum = {
          real: Number(res.data || 0)
        };
      }
    },
    changeChatNum(num) {
      if (num) {
        this.chatNum.real += Number(num) || 0;
      }
    }
  },
  watch: {
    'channelInfo.chatCountStatus'(nVal) {
      if (nVal === 1) {
        this.getChatCount();
      }
    }
  },
  beforeDestroy() {
    this.$Bus.$off('bus-customWatchNum', this.changeWatchNumCustom);
    this.$Bus.$off('bus-realWatchNum', this.changeWatchNum);
    this.$Bus.$off('bus-chatNum', this.changeChatNum);
  }
};
</script>

<style lang="less" scoped>
.watch-chat {
  margin-bottom: 0.1rem;
  padding: 0.06rem;
  display: flex;
  align-items: center;
  height: 0.6rem;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 0.6rem;
  .icon-box {
    flex: 0 0 auto;
    width: 0.48rem;
    height: 0.48rem;
    background: linear-gradient(#72b8ff, #4285ec);
    border-radius: 100%;
    .icon {
      width: 100%;
      height: 100%;
      background: url(./img/icon-watch.png) no-repeat center center;
      background-size: 50% auto;
    }
  }
  .text {
    flex: 0 0 auto;
    padding: 0 0.08rem;
    line-height: 0.2rem;
    color: #fff;
    font-size: 0.2rem;
    &.all {
      font-size: 0.16rem;
    }
  }
}
</style>
