<template>
    <div class="main" ref="mainBox">
        <table border="1">
            <tr>
                <td colspan="2">土地坐落</td>
                <td colspan="3"><input type="text" class="formInput" v-model="tdzl" disabled/></td>
            </tr>
            <tr>
                <td colspan="2">宗地代码</td>
                <td colspan="3"><input type="text" class="formInput" v-model="zddm " disabled/></td>
            </tr>
            <tr>
                <td colspan="2">宗地面积(㎡)</td>
                <td><input type="number" class="formInput" v-model.number="zdmj" disabled/></td>
                <td>定着物数量</td>
                <td class="dzwsl">{{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 class="cz"><el-button
									type="primary"
									class="changeBtn inAdd addMinus"
									@click="addRow"
									>+</el-button
								></td>
                <td class="dzwdm">定着物代码</td>
                <td class="syqmj">土地所有权/使用权面积(㎡)</td>
                <td class="dytdmj">独有独用土地面积(㎡)</td>
                <td class="fttjmj">分摊土地面积(㎡)</td>
            </tr>
            <tr v-for="(item,i) in mjftData.list" :key="i">
                <td class="cz">
                    <el-button
                        type="primary"
                        class="changeBtn inMinus addMinus"
                        @click="delRow(i)"
                        >-</el-button
                    >
                </td>
                <td class="dzwdm">
                    <el-input v-model="item.dzwdm"  placeholder="请输入定着物代码"
                              maxlength="9"
                    >
                    </el-input>
                </td>
                <td class="syqmj">
                    <el-input placeholder="请输入使用所有权面积" style="ime-mode:inactive"
                              oninput="value = (value.match(/^\d*(\.?\d{0,3})/g)[0]) || null"
                            v-model="item.tdsyqsyqmj"
                    ></el-input>
                </td>
                <td class="dytdmj">
                    <el-input v-model="item.dydytdmj" style="ime-mode:inactive" placeholder="请输入独有独用土地面积" oninput="value = (value.match(/^\d*(\.?\d{0,3})/g)[0]) || null"></el-input>
                </td>
                <td class="fttjmj">
                    <el-input v-model="item.fttdmj" style="ime-mode:inactive" placeholder="请输入分摊土地面积" oninput="value = (value.match(/^\d*(\.?\d{0,3})/g)[0]) || null"></el-input>
                </td>
            </tr>
            <tr>
                <td class="cz"></td>
                <td class="dzwdm">统计</td>
                <td class="syqmj">{{sumTdsyqsyqmj}}</td>
                <td class="dytdmj">{{sumDydytdmj}}</td>
                <td class="fttjmj">{{sumFttdmj}}</td>
            </tr>
        </table>
        <!-- <div class="pers">
            <el-button @click="save" type="primary">保存</el-button>
        </div> -->

        <div class="header-button" :style="{width:mainBoxWidth+'px'}">
            <el-button type="primary" class="saveBtn"  @click="save">保存</el-button>
        </div>
    </div>
</template>

<script>
    import {getMjftInfo, savemjft} from '@api/zd'
    import {Message} from 'element-ui'

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

        methods: {
            getData(bsm) {
                getMjftInfo(bsm).then(res => {
                    if (res.success) {
                        this.mjftData = res.result
                    }
                })
            },
            save() {
                if(this.mjftData.list.length === 0){
                    Message.info("请填写相关定着物或者面积信息")
                    return
                }
                for (let val  of this.mjftData.list) {
                    if (val.dzwdm == '') {
                        Message.error("定着物代码不能为空")
                        return
                    }
                }
                this.mjftData['zdbsm'] = this.$store.state.zdbsm
                savemjft(this.mjftData).then(res => {
                    if (res.success) {
                        Message.success("保存成功")
                        this.getData(this.mjftData.zdbsm)
                    } else {
                        Message.error(res.message)
                    }
                }).catch(error => {
                    console.log(error)
                })
            },
            addRow() {
                this.mjftData.list.push({
                    dydytdmj: '',
                    dzwdm: '',
                    fttdmj: '',
                    gygyzdmjftbsm: '',
                    tdsyqsyqmj: ''
                })
            },
            delRow(index) {
                this.mjftData.list.splice(index, 1)
            }
        },
        computed: {
            sumTdsyqsyqmj: function () {
                let self = this;
                let sum = 0;
                let data = this.mjftData.list;
                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.toFixed(3);
                self.mjftData.tdsyqsyqmjhj = num;
                return num;
            },
            sumDydytdmj: function () {
                let self = this;
                let sum = 0;
                let data = this.mjftData.list;
                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.toFixed(3);
                self.mjftData.dydytdmjhj = num;
                return num;
            },
            sumFttdmj: function () {
                let self = this;
                let sum = 0;
                let data = this.mjftData.list;
                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.toFixed(3);
                self.mjftData.fttdmjhj = num;
                return num;
            },
            dzwdsl: function () {
                let self = this
                let num = this.mjftData.list.length ? this.mjftData.list.length : 0
                self.mjftData.dzwdys = num
                return num;
            }
        },
        created() {
            console.log("create init...")
        },
        mounted() {
            this.mjftData.zdbsm = this.$store.state.zdbsm
            this.zdmj = this.$store.state.zdmj
            this.tdzl = this.$store.state.zdzl
            this.zddm = this.$store.state.zddm
            if (this.mjftData.zdbsm) {
                this.getData(this.mjftData.zdbsm)
            }
            this.$nextTick(() => {
                this.mainBoxWidth = this.$refs.mainBox.clientWidth;
            })
        },
        watch: {
            "$store.state.zdbsm": function (bsm) {
                this.mjftData.zdbsm = bsm
            },
            "$store.state.zdmj": function (zdmj) {
                this.zdmj = zdmj
            },
            "$store.state.zdzl": function (tdzl) {
                this.tdzl = tdzl
            },
            "$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%;
            cursor: pointer;
            .formInput {
                margin: 0;
                height: 36px;
                outline: none;
                border: none;
                color: #606764;
                overflow: visible;
                text-align: center;
                cursor: text;
            }
            td {
                text-align: center;
                height: 36px;
                min-width: 50px;
            }
        }
        .header-button {
            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);
            }
        }
    }
    .pers {
        text-align: center;
        margin-top: 10px;
    }

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

    .dzwsl {
        width: 200px;
    }

    .cz {
        width: 50px;
    }

    .dzwdm {
        width: 150px;
    }

    .syqmj {
        width: 150px;
    }

    .dytdmj {
        width: 150px;
    }

    .fttjmj {
        width: 150px;
    }

</style>