<template>
    <div class="wrapper">
        <div id="mps">
            <div class="mpstitle-name" ref="title">{{channelInfo.channelName}}?true</div>
            <div class="videoPlayer" id="videoPlayer"><div style="display:none;"><video></video></div></div>
        </div>
        <down-time class="count-dowm" v-if="!fullScreen"></down-time>
        <div class="mobile-num" v-if="!fullScreen">
            <num-watch v-if="channelInfo.isDisplayWatchNum == 1"></num-watch>
            <num-chat v-if="channelInfo.chatCountStatus == 1"></num-chat>
        </div>
        <div class="menu-right" v-if="!fullScreen">
            <menu-right :mps="mpsPlayerObj"></menu-right>
        </div>
    </div>
</template>
<script>
    const CRYO_URL = '//apiliveroom.dev.guangdianyun.tv/v1/Program/Address/getLivePlayAddressForGet'
    import {mapGetters, mapMutations} from 'vuex'
    import downTime from './downTime';
    import numChat from './numChat';
    import numWatch from './numWatch';
    import menuRight from './menuRight'
    export default {
        components: {
            downTime,
            numChat,
            numWatch,
            menuRight
        },
        data(){
            return {
                mpsPlayerObj: null,
                onePlayer: true, //切换自动播放问题
                fullScreen: false,
            }
        },
        computed:{
            ...mapGetters({
                'channelInfo': 'channelInfo',
                'playerInfo': 'playerInfo'
            }),
            mpsBackgroundUrl(){
                let url = this.channelInfo.mpsBackgroundUrl;
                return url ? `${url}?x-oss-process=image/resize,m_fixed,w_1280,h_720` : '';
            },
            mpsOptions(){
                let options = {};
                let hlsPwdStatus = this.channelInfo.hlsPwdStatus;
                if(hlsPwdStatus == 1){
                    options = {
                        crypUrl: CRYO_URL,
                        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;
            },
            useNewH5(){
                let arr = [1610, 1436, 1043];
                let uin = this.channelInfo.uin;
                return arr.some(x => (x == uin))
            },
            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;
            },
        },
        mounted(){
            this.$nextTick(() => {
                this._mpsPlayerInit();
            })
        },
        methods: {
            ...mapMutations({
                'set_playerInfo': 'set_playerInfo'
            }),
            _mpsPlayerInit(){
                const _this = 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,
                    useNewH5: this.useNewH5,
                    coverImg: this.mpsBackgroundUrl,
                    isShowControlDiv: this.isControl,
                    ...this.mpsOptions,
                    onReady() {
                        _this._resetConfig();
                        setTimeout(() => {
                            //  1 2 3  默认最后一帧  封面图 自定义图片  循环播放
                            _this.mpsPlayerObj.addPlayerCallback('Play.Stop', function (fn) {
                                fn({type: 3});
                            });
                            _this.mpsPlayerObj.addPlayerCallback('enterFullScreen',function(){//全屏时触发
                                _this.fullScreen = true;
                            });
                            _this.mpsPlayerObj.addPlayerCallback('exitFullScreen',function(){//退出全屏时触发
                                _this.fullScreen = 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){
                if(!url){
                    return '';
                }
                if(window.location.protocol == 'http:'){
                    url = url.replace("https://","http://");
                }else{
                    url = url.replace("http://","https://");
                }
                return url;
            },
            _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);
                    }else{
                        this.mpsPlayerObj.changePlayer(obj, false);
                    }
                    this.onePlayer = false;
                }
            },
            _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();
            }
        },
        beforeDestroy(){
            
        },
    }
</script>
<style lang="less" scoped>
    .wrapper{
        position: relative;
        background-color: #000;
        overflow: hidden;
    }
    #mps{
        position: relative;
        .mpstitle-name{
            position: absolute;
            z-index: 5;
            top: 0;
            left: 0;
            right: 0;
            text-shadow: none;
            color: #fff;
            background-color: #000;
            font-weight: 700;
            width: 100%;
            text-align: center;
            font-size: 1rem;
            height: 50px;
            list-style: none;
            line-height: 50px;
            display: none;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .videoPlayer{
            position: relative;
            z-index: 100;
            width: 100%;
            height: calc(9/16*100vw);
        }
    }
    .count-dowm{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 200;
    }
    .mobile-num{
        position: absolute;
        right: 10px;
        bottom: calc(9 / 16 * 100vw - 25px);
        z-index: 110;
    }
    .count-dowm ~ .mobile-num{
        bottom: calc(9 / 16 * 100vw - 65px);
    }
    .menu-right{
        position: absolute;
        right: -100% - 10px;
        top: 50%;
        z-index: 110;
        width: 50px;
        color: #fff;
        transform: translateY(-50%);
        transition: right 0.5s ease 3s;
    }
    .wrapper:hover{
        .menu-right{
            right: 10px;
            transition: right 0.5s ease 0s;
        }
    }
</style>
<style>
    #videoBox{
        width: 100% !important;
        height: 100% !important;
    }
</style>