<template>
    <div v-if="isShow">
        <a-modal
            v-model="isShow"
            :title="title"
            :closable="closable"
            @ok="handleOk"
            @cancel="handleCancel"
            ok-text="确认"
            cancel-text="取消"
            class="p-model"
        >
            <a-form
                :form="form"
                :wrapper-col="formItemAcrossLayout.wrapperCol"
            >
                <div class="across-layout">
                    <a-form-item label="巷道名称" :label-col="formItemAcrossLayout.labelCol">
                        <a-input
                            v-decorator="['name', { rules: [{ required: true, message: '请输入巷道名称!' }] }]"
                        />
                    </a-form-item>
                    <a-form-item label="PLC-ID" :label-col="formItemAcrossLayout.labelCol">
                        <a-input
                            v-decorator="['plcId', { rules: [{ required: true, message: '请输入PLC-ID!' }] }]"
                        />
                    </a-form-item>
                </div>
                <a-divider></a-divider>

                <div class="leftType">
                    <h3>左货架</h3>
                    <a-form-item label="类型" :label-col="formItemVerticalLayout.labelCol">
                        <a-select
                            v-decorator="[
                               'leftType',
                               { rules: [{ required: true, message: '请选择类型!' }] },
                            ]"
                            placeholder="选择类型"
                            @change="handleSelectChangeLeft"
                        >
                            <a-select-option value="0">
                                单伸
                            </a-select-option>
                            <a-select-option value="1">
                                双伸
                            </a-select-option>
                        </a-select>
                    </a-form-item>
                    <div class="across-layout">
                        <a-form-item label="货架规格" :label-col="{ span:7}">
                            <a-input
                                v-decorator="['leftRow', { rules: [{ required: true, message: '请输入行数!' }] }]"
                                suffix="行"
                            />
                        </a-form-item>
                        <a-form-item label="" :wrapper-col="{span:20}">
                            <a-input
                                v-decorator="['leftColumn', { rules: [{ required: true, message: '请输入列数!' }] }]"
                                suffix="列"
                            />
                        </a-form-item>
                    </div>
                    <div class="across-layout" v-if="leftType =='0'">
                        <a-form-item label="货架号" :label-col="formItemAcrossLayout.labelCol">
                            <a-input
                                v-decorator="['leftShelveId', { rules: [{ required: true, message: '请输入货架号!' }] }]"
                            />
                        </a-form-item>
                    </div>
                    <div class="across-layout" v-if="leftType =='1'">
                        <a-form-item label="内货架号" :label-col="formItemAcrossLayout.labelCol">
                            <a-input
                                v-decorator="['leftInsideShelveId', { rules: [{ required: true, message: '请输入内货架号!' }] }]"
                            />
                        </a-form-item>
                        <a-form-item label="外货架号" :label-col="formItemAcrossLayout.labelCol">
                            <a-input
                                v-decorator="['leftOutsideShelveId', { rules: [{ required: true, message: '请输入外货架号!' }] }]"
                            />
                        </a-form-item>
                    </div>
                    <a-divider></a-divider>
                </div>

                <div class="leftType">
                    <h3>右货架</h3>
                    <a-form-item label="类型" :label-col="formItemVerticalLayout.labelCol">
                        <a-select
                            v-decorator="[
                               'rightType',
                               { rules: [{ required: true, message: '请选择类型!' }] },
                            ]"
                            placeholder="选择类型"
                            @change="handleSelectChangeRight"
                        >
                            <a-select-option value="0">
                                单伸
                            </a-select-option>
                            <a-select-option value="1">
                                双伸
                            </a-select-option>
                        </a-select>
                    </a-form-item>
                    <div class="across-layout">
                        <a-form-item label="货架规格" :label-col="{ span:7}">
                            <a-input
                                v-decorator="['rightRow', { rules: [{ required: true, message: '请输入行!' }] }]"
                                suffix="行"
                            />
                        </a-form-item>
                        <a-form-item label="" :wrapper-col="{span:20}">
                            <a-input
                                v-decorator="['rightColumn', { rules: [{ required: true, message: '请输入列!' }] }]"
                                suffix="列"
                            />
                        </a-form-item>
                    </div>
                    <div class="across-layout" v-if="rightType =='0'">
                        <a-form-item label="货架号" :label-col="formItemAcrossLayout.labelCol">
                            <a-input
                                v-decorator="['rightShelveId', { rules: [{ required: true, message: '请输入货架号!' }] }]"
                            />
                        </a-form-item>
                    </div>
                    <div class="across-layout" v-if="rightType =='1'">
                        <a-form-item label="内货架号" :label-col="formItemAcrossLayout.labelCol">
                            <a-input
                                v-decorator="['rightInsideShelveId', { rules: [{ required: true, message: '请输入内货架号!' }] }]"
                            />
                        </a-form-item>
                        <a-form-item label="外货架号" :label-col="formItemAcrossLayout.labelCol">
                            <a-input
                                v-decorator="['rightOutsideShelveId', { rules: [{ required: true, message: '请输入外货架号!' }] }]"
                            />
                        </a-form-item>
                    </div>
                    <a-divider></a-divider>
                </div>

                <a-form-item label="球机1" :label-col="formItemVerticalLayout.labelCol">
                    <a-select
                        v-decorator="[
                               'camera1Id',
                            ]"
                        placeholder="选择球机"
                    >
                        <a-select-option value="0">
                            单伸
                        </a-select-option>
                        <a-select-option value="1">
                            双伸
                        </a-select-option>
                    </a-select>
                </a-form-item>
                <a-form-item label="球机2" :label-col="formItemVerticalLayout.labelCol">
                    <a-select
                        v-decorator="[
                               'camera2Id',
                            ]"
                        placeholder="选择球机"
                    >
                        <a-select-option value="0">
                            单伸
                        </a-select-option>
                        <a-select-option value="1">
                            双伸
                        </a-select-option>
                    </a-select>
                </a-form-item>
            </a-form>
        </a-modal>
    </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', 'modelTitle', 'modelData'],
    watch: {
        //监听并接收父组件的visible并赋值给isShow（子组件接收父组件props传过来的值时不能起一样的类名，会报重复定义的错）
        visible: function(newVal){
            this.isShow = newVal;  //newVal即是visible
            // newVal && this.showConfirm(); //newVal存在的话执行showConfirm函数
        },
        modelTitle: function(newVal){
            this.title = newVal;
        },
        modelData: function(newVal){
            // console.log(newVal)
            if(newVal.id){
                this.mdata=newVal
                this.leftType=newVal.leftType
                this.rightType=newVal.rightType
                // console.log('触发了watch，重新赋值')
                this.$nextTick(()=>{   //this.$nextTick解决不能在表单渲染之前赋值的报错问题
                    this.form.setFieldsValue({  //setFieldsValue 表示对form表单重新设置值
                        name:newVal.name,
                        plcId:newVal.plcId,
                        leftType:newVal.leftType === null ? '' : newVal.leftType === 0 ? '单伸' : '双伸',
                        leftRow:newVal.leftRow,
                        leftColumn:newVal.leftColumn,
                        leftShelveId:newVal.leftShelveId,
                        leftInsideShelveId:newVal.leftInsideShelveId,
                        leftOutsideShelveId:newVal.leftOutsideShelveId,
                        rightType:newVal.rightType === null ? '' : newVal.rightType === 0 ? '单伸' : '双伸',
                        rightRow:newVal.rightRow,
                        rightColumn:newVal.rightColumn,
                        rightShelveId:newVal.rightShelveId,
                        rightInsideShelveId:newVal.rightInsideShelveId,
                        rightOutsideShelveId:newVal.rightOutsideShelveId,
                        camera1Id:newVal.camera1Id,
                        camera2Id:newVal.camera2Id
                    })
                })
            }

        },
    },
    data() {
        return {
            isShow:false,
            title:'',
            closable:false,//取消model模态框右上角的X号
            formItemAcrossLayout,
            formItemVerticalLayout,
            confirmLoading: false,
            form: this.$form.createForm(this, { name: 'dynamic_rule' }),
            leftType:'',
            rightType:'',
            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.title=='新增巷道'){
                            this.$api.httpApi.addStreet({
                                data: {
                                    values
                                }
                            }).then(res => {
                                if(res.code==200){
                                    this.$emit('sure',false)
                                    this.$message.success('新增巷道成功');
                                }
                            });
                        }else if(this.title=='编辑巷道'){
                            this.$api.httpApi.addStreet({
                                data: {
                                    values
                                }
                            }).then(res => {
                                if(res.code==200){
                                    this.$emit('sure',false)
                                    this.$message.success('编辑巷道成功');
                                }
                            });
                        }
                    }
                });
                this.confirmLoading = false;
            }, 500);
        },
        handleCancel() {
            console.log('Clicked cancel button');
            console.log(this.title);
            this.$emit('close',false,{})
        },

        handleSelectChangeLeft(value) {
            console.log(value);
            this.form.setFieldsValue({ //setFieldsValue 表示对form表单重新设置值
                leftInsideShelveId:'',
                leftOutsideShelveId:'',
                leftShelveId:''
            })
            this.leftType = value   //判断渲染左货架单伸或者双伸的时会用到，在这里赋值给data实例
        },
        handleSelectChangeRight(value) {
            this.form.setFieldsValue({ //setFieldsValue 表示对form表单重新设置值
                rightInsideShelveId:'',
                rightOutsideShelveId:'',
                rightShelveId:''
            })
            this.rightType = value  //判断渲染右货架单伸或者双伸的时会用到，在这里赋值给data实例
        },
    },
};
</script>
<style lang="scss" scoped>
    .p-model{
        .across-layout{
            display: flex;
        }
        .ant-divider-horizontal{
           margin:6px 0;
        }
    }
</style>
