<template>
  <div class="player">
    <div class="videoPlayer" id="videoPlayer">
      <div style="display:none;">
        <video></video>
      </div>
    </div>
  </div>
</template>
<script>
import { getAddressForGet } from '@/plugins/API/apiAll';
import { mapGetters, mapMutations } from 'vuex';
export default {
  name: 'vertical-player-box',
  data() {
    return {
      mpsPlayerObj: null,
      onePlayer: true
    };
  },
  computed: {
    ...mapGetters({
      channelInfo: 'channelInfo',
      playerInfo: 'playerInfo'
    }),
    mpsBackgroundUrl() {
      const bgUrl = this.channelInfo.channelBackground;
      return bgUrl ? `${bgUrl}?x-oss-process=style/twzb_origin` : require('./img/bg.png');
    },
    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.$nextTick(() => {
      this._mpsPlayerInit();
    });
  },
  methods: {
    ...mapMutations({
      set_playerInfo: 'set_playerInfo'
    }),
    _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,
        verticalScreen: true,
        coverImg: this.mpsBackgroundUrl,
        VideoFit: 'cover',
        isCheckMulti: true,
        multi: {
          rateList: ['标清', '流畅', '高清', '超清', '蓝光', '4K']
        },
        ...this.mpsOptions,
        onReady() {
          self._resetConfig();
          setTimeout(() => {
            self.mpsPlayerObj.addPlayerCallback('Play.Stop', function(fn) {
              fn({ type: 3 });
            });
          }, 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 {
          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);
    }
  }
};
</script>
<style lang="less" scoped>
.player {
  position: relative;
  ::v-deep div {
    box-sizing: unset;
  }
  .videoPlayer {
    position: relative;
    z-index: 100;
    width: 100%;
    height: 100%;
  }
  ::v-deep #video-action-play {
    top: 30% !important;
  }
}
</style>
