<template>
  <div class="main">
    <table border="1">
      <tr>
        <td colspan="2">土地坐落</td>
        <td colspan="3"><input type="number" class="formInput" v-model.number="mjftData.tdzl" disabled/></td>
      </tr>
      <tr>
        <td colspan="2">宗地代码</td>
        <td colspan="3"><input type="text" class="formInput" v-model="mjftData.zdbsm " disabled/></td>
      </tr>
      <tr>
        <td colspan="2">宗地面积(㎡)</td>
        <td><input type="number" class="formInput" v-model.number="mjftData.zjmj" disabled/></td>
        <td>定着物数量</td>
        <td>{{dzwdsl}}</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" :key="i">
        <td @click="delRow(i)">-</td>
        <td><input type="text" class="formInput" v-model="item.dzwdm"/></td>
        <td><input type="number" class="formInput" v-model.number="item.tdsyqsyqmj"/></td>
        <td><input type="number" class="formInput" v-model.number="item.dydytdmj"/></td>
        <td><input type="number" class="formInput" v-model.number="item.fttdmj"/></td>
      </tr>
      <tr>
        <td></td>
        <td>统计</td>
        <td>{{sumTdsyqsyqmj}}</td>
        <td>{{sumDydytdmj}}</td>
        <td>{{sumFttdmj}}</td>
      </tr>
    </table>
    <div class="pers">
      <el-button @click="save" type="primary">保存</el-button>
    </div>
  </div>
</template>

<script>
    import {savemjft} from '../../../api/basic'

    export default {
        name: "index",
        data() {
            return {
                mjftData: {
                    zdbsm: '123',      // 宗地标识码 继承获取
                    tdsyqsyqmjhj: '',// 土地所有权/使用权面积合计
                    fttdmjhj: '',   // 分摊土地面积合计
                    dzwdys: '',     // 表示同一宗地内所有的定着物单元数
                    dydytdmjhj: '', // 根据该宗地下共有/共用定着物量自动计算。 ,
                    bz: '',         // 备注
                    tdzl: '',       // 土地坐落 继承获取
                    zdmj: '',       // 宗地面积 继承获取
                    addQjZdftdzwRequestList: [
                        {
                            dydytdmj: '',  // 独有独用土地面积
                            dzwdm: '',     // 定着物代码
                            fttdmj: '',     // 分摊土地面积
                            gygyzdmjftbsm: '',// 共有公用面积分摊标识码 ,
                            tdsyqsyqmj: ''    // 土地所有权/使用权面积
                        }
                    ]
                }
            }
        },

        methods: {
            save() {
                console.log(this.mjftData)
                savemjft(this.mjftData).then(res => {
                    console.log(res)
                }).catch(error => {
                    console.log(error)
                })
            },
            addRow() {
                this.mjftData.addQjZdftdzwRequestList.push({
                    dydytdmj: '',
                    dzwdm: '',
                    fttdmj: '',
                    gygyzdmjftbsm: '',
                    tdsyqsyqmj: ''
                })
            },
            delRow(index) {
                this.mjftData.addQjZdftdzwRequestList.splice(index, 1)
            }
        },
        computed: {
            sumTdsyqsyqmj: function () {
                let self = this;
                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)
                }
                let num = isNaN(sum) ? '' : sum;
                self.mjftData.tdsyqsyqmjhj = num;
                return num;
            },
            sumDydytdmj: function () {
                let self = this;
                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)
                }
                let num = isNaN(sum) ? '' : sum;
                self.mjftData.dydytdmjhj = num;
                return num;
            },
            sumFttdmj: function () {
                let self = this;
                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)
                }
                let num = isNaN(sum) ? '' : sum;
                self.mjftData.fttdmjhj = num;
                return num;
            },
            dzwdsl: function () {
                let self = this
                let num = this.mjftData.addQjZdftdzwRequestList.length
                self.mjftData.dzwdys = num
                return num;
            }
        },
        created() {
            console.log("create init...")
        },
        mounted() {
            console.log("mounted init...")
        }
    }
</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;
  }

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

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

</style>