<template>
    <div class="camera-page">
        <div class="nav">双预防视频监控平台</div>    
        <div class="camera-container">
            <div class="video-container" v-for="(item,key) in items" :key="key" >
                <div class="name">{{ item.deviceName }}</div>
                <div :id="`video-`+item.deviceSerial"  style="width:100%;height:100%;" ></div>
                <div class="camera-show-handle" @click.stop="showModel(item)"></div>
            </div>
            <div id="camera-model" v-show="device.model">
                <div id="camera-box">
                    <div class="title">
                        <span>{{ device.deviceName }}</span>
                        <div class="close" @click="close">X</div>
                    </div>            
                    <div id="camera-deviceSerial"></div>            
                </div>
            </div>
        </div>    
    </div>
</template>
<script>
  import "@/assets/js/ezuikit.js"
  import cameras from '@/assets/js/cameras.js';
  console.log({
    cameras
  })
  import axios from 'axios';
    export default {
        data() {
            return {
                items:[],
                accessToken:undefined,
                device:{
                    model:false,
                    deviceName:""
                }
            }
        },
        mounted() {
           this.init() 
        },
        methods: {
            init(){
                axios({
                    url:'https://open.ys7.com/api/lapp/token/get',
                    method:"POST",
                    params:{
                        appKey:"edbf9171037f4908abdaa5c8215c0b06",
                        appSecret:"3c271fe7e2d0c13a03b2acc297ff146f"
                    }
                }).then((res)=>{
                    this.accessToken=res.data.data.accessToken
                    this.getData()
                })

            },
            showModel(item){
                var destroyPromise = item.player.destroy();
                destroyPromise.then((data) => {
                    console.log("销毁-promise 获取 数据", data)
                })  
                event.stopPropagation()
                let device={
                    ...item,
                    model:true,
                    id:"camera-deviceSerial",
                    width:900,
                    height:700
                }
                this.device=device
                this.render(device)
            },
            close(){
                this.device.player.destroy()
                this.device.player.stop()
                this.device={}   
                document.getElementById('camera-deviceSerial').innerHTML=""         
            },
            getData(){
                let items=cameras
                this.items=cameras
                for(let i=0;i<items.length;i++){
                    this.$nextTick(()=>{
                        this.render(items[i])
                    }) 
                }
            },
            render(item={}){
                let accessToken=this.accessToken;
                item.player =  new EZUIKit.EZUIKitPlayer({
                    id: item.id||`video-${item.deviceSerial}`,
                    autoplay: false,
                    url: `ezopen://open.ys7.com/${item.deviceSerial}/1.hd.live`,
                    accessToken: accessToken,
                    plugin: ['talk'],  
                    width: item.width||400,
                    height: item.height||300,
                    audio:0,
                    themeData:{
                        "autoFocus": 5,
                        "poster":item.deviceCover||"https://resource.eziot.com/group1/M00/00/89/CtwQEmLl8r-AZU7wAAETKlvgerU237.png",
                        "header": {
                            "color": "#1890ff",
                            "activeColor": "#FFFFFF",
                            "backgroundColor": "#000000",
                            "btnList": []
                        },
                        "footer": {
                            "color": "#FFFFFF",
                            "activeColor": "#1890FF",
                            "backgroundColor": "#00000021",
                            "btnList": [
                                {
                                    "iconId": "play",
                                    "part": "left",
                                    "defaultActive": 1,
                                    "memo": "播放",
                                    "isrender": 0
                                },
                                {
                                    "iconId": "sound",
                                    "part": "left",
                                    "defaultActive": 0,
                                    "memo": "声音按钮",
                                    "isrender": 1
                                },
                                {
                                    "iconId": "pantile",
                                    "part": "left",
                                    "defaultActive": 1,
                                    "memo": "云台控制按钮",
                                    "isrender": 1
                                },
                                {
                                    "iconId": "talk",
                                    "part": "left",
                                    "defaultActive": 0,
                                    "memo": "对讲按钮",
                                    "isrender": 1
                                }, 
                                {
                                    "iconId": "expend",
                                    "part": "right",
                                    "defaultActive": 0,
                                    "memo": "全局全屏按钮",
                                    "isrender": 1
                                }
                            ]
                        }
                    },
                    handleError: function(e) {
                        console.log('捕获到错误', e)
                    },
                    handleSuccess: function() {
                        console.log("播放成功回调函数，此处可执行播放成功后续动作");
                    },
                });
            }
        },
        destroyed() {
            this.items.map(item=>{
                if(item.player&&item.player.destroy){
                    var destroyPromise = item.player.destroy();
                    destroyPromise.then((data) => {
                        console.log("promise 获取 数据", data)
                    })                    
                }
            })
        },
    }
</script>
<style>
.camera-page{
    width: 100%;
    background-color: #042B5A;
}
.nav{
    height: 50px;
    background-image: url('../../assets/images/head.png');
    background-size: 100% 100%;
    text-align: center;
    color: #fff;
    line-height: 35px;
    font-size: 24px;
    font-weight: 600;
    letter-spacing: 8px;
}
.camera-container{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    padding: 10px;
    box-sizing: border-box;
}
.video-container{
    width:400px;
    height: 330px;
    box-sizing: border-box;
    margin: 10px;
    position: relative;
    overflow: hidden;
}
.video-container .name{
    color: #fff;
    padding: 3px 0;
    background-color: rgba(0,0,0,0.6);
    text-indent: 14px;
}
.video-container .camera-show-handle{
    position: absolute;
    width: 100%;
    height: 100%;
    bottom: 36px;
    left: 0;
    z-index: 999;
}
.footer-controls{
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 28px;
}
#camera-model{
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    background-color: rgba(0,0,0,0.6);
    z-index: 9999;
}
#camera-box{
    width: 900px;
    height: 750px;
    max-width: 100%;
    background-color: #fff;
    margin: 50px auto;
    border-radius: 10px;
    box-shadow: 1px 1px 6px rgba(0,0,0,0.6);
    overflow: hidden;
    padding: 10px;
}
#camera-box .title{
    widows: 100%;
    height: 50px;
    line-height: 50px;
    font-weight: 600;
    font-size: 20px;
    background-color: #fff;
    color: #333;
    border-bottom: 1px solid #eaeaea;
    position: relative;
    text-align: center;
}
#camera-box .title .close{
    width: 50px;
    height: 50px;
    color: #6e6c6c;
    text-align: center;
    line-height: 50px;
    position: absolute;
    right: 0;
    top: 0;
    cursor: pointer;
    font-size: 30px;
}
#camera-deviceSerial{
    width: 900px;
    height: 700px;  
    background-color: #3333;
}
</style>