<template>
  <div class="wrapper">
     <div class="status" v-if="liveNowStatus" v-html="liveNowStatus"></div>
    <div id="mps" @click.stop="showD">
      <div class="mpstitle-name">{{ channelInfo.channelName }}?true</div>
      <div class="videoPlayer" id="videoPlayer" :style="{pointerEvents: (count || !(drainage.drainage_model || []).includes('0')) ? 'all' : 'none'}">
        <div style="display:none;">
          <video></video>
        </div>
      </div>
    </div>
    <mark-box></mark-box>
    <div v-show="!isFullScreen">
      <div class="time-watch-chat">
        <down-time v-if="isDownTime"></down-time>
        <watch-chat v-show="isWatchChat"></watch-chat>
      </div>
      <div class="more-box">
        <more-box :mps="mpsPlayerObj"></more-box>
      </div>
    </div>
  </div>
</template>
<script>
import { traffic } from '@/plugins/openTraffic';
import { getAddressForGet } from '@/plugins/API/apiAll';
import { mapGetters, mapMutations } from 'vuex';
import watermark from '@/plugins/watermark';
import markBox from './mark';
import downTime from './downTime';
import watchChat from './watch-chat';
import moreBox from './more';
export default {
  name: 'player-box',
  components: {
    markBox,
    downTime,
    watchChat,
    moreBox
  },
  data() {
    return {
      mpsPlayerObj: null,
      onePlayer: true, // 切换自动播放问题
      isFullScreen: false,
      count: 0
    };
  },
  computed: {
    ...mapGetters({
      nowDate: 'nowDate',
      userInfo: 'userInfo',
      channelInfo: 'channelInfo',
      drainage: 'drainage',
      channelConfig: 'channelConfig',
      playerInfo: 'playerInfo'
    }),
    isPeep() {
      const peep = this.channelConfig.peep || {};
      return !!peep.isEnable;
    },
    isDownTime() {
      return (
        this.channelInfo.liveStatus === 0 &&
        this.channelInfo.countdownStatus === 1 &&
        this.channelInfo.liveBegin > this.nowDate / 1000
      );
    },
    isWatchChat() {
      return this.channelInfo.isDisplayWatchNum === 1 || this.channelInfo.chatCountStatus === 1;
    },
    isControl() {
      if (this.playerInfo.playUrl !== this.playerInfo.saveUrl) {
        return true;
      }
      if (this.channelInfo.liveStatus === 1) {
        return true;
      }
      if (this.channelInfo.vodUrl && this.channelInfo.vodStatus) {
        return true;
      }
      return false;
    },
    mpsBackgroundUrl() {
      const bgUrl = this.channelInfo.mpsBackgroundUrl;
      return bgUrl ? `${bgUrl}?x-oss-process=style/twzb_origin` : '';
    },
    mpsOptions() {
      let options = {};
      if (this.channelInfo.hlsPwdStatus === 1) {
        options = {
          crypUrl: getAddressForGet(),
          cryptBeforeSendFn: function(XMLHttpRequest) {
            XMLHttpRequest.setRequestHeader('X-Ca-Stage', process.env.X_CA_STAGE);
          },
          cryptUrlType: 'get',
          iv: '1152922081067', // 偏移量
          sendKey: { channelId: this.channelInfo.id }, // 验证参数
          crymode: 'CBC' // 默认CBC
        };
      } else {
        options = {
          hlsUrl: this.channelInfo.livePlayHlsUrl
        };
      }
      return options;
    },
    liveNowStatus() {
      const status = this.channelInfo.liveNowStatus;
      if (status === 1) {
        return '<span class="type blue"><span class="title">直播中</span></span>';
      }
      if (status === -1) {
        return '<span class="type red"><span class="title">直播已结束</span></span>';
      }
      if (status === 0) {
        return '<span class="type"><span class="title">未直播</span></span>';
      }
      if (status === 4) {
        return '<span class="type"><span class="title">直播未开始</span></span>';
      }
      return false;
    }
  },
  mounted() {
    this.watermark();
    this.$nextTick(() => {
      this._mpsPlayerInit();
    });
  },
  methods: {
    ...mapMutations({
      set_playerInfo: 'set_playerInfo'
    }),
    showD() {
      const drainage = this.drainage
      if (drainage.drainage_status === 1){
        if (!(drainage.drainage_model || []).includes('0')) {
         return
        }
        // eslint-disable-next-line no-undef 
        !this.count && traffic(drainage)
        drainage.drainage_type !== 0 && this.count++
      }
     
    },
    watermark() {
      if (this.isPeep && this.userInfo.id) {
        watermark(`id: ${this.userInfo.id}`);
      }
    },
    _mpsPlayerInit() {
      const self = this;
      if (this.mpsPlayerObj) {
        return false;
      }
      this.mpsPlayerObj = new mpsPlayer({
        container: 'videoPlayer',
        uin: this.channelInfo.aodianUin,
        appId: this.channelInfo.mpsDynamicVodAppId,
        width: '100%',
        height: '100%',
        controlbardisplay: 'enable',
        orientation: 'portraint',
        enablehtml5: true,
        coverImg: this.mpsBackgroundUrl,
        isShowControlDiv: this.isControl,
        hideScreenBtn: this.isPeep,
        isCheckMulti: true,
        multi: {
          rateList: ['标清', '流畅', '高清', '超清', '蓝光', '4K']
        },
        ...this.mpsOptions,
        onReady() {
          self._resetConfig();
          setTimeout(() => {
            self.mpsPlayerObj.addPlayerCallback('Play.Stop', function(fn) {
              fn({ type: 3 });
            });
            self.mpsPlayerObj.addPlayerCallback('enterFullScreen', function() {
              self.isFullScreen = true;
            });
            self.mpsPlayerObj.addPlayerCallback('exitFullScreen', function() {
              self.isFullScreen = false;
            });
          }, 2000);
        }
      });
    },
    _resetConfig() {
      let playUrl = '';
      let saveUrl = '';
      if (this.channelInfo.liveStatus === 1) {
        playUrl = this.channelInfo.livePlayHlsUrl;
        saveUrl = this.channelInfo.livePlayHlsUrl;
      } else if (this.channelInfo.vodUrl && this.channelInfo.vodStatus) {
        playUrl = this.channelInfo.vodUrl;
        saveUrl = this.channelInfo.vodUrl;
      } else {
        playUrl = 'http://';
        saveUrl = 'http://';
      }
      this.set_playerInfo({
        playUrl: playUrl,
        saveUrl: saveUrl,
        cameraId: ''
      });
    },
    _reviseProtocol(url) {
      let path = url;
      if (!path) {
        return '';
      }
      if (window.location.protocol === 'http:') {
        path = path.replace('https://', 'http://');
      } else {
        path = path.replace('http://', 'https://');
      }
      return path;
    },
    _changePlayer() {
      let obj = null;
      if (this.channelInfo.hlsPwdStatus === 1) {
        if (this.playerInfo.playUrl === this.channelInfo.livePlayHlsUrl) {
          obj = { channelId: this.channelInfo.id };
        } else if (this.playerInfo.cameraId) {
          obj = {
            channelId: this.channelInfo.id,
            cameraId: this.playerInfo.cameraId
          };
        } else {
          obj = this._reviseProtocol(this.playerInfo.playUrl);
        }
      } else {
        obj = this._reviseProtocol(this.playerInfo.playUrl);
      }
      if (this.mpsPlayerObj && this.mpsPlayerObj.changePlayer) {
        if (this.onePlayer) {
          this.mpsPlayerObj.changePlayer(obj, false);
          this.onePlayer = false;
        } else {
          this.mpsPlayerObj.changePlayer(obj);
        }
      }
    },
    _seTControlDiv() {
      if (this.mpsPlayerObj && this.mpsPlayerObj.seTControlDiv) {
        this.mpsPlayerObj.seTControlDiv(this.isControl);
      }
    }
  },
  watch: {
    playerInfo: {
      handler() {
        this._changePlayer();
      },
      deep: true
    },
    'channelInfo.liveStatus'(a) {
      setTimeout(() => {
        this._resetConfig();
      }, 10000);
    },
    isControl() {
      this._seTControlDiv();
    },
    'userInfo.id'() {
      this.watermark();
    }
  }
};
</script>
<style lang="less" scoped>
.wrapper {
  position: relative;
  background-color: #000;
  overflow: hidden;
   .status {
      display: inline-block;
      position: absolute;
      z-index: 111;
      background: #000;
      margin: 5px;
      padding: 2px 5px;
      border-radius: 12px;
      opacity: 0.8;
      line-height: 100%;
      ::v-deep .type {
        display: inline-block;
        color: #999;
        font-size: 12px;
        .icon {
          margin-right: 8px;
          vertical-align: middle;
          display: inline-block;
          width: 8px;
          height: 8px;
          border-radius: 100%;
          background: #999;
        }
        .title {
          vertical-align: middle;
        }
        &.blue {
          color: #3F9CFC;
          .icon {
            background: #3F9CFC;
          }
        }
        &.red {
          color: #ff3b3b;
          .icon {
            background: #ff3b3b;
          }
        }
      }
    }
  .time-watch-chat {
    position: absolute;
    bottom: calc(9 / 16 * 100vw - 0.1rem);
    right: 0.1rem;
    z-index: 200;
    transform: translate(0, 100%) scale(0.5);
    transform-origin: 100% 0;
  }
  .more-box {
    position: absolute;
    bottom: 0.5rem;
    right: -0.5rem;
    z-index: 200;
    transition: right 0.5s ease 3s;
  }
  &:hover {
    .more-box {
      right: 0.1rem;
      transition: right 0.5s ease 0s;
    }
  }
}
#mps {
  position: relative;
  ::v-deep div {
    box-sizing: unset;
  }
  ::v-deep #videoBox {
    width: 100% !important;
    height: 100% !important;
  }
  .mpstitle-name {
    position: absolute;
    z-index: 5;
    top: 0;
    left: 0;
    right: 0;
    display: none;
    width: 100%;
    height: 50px;
    line-height: 50px;
    text-align: center;
    font-size: 16px;
    font-weight: 700;
    background-color: #000;
    color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .videoPlayer {
    position: relative;
    z-index: 100;
    width: 100%;
    height: calc(9 / 16 * 100vw);
  }
}
</style>
