<template>
    <div>
        <el-dialog :close-on-click-modal="false" title="批量户" :visible.sync="isVisible" width="72%" @close="close"
            :modal-append-to-body="false">
            <div>
                <table border="1">
                    <tr>
                        <td colspan="2" class="tdright">建筑面积(㎡)</td>
                        <td colspan="4"><input type="text" v-model="form.jzmj" class="inputtitle" /></td>
                        <td colspan="2" class="tdright">套内建筑面积(㎡)</td>
                        <td colspan="4"><input type="text" v-model="form.tnjzmj" class="inputtitle" /></td>
                    </tr>
                    <tr>
                        <td colspan="2" class="tdright">分摊建筑面积(㎡)</td>
                        <td colspan="4"><input type="text" v-model="form.ftjzmj" class="inputtitle" /></td>
                        <td colspan="2" class="tdright">地下部分建筑面积(㎡)</td>
                        <td colspan="4"><input type="text" v-model="form.dxbfjzmj" class="inputtitle" /></td>
                    </tr>
                    <tr>
                        <td colspan="2" class="tdright">其他建筑面积(㎡)</td>
                        <td colspan="4"><input type="text" v-model="form.qtjzmj" class="inputtitle" /></td>
                        <td colspan="2" class="tdright">分摊系数</td>
                        <td colspan="4"><input type="number" @blur="inputBlur($event)" ref="ftxs" v-model="form.ftxs"
                                class="inputtitle" /></td>
                    </tr>
                    <tr>
                        <td colspan="2" class="tdright">户型</td>
                        <td colspan="4">
                            <el-select class="selectTitle" v-model="form.hxbsm">
                                <el-option v-for="i in $store.state.hxList" :key="i.bsm" :label="i.mc" :value="i.bsm">
                                </el-option>
                            </el-select>
                        </td>
                        <td colspan="2" class="tdright">户型结构</td>
                        <td colspan="4">
                            <el-select class="selectTitle" v-model="form.hxjgbsm">
                                <el-option v-for="i in $store.state.hxjgList" :key="i.bsm" :label="i.mc" :value="i.bsm">
                                </el-option>
                            </el-select>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2" class="tdright">共有土地面积(㎡)</td>
                        <td colspan="4"><input type="text" class="inputtitle" v-model="form.gytdmj" /></td>
                        <td colspan="2" class="tdright">分摊土地面积(㎡)</td>
                        <td colspan="4"><input type="text" class="inputtitle" v-model="form.fttdmj" /></td>
                    </tr>
                    <tr>
                        <td colspan="2" class="tdright">独有土地面积(㎡)</td>
                        <td colspan="4"><input type="text" class="inputtitle" v-model="form.dytdmj" /></td>
                        <td colspan="2" class="tdright">房屋类型</td>
                        <td colspan="4">
                            <el-select class="selectTitle" v-model="form.fwlxbsm">
                                <el-option v-for="i in $store.state.fwlxList" :key="i.bsm" :label="i.mc" :value="i.bsm">
                                </el-option>
                            </el-select>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2" class="tdright">产别</td>
                        <td colspan="4">
                            <el-select class="selectTitle" v-model="form.fwcbbsm">
                                <el-option v-for="i in $store.state.cbOptions" :key="i.bsm" :label="i.mc"
                                    :value="i.bsm"></el-option>
                            </el-select>
                        </td>
                        <td colspan="2" class="tdright">产权来源</td>
                        <td colspan="4">
                            <el-select class="selectTitle" v-model="form.fwcqlybsm">
                                <el-option v-for="i in $store.state.cqlyOptions" :key="i.bsm" :label="i.mc"
                                    :value="i.bsm"></el-option>
                            </el-select>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2" class="tdright">房屋性质</td>
                        <td colspan="4">
                            <el-select class="selectTitle" v-model="form.fwxzbsm">
                                <el-option v-for="i in $store.state.fwxzOptions" :key="i.bsm" :label="i.mc"
                                    :value="i.bsm"></el-option>
                            </el-select>
                        </td>
                        <td colspan="2"></td>
                        <td colspan="4"></td>
                    </tr>
                    <tr>
                        <td colspan="2" class="tdright">东墙体归属</td>
                        <td colspan="4"><input type="text" class="inputtitle" v-model="form.dqtgs" /></td>
                        <td colspan="2" class="tdright">南墙体归属</td>
                        <td colspan="4"><input type="text" class="inputtitle" v-model="form.nqtgs" /></td>
                    </tr>
                    <tr>
                        <td colspan="2" class="tdright">西墙体归属</td>
                        <td colspan="4"><input type="text" class="inputtitle" v-model="form.xqtgs" /></td>
                        <td colspan="2" class="tdright">北墙体归属</td>
                        <td colspan="4"><input type="text" class="inputtitle" v-model="form.bqtgs" /></td>
                    </tr>

                    <tr height="30" v-for="(item1, index) in form.fwytList" :key="index">
                        <td v-if="index === 0" colspan="2" :rowspan="ytTitleRowspan" align="center" id="ytTitle"
                            class="tdright">
                            <i class="iconfont iconicon-test2" style="margin-right: 8px;color:#66b1ff;font-size:30px"
                                @click="addYtInfo"></i>
                            <span>房屋用途</span>
                        </td>

                        <td width="30" colspan="1" align="center" class="tdright">
                            <i class="iconfont iconicon-test" style="color:#FA6400;font-size:30px"
                                @click="deleteYtInfo(index)"></i>
                            规划用途
                        </td>
                        <td width="30" colspan="3" align="center">
                            <el-select-tree style="width:100%" v-if="show" :default-expand-all="defaultExpandAll"
                                :multiple="multiple" :placeholder="placeholder" :disabled="disabled"
                                :data="$store.state.fwytList" :props="treeProps" :check-strictly="checkStrictly"
                                :clearable="clearable" v-model="item1.fwytzdbsm"></el-select-tree>
                        </td>
                        <td width="30" colspan="2" align="center" class="tdright">用途</td>
                        <td width="30" colspan="4" align="center">
                            <el-select-tree style="width:100%" v-if="show" :default-expand-all="defaultExpandAll"
                                :multiple="multiple" :placeholder="placeholder" :disabled="disabled"
                                :data="$store.state.fwytList" :props="treeProps" :check-strictly="checkStrictly"
                                :clearable="clearable" v-model="item1.fwsjytbsm"></el-select-tree>
                        </td>
                    </tr>

                    <tr height="30" v-for="(item1, index) in form.fwjgList" :key="'jg' + index">
                        <td colspan="2" v-if="index === 0" :rowspan="fwjgTitleRowspan" align="center" class="tdright">
                            <i class="iconfont iconicon-test2" style="margin-right: 8px;color:#66b1ff;font-size:30px"
                                @click="addFwjgInfo"></i>
                            <span>房屋结构</span>
                        </td>
                        <td colspan="1" align="center">
                            <i class="iconfont iconicon-test" style="margin-right: 8px;color:#FA6400;font-size:30px"
                                @click="deleteFwjgInfo(index)"></i>
                            <span>房屋结构</span>
                        </td>
                        <td colspan="9">
                            <el-select style="width:100%" v-model="item1.fwjgzdbsm" placeholder="请选择">
                                <el-option v-for="item in  $store.state.jgOptions" :key="item.bsm" :label="item.mc"
                                    :value="item.bsm">
                                </el-option>
                            </el-select>
                        </td>
                    </tr>

                    <tr>
                        <td colspan="12" align="center">
                            <Qlxz ref="qlxzModule" :hasSyqx='false' :formData="form"></Qlxz>
                        </td>
                    </tr>

                </table>
            </div>
            <div class="shop">
                <el-button type="primary" @click="save">保存</el-button>
                <el-button type="primary" @click="reset" icon="el-icon-refresh">重置</el-button>
                <el-button type="primary" @click="cancel">取消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import Qlxz from "@/components/formMenu/qlxz";
// import { batchUpdateQjH } from "@api/h";
export default {
    name: "plH",
    components: {
        Qlxz
    },
    props: {
        bsms: {
            type: Array
        },
        plhVisible: {
            type: Boolean,
            default: false
        }
    },
    data () {
        return {
            //树型结构
            show: true,
            clearable: true,
            defaultExpandAll: true,
            multiple: false,
            placeholder: '请选择',
            disabled: false,
            checkStrictly: true,
            treeProps: {
                value: 'bsm',
                children: 'children',
                label: 'mc'
            },
            form: {
                qszt: '0',
                jzmj: '',
                tnjzmj: '',
                ftjzmj: '',
                dxbfjzmj: '',
                qtjzmj: '',
                ftxs: '',
                hxbsm: '',
                hxjgbsm: '',
                gytdmj: '',
                fttdmj: '',
                dytdmj: '',
                fwlxbsm: '',
                fwcbbsm: '',
                fwcqlybsm: '',
                fwxzbsm: '',
                dqtgs: '',
                nqtgs: '',
                xqtgs: '',
                bqtgs: '',
                fwjgbsm: '',
                fwytList: [{
                    glbsm: '',     //关联标识码
                    fwytzdbsm: '',  //房屋用途字典标识码
                    sx: '',         //顺序
                    fwsjytbsm: '',  //房屋实际用途字典标识码
                }],
                fwjgList: [{
                    fwjgzdbsm: '',  //房屋结构字典标识码
                    glbsm: '',     //关联标识码
                    sx: '',         //顺序
                }],
                qlxzList: [{
                    qlxzdm: '',  //权利性质代码
                    glbsm: '',  //宗地BSM、自然幢BSM、户BSM、多幢BSM、宗海BSM
                    qlxzzdbsm: '',  //权利性质字典表标识码
                    qlxzmc: '',   //权利名称名称
                    zhqlxzlx: '',  //除宗海数据外，默认都是空；0:用海类型权利性质;2:海岛用途权利性质
                    addQjTdytRequestList: [{
                    }],   //土地用途新增实体列表
                }]
            },
            isVisible: false,
            hx: [{
                label: '一居室',
                key: '1',
                value: '一居室'
            }, {
                label: '二居室',
                key: '2',
                value: '二居室'
            }, {
                label: '三居室',
                key: '3',
                value: '三居室'
            }
            ],
            ytTitleRowspan: 1,  //用途的单元格垂直合并数量
            fwjgTitleRowspan: 1,  //房屋结构的单元格垂直合并数量
        }
    },
    methods: {

        inputBlur (e) {
            if (e.target.value !== '' && +e.target.value > 0 && +e.target.value < 10) {
                e.target.style.border = ""
            } else {
                e.target.style.border = "1px solid red";
                e.target.style.boxSizing = 'border-box';
            }
        },

        lodding: function () {
            this.$emit('lodding')
        },
        addYtInfo () {
            this.form.fwytList.push({
                glbsm: '',
                fwytzdbsm: '',
                fwsjytbsm: '',
                sx: '',
            });
            this.ytTitleRowspan = this.form.fwytList.length;
        },
        deleteYtInfo (index) {
            if (this.form.fwytList.length <= 1) {
                this.$message({
                    message: '不能删除，最少含有一条用途信息',
                    type: 'warning'
                });
            } else {
                this.form.fwytList.splice(index, 1);
                this.ytTitleRowspan = this.form.fwytList.length;
            }
        },
        addFwjgInfo () {
            this.form.fwjgList.push({
                fwjgzdbsm: '',  //房屋结构字典标识码
                glbsm: '',     //关联标识码
                sx: '',         //顺序
            });
            this.fwjgTitleRowspan = this.form.fwjgList.length;
        },
        deleteFwjgInfo (index) {
            if (this.form.fwjgList.length <= 1) {
                this.$message({
                    message: '不能删除，最少含有一条房屋结构信息',
                    type: 'warning'
                });
            } else {
                this.form.fwjgList.splice(index, 1);
                this.fwjgTitleRowspan = this.form.fwjgList.length;
            }
        },
        close: function () {
            this.$emit('close')
            this.isVisible = false
            this.reset()
        },
        reset: function () {
            this.form = {
                qszt: '0',
                jzmj: '',
                tnjzmj: '',
                ftjzmj: '',
                dxbfjzmj: '',
                qtjzmj: '',
                ftxs: '',
                hxbsm: '',
                hxjgbsm: '',
                gytdmj: '',
                fttdmj: '',
                dytdmj: '',
                fwlxbsm: '',
                fwcbbsm: '',
                fwcqlybsm: '',
                fwxzbsm: '',
                dqtgs: '',
                nqtgs: '',
                xqtgs: '',
                bqtgs: '',
                fwjgbsm: '',
                fwytList: [{
                    glbsm: '',     //关联标识码
                    fwytzdbsm: '',  //房屋用途字典标识码
                    sx: '',         //顺序
                    fwsjytbsm: '',  //房屋实际用途字典标识码
                }],
                fwjgList: [{
                    fwjgzdbsm: '',  //房屋结构字典标识码
                    glbsm: '',     //关联标识码
                    sx: '',         //顺序
                }],
                qlxzList: [{
                    qlxzdm: '',  //权利性质代码
                    glbsm: '',  //宗地BSM、自然幢BSM、户BSM、多幢BSM、宗海BSM
                    qlxzzdbsm: '',  //权利性质字典表标识码
                    qlxzmc: '',   //权利名称名称
                    zhqlxzlx: '',  //除宗海数据外，默认都是空；0:用海类型权利性质;2:海岛用途权利性质
                    addQjTdytRequestList: [{
                    }],   //土地用途新增实体列表
                }]
            };
            this.$refs.qlxzModule.reset();
            this.ytTitleRowspan = 1; //用途的单元格垂直合并数量
            this.fwjgTitleRowspan = 1; //房屋结构的单元格垂直合并数量
        },
        save: function () {

            this.rules = [
                {
                    data: this.form.ftxs,
                    name: '分摊系数',
                    dom: this.$refs.ftxs,
                    rule: /^(?!0(\.0{1,2})?$)(\d(\.\d{1,2})?)$/, //大于0小于10的所有保留两位的数字
                },
            ];
            let flag = true;
            this.rules.forEach(item => {
                if (item.data !== "") {
                    if (!item.rule.test(+item.data) || item.data == null) {
                        if (item.dom.$el) {
                            item.dom.$el.style.border = '1px solid red';
                            item.dom.$el.style.boxSizing = 'border-box';
                        } else {
                            item.dom.style.border = '1px solid red';
                            item.dom.style.boxSizing = 'border-box';
                        }
                        flag = false;
                        return false
                    }
                }
            })

            this.form['hbsms'] = this.bsms
            this.form.qlxzList = this.$refs.qlxzModule.getQlxzDataList();
            this.$nextTick(() => {
                if (flag) {
                    for (let i = 0; i < this.form.fwjgList.length; i++) {
                        if (this.form.fwjgList[i].fwjgzdbsm === '') {
                            this.form.fwjgList.splice(i, 1);
                        }
                    }
                    for (let i = 0; i < this.form.fwytList.length; i++) {
                        if (this.form.fwytList[i].fwsjytbsm === '') {
                            this.form.fwytList.splice(i, 1);
                        }
                    }
                    for (let i = 0; i < this.form.qlxzList.length; i++) {
                        if (this.form.qlxzList[i].qlxzdm === '') {
                            this.form.qlxzList.splice(i, 1);
                        }
                    }
                    console.log("批量户信息")
                    // batchUpdateQjH(this.form).then((res) => {
                    //     if (res.code === 200) {
                    //         this.lodding()
                    //         this.$message.success("保存成功！")
                    //         this.$nextTick(() => {
                    //             this.reset();
                    //         })
                    //         this.close();
                    //     } else {
                    //         this.$message.error(res.message)
                    //     }
                    // })
                } else {
                    this.$message({
                        // message: item.name+'不能为空',
                        message: '表单数据有误',
                        type: "warning",
                    });
                }
            })
        },
        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%;
    table-layout: fixed;
}

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

table:hover {
    cursor: pointer;
}

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

.selectTitle {
    width: 100%;
    border-radius: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: none;
    position: relative;
    display: block;
}

.shop {
    text-align: center;
    margin-top: 20px;
}

/deep/.el-input__inner {
    width: 100%;
    border: 0;
}
</style>