<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/less" lang="less" 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>