<template>
    <div class="playerContainer">
        <div id="player"></div>
        <div class="info">
            <span>{{ videoinfo }}</span>
        </div>
        <div class="closeBtn" @click="closeVideo">
            <i class="el-icon-close"></i>
        </div>
    </div>
</template>

<script>
const IS_MOVE_DEVICE = document.body.clientWidth < 992 // 是否移动设备
const MSE_IS_SUPPORT = !!window.MediaSource // 是否支持mse
export default {
    data() {
        return {
            isMoveDevice: IS_MOVE_DEVICE,
            player: null,
            splitNum: IS_MOVE_DEVICE ? 1 : 2,
            mseSupport: MSE_IS_SUPPORT,
            tabActive: MSE_IS_SUPPORT ? 'mse' : 'decoder',
            labelCol: {
                span: 5,
            },
            wrapperCol: {
                span: 18,
            },
            urls: {
                realplay: 'ws://183.64.175.153:559/openUrl/pxvGV5C',
                talk: 'ws://183.64.175.153:559/openUrl/pxvGV5C',
                playback: 'ws://183.64.175.153:559/openUrl/pxvGV5C',
            },
            playback: {
                startTime: '2021-07-26T00:00:00',
                endTime: '2021-07-26T23:59:59',
                // valueFormat: moment.HTML5_FMT.DATETIME_LOCAL_SECONDS,
                seekStart: '2021-07-26T12:00:00',
                rate: '',
            },
            muted: true,
            volume: 50,
            volumeOnSvg: {
                template:
                    '<svg t="1624453273744" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1421" width="200" height="200"><path d="M597.994667 138.005333q130.005333 28.010667 213.994667 132.992t84.010667 241.002667-84.010667 241.002667-213.994667 132.992l0-88q93.994667-28.010667 153.002667-106.005333t59.008-180.010667-59.008-180.010667-153.002667-106.005333l0-88zM704 512q0 120-106.005333 172.010667l0-344q106.005333 52.010667 106.005333 172.010667zM128 384l170.005333 0 213.994667-213.994667 0 684.010667-213.994667-213.994667-170.005333 0 0-256z" p-id="1422"></path></svg>',
            },
            volumeOffSvg: {
                template:
                    '<svg t="1624453193279" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9147" width="200" height="200"><path d="M512 170.005333l0 180.010667-90.005333-90.005333zM181.994667 128l714.005333 714.005333-53.994667 53.994667-88-88q-74.005333 58.005333-156.010667 77.994667l0-88q50.005333-13.994667 96-50.005333l-181.994667-181.994667 0 288-213.994667-213.994667-170.005333 0 0-256 202.005333 0-202.005333-202.005333zM810.005333 512q0-101.994667-59.008-180.010667t-153.002667-106.005333l0-88q130.005333 28.010667 213.994667 132.992t84.010667 241.002667q0 96-44.010667 178.005333l-64-66.005333q21.994667-53.994667 21.994667-112zM704 512q0 18.005333-2.005333 26.005333l-104-104 0-93.994667q106.005333 52.010667 106.005333 172.010667z" p-id="9148"></path></svg>',
            },
            videoinfo: '视频加载中...',
        }
    },
    computed: {
        mode: function () {
            return this.tabActive === 'mse' ? 0 : 1
        },
    },
    methods: {
        init() {
            window.addEventListener('resize', () => {
                this.player.JS_Resize()
            })
        },
        createPlayer() {
            this.player = new window.JSPlugin({
                szId: 'player',
                szBasePath: '/',
                iMaxSplit: 1,
                iCurrentSplit: IS_MOVE_DEVICE ? 1 : 2,
                openDebug: true,
                oStyle: {
                    borderSelect: IS_MOVE_DEVICE ? '#000' : '#FFCC00',
                },
            })

            // 事件回调绑定
            this.player.JS_SetWindowControlCallback({
                windowEventSelect: function (iWndIndex) {
                    //插件选中窗口回调
                    console.log('windowSelect callback: ', iWndIndex)
                },
                pluginErrorHandler: function (iWndIndex, iErrorCode, oError) {
                    //插件错误回调
                    console.log(
                        'pluginError callback: ',
                        iWndIndex,
                        iErrorCode,
                        oError
                    )
                },
                windowEventOver: function (iWndIndex) {
                    //鼠标移过回调
                    //console.log(iWndIndex);
                },
                windowEventOut: function (iWndIndex) {
                    //鼠标移出回调
                    //console.log(iWndIndex);
                },
                windowEventUp: function (iWndIndex) {
                    //鼠标mouseup事件回调
                    //console.log(iWndIndex);
                },
                windowFullCcreenChange: function (bFull) {
                    //全屏切换回调
                    console.log('fullScreen callback: ', bFull)
                },
                firstFrameDisplay: function (iWndIndex, iWidth, iHeight) {
                    //首帧显示回调
                    console.log(
                        'firstFrame loaded callback: ',
                        iWndIndex,
                        iWidth,
                        iHeight
                    )
                },
                performanceLack: function () {
                    //性能不足回调
                    console.log('performanceLack callback: ')
                },
            })
        },
        /* 预览&对讲 */
        realplay() {
            let {player, mode, urls} = this,
                index = player.currentWindowIndex,
                playURL = urls.realplay

            player
                .JS_Play(
                    playURL,
                    {
                        playURL,
                        mode,
                    },
                    index
                )
                .then(
                    () => {
                        console.log('realplay success')
                        this.videoinfo = ''
                    },
                    (e) => {
                        this.videoinfo = '播放失败，请重试'
                        console.error(e)
                    }
                )
        },
        stopPlay() {
            this.player.JS_Stop().then(
                () => {
                    this.playback.rate = 0
                    console.log('stop realplay success')
                },
                (e) => {
                    console.error(e)
                }
            )
        },
        closeVideo() {
            this.stopPlay()
            this.videoinfo = '视频已关闭'
            this.$emit('close')
        },
        getVideoURL() {
            this.videoinfo = '视频加载中...'
            let query = {
                // cameraIndexCode: '110090628241674360', // 监控点编码
                cameraIndexCode: '50035800001310713876', // 监控点编码
            }
            let hasURL
            // return new Promise((resolve,reject)=>{
            this.$http
                .post('${yhxt}/baseDataStatistics/v1/getPreviewURLs', query)
                .then((res) => {
                    if (res.data.state && res.data.value) {
                        let data = JSON.parse(res.data.value)
                        this.urls.realplay = data.url
                        this.realplay()
                    } else {
                        this.videoinfo = '获取监控点资源失败！'
                        this.$message.warning('获取监控点资源失败！')
                    }
                })
            // })
        },
    },
    mounted() {
        this.init()
        this.createPlayer()
        this.getVideoURL()
    },
}
</script>

<style lang="scss" scoped>
.playerContainer {
    width: 540px;
    height: 320px;
    padding: 8px;
    background: rgba(1, 155, 244, 0.6);
    position: relative;
}
#player {
    width: 100%;
    height: 100%;
}
.info {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    span {
        color: #fff;
    }
}
.closeBtn {
    position: absolute;
    right: -10px;
    top: -10px;
    width: 22px;
    height: 22px;
    background: rgba(1, 155, 244, 1);
    border-radius: 22px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    i {
        color: #fff;
        font-size: 12px;
    }
}
.closeBtn:hover {
    background: rgba(250, 21, 90, 0.61);
}
</style>