<template>
    <div class="videoLive">
        <div class="center">
            <div class="video_live monitor" ref="monitor">
                <img v-if="imgUrl" class="video-js" :src="imgUrl" alt="">
                <div v-if="!imgUrl" ref="videoPlayer" class="video-js">
                    <div id="video-js"></div>
                </div>
            </div>

            <div class="skills">
                <div class="left">
                    <img src="../assets/wx/direction_keys.png" mode=""></img>
                    <div :class="directionFlag == 0 ? 'left_arrow_item_act' : 'left_arrow_item'"
                        @touchstart.stop.prevent='touchstart(2)' @touchend.stop.prevent='touchend(2)'>

                    </div>
                    <div :class="directionFlag == 1 ? 'right_arrow_item_act' : 'right_arrow_item'"
                        @touchstart.stop.prevent='touchstart(3)' @touchend.stop.prevent='touchend(3)'>

                    </div>
                    <div :class="directionFlag == 2 ? 'up_arrow_item_act' : 'up_arrow_item'"
                        @touchstart.stop.prevent='touchstart(0)' @touchend.stop.prevent='touchend(0)'>

                    </div>
                    <div :class="directionFlag == 3 ? 'down_arrow_item_act' : 'down_arrow_item'"
                        @touchstart.stop.prevent='touchstart(1)' @touchend.stop.prevent='touchend(1)'>

                    </div>

                </div>
                <div class="right">
                    <div class="right_item">
                        <div :class="flag1 ? 'add_act' : 'add'" @touchstart.stop.prevent='touchstart(10)'
                            @touchend.stop.prevent='touchend(10)'>

                        </div>
                        <div class="focus">
                            焦距
                        </div>
                        <div :class="flag1 ? 'subtract' : 'subtract_act'" @touchstart.stop.prevent='touchstart(11)'
                            @touchend.stop.prevent='touchend(11)'>

                        </div>
                    </div>
                    <div class="right_item">
                        <div :class="flag2 ? 'add_act' : 'add'" @touchstart.stop.prevent='touchstart(8)'
                            @touchend.stop.prevent='touchend(8)'>

                        </div>
                        <div class="focus">
                            缩放
                        </div>
                        <div :class="flag2 ? 'subtract' : 'subtract_act'" @touchstart.stop.prevent='touchstart(9)'
                            @touchend.stop.prevent='touchend(9)'>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import EZUIKit from 'ezuikit-js';
export default {
    data() {
        return {
            // 头部导航背景
            background: {
                backgroundColor: '#24B383',
            },
            directionFlag: 5,
            flag1: true,
            flag2: true,
            cameraid: '',
            channelid: '',
            accesstoken: '',
            src: '',
            url:'',
            imgUrl:'',
            player: null,
            
        };
    },
    mounted() {
        // console.log(options,'00');
        // this.cameraSerialNumber = options.cameraSerialNumber;
        // this.cameraChannelNumber = options.cameraChannelNumber
        // this.getVideoData(this.cameraSerialNumber, this.cameraChannelNumber)

        var router = this.$route.query
        if (router.token && router.userid) {
            localStorage.setItem('token', router.token)
            
            this.cameraid = router.cameraSerialNumber;
              this.channelid = router.cameraChannelNumber
             this.getVideoData(this.cameraid, this.channelid)
            return
        }
    },
    beforeDestroy() {
        const that = this;
        // 销毁播放器
        if (this.player) {
            // this.player.dispose();
            this.player.stop()
            this.player.destroy()
            this.player = null
        }
        clearInterval(this.statusInterval) && this.statusInterval
    },
    methods: {
      
        // 获取摄像头得地址
        getVideoData(cameraid, channelid) {
            var data2 = {
                cameraid: cameraid,
                channelid: channelid
            }

            this.api.getGethls(data2).then(res => {
                // console.log(res.data, 11);
                if (res.data.code == 200) {
                    this.url = res.data.data.ezopen
                    this.imgUrl=''
                    this.createVideoNew(res.data.data.accesstoken)
                } else {
                    this.imgUrl=require('../assets/wx/videoLive.png')
                }
            })

        },
        createVideoNew(accessToken) {
            // divW和divH是获取了父级宽高 使播放容器能铺满div
            let divW = this.$refs.videoPlayer.clientWidth
            let divH = this.$refs.videoPlayer.clientHeight
            this.player = new EZUIKit.EZUIKitPlayer({
                id: 'video-js', // 视频容器ID
                accessToken: accessToken,
                url: this.url,
                // 官方url例子：ezopen://open.ys7.com/G39444019/1.live 也可并非.live结尾 详见GitHub
                // 播放主题  simple-极简版; standard-标准版; security-安防版; voice-语音版; 自定义主题详见GitHub
                template: 'security',
                useHardDev: true,// 开启高性能模式 依赖需高于7.7.x 截止到2023.11.7 建议保持最新版本为7.7.6
                // plugin: ["talk"], // 加载插件，talk-对讲 非必填
                width: divW,  // 播放容器宽高 也可以直接设置成数字 如 1920 单位是px
                height: divH, // 播放容器宽高 也可以直接设置成数字 如 1080 单位是px
            })
            window.onresize = () => {
                this.player.reSize(
                    this.$refs.videoPlayer.clientWidth,
                    this.$refs.videoPlayer.clientHeight
                );
            };
        },
        touchstart(num) {
            const that = this
            if (num == 2) {
                this.directionFlag = 0;
            } else if (num == 3) {
                this.directionFlag = 1;
            } else if (num == 0) {
                this.directionFlag = 2;
            } else if (num == 1) {
                this.directionFlag = 3;
            } else if (num == 10) {
                this.flag1 = true;
            } else if (num == 11) {
                this.flag1 = false;
            } else if (num == 8) {
                this.flag2 = true;
            } else if (num == 9) {
                this.flag2 = false;
            }
            // let that = this;
            // uni.request({
            // 	url: 'https://open.ys7.com/api/lapp/device/ptz/start',
            // 	method: 'POST',
            // 	data:{
            // 		accessToken: that.accesstoken,
            // 		deviceSerial: that.cameraSerialNumber,
            // 		channelNo: that.cameraChannelNumber,
            // 		direction:num,
            // 		speed: 1,
            // 	},
            // 	header: {
            // 		'Content-Type': 'application/x-www-form-urlencoded',
            // 	},
            // 	success: (res) => {
            // 		// console.log(res);
            // 	}
            // });
            this.api.cameraStart(this.cameraid, this.channelid, num).then(res => {
                setTimeout(() => {
                    that.touchend(num)
                }, 10000);
            })
            // this.$http({
            // 	url: this.api.camera_start + '?cameraid=' + this.cameraSerialNumber + '&channelid=' + this.cameraChannelNumber + '&direction=' + num,
            // 	method: 'POST',
            // }).then(res=>{

            // })
        },

        touchend(num) {
            this.directionFlag = 5
            // let that = this;
            // uni.request({
            // 	url:'https://open.ys7.com/api/lapp/device/ptz/stop',
            // 	method: 'POST',
            // 	data:{
            // 		accessToken: that.accesstoken,
            // 		deviceSerial: that.cameraSerialNumber,
            // 		channelNo: that.cameraChannelNumber,
            // 		direction:num,
            // 		speed: 1,
            // 	},
            // 	header: {
            // 		'Content-Type': 'application/x-www-form-urlencoded',
            // 	},
            // 	success: (res) => {
            // 		// console.log(res);
            // 	}
            // })
            if (num != -1) {
                this.api.cameraStop(this.cameraid, this.channelid, num).then(res => {
                    this.nowNum = -1
                })
            }
            // this.$http({
            // 	url: this.api.camera_stop + '?cameraid=' + this.cameraSerialNumber + '&channelid=' + this.cameraChannelNumber + '&direction=' + num,
            // 	method: 'POST',
            // }).then(res=>{

            // })
        },
    }
}
</script>
<style lang="scss" scoped>
.videoLive {
    width: 100vw;
    min-height: 100vh;
    background-color: #F5F6FA;

    .center {

        .video_live {
            width: 100vw;
            height:60vh;

            >img {
                width: 100%;
                height: 100%;
            }
            >div{
                width: 100%;
                height: 100%;
            }
        }

        .skills {
            width: 100%;
            height: 40vh;
            box-sizing: border-box;
            // padding: .61rem 0 0 .4rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
            .left {
                width: 3rem;
                height: 3rem;
                position: relative;
                // margin-right: .6rem;

                .left_arrow,
                .right_arrow {
                    width: .15rem;
                    height: .28rem;
                }

                .up_arrow,
                .down_arrow {
                    width: .27rem;
                    height: .15rem;
                }

                // 左箭头
                .left_arrow_item {
                    width: .51rem;
                    height: .51rem;
                    border-radius: 50%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    position: absolute;
                    top: 50%;
                    transform: translateY(-50%);
                    left: 8%;
                }

                .left_arrow_item_act {
                    width: .51rem;
                    height: .51rem;
                    background: #24B383;
                    border-radius: 50%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    position: absolute;
                    top: 50%;
                    transform: translateY(-50%);
                    left: 8%;
                }

                .left_arrow_item::after {
                    content: '';
                    width: .15rem;
                    height: .28rem;
                    background: url('../assets/wx/left_arrow.png') center no-repeat;
                    background-size: .15rem .28rem;
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                }

                .left_arrow_item_act::after {
                    content: '';
                    width: .15rem;
                    height: .28rem;
                    background: url('../assets/wx/left_arrow_act.png') center no-repeat;
                    background-size: .15rem .28rem;
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                }

                // 右箭头
                .right_arrow_item {
                    width: .51rem;
                    height: .51rem;
                    border-radius: 50%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    position: absolute;
                    top: 50%;
                    transform: translateY(-50%);
                    right: 8%;
                }

                .right_arrow_item_act {
                    width: .51rem;
                    height: .51rem;
                    background: #24B383;
                    border-radius: 50%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    position: absolute;
                    top: 50%;
                    transform: translateY(-50%);
                    right: 8%;
                }

                .right_arrow_item::after {
                    content: '';
                    width: .15rem;
                    height: .28rem;
                    background: url('../assets/wx/right_arrow.png') center no-repeat;
                    background-size: .15rem .28rem;
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                }

                .right_arrow_item_act::after {
                    content: '';
                    width: .15rem;
                    height: .28rem;
                    background: url('../assets/wx/right_arrow_act.png') center no-repeat;
                    background-size: .15rem .28rem;
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                }

                // 上箭头
                .up_arrow_item {
                    width: .51rem;
                    height: .51rem;
                    border-radius: 50%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    position: absolute;
                    top: 8%;
                    left: 50%;
                    transform: translateX(-50%);
                }

                .up_arrow_item_act {
                    width: .51rem;
                    height: .51rem;
                    background: #24B383;
                    border-radius: 50%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    position: absolute;
                    top: 8%;
                    left: 50%;
                    transform: translateX(-50%);
                }

                .up_arrow_item::after {
                    content: '';
                    width: .27rem;
                    height: .15rem;
                    background: url('../assets/wx/up_arrow.png') center no-repeat;
                    background-size: .27rem .15rem;
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                }

                .up_arrow_item_act::after {
                    content: '';
                    width: .27rem;
                    height: .15rem;
                    background: url('../assets/wx/up_arrow_act.png') center no-repeat;
                    background-size: .27rem .15rem;
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                }

                // 下箭头
                .down_arrow_item {
                    width: .51rem;
                    height: .51rem;
                    border-radius: 50%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    position: absolute;
                    bottom: 8%;
                    left: 50%;
                    transform: translateX(-50%);
                }

                .down_arrow_item_act {
                    width: .51rem;
                    height: .51rem;
                    background: #24B383;
                    border-radius: 50%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    position: absolute;
                    bottom: 8%;
                    left: 50%;
                    transform: translateX(-50%);
                }

                .down_arrow_item::after {
                    content: '';
                    width: .27rem;
                    height: .15rem;
                    background: url('../assets/wx/down_arrow.png') center no-repeat;
                    background-size: .27rem .15rem;
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                }

                .down_arrow_item_act::after {
                    content: '';
                    width: .27rem;
                    height: .15rem;
                    background: url('../assets/wx/down_arrow_act.png') center no-repeat;
                    background-size: .27rem .15rem;
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                }

                >img {
                    width: 100%;
                    height: 100%;
                }
            }

            .right {
                box-sizing: border-box;
                padding-top: .1rem;
                display: flex;
                flex-direction: column;
                justify-content: center;

                .right_item {
                    width: 2.4rem;
                    height: .8rem;
                    background: #EFFAF6;
                    border: .02rem solid rgba(36, 179, 131, 0.35);
                    border-radius: .4rem;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    box-sizing: border-box;
                    padding: .07rem;
                    margin-bottom: .4rem;

                    .add {
                        width: .66rem;
                        height: .66rem;
                        background: #EFFAF6;
                        border-radius: 50%;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        position: relative;
                    }

                    .add_act {
                        width: .66rem;
                        height: .66rem;
                        background: #24B383;
                        border-radius: 50%;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        position: relative;
                    }

                    .add::after {
                        content: '';
                        width: .38rem;
                        height: .38rem;
                        background: url('../assets/wx/add.png') center no-repeat;
                        background-size: .38rem .38rem;
                        position: absolute;
                        top: 50%;
                        left: 50%;
                        transform: translate(-50%, -50%);
                    }

                    .add_act::after {
                        content: '';
                        width: .38rem;
                        height: .38rem;
                        background: url('../assets/wx/add_act.png') center no-repeat;
                        background-size: .38rem .38rem;
                        position: absolute;
                        top: 50%;
                        left: 50%;
                        transform: translate(-50%, -50%);
                    }

                    .focus {
                        font-size: .3rem;
                        font-family: PingFang SC;
                        font-weight: bold;
                        color: #24B383;
                    }

                    .subtract {
                        width: .66rem;
                        height: .66rem;
                        background: #EFFAF6;
                        border: .02rem solid rgba(36, 179, 131, 0.35);
                        border-radius: 50%;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        position: relative;
                    }

                    .subtract_act {
                        width: .66rem;
                        height: .66rem;
                        background: #24B383;
                        border: .02rem solid rgba(36, 179, 131, 0.35);
                        border-radius: 50%;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        position: relative;
                    }

                    .subtract::after {
                        content: '';
                        width: .38rem;
                        height: .08rem;
                        background: url('../assets/wx/subtract.png') center no-repeat;
                        background-size: .38rem .08rem;
                        position: absolute;
                        top: 50%;
                        left: 50%;
                        transform: translate(-50%, -50%);
                    }

                    .subtract_act::after {
                        content: '';
                        width: .38rem;
                        height: .08rem;
                        background: url('../assets/wx/subtract_act.png') center no-repeat;
                        background-size: .38rem .08rem;
                        position: absolute;
                        top: 50%;
                        left: 50%;
                        transform: translate(-50%, -50%);
                    }
                }
            }
        }
    }
}
</style>
