<template>
    <div class="zdy-content">
        <el-form :model="form" :rules="rules" ref="form" label-width="110px" size="small">

            <table border="1" width="100%" cellspacing="0" cellpadding="0" class="hTable">
                <tbody>
                <tr height="30">
                    <td colspan="12" align="center"  ><font size="4">幢单元基本信息</font></td>
                </tr>
                <tr height="30">
                    <td  colspan="2" align="center"  >幢单元号</td>
                    <td  colspan="4"  >
                        <el-input v-model="form.zdyh"></el-input>
                    </td>
                    <td  colspan="2" align="center"  >幢单元名称</td>
                    <td  colspan="4"  >
                        <el-input v-model="form.zdymc"></el-input>
                    </td>
                </tr>
                <tr height="30">
                    <td  colspan="2" align="center"  >地上层数</td>
                    <td  colspan="4"  >
                        <el-input v-model="form.dscs"></el-input>
                    </td>
                    <td  colspan="2" align="center"  >地下层数</td>
                    <td  colspan="4"  >
                        <el-input v-model="form.dxcs"></el-input>
                    </td>
                </tr>
                <tr height="30">
                    <td  colspan="2" align="center"  >总层数</td>
                    <td  colspan="4"  >
                        <el-input v-model="form.zcs"></el-input>
                    </td>
                    <td  colspan="2" align="center"  >备注</td>
                    <td  colspan="4"  >
                        <el-input v-model="form.bz"></el-input>
                    </td>
                </tr>
                </tbody>
            </table>
        </el-form>
    </div>
</template>

<script>

    import {insertZdyInfo} from "@api/lpb"
    import {getQjZdyDetailById,updateQjZdy} from "@api/zdy"
    export default {
        name: "index",
        components: {},
        props: {
            zdybsm:{
                type: String,
                default: '',
            }
        },
        data(){
            return{
                form:{
                    zdyh:'',
                    zdymc:'',
                    dscs:'',
                    dxcs:'',
                    zcs:'',
                    bz:'',
                },
                rules:{
                    zdyh: [
                        { required: true, message: '幢单元号不能为空', trigger: 'blur' },
                        { min: 5, max: 50, message: '长度最少 5 个字符', trigger: 'blur' }
                    ],
                    zdymc: [
                        { required: true, message: '名称不能为空', trigger: 'change' }
                    ],
                    dscs: [
                        { required: true, message: '地上层数不能为空', trigger: 'blur' },
                        {type: 'number' , message: '必须是数字',trigger:'blur'}
                        ],
                    dxcs: [
                        { required: true, message: '地下层数不能为空', trigger: 'blur' },
                        {type: 'number' , message: '必须是数字'}
                    ],
                    zcs: [
                        { required: true, message: '名称不能为空', trigger: 'change' }
                    ]
                }
            }
        },
        methods:{
            //在自然幢节点上添加幢单元只需传zrzbsm，ljzbsm为'';在逻辑幢上添加幢单元时需要同时传入zrzbsm和ljzbsm
            submitForm(formName,zrzbsm,ljzbsm) {
                this.form.zrzbsm=zrzbsm;
                this.form.ljzbsm= zrzbsm == ljzbsm ? '':ljzbsm;
                //判断zdybsm是否为空，不为空的时候是编辑，为空的时候是新增
                if (this.zdybsm == '') {
                    this.$refs[formName].validate((valid) => {
                        if (valid) {
                            insertZdyInfo(this.form).then((res)=>{
                                if(res.code===200){
                                    this.$message.success("保存成功!")
                                    //更新树结构数据
                                    this.$parent.$parent.getLpbMenuTree(zrzbsm);
                                    //关闭弹框
                                    this.$parent.$parent.closeDaialog()
                                }
                                return true;
                            })
                        } else {
                            console.log('error submit!!');
                            return false;
                        }
                    });
                }else{
                    //编辑幢单元接口
                    updateQjZdy(this.form).then((res)=>{
                        if(res.code === 200){
                            this.$message.success("保存成功")
                        }
                    })
                }
            },
            getZdyInfo(bsm){
                //查询幢单元信息接口
                getQjZdyDetailById(bsm).then((res)=>{
                    if(res.code === 200){
                        this.form = res.result;
                    }
                })

            },
            reset(){
                this.form = {
                    zdyh:'',
                    zdymc:'',
                    dscs:'',
                    dxcs:'',
                    zcs:'',
                    bz:'',
                }
            }
        },
        watch:{
            zdybsm: {
                handler: function (item) {
                    if(item!='' && this.$parent.$parent.menuType == 'zdy'){
                        this.getZdyInfo(item)
                    }
                },
                immediate: true
            },
        }
    }
</script>

<style scoped lang="less">
    /deep/.el-input__inner{
        width: 100%;
        border:0;
    }

    table{
        background: #fff;
        table-layout: fixed;
    }

</style>