<template>
    <div>
        <el-dialog
                title="新增"
                :visible.sync="isVisible"
                width="50%"
                @close="close"
                :modal-append-to-body="false"
                center>
            <div>
                <table border="1">
                    <tr>
                        <td rowspan="6">预测</td>
                        <td>建筑面积(㎡)</td>
                        <td colspan="2"><input type="text" class="inputtitle"/></td>
                        <td rowspan="6">实测</td>
                        <td>建筑面积(㎡)</td>
                        <td><input type="text" class="inputtitle"/></td>
                    </tr>
                    <tr>
                        <td>套内建筑面积(㎡)</td>
                        <td colspan="2"><input type="text" class="inputtitle"/></td>
                        <td>套内建筑面积(㎡)</td>
                        <td><input type="text" class="inputtitle"/></td>
                    </tr>
                    <tr>
                        <td>分摊建筑面积(㎡)</td>
                        <td colspan="2"><input type="text" class="inputtitle"/></td>
                        <td>分摊建筑面积(㎡)</td>
                        <td><input type="text" class="inputtitle"/></td>
                    </tr>
                    <tr>
                        <td>地下部分建筑面积(㎡)</td>
                        <td colspan="2"><input type="text" class="inputtitle"/></td>
                        <td>地下部分建筑面积(㎡)</td>
                        <td><input type="text" class="inputtitle"/></td>
                    </tr>
                    <tr>
                        <td>其他建筑面积(㎡)</td>
                        <td colspan="2"><input type="text" class="inputtitle"/></td>
                        <td>其他建筑面积(㎡)</td>
                        <td><input type="text" class="inputtitle"/></td>
                    </tr>
                    <tr>
                        <td>分摊系数</td>
                        <td colspan="2"><input type="text" class="inputtitle"/></td>
                        <td>分摊系数</td>
                        <td><input type="text" class="inputtitle"/></td>
                    </tr>
                    <tr>
                        <td colspan="2">户型</td>
                        <td colspan="2">
                            <el-select>
                                <el-option
                                        v-for="i in hx"
                                        :key="i.key"
                                        :label="i.label"
                                        :value="i.value"
                                ></el-option>
                            </el-select>
                        </td>
                        <td colspan="2">户型结构</td>
                        <td>
                            <el-select>
                                <el-option
                                        v-for="i in hx"
                                        :key="i.key"
                                        :label="i.label"
                                        :value="i.value"
                                ></el-option>
                            </el-select>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">共有土地面积(㎡)</td>
                        <td colspan="2"><input type="text" class="inputtitle"/></td>
                        <td colspan="2">分摊土地面积(㎡)</td>
                        <td><input type="text" class="inputtitle"/></td>
                    </tr>
                    <tr>
                        <td colspan="2">独有土地面积(㎡)</td>
                        <td colspan="2"><input type="text" class="inputtitle"/></td>
                        <td colspan="2">房屋类型</td>
                        <td>
                            <el-select>
                                <el-option
                                        v-for="i in hx"
                                        :key="i.key"
                                        :label="i.label"
                                        :value="i.value"
                                ></el-option>
                            </el-select>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">产别</td>
                        <td colspan="2">
                            <el-select>
                                <el-option
                                        v-for="i in hx"
                                        :key="i.key"
                                        :label="i.label"
                                        :value="i.value"
                                ></el-option>
                            </el-select>
                        </td>
                        <td colspan="2">产权来源</td>
                        <td>
                            <input type="text" class="inputtitle"/>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">房屋性质</td>
                        <td colspan="2">
                            <el-select>
                                <el-option
                                        v-for="i in hx"
                                        :key="i.key"
                                        :label="i.label"
                                        :value="i.value"
                                ></el-option>
                            </el-select>
                        </td>
                        <td colspan="2"></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td colspan="2">房屋结构</td>
                        <td colspan="5">
                            <el-select>
                                <el-option
                                        v-for="i in hx"
                                        :key="i.key"
                                        :label="i.label"
                                        :value="i.value"
                                ></el-option>
                            </el-select>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">房屋用途</td>
                        <td>规划用途</td>
                        <td><input type="text" class="inputtitle"/></td>
                        <td colspan="2">用途</td>
                        <td><input type="text" class="inputtitle"/></td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            权利性质
                        </td>
                        <td colspan="2">
                            <input type="text" class="inputtitle"/>
                        </td>
                        <td colspan="2">

                        </td>
                        <td></td>
                    </tr>
                    <tr>
                        <td colspan="2">东墙体归属</td>
                        <td colspan="2"><input type="text" class="inputtitle"/></td>
                        <td colspan="2">南墙体归属</td>
                        <td><input type="text" class="inputtitle"/></td>
                    </tr>
                    <tr>
                        <td colspan="2">西墙体归属</td>
                        <td colspan="2"><input type="text" class="inputtitle"/></td>
                        <td colspan="2">北墙体归属</td>
                        <td><input type="text" class="inputtitle"/></td>
                    </tr>
                </table>
            </div>
            <div class="shop">
                <el-button type="primary" @click="save">保存</el-button>
                <el-button type="primary" @click="result">重置</el-button>
                <el-button type="primary" @click="cancel">取消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: "plH",
        props: {
            bsms: {
                type: Array
            },
            plhVisible: {
                type: Boolean,
                default: false
            }
        },
        data() {
            return {
                isVisible: false,
                hx: [{
                    label: '一居室',
                    key: '1',
                    value: '一居室'
                }, {
                    label: '二居室',
                    key: '2',
                    value: '二居室'
                }, {
                    label: '三居室',
                    key: '3',
                    value: '三居室'
                }
                ]
            }
        },
        methods: {
            close: function () {
                this.$emit('close')
                this.isVisible = false
                this.result()
            },
            result: function () {

            },
            save: function () {

            },
            cancel: function () {
               this.close()
            }
        },
        mounted() {

        },
        watch: {
            plhVisible(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: 60px;
    }

    table:hover {
        cursor: pointer;
    }

    .el-select {
        width: 98%;
    }

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

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