<template>
    <div>
        <el-dialog v-dialogDrag :close-on-click-modal="false"
                title="批量层"
                :visible.sync="isVisible"
                width="50%"
                @close="close"
                :modal-append-to-body="false"
                >
            <div>
                <table border="1">
                    <tr>
                        <td class="tdright">层建筑面积(㎡)</td>
                        <td>
                            <el-input  v-model="qlcData.cjzmj" oninput="value = (value.match(/^\d*(\.?\d{0,3})/g)[0]) || null" ></el-input>
                        </td>
                        <td class="tdright">
                            层套内建筑面积(㎡)
                        </td>
                        <td>
                            <el-input  v-model="qlcData.ctnjzmj" oninput="value = (value.match(/^\d*(\.?\d{0,3})/g)[0]) || null"  ></el-input>
                        </td>
                    </tr>
                    <tr>
                        <td class="tdright">层阳台面积(㎡)</td>
                        <td>
                            <el-input  v-model="qlcData.cytmj" class="" oninput="value = (value.match(/^\d*(\.?\d{0,3})/g)[0]) || null" ></el-input>
                        </td>
                        <td class="tdright">
                            层半墙面积(㎡)
                        </td>
                        <td>
                            <el-input  v-model="qlcData.cbqmj" class="" oninput="value = (value.match(/^\d*(\.?\d{0,3})/g)[0]) || null" ></el-input>
                        </td>
                    </tr>
                    <tr>
                        <td class="tdright">层共有建筑面积(㎡)</td>
                        <td>
                            <el-input  v-model="qlcData.cgyjzmj" class="" oninput="value = (value.match(/^\d*(\.?\d{0,3})/g)[0]) || null" ></el-input>
                        </td>
                        <td class="tdright">
                            层分摊建筑面积(㎡)
                        </td>
                        <td>
                            <el-input  v-model="qlcData.cftjzmj" class="" oninput="value = (value.match(/^\d*(\.?\d{0,3})/g)[0]) || null" placeholder="层分摊建筑面积(㎡)"></el-input>
                        </td>
                    </tr>
                    <tr>
                        <td class="tdright">层高(m)</td>
                        <td>
                            <el-input  v-model="qlcData.cg" class="" oninput="value = (value.match(/^\d*(\.?\d{0,3})/g)[0]) || null" placeholder="层高(m)"></el-input>
                        </td>
                        <td class="tdright">
                            水平投影面积(㎡)
                        </td>
                        <td>
                            <el-input v-model="qlcData.sptymj" class="" oninput="value = (value.match(/^\d*(\.?\d{0,3})/g)[0]) || null" placeholder="水平投影面积(㎡)"></el-input>
                        </td>
                    </tr>
                </table>
            </div>
            <div class="shop">
                <el-button type="primary" @click="save">保存</el-button>
                <el-button type="primary" @click="result" icon="el-icon-refresh">重置</el-button>
                <el-button type="primary" @click="cancel">取消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

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

    export default {
        name: "plC",
        data() {
            return {
                isVisible: false,
                qlcData: {
                    cbqmj: '',           // 层半墙面积
                    cftjzmj: '',         // 层分摊建筑面积
                    cg: '',              // 层高
                    cgyjzmj: '',         // 层共有建筑面积
                    cjzmj: '',           // 层建筑面积
                    ctnjzmj: '',         // 层套内建筑面积
                    cytmj: '',           // 层阳台面积
                    sptymj: ''           // 水平投影面积
                }
            }
        },
        props: {
            bsms: {
                type: Array,
            },
            plcVisible: {
                type: Boolean,
                default: function () {
                    return false
                }
            }
        },
        methods: {
            lodding:function(){
                this.$emit('lodding')
            },
            save: function () {
                this.qlcData['bsms'] = this.bsms
                updatePlc(this.qlcData).then(res => {
                    console.log(res)
                    if (res.success) {
                        Message.success("保存成功")
                        this.lodding()
                        this.close()
                    } else {
                        Message.error(res.message)
                    }
                })
            },
            close: function () {
                this.$emit('close')
                this.isVisible = false
                this.result()
            },
            cancel: function () {
                this.$emit('close')
                this.isVisible = false
            },
            result: function () {
                this.qlcData = {
                    cbqmj: '',           // 层半墙面积
                    cftjzmj: '',         // 层分摊建筑面积
                    cg: '',              // 层高
                    cgyjzmj: '',         // 层共有建筑面积
                    cjzmj: '',           // 层建筑面积
                    ctnjzmj: '',         // 层套内建筑面积
                    cytmj: '',           // 层阳台面积
                    sptymj: ''           // 水平投影面积
                }
            }
        },
        watch: {
            plcVisible(val) {
                this.isVisible = val
            }
        }
    }
</script>

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

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

    table:hover {
        cursor: pointer;
    }

    .inputtitle {
        line-height: 41px;
        width: 95%;
        border: none;
        height: 98%;
        outline: none;
    }


    .shop {
        margin-top: 20px;
        text-align: center;
    }
</style>