<template>
	<div class="video-box">
        <video id="videoPlayer" ref="videoPlayer" class="video-player" autoplay controls="controls"  @click="checkVideo(1)"/>
        <!-- <video id="videoPlayer" class="video-player" autoplay="autoplay" loop="loop"
          muted controls="controls"></video> -->
	</div>
</template>

<script>
    // import { videoConfig } from './js/video'
    import flvjs from 'flv.js'
    import CryptoJS from 'crypto-js';
    import $ from 'jquery';
    let _cf = {
        ver:'debug',
        q2http_url: 'http://112.31.70.193:1854/icvs/',
        websocket_url:'ws://112.31.70.193:9580/wss',
        // - 配置登录参数
        connParams : {
            // - 登录平台IP
            address : "112.31.70.193",
            port : "9988",
            // - 登录平台用户名
            user : "bns3",
            // - 登录平台密码
            password :"Bns@admin**",
            // - 登录平台企业ID
            epid : "system",
            // - 登录平台是否通过网闸模式
            bfix :1
        }
    }
    var loginToken='';
    var puId='';
	export default {
		name: "monitor",
		props: {
            
		},


		data() {
			return {
                // 视频播放实例
                videoPlayer: null,
                classStyle: 'ball-content',
			};
		},
        mounted() {
             this.connect()
        },
		methods: {
            checkVideo(index){
                console.log(index)
            },
            //加密
            videoEncrypt(word){
                var key = CryptoJS.enc.Utf8.parse("297796CCB81D2553");
                var srcs = CryptoJS.enc.Utf8.parse(word);
                var encrypted = CryptoJS.AES.encrypt(srcs, key, {mode:CryptoJS.mode.ECB,padding: CryptoJS.pad.Pkcs7});
                return encrypted.toString();
            },
            // 请求
            requestPost(router, params, callback) {
                $.ajax({
                    type: 'post',
                    url: _cf.q2http_url + router,
                    data: params,
                    traditional: true,
                    dataType: 'json',
                    async: false,
                    complete: function (rv) {
                        if (typeof callback == 'function') callback(rv)
                    }
                })
            },
            //连接
            connect() {
                console.log('connect')
                var allDataParams="address="+_cf.connParams.address+"&port="+_cf.connParams.port+
                "&user="+ _cf.connParams.user+"&password="+_cf.connParams.password+"&epid="+_cf.connParams.epid+"&fixaddr="+_cf.connParams.bfix;
                let params = {
                    "params":this.videoEncrypt(allDataParams)
                }
                // console.log(params)
                this.requestPost('login2', params, function (rv) {
                    let result = {
                        errcode: -1,
                        token: ''
                    }
                    let respJSON = JSON.parse(rv.responseText);
                    if (respJSON.hasOwnProperty('errcode')) {
                        result.errcode = respJSON.errcode;
                    }
                    if (respJSON.hasOwnProperty('token')) {
                        result.token = respJSON.token;
                        result.errcode = 0;
                        loginToken = result.token;//获取Token
                    }
                });

            },
            // 初始化视频监控
            initVideo(devId) {
                puId = devId;
                console.log(puId)
                console.log(loginToken)
                this.$nextTick(() => {
                    const videoElement = this.$refs.videoPlayer
                    const url = `${_cf.q2http_url}/stream.flv?puid=${puId}&idx=0&stream=0&token=${loginToken}`
                    try {
                    this.videoPlayer = flvjs.createPlayer({
                        type: 'flv',
                        url: url,
                        isLive: true,
                        hasAudio: false
                    })

                    this.videoPlayer.attachMediaElement(videoElement)
                    this.videoPlayer.load()

                    setTimeout(() => {
                        this.videoPlayer.play()
                    }, 200)
                    } catch (err) {
                    console.log(err)
                    }
                })
            },
            //缩放功能
            zoomcontrol(option) {
                console.log(puId)
                let params = {
                    puid: puId,
                    idx: "0"
                }
                switch (option) {
                    case "stop":
                        //停止缩放接口
                        this.requestPost('PTZ/C_PTZ_StopPictureZoom?token=' + loginToken, params, rv => {
                        })
                        break;
                    case "zoomin":
                        //放大图像接口
                        this.requestPost('PTZ/C_PTZ_ZoomInPicture?token=' + loginToken, params, rv => {
                        })
                        break;
                    default:
                        //缩小图像接口
                        this.requestPost('PTZ/C_PTZ_ZoomOutPicture?token=' + loginToken, params, rv => {
                        })
                        break;
                }
            },
            //远近焦点功能
            focuscontrol(option) {
                console.log(puId)
                let params = {
                    puid: puId,
                    idx: "0"
                }
                switch (option) {
                    case "near":
                        this.requestPost('PTZ/C_PTZ_MakeFocusNear?token=' + loginToken, params, rv => {
                            console.log(rv)
                        })
                        break;
                    case "faraway":
                        this.requestPost('PTZ/C_PTZ_MakeFocusFar?token=' + loginToken, params, rv => {
                            console.log(rv)
                        })
                        break;
                    default:
                        this.requestPost('PTZ/C_PTZ_StopFocusMove?token=' + loginToken, params, rv => {
                            console.log(rv)
                        })
                        break;
                }
            },
            aperture(option) {
                let camera = {
                    puid: puId,
                    idx: "0"
                };
                let xml = "";
                switch (option) {
                    case "augment":
                        xml = `<?xml version="1.0" encoding="UTF-8"?>
                                    <M Type="ComReq">
                                        <C Type="G" Prio="1" EPID="system" Lang="zh_CN">
                                            <Res Type="IV" Idx="${camera.idx}" OptID="C_PTZ_AugmentAperture" Stream="0"><Param></Param></Res>
                                        </C>
                                    </M>`;
                        this.requestPost(`RawRequest?dstType=201&dstID=${camera.puid}&token=${loginToken}`, {xml: xml}, rv => {
                            console.log(rv);
                        });
                        break;
                    case "minish":
                        xml = `<?xml version="1.0" encoding="UTF-8"?>
                                    <M Type="ComReq">
                                        <C Type="G" Prio="1" EPID="system" Lang="zh_CN">
                                            <Res Type="IV" Idx="${camera.idx}" OptID="C_PTZ_MinishAperture" Stream="0"><Param></Param></Res>
                                        </C>
                                    </M>`;
                        this.requestPost(`RawRequest?dstType=201&dstID=${camera.puid}&token=${loginToken}`, {xml: xml}, rv => {
                            console.log(rv)
                        });
                        break;
                    default:
                        xml = `<?xml version="1.0" encoding="UTF-8"?>
                                    <M Type="ComReq">
                                        <C Type="G" Prio="1" EPID="system" Lang="zh_CN">
                                            <Res Type="IV" Idx="${camera.idx}" OptID="C_PTZ_StopApertureZoom" Stream="0"><Param></Param></Res>
                                        </C>
                                    </M>`;
                        this.requestPost(`RawRequest?dstType=201&dstID=${camera.puid}&token=${loginToken}`, {xml: xml}, rv => {
                            console.log(rv);
                        });
                        break;
                }
            },
            //旋转平台功能
            async turncontrol(option) {
                let params = {
                    puid: puId,
                    idx: "0",
                    motion: option
                };
                this.requestPost('PTZ/C_PTZ_Turn?token=' + loginToken, params, (rv) => {  }); 
            },
            //控制
            control(key) {
                console.log(key)
                switch (key) {
                    case 0:
                        this.turncontrol('stop');
                        break;
                    case 1:
                        this.turncontrol('up');
                        break;
                    case 2:
                        this.turncontrol('down');
                        break;
                    case 3:
                        this.turncontrol('left');
                        break;
                    case 4:
                        this.turncontrol('right');
                        break;
                    case 5:
                        this.zoomcontrol('zoomin');
                        break;
                    case 6:
                        this.zoomcontrol('zoominout');
                        break;
                    case 7:
                        this.focuscontrol('near');
                        break;
                    case 8:
                        this.focuscontrol('faraway');
                        break;
                    case 9:
                        this.zoomcontrol('stop');
                        break;
                    case 10:
                        this.focuscontrol('stop');
                        break;
                    default:
                        break;
                }

            },
            // 销毁视频监控
            closeVideo() {
                if (this.videoPlayer) {
                    // this.videoPlayer.pause()
                    this.videoPlayer.unload()
                    this.videoPlayer.detachMediaElement()
                    this.videoPlayer.destroy()
                }
            },
                    
		}
	}
</script>

<style lang="scss">
    .video-box{
        width: 100%;
        height: 100%;
    }
	.video-player {
        width: 100%;
        height: 100%;
        pointer-events: none;
        object-fit: fill;
    }
</style>