<template>
    <div class="video-player-wrapper">
        <div
            :id="`player${this.playerID}`"
            class="player-container"
            style="width: 100%; height: 100%"
        ></div>
        <div class="over-wrapper">
            <template>
                <div :key="item" v-for="item in split * split">
                    <div class="refresh">重连</div>
                </div>
            </template>
        </div>
    </div>
</template>
<script>
import utils from '@/utils/utils'
import {type} from 'jquery'
export default {
    name: 'VideoPlayer',
    data() {
        return {
            playerID: '',
            player: null,
        }
    },
    props: {
        index: {
            type: Number,
        },
        split: {
            type: Number,
            default: 2,
        },
    },
    mounted() {
        this.playerID = utils.uuid()
        this.$nextTick(() => {
            this.createPlayer()
        })
    },
    methods: {
        // 创建播放器
        createPlayer() {
            this.player = new window.JSPlugin({
                szId: 'player' + this.playerID,
                szBasePath: 'static/player',
                iMaxSplit: 16,
                iCurrentSplit: this.split,
                openDebug: true,
                bSupporDoubleClickFull: true, //是否支持双击全屏，默认true
                oStyle: {
                    borderSelect: '#43a1ff',
                },
            })
            this.resize()
            this.$emit('ready')
            // 事件回调绑定
            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(playURL, index) {
            let {mode} = this

            this.player.JS_Play(playURL, {playURL, mode}, index).then(
                () => {
                    console.log('realplay success')
                },
                (e) => {
                    console.error(e)
                }
            )
        },
        // 停止
        stopPlay() {
            let {player} = this,
                index = player.currentWindowIndex
            this.player.JS_Stop(index).then(
                () => {
                    console.log('stop realplay success')
                },
                (e) => {
                    console.error(e)
                }
            )
        },
        // 全部停止
        stopAllPlay() {
            this.player.JS_StopRealPlayAll().then(
                () => {
                    console.log('stopAllPlay success')
                },
                (e) => {
                    console.error(e)
                }
            )
        },
        // 抓图
        capture() {
            let {player} = this,
                index = player.currentWindowIndex
            player.JS_CapturePicture(index, 'img', 'JPEG').then(
                () => {
                    console.log('capture success')
                },
                (e) => {
                    console.error(e)
                }
            )
        },
        //分屏
        arrangeWindow(splitNum) {
            this.player.JS_ArrangeWindow(splitNum).then(
                () => {
                    console.log(
                        `arrangeWindow to ${splitNum}x${splitNum} success`
                    )
                },
                (e) => {
                    console.error(e)
                }
            )
        },
        // 初始化
        resize() {
            // 设置播放容器的宽高并监听窗口大小变化
            window.addEventListener('resize', () => {
                this.player.JS_Resize()
            })
        },
    },
}
</script>
<style lang="scss" scoped>
.video-player-wrapper{
    width: 100%;
    height: 100%;
    background-color: #000;
    position: relative;
    .player-container{
        width: 100%!important;
        height: 100%!important;
    }
    .id{
        position: absolute;
        left: 0;
        top: 0;
    }
    .over-wrapper{
        position: absolute;
        left: 0;
        top:0;
        width: 100%;
        height: 100%;
        display: flex;
        flex-wrap: wrap;
        pointer-events: none;
        >div{
            width: 50%;
            height: 50%;
            pointer-events: none;
            position:relative;
        }
        .refresh{
            position: absolute;
            right: 20px;
            bottom: 20px;
            width: 50px;
            height: 50px;
            border-radius: 50px;
            background-color: rgba(17, 64, 102, 0.1);
            color: #fff;
            pointer-events: auto;
            cursor: pointer;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .refresh:hover{
            background-color: rgba(17, 64, 102, 0.5);
        }
    }
}

</style>