<template>
    <div class="formula realTime videoMonitoring" @mouseup="upEnd()">
        <div class="page-content new-data">
            <div class="table-title">
                <img src="../../assets/image/real-time.png" alt="" />
                {{ deviceTypeName }}—视频监控<span class="outline" v-if="deviceState == 0">(设备离线)</span>
            </div>
            <div class="flex-list realTime-bottom videoMonitoring-monitor">
                <div class="left-view" v-if="deviceName != 30">
                    <div ref="monitor" class="monitor" id="monitor">
                        <!-- <video ref="videoPlayer" class="video-js" id="video-js"></video> -->
                        <div ref="videoPlayer" class="video-js" id="video-js"></div>
                        <div class="video-control">
                            <div class="video-btn-big">
                                <div class="top" @mousedown="downStart(0)">
                                    <div class="arrow"></div>
                                </div>
                                <div class="bottom" @mousedown="downStart(1)">
                                    <div class="arrow"></div>
                                </div>
                                <div class="left" @mousedown="downStart(2)">
                                    <div class="arrow"></div>
                                </div>
                                <div class="right" @mousedown="downStart(3)">
                                    <div class="arrow"></div>
                                </div>
                            </div>
                            <div class="video-btn">
                                <div @mousedown="downStart(4)"><img src="../../assets/img/video-icon0.png" alt="">
                                    <div>左上 </div>
                                </div>
                                <div @mousedown="downStart(6)"><img src="../../assets/img/video-icon1.png" alt="">
                                    <div>右上 </div>
                                </div>
                                <div @mousedown="downStart(5)"><img src="../../assets/img/video-icon2.png" alt="">
                                    <div>左下 </div>
                                </div>
                                <div @mousedown="downStart(7)"><img src="../../assets/img/video-icon3.png" alt="">
                                    <div>右下 </div>
                                </div>
                                <div @mousedown="downStart(8)"><img src="../../assets/img/video-icon4.png" alt="">
                                    <div>放大+</div>
                                </div>
                                <div @mousedown="downStart(9)"><img src="../../assets/img/video-icon5.png" alt="">
                                    <div>缩小-</div>
                                </div>
                                <div @mousedown="downStart(10)"><img src="../../assets/img/video-icon6.png" alt="">
                                    <div>近焦距</div>
                                </div>
                                <div @mousedown="downStart(11)"><img src="../../assets/img/video-icon7.png" alt="">
                                    <div>远焦距</div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
                <div></div>
            </div>
        </div>
    </div>
</template>
<script>
import EZUIKit from 'ezuikit-js';
import videojs from 'video.js';
import video_zhCN from 'video.js/dist/lang/zh-CN.json'
import axios from 'axios';
export default {
    data() {
        return {
            deviceTypeName: '',
            deviceName: '',
            deviceState: 1,
            statusInterval: null,//status状态的Interval
            player: null,
            url: '',
            nowNum: -1,
        }
    },
    watch: {
        $route(newVal, oldVal) {
            const that = this;
            const store = this.$store.state
            this.indexs = this.$route.query.index ? this.$route.query.index : store.equipmentIndex;
            this.deviceTypeName = store.equipmentList[this.indexs - 1].deviceTypeName
            this.deviceName = store.equipmentList[this.indexs - 1].deviceName
            this.deviceState = store.equipmentList[this.indexs - 1].deviceState
            clearInterval(this.statusInterval) && this.statusInterval
            setTimeout(() => {

                if (this.player) {
                    this.player.stop()
                    that.player.destroy()
                    that.player = null
                }
                that.dataInit();


            }, 0);
        },
    },
    beforeDestroy() {
        const that = this;
        // 销毁播放器
        if (this.player) {
            // this.player.dispose();
            this.player.stop()
            this.player.destroy()
            this.player = null
        }
        clearInterval(this.statusInterval) && this.statusInterval
    },
    mounted() {
        const that = this;
        const store = this.$store.state
        this.indexs = this.$route.query.index ? this.$route.query.index : store.equipmentIndex;
        this.deviceTypeName = store.equipmentList[this.indexs - 1].deviceTypeName
        this.deviceName = store.equipmentList[this.indexs - 1].deviceName
        this.deviceState = store.equipmentList[this.indexs - 1].deviceState
        setTimeout(() => {
            that.dataInit();
        }, 0);
    },
    methods: {
        downStart(num) {
            const store = this.$store.state
            const that = this
            console.log('start');
            this.nowNum = num
            var nowDevice = store.equipmentList[this.indexs - 1]
            // var data = {
            //     accessToken: this.accesstoken,
            //     deviceSerial: nowDevice.cameraSerialNumber,
            //     channelNo: nowDevice.cameraChannelNumber,
            //     direction: num,
            //     speed: 1,
            // }
            // var header={
            //     'Content-Type': 'application/x-www-form-urlencoded',
            // }
            // axios.post('https://open.ys7.com/api/lapp/device/ptz/start',data,header)
            //     .then(response => {
            //         console.log(response.data);
            //     })
            //     .catch(error => {
            //         console.error(error);
            //     });
            this.api.cameraStart(nowDevice.cameraSerialNumber,nowDevice.cameraChannelNumber,num).then(res => {
                setTimeout(() => {
                    that.upEnd()
                }, 10000);
                })
        },
        upEnd() {
            const store = this.$store.state
            const that = this
            var num = this.nowNum
            var nowDevice = store.equipmentList[this.indexs - 1]
            console.log('end');
            // var data = {
            //     accessToken: this.accesstoken,
            //     deviceSerial: nowDevice.cameraSerialNumber,
            //     channelNo: nowDevice.cameraChannelNumber,
            //     direction: num,
            //     speed: 1,
            // }
            // var header={
            //     'Content-Type': 'application/x-www-form-urlencoded',
            // }
            // axios.post('https://open.ys7.com/api/lapp/device/ptz/stop',data,header)
            //     .then(response => {
            //         console.log(response.data);
            //     })
            //     .catch(error => {
            //         console.error(error);
            //     });
            if (num != -1) {
                this.api.cameraStop(nowDevice.cameraSerialNumber, nowDevice.cameraChannelNumber, num).then(res => {
                    this.nowNum=-1
                })
            }

        },
        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
            })
        },
        dataInit() {
            const store = this.$store.state
            var nowDevice = store.equipmentList[this.indexs - 1]
            var data2 = {
                cameraid: nowDevice.cameraSerialNumber,
                channelid: nowDevice.cameraChannelNumber
            }
            if (!this.player) {
                this.api.getGethls(data2).then(res => {
                    // console.log(res.data, 11);
                    if (res.data.code == 200) {
                        this.url = res.data.data.ezopen
                        this.accesstoken = res.data.data.accesstoken
                        this.createVideoNew(res.data.data.accesstoken)
                    }
                })
            }
        },
    },

}
</script>
<style lang="scss"></style>
  
  