<template>
  <div class="player-box">
    <div id="mps">
      <div class="videoPlayer" id="videoPlayer">
        <div style="display:none;">
          <video></video>
        </div>
      </div>
    </div>
    <div v-show="!isFullScreen">
      <div class="more">
        <more-box :mps="mpsPlayerObj"></more-box>
      </div>
    </div>
  </div>
</template>
<script>
import { getAddressForGet } from '@/plugins/API/apiAll';
import { mapGetters, mapMutations } from 'vuex';
import moreBox from './more';
import watermark from '@/plugins/watermark';

export default {
  name: 'pc-player-box',
  components: {
    moreBox
  },
  data() {
    return {
      mpsPlayerObj: null,
      onePlayer: true, // 切换自动播放问题
      isFullScreen: false
    };
  },
  computed: {
    ...mapGetters({
      userInfo: 'userInfo',
      channelInfo: 'channelInfo',
      channelConfig: 'channelConfig',
      playerInfo: 'playerInfo'
    }),
    isPeep() {
      const peep = this.channelConfig.peep || {};
      return !!peep.isEnable;
    },
    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;
    }
  },
  mounted() {
    this.watermark();
    this.$nextTick(() => {
      this._mpsPlayerInit();
    });
  },
  methods: {
    ...mapMutations({
      set_playerInfo: 'set_playerInfo'
    }),
    watermark() {
      if (this.isPeep && this.userInfo.id) {
        watermark(`id: ${this.userInfo.id}`, {
          node: '#videoPlayer',
          width: 600,
          height: 300
        });
      }
    },
    _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,
        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);
        }
      }
    }
  },
  watch: {
    playerInfo: {
      handler() {
        this._changePlayer();
      },
      deep: true
    },
    'channelInfo.liveStatus'(a) {
      setTimeout(() => {
        this._resetConfig();
      }, 10000);
    },
    'userInfo.id'() {
      this.watermark();
    }
  }
};
</script>
<style lang="less" scoped>
.player-box {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  .more {
    position: absolute;
    bottom: 50px;
    right: -50px;
    z-index: 200;
    transition: right 0.5s ease 3s;
  }
  &:hover {
    .more {
      right: 10px;
      transition: right 0.5s ease 0s;
    }
  }
}
#mps {
  position: relative;
  width: 100%;
  height: 100%;
  ::v-deep div {
    box-sizing: unset;
  }
  ::v-deep #videoBox {
    width: 100% !important;
    height: 100% !important;
  }
  .videoPlayer {
    position: relative;
    z-index: 100;
    width: 100%;
    height: 100%;
  }
}
</style>
