<template>
    <div class="h content-form">
        <el-form ref="form" :model="form" label-width="160px">
            <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.ch"></el-input>
                        </td>
                        <td colspan="2" align="center" class="tdright">自然幢号</td>
                        <td colspan="4">
                            <el-input v-model="form.zrzh"></el-input>
                        </td>
                    </tr>
                    <tr height="30">
                        <td colspan="2" align="center" class="tdright">实际层</td>
                        <td colspan="4">
                            <el-input v-model="form.sjc"></el-input>
                        </td>
                        <td colspan="2" align="center" class="tdright">名义层</td>
                        <td colspan="4">
                            <el-input v-model="form.myc"></el-input>
                        </td>
                    </tr>


                    <tr height="30">
                        <td colspan="2" align="center" class="tdright">层建筑面积(㎡)</td>
                        <td colspan="4">
                            <el-input v-model="form.cjzmj"></el-input>
                        </td>
                        <td colspan="2" align="center" class="tdright">层套内建筑面积(㎡)</td>
                        <td colspan="4">
                            <el-input v-model="form.ctnjzmj"></el-input>
                        </td>
                    </tr>

                    <tr height="30">
                        <td colspan="2" align="center" class="tdright">层阳台面积(㎡)</td>
                        <td colspan="4">
                            <el-input v-model="form.cytmj"></el-input>
                        </td>
                        <td colspan="2" align="center" class="tdright">层半墙面积(㎡)</td>
                        <td colspan="4">
                            <el-input v-model="form.cbqmj"></el-input>
                        </td>
                    </tr>

                    <tr height="30">
                        <td colspan="2" align="center" class="tdright">层共有建筑面积(㎡)</td>
                        <td colspan="4">
                            <el-input v-model="form.cgyjzmj"></el-input>
                        </td>
                        <td colspan="2" align="center" class="tdright">层分摊建筑面积(㎡)</td>
                        <td colspan="4">
                            <el-input v-model="form.cftjzmj"></el-input>
                        </td>
                    </tr>

                    <tr height="30">
                        <td colspan="2" align="center" class="tdright">层高</td>
                        <td colspan="4">
                            <el-input v-model="form.cg"></el-input>
                        </td>
                        <td colspan="2" align="center" class="tdright">水平投影面积</td>
                        <td colspan="4">
                            <el-input v-model="form.sptymj"></el-input>
                        </td>
                    </tr>
                    <tr height="30">
                    </tr>

                </tbody>
            </table>
        </el-form>
    </div>

</template>

<script>
// import { getQjCDetailById, updateQjC } from "@api/c";
export default {
    name: 'c',
    components: {},
    props: {
        cbsm: {
            type: String,
            default: '',
        }
    },
    data () {
        return {
            form: {
                zrzbsm: '',
                ch: '',  //层号
                zrzh: '',  //自然幢号
                sjc: '',  //实际层
                myc: '',  //名义层
                cjzmj: '',  //层建筑面积
                ctnjzmj: '',  //层套内建筑面积
                cytmj: '',  //层阳台面积
                cbqmj: '',  //层半墙面积
                cgyjzmj: '',  //层共有建筑面积
                cftjzmj: '',  //层分摊建筑面积
                cg: '',  //层高
                sptymj: '',  //水平投影面积
            },
            value: '',
        }
    },
    methods: {
        onSave () {
            this.form.zrzbsm = this.$route.query.bsm;
            //编辑层信息接口调用 TODO
            // updateQjC(this.form).then((res) => {
            //     if (res.code === 200) {
            //         this.$message.success("保存成功")
            //     }
            // })
        },
        getCinfo (bsm) {
            this.reset();
            //获取层信息接口调用 TODO
            // getQjCDetailById(bsm).then((res) => {
            //     if (res.code === 200) {
            //         this.form = res.result;
            //         this.form.zrzh = this.$store.state.zrzh;
            //     }
            // })
        },
        reset () {
            this.form = {
                zrzbsm: '',
                ch: '',  //层号
                zrzh: '',  //自然幢号
                sjc: '',  //实际层
                myc: '',  //名义层
                cjzmj: '',  //层建筑面积
                ctnjzmj: '',  //层套内建筑面积
                cytmj: '',  //层阳台面积
                cbqmj: '',  //层半墙面积
                cgyjzmj: '',  //层共有建筑面积
                cftjzmj: '',  //层分摊建筑面积
                cg: '',  //层高
                sptymj: '',  //水平投影面积
            }
        }
    },
    mounted () {
        this.getCinfo(this.cbsm);
    },
    watch: {
        cbsm: {
            handler: function (item) {
                console.log(item, "item")
                console.log(this.$parent.$parent.menuType, "this.$parent.$parent.menuType")
                if (item != '' && this.$parent.$parent.menuType == 'c') {
                    this.getCinfo(item)
                }
            },
            immediate: true
        },
    }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.h {
    min-height: 200px;
    width: 100%;
    margin: 0 auto;

    /deep/.el-input__inner {
        width: 100%;
        border: 0;
    }

    /deep/textarea {
        width: 100%;
        border: 0;
    }


    .el-form-item {
        font-weight: bold;
        font-size: xx-large
    }

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

    td {
        //bgcolor:#F1F4FC;
        bgcolor: #fff;
        width: 8.33%
    }

    .el-select {
        display: block;
    }
}

table {
    font-size: 14px;
}

.hTable {
    margin-top: 10px;
}
</style>