<template>
     <div v-if="isShow">
         <template v-if="type=='add' || type=='edit'">
             <a-modal
                 v-model="isShow"
                 :title="[type =='add' ? '新增球机':'编辑球机']"
                 :closable="closable"
                 @ok="handleOk"
                 @cancel="handleCancel"
                 ok-text="确认"
                 cancel-text="取消"
                 class="add-edit-model"
             >
                 <a-form
                     :form="form"
                     :wrapper-col="formItemAcrossLayout.wrapperCol"
                 >
                     <a-form-item label="球机名称" :label-col="formItemVerticalLayout.labelCol">
                         <a-input
                             v-decorator="['name', { rules: [{ required: true, message: '请输入球机名称!' }] }]"
                         />
                     </a-form-item>
                     <a-form-item label="球机IP" :label-col="formItemVerticalLayout.labelCol">
                         <a-input
                             v-decorator="['ip', { rules: [{ required: true, message: '请输入球机ip!' }] }]"
                         />
                     </a-form-item>
                     <a-form-item label="视频流IP" :label-col="formItemVerticalLayout.labelCol">
                         <a-input
                             v-decorator="['rtcServer']"
                         />
                     </a-form-item>
                 </a-form>
             </a-modal>
         </template>
         <!-- <template v-else-if="type=='test'">
             <a-modal
                 v-model="isShow"
                 @cancel="handleCancel"
                 :footer="null"
                 :maskClosable="false"
                 width="1600px"
                 :bodyStyle="{padding:0,display:'flex'}"
                 :centered="true"
                 class="config-model"
             >
                <div class="test-model">
                    <video 
                    
                    width="80%"
                            height="80%"
                    :id="`camera${id}`" 
                    autoplay muted ></video>
                    
                    <div class="operation-list">
                        <div class="operation-item">
                            <img :src="zoomSubUrl" alt="" @mousedown="zoomDecStart"
                                @mouseup="zoomDecStop">
                            <span>变倍</span>
                            <img :src="zoomAddUrl" alt="" @mousedown="zoomAddStart"
                                @mouseup="zoomAddStop">
                        </div>
                        <div class="operation-item">
                            <img :src="focusSubUrl" alt="" @mousedown="focusDecStart" @mouseup="focusDecStop">
                            <span>变焦</span>
                            <img :src="focusAddUrl" alt="" @mousedown="focusAddStart" @mouseup="focusAddStop">
                        </div>
                        <div class="operation-item">
                            <img :src="irisSubUrl" alt="" @mousedown="irisDecStart" @mouseup="irisDecStop">
                            <span>光圈</span>
                            <img :src="irisAddUrl" alt="" @mousedown="irisAddStart" @mouseup="irisAddStop">
                        </div>
                    </div>
                    <div class="direction-list">
                        <div class="direction-item">
                            <img :src="leftUpUrl" alt="" @mousedown="leftUpStart" @mouseup="leftUpStop">
                            <img :src="upUrl" alt="" @mousedown="upStart" @mouseup="upStop">
                            <img :src="rightUpUrl" alt="" @mousedown="rightUpStart" @mouseup="rightUpStop">
                        </div>
                        <div class="direction-item">
                            <img :src="leftUrl" alt="" @mousedown="leftStart" @mouseup="leftStop">
                            <img :src="rightUrl" alt="" @mousedown="rightStart" @mouseup="rightStop">
                        </div>
                        <div class="direction-item">
                            <img :src="leftDownUrl" alt="" @mousedown="leftDownStart" @mouseup="leftDownStop">
                            <img :src="downUrl" alt="" @mousedown="downStart" @mouseup="downStop">
                            <img :src="rightDownUrl" alt="" @mousedown="rightDownStart" @mouseup="rightDownStop">
                        </div>
                    </div>
                </div>
             </a-modal>
         </template> -->

         <template v-else-if="type=='config'">
             <a-modal
                 v-model="isShow"
                 @cancel="handleCancel"
                 :footer="null"
                 :maskClosable="false"
                 width="1600px"
                 :bodyStyle="{padding:0,display:'flex'}"
                 :centered="true"
                 class="config-model"
             >
                
                 <video width="900"
                         height="600"
                :id="`config-camera${id}`" 
                autoplay muted ></video>
                 <div class="operation-list">
                     <div class="operation-item">
                         <img :src="zoomSubUrl" alt="" @mousedown="zoomDecStart"
                              @mouseup="zoomDecStop">
                         <span>变倍</span>
                         <img :src="zoomAddUrl" alt="" @mousedown="zoomAddStart"
                              @mouseup="zoomAddStop">
                     </div>
                     <div class="operation-item">
                         <img :src="focusSubUrl" alt="" @mousedown="focusDecStart"
                              @mouseup="focusDecStop">
                         <span>变焦</span>
                         <img :src="focusAddUrl" alt="" @mousedown="focusAddStart"
                              @mouseup="focusAddStop">
                     </div>
                     <div class="operation-item">
                         <img :src="irisSubUrl" alt="" @mousedown="irisDecStart" @mouseup="irisDecStop">
                         <span>光圈</span>
                         <img :src="irisAddUrl" alt="" @mousedown="irisAddStart" @mouseup="irisAddStop">
                     </div>
                 </div>
                 <div class="direction-list">
                     <div class="direction-item">
                         <img :src="leftUpUrl" alt="" @mousedown="leftUpStart" @mouseup="leftUpStop">
                         <img :src="upUrl" alt="" @mousedown="upStart" @mouseup="upStop">
                         <img :src="rightUpUrl" alt="" @mousedown="rightUpStart" @mouseup="rightUpStop">
                     </div>
                     <div class="direction-item">
                         <img :src="leftUrl" alt="" @mousedown="leftStart" @mouseup="leftStop">
                         <img :src="rightUrl" alt="" @mousedown="rightStart" @mouseup="rightStop">
                     </div>
                     <div class="direction-item">
                         <img :src="leftDownUrl" alt="" @mousedown="leftDownStart"
                              @mouseup="leftDownStop">
                         <img :src="downUrl" alt="" @mousedown="downStart" @mouseup="downStop">
                         <img :src="rightDownUrl" alt="" @mousedown="rightDownStart"
                              @mouseup="rightDownStop">
                     </div>
                 </div>
                 <div class="config-table">
                     <h2>球机配置</h2>
                     <a-table
                         :columns="columns"
                         :row-key="record => record.name"
                         :data-source="configData"
                         @change="getConfigIoList"
                         bordered
                         :pagination="false"
                         :scroll="{y:335}"
                     >
                     <span slot="name" slot-scope="text,record">
                         <a-button type="link" @click="toPtz(record)">{{text}}({{record.code}})</a-button>
                      </span>
                         <span slot="position" slot-scope="text, record">
                            <div v-if="text">
                               已写入
                               <a-button type="link" class="plc" @click="coverage(0,record)">
                                    覆盖
                               </a-button>
                            </div>
                            <a-button type="primary" class="plc" v-else @click="coverage(0,record)">
                                    写入
                            </a-button>

                      </span>
                         
                         
                     </a-table>
                 </div>
             </a-modal>
         </template>

     </div>
</template>
<script>
var formItemAcrossLayout = {  //formItemAcrossLayout当表单内item横向排列时用
    labelCol: { span: 8 },    //lable长度
    wrapperCol: { span: 14 },  //input长度
};
var formItemVerticalLayout = { //formItemVerticalLayout当表单内item纵向排列时用
    labelCol: { span: 4 },
    wrapperCol: { span: 8, offset: 4 },
};
const columns = [
    {
        title: 'PLC IO指令',
        dataIndex: 'name',
        scopedSlots: { customRender: 'name' }
    },
    {
        title: '配置',
        dataIndex: 'position',
        scopedSlots: { customRender: 'position' }
    }
];
import WebRtcPlayer from "../../../public/static/webrtcplayer"
export default {
    props:[ 'visible', 'modelType', 'modelData'],
    watch: {
        //监听并接收父组件的visible并赋值给isShow（子组件接收父组件props传过来的值时不能起一样的类名，会报重复定义的错）
        visible: function(newVal){
            this.isShow = newVal;  //newVal即是visible
            // newVal && this.showConfirm(); //newVal存在的话执行showConfirm函数
        },
        modelType: function(newVal){
            this.type = newVal;
        },
        modelData: function(newVal){
            // console.log(newVal)
            this.mdata=newVal
            console.log(this.type)
            if(newVal.id && this.type=='edit'){
                this.id = newVal.id
                // console.log('触发了watch，重新赋值')
                this.$nextTick(()=>{   //this.$nextTick解决不能在表单渲染之前赋值的报错问题
                    this.form.setFieldsValue({  //setFieldsValue 表示对form表单重新设置值
                        name:newVal.name,
                        ip:newVal.ip,
                        rtsp:newVal.rtsp,
                        rtcServer:newVal.rtcServer,
                        rtcServerPort:newVal.rtcServerPort
                    })
                })
            }else if (newVal.id && this.type=='config'){
                this.id = newVal.id
                this.mdata = newVal
                console.log(newVal)
            }

        },
    },
    data() {
        return {
            isShow:false,
            player:null,
            type:'',
            title:'',
            closable:false,//取消model模态框右上角的X号
            formItemAcrossLayout,
            formItemVerticalLayout,
            confirmLoading: false,
            form: this.$form.createForm(this, { name: 'dynamic_rule' }),
            id:'',
            mdata:[],
            //测试相关
            zoomSubUrl:require('@/assets/sub-icon.png'),
            zoomAddUrl:require('@/assets/add-icon.png'),
            focusSubUrl:require('@/assets/sub-icon.png'),
            focusAddUrl:require('@/assets/add-icon.png'),
            irisSubUrl:require('@/assets/sub-icon.png'),
            irisAddUrl:require('@/assets/add-icon.png'),
            leftUpUrl:require('@/assets/left-up-icon.png'),
            upUrl:require('@/assets/up-icon.png'),
            rightUpUrl:require('@/assets/right-up-icon.png'),
            leftUrl:require('@/assets/left-icon.png'),
            rightUrl:require('@/assets/right-icon.png'),
            leftDownUrl:require('@/assets/left-down-icon.png'),
            downUrl:require('@/assets/down-icon.png'),
            rightDownUrl:require('@/assets/right-down-icon.png'),
            columns,
            configData:[]
        };
    },
    mounted() {
        if (this.$route.query.modelType == 'test') {
            this.isShow = true
            this.id = this.$route.query.modelData.id
            this.type = this.$route.query.modelType
            this.mdata = this.$route.query.modelData
            this.$nextTick(() => {
                this.autoPlay(this.id)
            })
        } else if (this.$route.query.modelType == 'config') {
            
            this.isShow = true
            this.id = this.$route.query.modelData.id
            this.getConfigIoList()
            this.type = this.$route.query.modelType
            this.mdata = this.$route.query.modelData
            this.$nextTick(() => {
                this.autoPlay(this.id)
            })
            
        }
    },
    destroy(){
        if(this.player != null){
            this.player.destroy()
        }
        
    },
    methods: {
        handleOk() {
            this.confirmLoading = true;
            setTimeout(() => {
                this.form.validateFields((err, values) => {
                    console.log(values)
                    if (!err) {
                        console.log(this.title)
                        if(this.type=='add'){
                            this.$api.httpApi.addCamera({
                                data:values
                            }).then(res => {
                                if(res.code==200){
                                    this.$emit('sure',false)
                                    this.$message.success('新增球机成功');
                                }
                            }).catch(err => {

                            });
                        }else if(this.type=='edit'){
                            values.id = this.id
                            this.$api.httpApi.editCamera({
                                data:values
                            }).then(res => {
                                if(res.code==200){
                                    this.$emit('sure',false)
                                    this.$message.success('编辑球机成功');
                                }
                            }).catch(err => {

                            });
                        }
                    }
                });
                this.confirmLoading = false;
            }, 500);
        },

        handleCancel() {
            
            console.log('Clicked cancel button');
            this.$emit('close', false, {})
            if(this.type=='test') {
                this.$router.go(-1);
            }else if(this.type=='config') {
                this.$router.go(-1);
                this.player.destroy();
            }
            
        },
       
        autoPlay(id){
            let video = document.getElementById('config-camera'+id);
            if(video){
                let server = this.mdata.rtcServer+":"+this.mdata.rtcServerPort
                console.log("server:"+server)
                let player = new WebRtcPlayer(server,video,'camera'+id);
                console.log("okkkkkk")
                //player.load('camera'+id);
                this.player = player
            }
            
        },
        getConfigIoList(){
            this.$axios.post('/camera/'+this.id+'/io/list', {
                data: {
                }
            }).then(res => {
                console.log(res)
                if(res.code==200){
                    this.configData=res.data
                }
            }).catch(err => {

            });
        },
        
        coverage(type,data){
            
            this.$api.httpApi.writeInCameraIoptz({
                data: {
                    cameraId: this.id,
                    cameraIOId: data.id,
                    name: data.name,
                    code: data.code,
                    type: type
                }
            }).then(res => {
                
                this.getConfigIoList()
            }).catch(err => {

            });
        },
        toPtz(data){
            this.$api.httpApi.cameraIoToPtz({
                data: {
                    cameraId:this.id,
                    cameraIOId:data.id,
                    name:data.name,
                }
            }).then(res => {
                console.log(res)
            }).catch(err => {

            });
        },

        zoomDecStart(){
            console.log('变倍-按下')
            this.zoomSubUrl=require('@/assets/sub-active-icon.png')
            this.$axios.post('/camera/control/zoomDec/start/'+this.id, {
                data: {}
            }).then(res => {

            }).catch(err => {

            })
        },
        zoomDecStop(){
            console.log('变倍-抬起')
            this.zoomSubUrl=require('@/assets/sub-icon.png')
            this.$axios.post('/camera/control/zoomDec/stop/'+this.id, {
                data: {}
            }).then(res => {

            }).catch(err => {

            })
        },
        zoomAddStart(){
            console.log('变倍+按下')
            this.zoomAddUrl=require('@/assets/add-active-icon.png')
            this.$axios.post('/camera/control/zoomAdd/start/'+this.id, {
                data: {}
            }).then(res => {

            }).catch(err => {

            })
        },
        zoomAddStop(){
            console.log('变倍+抬起')
            this.zoomAddUrl=require('@/assets/add-icon.png')
            this.$axios.post('/camera/control/zoomAdd/stop/'+this.id, {
                data: {}
            }).then(res => {

            }).catch(err => {

            })
        },
        focusDecStart(){
            console.log('变焦-按下')
            this.focusSubUrl=require('@/assets/sub-active-icon.png')
            this.$axios.post('/camera/control/focusDec/start/'+this.id, {
                data: {}
            }).then(res => {

            }).catch(err => {

            })
        },
        focusDecStop(){
            console.log('变焦-抬起')
            this.focusSubUrl=require('@/assets/sub-icon.png')
            this.$axios.post('/camera/control/focusDec/stop/'+this.id, {
                data: {}
            }).then(res => {

            }).catch(err => {

            })
        },
        focusAddStart(){
            console.log('变焦+按下')
            this.focusAddUrl=require('@/assets/add-active-icon.png')
            this.$axios.post('/camera/control/focusAdd/start/'+this.id, {
                data: {}
            }).then(res => {

            }).catch(err => {

            })
        },
        focusAddStop(){
            console.log('变焦+抬起')
            this.focusAddUrl=require('@/assets/add-icon.png')
            this.$axios.post('/camera/control/focusAdd/stop/'+this.id, {
                data: {}
            }).then(res => {

            }).catch(err => {

            })
        },
        irisDecStart(){
            console.log('光圈-按下')
            this.irisSubUrl=require('@/assets/sub-active-icon.png')
            this.$axios.post('/camera/control/irisDec/start/'+this.id, {
                data: {}
            }).then(res => {

            }).catch(err => {

            })
        },
        irisDecStop(){
            console.log('光圈-抬起')
            this.irisSubUrl=require('@/assets/sub-icon.png')
            this.$axios.post('/camera/control/irisDec/stop/'+this.id, {
                data: {}
            }).then(res => {

            }).catch(err => {

            })
        },
        irisAddStart(){
            console.log('光圈+按下')
            this.irisAddUrl=require('@/assets/add-active-icon.png')
            this.$axios.post('/camera/control/irisAdd/start/'+this.id, {
                data: {}
            }).then(res => {

            }).catch(err => {

            })
        },
        irisAddStop(){
            console.log('光圈+抬起')
            this.irisAddUrl=require('@/assets/add-icon.png')
            this.$axios.post('/camera/control/irisAdd/stop/'+this.id, {
                data: {}
            }).then(res => {

            }).catch(err => {

            })
        },
        leftUpStart(){
            console.log('左上鼠标按下')
            this.leftUpUrl=require('@/assets/left-up-active-icon.png')
            this.$axios.post('/camera/control/leftUp/'+this.id, {
                data: {}
            }).then(res => {

            }).catch(err => {

            })
        },
        leftUpStop(){
            console.log('左上鼠标抬起')
            this.leftUpUrl=require('@/assets/left-up-icon.png')
            this.$axios.post('/camera/control/leftUp/stop/'+this.id, {
                data: {}
            }).then(res => {

            }).catch(err => {

            })
        },
        upStart(){
            console.log('上鼠标按下')
            this.upUrl=require('@/assets/up-active-icon.png')
            this.$axios.post('/camera/control/up/'+this.id, {
                data: {}
            }).then(res => {

            }).catch(err => {

            })
        },
        upStop(){
            console.log('上鼠标抬起')
            this.upUrl=require('@/assets/up-icon.png')
            this.$axios.post('/camera/control/up/stop/'+this.id, {
                data: {}
            }).then(res => {

            }).catch(err => {

            })
        },
        rightUpStart(){
            console.log('右上鼠标按下')
            this.rightUpUrl=require('@/assets/right-up-active-icon.png')
            this.$axios.post('/camera/control/rightUp/'+this.id, {
                data: {}
            }).then(res => {

            }).catch(err => {

            })
        },
        rightUpStop(){
            console.log('右上鼠标抬起')
            this.rightUpUrl=require('@/assets/right-up-icon.png')
            this.$axios.post('/camera/control/rightUp/stop/'+this.id, {
                data: {}
            }).then(res => {

            }).catch(err => {

            })
        },
        leftStart(){
            // console.log(this.id)
            console.log('左转鼠标按下')
            this.leftUrl=require('@/assets/left-active-icon.png')
            this.$axios.post('/camera/control/left/'+this.id, {
                data: {}
            }).then(res => {

            }).catch(err => {

            })
        },
        leftStop(){
            this.leftUrl=require('@/assets/left-icon.png')
            console.log('左转鼠标抬起')
            this.$axios.post('/camera/control/left/stop/'+this.id, {
                data: {}
            }).then(res => {

            }).catch(err => {

            })
        },
        rightStart(){
            console.log('右转鼠标按下')
            this.rightUrl=require('@/assets/right-active-icon.png')
            this.$axios.post('/camera/control/right/'+this.id, {
                data: {}
            }).then(res => {

            }).catch(err => {

            })
        },
        rightStop(){
            console.log('右转鼠标抬起')
            this.rightUrl=require('@/assets/right-icon.png')
            this.$axios.post('/camera/control/right/stop/'+this.id, {
                data: {}
            }).then(res => {

            }).catch(err => {

            })
        },
        leftDownStart(){
            console.log('左下鼠标按下')
            this.leftDownUrl=require('@/assets/left-down-active-icon.png')
            this.$axios.post('/camera/control/leftDown/'+this.id, {
                data: {}
            }).then(res => {

            }).catch(err => {

            })
        },
        leftDownStop(){
            console.log('左下鼠标抬起')
            this.leftDownUrl=require('@/assets/left-down-icon.png')
            this.$axios.post('/camera/control/leftDown/stop/'+this.id, {
                data: {}
            }).then(res => {

            }).catch(err => {

            })
        },
        downStart(){
            console.log('下鼠标按下')
            this.downUrl=require('@/assets/down-active-icon.png')
            this.$axios.post('/camera/control/down/'+this.id, {
                data: {}
            }).then(res => {

            }).catch(err => {

            })
        },
        downStop(){
            console.log('下鼠标抬起')
            this.downUrl=require('@/assets/down-icon.png')
            this.$axios.post('/camera/control/down/stop/'+this.id, {
                data: {}
            }).then(res => {

            }).catch(err => {

            })
        },
        rightDownStart(){
            console.log('右下鼠标按下')
            this.rightDownUrl=require('@/assets/right-down-active-icon.png')
            this.$axios.post('/camera/control/rightDown/'+this.id, {
                data: {}
            }).then(res => {

            }).catch(err => {

            })
        },
        rightDownStop(){
            console.log('右下鼠标抬起')
            this.rightDownUrl=require('@/assets/right-down-icon.png')
            this.$axios.post('/camera/control/rightDown/stop/'+this.id, {
                data: {}
            }).then(res => {

            }).catch(err => {

            })
        },
    },
};
</script>
<style lang="scss" scoped>
    .add-edit-model{
        .across-layout{
            display: flex;
        }
        .ant-divider-horizontal{
            margin:6px 0;
        }
    }
    .test-model{
        position:fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background-color:rgba(0,0,0,0.5);
        z-index:1000;
        display: flex;
        align-items: center;
        justify-content: center;
        #video-test {
            width: 100%;
            height: 100%;
        }
        .video-close{
            position: absolute;
            right: 20px;
            top: 20px;
            color: #ffffff;
            font-size: 24px;
            width: 32px;
            height: 32px;
            background: rgba(0,0,0,0.5);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            z-index: 10;
        }
        .operation-list{
            position: absolute;
            right: 200px;
            bottom: 20px;
            /*width: 150px;*/
            /*border: solid 1px blue;*/
            z-index: 10;
            .operation-item{
                img{
                    width: 42px;
                }
                span{
                    padding: 5px 10px;
                    background: rgba(0,0,0,0.5);
                    font-size: 18px;
                    color: #ffffff;
                }
            }
        }
        .direction-list{
            position: absolute;
            right: 30px;
            bottom: 20px;
            width: 150px;
            z-index: 10;
            /*border: solid 1px blue;*/
            .direction-item{
                display: flex;
                align-items: center;
                justify-content: space-between;
                img{
                    width: 42px;
                }
            }
        }
        img{
            cursor: pointer;
        }
    }
    .config-model{
        display: flex;
        align-items: center;
        justify-content: center;
        .operation-list{
            position: absolute;
            right: 1000px;
            bottom: 20px;
            /*width: 150px;*/
            /*border: solid 1px blue;*/
            z-index: 10;
            .operation-item{
                img{
                    width: 32px;
                }
                span{
                    padding: 3px 6px;
                    background: rgba(0,0,0,0.5);
                    font-size: 16px;
                    color: #ffffff;
                }
            }
        }
        .direction-list{
            position: absolute;
            right: 830px;
            bottom: 20px;
            width: 150px;
            z-index: 10;
            /*border: solid 1px blue;*/
            .direction-item{
                display: flex;
                align-items: center;
                justify-content: space-between;
                img{
                    width: 32px;
                }
            }
        }
        img{
            cursor: pointer;
        }
        .config-table {
            width: 800px;
            height: 600px;
            overflow: hidden;

            h2 {
                padding: 15px;
                font-size: 20px;
                background: #fafafa;
                margin: 0;
            }
        }
    }
    .vxgplayer{
        border: none;
        margin: 0;
        display: block;
    }
    .ant-btn{
        white-space: inherit;
        text-align: left;
    }
</style>
