<template>
    <div class="h5Player">
        <div 
            class="content" 
            v-loading="loading" 
            :element-loading-text="loadingText" 
            element-loading-spinner="el-icon-loading"
            element-loading-background="rgba(0, 0, 0, 0.8)"
            style="width:800px; height:600px"
            :id="playerId"
        >
        </div>
        <img @click="startPlay" v-on:mouseover="overStartBtn = true" v-on:mouseout="overStartBtn = false" v-if="startBtnVisible" class="playBtn" src="../../assets/images/play.png" alt="">
        <img @click="stopPlay" v-on:mouseover="overStopBtn = true" v-on:mouseout="overStopBtn = false" v-if="pauseBtnVisible" class="playBtn" src="../../assets/images/pause.png" alt="">
    </div>
</template>

<script>
// import $ from "jquery";
import { h5playerUrl } from '@/utils/pluginsConfig';
export default {
    name: "Monitor",
    props: {
        monitorUrl: {
            type: String,
            default: '',
        },
        playerId: {
            type: String,
            default: '',
        },
    },
    data(){
        return {
            player: null,
            loading: false,
            loadingText: '',
            inPlaying: false,// 播放中
            startBtnVisible: false,// 开始按钮
            pauseBtnVisible: false,// 暂停按钮
            overPlayer: false,
            overStartBtn: false,
            overStopBtn: false,
            timeoutInstance: null,
        }
    },
    created(){
        // 设置播放容器的宽高并监听窗口大小变化
        window.addEventListener('resize', () => {
            this.player.JS_Resize();
        });
        
        this.$nextTick(() => {
            this.initPlugin();
        });
    },
    methods:{
        initPlugin() {
            const _that = this;
            this.player = new window.JSPlugin({
                szId: _that.playerId,
                szBasePath: '/h5player/',
                oStyle: {
                    borderSelect: "#000",
                },
                openDebug: true,
            });

            // 事件回调绑定
            this.player.JS_SetWindowControlCallback({
                windowEventSelect: function(iWndIndex) {  //插件选中窗口回调
                    console.log('windowSelect callback: ', iWndIndex);
                },
                pluginErrorHandler: (iWndIndex, iErrorCode, oError) => {  //插件错误回调
                    if (iErrorCode === '0x01b01307') {
                        console.log('pluginErrorHandler')
                        return;
                    }
                    this.$message.error("视频初始化失败，请确认网络连接状态");
                    this.loading = false;
                    if(!this.overStartBtn && !this.overPlayer) this.startBtnVisible = false;
                    console.log('pluginError callback: ', iWndIndex, iErrorCode, oError);
                },
                windowEventOver: () => {  //鼠标移过回调
                    console.log('windowEventOver')
                    if(this.timeoutInstance) clearTimeout(this.timeoutInstance);
                    this.overPlayer = true;
                    // 显示播放/暂停
                    if(this.inPlaying) {
                        this.pauseBtnVisible = true;
                    } else {
                        this.startBtnVisible = true;
                    }
                },
                windowEventOut: () => {  //鼠标移出回调
                    this.overPlayer = false;
                    this.timeoutInstance = setTimeout(() => {
                        // 隐藏播放/暂停
                        if(!this.overStopBtn) this.pauseBtnVisible = false;
                        if(!this.overStartBtn) this.startBtnVisible = false;
                    }, 50);
                    //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(iWndIndex, iErrorCode, oError) {  //性能不足回调
                    console.log('performanceLack callback: ', iWndIndex, iErrorCode, oError);
                }
            });
        },

        // 停止播放
        stopPlay() {
            this.loading = false;
            this.overStopBtn = false;
            this.pauseBtnVisible = false;
            this.player.JS_Stop().then(() => {
                    this.inPlaying = false;
                },
                e => { console.error(e) }
            );
        },

        // 开始播放
        startPlay() {
            this.loading = true;
            this.loadingText = '拼命加载中';
            this.overStartBtn = false;
            this.startBtnVisible = false;

            this.player.JS_Play(this.monitorUrl, { playURL: this.monitorUrl, mode: 1 }, 0, ).then(() => {
                    this.loading = false;
                    this.inPlaying = true;
                    console.log('playbackStart success')
                },
                e => {
                    console.error(e);
                    if (e === '0x01b01307') {
                        this.loadingText = '正在重新获取播放地址';
                        // 重新刷新预览地址
                        if(this.$listeners['refresh']) {
                            this.$emit('refresh');
                        }
                    } else {
                        this.loading = false;
                    }
                }
            );
        },

    },
    watch: {
        monitorUrl() {
            this.$nextTick(() => {
                this.initPlugin();
                setTimeout(() => {
                    this.startPlay();
                }, 1000);
            });
        },
    },
}
</script>
<style scoped>
.h5Player {
    position: relative;
    width: 800px;
    height: 600px;
    margin-left: 30px;
}
.playBtn {
    z-index: 10;
    cursor: pointer;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
</style>