<template>
    <div class="main">
        <table border="1">
            <tr>
                <td colspan="2">土地面积</td>
                <td colspan="3"><input type="text" class="formInput" v-model="mjftData.tdmj"/></td>
            </tr>
            <tr>
                <td colspan="2">宗地代码</td>
                <td colspan="3"><input type="text" class="formInput" v-model="mjftData.zdbsm "/></td>
            </tr>
            <tr>
                <td colspan="2">宗地面积(㎡)</td>
                <td><input type="text" class="formInput" v-model="mjftData.zjmj"/></td>
                <td>定着物数量</td>
                <td><input type="text" class="formInput" v-model="mjftData.dzwsl"/></td>
            </tr>
            <tr>
                <td colspan="2">备注</td>
                <td colspan="3"><input type="text" class="formInput" v-model="mjftData.bz"/></td>
            </tr>
        </table>
        <table border="1">
            <tr>
                <td @click="addRow">+</td>
                <td>定着物代码</td>
                <td>土地所有权/使用权面积(㎡)</td>
                <td>独有独用土地面积(㎡)</td>
                <td>分摊土地面积(㎡)</td>
            </tr>
            <tr v-for="(item,i) in mjftData.addQjZdftdzwRequestList">
                <td @click="delRow(i)">-</td>
                <td><input type="text" class="formInput" v-model="item.dzwdm"/></td>
                <td><input type="number" class="formInput" v-model="item.tdsyqsyqmj"/></td>
                <td><input type="text" class="formInput" v-model="item.dydytdmj"/></td>
                <td><input type="text" class="formInput" v-model="item.fttdmj"/></td>
            </tr>
            <tr>
                <td></td>
                <td>统计</td>
                <td>{{sumTdsyqsyqmj}}</td>
                <td>{{sumDydytdmj}}</td>
                <td>{{sumFttdmj}}</td>
            </tr>
        </table>
    </div>
</template>

<script>
    export default {
        name: "index",
        data() {
            return {
                mjftData: {
                    zdbsm: '',
                    tdsyqsyqmjhj: '',
                    fttdmjhj: '',
                    dzwdys: '',
                    dydytdmjhj: '',
                    bz: '',
                    tdmj: '',
                    zjmj: '',
                    dzwsl: '',
                    addQjZdftdzwRequestList: [
                        {
                            dydytdmj: '',
                            dzwdm: '',
                            fttdmj: '',
                            gygyzdmjftbsm: '',
                            tdsyqsyqmj: ''
                        }
                    ]
                }
            }
        },
        created: {},
        methods: {
            addRow() {
                this.mjftData.addQjZdftdzwRequestList.push({
                    dydytdmj: '',
                    dzwdm: '',
                    fttdmj: '',
                    gygyzdmjftbsm: '',
                    tdsyqsyqmj: ''
                })
            },
            delRow(index) {
                this.mjftData.addQjZdftdzwRequestList.splice(index, 1)
            }
        },
        computed: {
            sumTdsyqsyqmj: function () {
                let sum = 0;
                let data = this.mjftData.addQjZdftdzwRequestList;
                for (let i = 0; i < data.length; i++) {
                    if (isNaN(parseFloat(data[i].tdsyqsyqmj))) {
                        continue;
                    }
                    sum += parseFloat(data[i].tdsyqsyqmj)
                }
                return isNaN(sum) ? '' : sum;
            },
            sumDydytdmj: function () {
                let sum = 0;
                let data = this.mjftData.addQjZdftdzwRequestList;
                for (let i = 0; i < data.length; i++) {
                    if (isNaN(parseFloat(data[i].dydytdmj))) {
                        continue;
                    }
                    sum += parseFloat(data[i].dydytdmj)
                }
                return isNaN(sum) ? '' : sum;
            },
            sumFttdmj: function () {
                let sum = 0;
                let data = this.mjftData.addQjZdftdzwRequestList;
                for (let i = 0; i < data.length; i++) {
                    if (isNaN(parseFloat(data[i].fttdmj))) {
                        continue;
                    }
                    sum += parseFloat(data[i].fttdmj)
                }
                return isNaN(sum) ? '' : sum;
            }
        },
        mounted() {

        }
    }
</script>

<style scoped>
    .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;
    }

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


</style>