<template>
    <div class="">
        <div class="main">
            <table border="1">
                <tr>
                    <td colspan="3">宗地代码</td>
                    <td colspan="4"><input type="text" class="formInput" v-model="zddm " disabled/></td>
                </tr>
                <tr>
                    <td colspan="3">建筑物区分所有权业主共有部分权利人</td>
                    <td colspan="4"><input type="text" class="formInput" v-model="Data.qlr" disabled/></td>
                </tr>
            </table>
            <table border="1">
                <tr>
                    <td @click="addRow">+</td>
                    <td>建(构)筑物编号</td>
                    <td>建(构)筑物数量</td>
                    <td>建(构)筑物面积(㎡)</td>
                    <td>占地面积(㎡)</td>
                    <td>分摊土地面积(㎡)</td>
                    <td>附记</td>
                </tr>
                <tr v-for="(item,i) in Data.list" :key="i">
                    <td @click="delRow(i)">-</td>
                    <td><input type="text" class="formInput" v-model="item.jgzwbh"/></td>
                    <td><input type="number" class="formInput" v-model="item.jgzsl" @keydown="oninput"/></td>
                    <td><input type="number" class="formInput" v-model.number="item.jgzmj" @keydown="oninput"/></td>
                    <td><input type="number" class="formInput" v-model.number="item.zdmj" @keydown="oninput"/></td>
                    <td><input type="number" class="formInput" v-model.number="item.fttdmj" @keydown="oninput"/></td>
                    <td><input type="text" class="formInput" v-model="item.fj"/></td>
                </tr>
                <!--   <tr>
                       <td>统计</td>
                       <td>{{sumTdsyqsyqmj}}</td>
                       <td>{{sumDydytdmj}}</td>
                       <td>{{sumFttdmj}}</td>
                       <td>{{sumFttdmj}}</td>
                       <td>{{sumFttdmj}}</td>
                       <td>{{sumFttdmj}}</td>
                   </tr>-->
            </table>
            <div class="pers">
                <el-button @click="save" type="primary">保存</el-button>
            </div>
        </div>
    </div>
</template>

<script>
    import {saveYzgy, queryYzgy} from './../../../api/zrz'
    import {Message} from 'element-ui'

    export default {
        name: "",
        data() {
            return {
                tdzl: '',       // 土地坐落 继承获取
                zdmj: '',       // 宗地面积 继承获取
                zddm: '',
                Data: {
                    glbsm: '',      // 宗地标识码
                    qlr: '业主共有', //权利人
                    list: [{
                        jgzwbh: '',  // 建(构)筑物编号
                        jgzsl: '',     // 建筑物数量
                        jgzmj: '',     // 建构筑物面积
                        zdmj: '',        //占地面积
                        fttdmj: '',      //分摊土地面积
                        fj: ''
                    }]
                }
            }
        },

        methods: {
            getData(id) {
                queryYzgy(id).then(res => {
                    console.log(res)
                    if (res.result != null) {
                        this.Data = res.result
                    }
                })
            },
            save() {
                console.log(this.Data);
                saveYzgy(this.Data).then(res => {
                    console.log(res)
                    if (res.success) {
                        Message.success("新增成功")
                        this.getData(this.$store.state.zrzbsm)
                    } else {
                        Message.error(res.message)
                    }
                })
            },
            oninput(e) {
                e.target.value = (e.target.value.match(/^\d*(\.?\d{0,2})/g)[0]) || null
            },
            addRow() {
                this.Data.list.push({
                    jgzwbh: '',  // 建(构)筑物编号
                    jgzsl: '',     // 建筑物数量
                    jgzmj: '',     // 建构筑物面积
                    zdmj: '',        //占地面积
                    fttdmj: '',      //分摊土地面积
                    fj: ''
                })
            },
            delRow(index) {
                this.Data.list.splice(index, 1)
            }
        },
        computed: {},
        created() {
            console.log("create init...")
        },
        mounted() {
            console.log("mounted init...")
            this.Data.glbsm = this.$store.state.zrzbsm
            this.zddm = this.$store.state.zddm
            this.getData(this.Data.glbsm)
        },
        watch: {
            "$store.state.zdbsm": function (bsm) {
                this.Data.glbsm = bsm
            },
            "$store.state.zddm": function (zddm) {
                this.zddm = zddm
            }
        }
    }
</script>
<style scoped lang="less">
    .main {
        box-sizing: border-box;
        padding: 18px;
        height: auto;
        width: 80%;
    }

    table {
        margin-top: 10px;
        background-color: #fff;
        font-size: 14px;
        width: 100%;
    }

    td {
        text-align: center;
        height: 36px;
        min-width: 50px;
    }

    table .formInput {
        margin: 0;
        height: 36px;
        outline: none;
        border: none;
        color: #606764;
        overflow: visible;
        text-align: center;
        cursor: text;
    }

    .pers {
        text-align: center;
        margin-top: 10px;
    }

    .pers .el-button {
        width: 150px;
    }

    .dzwsl {
        width: 200px;
    }
</style>