<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" class="tdright">幢单元号</td>
                        <td colspan="4">
                            <el-input v-model="form.zdyh"></el-input>
                        </td>
                        <td colspan="2" align="center" class="tdright"><i class="requisite">*</i>幢单元名称</td>
                        <td colspan="4">
                            <el-input v-model="form.zdymc" ref="zdymc"></el-input>
                        </td>
                    </tr>
                    <tr height="30">
                        <td colspan="2" align="center" class="tdright">地上层数</td>
                        <td colspan="4">
                            <el-input v-model="form.dscs"></el-input>
                        </td>
                        <td colspan="2" align="center" class="tdright">地下层数</td>
                        <td colspan="4">
                            <el-input v-model="form.dxcs"></el-input>
                        </td>
                    </tr>
                    <tr height="30">
                        <td colspan="2" align="center" class="tdright">总层数</td>
                        <td colspan="4">
                            <el-input v-model="form.zcs"></el-input>
                        </td>
                        <td colspan="2" align="center" class="tdright">备注</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;
            if (this.form.zdymc == '') {
                this.$message.warning("请完善表单后再继续操作");
                this.$refs.zdymc.$el.style.border = '1px solid red';
            } else {
                //判断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
        },
        "form.zdymc": {
            handler: function (item) {
                if (item != '') {
                    this.$refs.zdymc.$el.style.border = '';
                }
            },
            immediate: true
        },
    }
}
</script>

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

table {
    background: #fff;
    table-layout: fixed;
}
</style>