<template>
    <div class="main" ref="mainBox">
        <table border="1">
            <tr>
                <td colspan="3">宗地代码</td>
                <td colspan="4">
                    <el-input v-model="zddm " disabled></el-input>
                </td>
            </tr>
            <tr>
                <td colspan="3">建筑物区分所有权业主共有部分权利人</td>
                <td colspan="4">
                    <el-input v-model="Data.qlr" disabled></el-input>
                </td>
            </tr>
        </table>
        <table border="1">
            <tr>
                <th>
                    <el-button
                            type="primary"
                            class="changeBtn inAdd addMinus"
                            @click="addRow"
                            :disabled="isDisabled"
                    >+
                    </el-button
                    >
                </th>
                <th>建(构)筑物编号</th>
                <th>建(构)筑物数量</th>
                <th>建(构)筑物面积(㎡)</th>
                <th>占地面积(㎡)</th>
                <th>分摊土地面积(㎡)</th>
                <th>附记</th>
            </tr>
            <tr v-for="(item,i) in Data.list" :key="i">
                <td>
                    <el-button
                            type="primary"
                            class="changeBtn inMinus addMinus"
                            @click="delRow(i)"
                            :disabled="isDisabled"
                    >-
                    </el-button
                    >
                </td>
                <td>
                    <el-input v-model="item.jgzwbh" placeholder="请输入建(构)筑物编号" maxlength="10" :disabled="isDisabled"></el-input>
                </td>
                <td>
                    <el-input v-model="item.jgzsl" oninput="value = (value.match(/^\d{0,9}/g)) || null" :disabled="isDisabled"
                              placeholder="请输入建(构)筑物数量"></el-input>
                </td>
                <td>
                    <el-input v-model="item.jgzmj" oninput="value = (value.match(/^\d{0,9}(\.?\d{0,3})/g)[0]) || null" :disabled="isDisabled"
                              placeholder="请输入建(构)筑物面积(㎡)"></el-input>
                </td>
                <td>
                    <el-input v-model="item.zdmj" oninput="value = (value.match(/^\d{0,9}(\.?\d{0,3})/g)[0]) || null" :disabled="isDisabled"
                              placeholder="请输入占地面积(㎡)"></el-input>
                </td>
                <td>
                    <el-input v-model="item.fttdmj" oninput="value = (value.match(/^\d{0,9}(\.?\d{0,3})/g)[0]) || null" :disabled="isDisabled"
                              placeholder="请输入分摊土地面积(㎡)"></el-input>
                </td>
                <td>
                    <el-input v-model="item.fj" placeholder="请输入附记" :disabled="isDisabled"></el-input>
                </td>
            </tr>
        </table>
        <div class="header-button" :style="{width:mainBoxWidth+'px'}">
            <el-button type="primary" class="saveBtn" @click="save" :disabled="isDisabled">保存</el-button>
        </div>
    </div>
</template>

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

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

        methods: {
            getData(id) {
                queryYzgy(id).then(res => {
                    if (res.result != null) {
                        this.Data = res.result
                    }
                })
            },
            save() {
                console.log(this.Data);
                if (this.Data.list.length === 0) {
                    Message.info("至少填写一条建筑物信息")
                    return
                }
                saveYzgy(this.Data).then(res => {
                    if (res.success) {
                        Message.success("新增成功")
                        this.getData(this.$store.state.zrzbsm)
                    } else {
                        Message.error(res.message)
                    }
                })
            },
            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(this.$refs.mainBox.clientWidth,"this.$refs.mainBox.clientWidth")
            this.Data.glbsm = this.$store.state.zrzbsm
            this.zddm = this.$store.state.zddm
            this.$nextTick(() => {
                this.mainBoxWidth = this.$refs.mainBox.clientWidth;
            })
        },
        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: 100%;
    }

    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;
    }

    .header-button {
        z-index: 3;
        height: 50px;
        position: fixed;
        bottom: 0;
        right: 0;
        text-align: center;
        background-color: #ffffff;
        .saveBtn {
            background-color: #00CACD;
            border-color: #00CACD;
            padding: 10px 30px;
            margin-top: 8px;
        }
        .saveBtn:hover {
            background-color: rgba(0, 202, 205, .8);
            border-color: rgba(0, 202, 205, .8);
        }
    }
</style>