<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="p-model"
            >
                <a-form
                    :form="form"
                    :wrapper-col="formItemAcrossLayout.wrapperCol"
                >
                    <a-form-item label="指令编码" :label-col="formItemVerticalLayout.labelCol">
                        <a-input
                            v-decorator="['code', { rules: [{ required: true, message: '请输入指令编码!' }] }]"
                        />
                    </a-form-item>
                    <a-form-item label="指令名称" :label-col="formItemVerticalLayout.labelCol">
                        <a-input
                            v-decorator="['name', { rules: [{ required: true, message: '请输入指令名称!' }] }]"
                        />
                    </a-form-item>
                </a-form>
            </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 },
};
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,
                        code: newVal.code,
                        ip: newVal.ip,
                        rtsp: newVal.rtsp
                    })
                })
            }else{

            }
        },
    },
    data() {
        return {
            isShow:false,
            type:'',
            title:'',
            closable:false,//取消model模态框右上角的X号
            formItemAcrossLayout,
            formItemVerticalLayout,
            confirmLoading: false,
            form: this.$form.createForm(this, { name: 'dynamic_rule' }),
            id:'',
            mdata:[],
        };
    },
    mounted() {
        console.log('mounted执行了')
    },
    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.addCameraIo({
                                data:values
                            }).then(res => {
                                if(res.code==200){
                                    this.$emit('sure',false)
                                    this.$message.success('新增IO指令成功');
                                }
                            }).catch(err => {

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

                            });
                        }
                    }
                });
                this.confirmLoading = false;
            }, 500);
        },
        handleCancel() {
            console.log('Clicked cancel button');
            console.log(this.title);
            this.$emit('close',false,{})
        },
    },
};
</script>
<style lang="scss" scoped>
    .p-model{
        .across-layout{
            display: flex;
        }
        .ant-divider-horizontal{
            margin:6px 0;
        }
    }
    .video-mask{
        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{

        }
        .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;
        }
    }
</style>
