<template>
  <div class="more">
    <div class="barrage" v-if="barrageInfo.status == 1" @click="_setBarrage">
      <div class="icon-show" v-if="showBarrage"></div>
      <div class="icon-hide" v-else></div>
    </div>
    <div class="back" v-if="showBack" @click="_backPlay">
      <div class="icon"></div>
    </div>
  </div>
</template>

<script>
import { mapGetters, mapMutations } from 'vuex';
export default {
  name: 'player-more',
  props: {
    mps: {}
  },
  data() {
    return {
      showBarrage: true
    };
  },
  computed: {
    ...mapGetters({
      channelInfo: 'channelInfo',
      playerInfo: 'playerInfo'
    }),
    barrageInfo() {
      return this.channelInfo.barrageInfo;
    },
    showBack() {
      return this.playerInfo.playUrl !== this.playerInfo.saveUrl;
    }
  },
  mounted() {
    this.$Bus.$on('bus-sendBarrage', this._sendBarrage);
  },
  methods: {
    ...mapMutations({
      set_playerInfo: 'set_playerInfo'
    }),
    _backPlay() {
      const info = JSON.parse(JSON.stringify(this.playerInfo));
      info.playUrl = info.saveUrl;
      info.cameraId = '';
      this.set_playerInfo(info);
    },
    _setBarrage() {
      this.showBarrage = !this.showBarrage;
      if (!this.showBarrage && this.mps) {
        this.mps.removelement();
      }
    },
    makeColor() {
      const colorArray = '0123456789abcdef';
      let color = '';
      for (let i = 0; i < 6; i++) {
        color += colorArray[Math.floor(Math.random() * 16)];
      }
      return color;
    },
    _sendBarrage(str) {
      const content = str.replace(/(#)[\u4e00-\u9fa5A-Za-z0-9.]+(#)/gi, '');
      if (!this.mps || !content || !this.showBarrage || this.barrageInfo.status !== 1) {
        return false;
      }
      const fontColor = this.barrageInfo.fontColor || 'FFFFFF';
      const fontSize = this.barrageInfo.fontSize || 2;
      const fontSpeed = this.barrageInfo.speed || 2;
      const color = fontColor === 'random' ? this.makeColor() : fontColor;
      const sizeArr = { '1': 12, '2': 16, '3': 22 };
      const speedArr = { '1': 50, '2': 30, '3': 10 };
      const size = sizeArr[fontSize] || 16;
      const speed = speedArr[fontSpeed] || 30;
      this.mps.sendbarrage2(content, size, '#' + color, '', speed, '微软雅黑');
    }
  },
  beforeDestroy() {
    this.$Bus.$off('bus-sendBarrage', this._sendBarrage);
  }
};
</script>
<style lang="less" scoped>
.more {
  .barrage {
    margin-top: 0.06rem;
    width: 0.3rem;
    height: 0.3rem;
    border-radius: 100%;
    background: rgba(0, 0, 0, 0.5);
    .icon-show {
      width: 100%;
      height: 100%;
      background: url(./img/icon-barrage.png) no-repeat center center;
      background-size: 50% auto;
    }
    .icon-hide {
      width: 100%;
      height: 100%;
      background: url(./img/icon-barrage-no.png) no-repeat center center;
      background-size: 50% auto;
    }
  }
  .back {
    margin-top: 0.06rem;
    width: 0.3rem;
    height: 0.3rem;
    border-radius: 100%;
    background: rgba(0, 0, 0, 0.5);
    .icon {
      width: 100%;
      height: 100%;
      background: url(./img/icon-back.png) no-repeat center center;
      background-size: 50% auto;
    }
  }
}
</style>
