<template>
    <div class="hb-tabs top20">
        <div class="hbq">
            <span class="tips" style="margin-left:0;">合并前多幢信息</span>
            <table border="1">
                <tr>
                    <td class="xh">序号</td>
                    <td class="zddm">宗地代码</td>
                    <td class="bdcdyh">不动产单元号</td>
                    <td class="xmmc">项目名称</td>
                    <td class="bdcqzh">不动产权证号</td>
                    <td class="qlr">权利人</td>
                    <td class="zl">坐落</td>
                    <td class="zl">类型</td>
                    <td class="">
                        多幢:
                        <el-button
                                type="primary"
                                class="changeBtn outAdd addMinus"
                                @click="newAddDz"
                        >+
                        </el-button>
                        自然幢:
                        <el-button
                                type="primary"
                                class="changeBtn outAdd addMinus"
                                @click="newAddZrz"
                        >+
                        </el-button>
                    </td>
                </tr>
                <tr v-if="dzhbqData.length==0">
                    <td colspan="9">
                        <span class="noData">暂无数据</span>
                    </td>
                </tr>
                <tr v-else v-for="(item,index) in dzhbqData" :key="index">
                    <td class="xh">{{index+1}}</td>
                    <td class="zddm">{{item.zddm}}</td>
                    <td class="bdcdyh">{{item.bdcdyh}}</td>
                    <td class="xmmc">{{item.xmmc}}</td>
                    <td class="bdcqzh">{{item.bdcqzh}}</td>
                    <td class="qlr">{{item.qlr}}</td>
                    <td class="zl">{{item.zl}}</td>
                    <td class="zl">{{item.type}}</td>
                    <td class="cz">
                        <el-button
                                type="primary"
                                class="changeBtn outMinus addMinus"
                                @click="deleteData(index)"
                        >-
                        </el-button>
                    </td>
                </tr>
            </table>
        </div>
        <div class="hbh dzhbh">
            <span class="tips" style="width:100%;display:block;margin-left:0;">合并后多幢信息</span>
            <el-card class="data">
                <div slot="header" class="clearfix">
                    <span>多幢基本信息</span>
                </div>
                <ul class="zdjbxx">
                    <li>
                        <span class="label">行政区:</span>
                        <span class="value">
                                        <el-select v-model="dzhbhData.xzqbsm" @change="changeXzq(dzhbhData.xzqbsm)" disabled>
                                            <el-option
                                                    v-for="i in xzq"
                                                    :key="i.bsm"
                                                    :label="i.mc"
                                                    :value="i.bsm"
                                            ></el-option>
                                        </el-select>
                                    </span>
                    </li>
                    <li>
                        <span class="label">地籍区:</span>
                        <span class="value">
                                        <el-select v-model="dzhbhData.djqbsm" @change="changeDjq(dzhbhData.djqbsm)" disabled>
                                            <el-option
                                                    v-for="i in djq"
                                                    :key="i.bsm"
                                                    :label="i.mc"
                                                    :value="i.bsm"
                                            ></el-option>
                                        </el-select>
                                    </span>
                    </li>
                    <li>
                        <span class="label">地籍子区:</span>
                        <span class="value">
                                        <el-select v-model="dzhbhData.djzqbsm" @change="$forceUpdate()" disabled>
                                            <el-option
                                                    v-for="i in djzq"
                                                    :key="i.bsm"
                                                    :label="i.mc"
                                                    :value="i.bsm"
                                            ></el-option>
                                        </el-select>
                                    </span>
                    </li>
                    <li>
                        <span class="label">所有权类型:</span>
                        <span class="value">
                                        <el-select v-model="dzhbhData.syqlxbsm" disabled>
                                            <el-option
                                                    v-for="i in syq"
                                                    :key="i.value"
                                                    :label="i.label"
                                                    :value="i.value"
                                            ></el-option>
                                        </el-select>
                                    </span>
                    </li>
                    <li>
                        <span class="label">宗地特征码:</span>
                        <span class="value">
                                        <el-select v-model="dzhbhData.zdtzmbsm" disabled>
                                            <el-option
                                                    v-for="i in $store.state.zdtzmList"
                                                    :key="i.bsm"
                                                    :label="i.mc"
                                                    :value="i.bsm"
                                            ></el-option>
                                        </el-select>
                                    </span>
                    </li>
                    <li>
                        <span class="label">项目名称:</span>
                        <span class="value">
                                        <el-input type="text" v-model="dzhbhData.xmmc"></el-input>
                                    </span>
                    </li>
                </ul>
            </el-card>
            <div class="zxx">
                <el-card class="zrz">
                    <div slot="header" class="clearfix">
                        <span style="margin-right:10px">幢信息</span>
                        <span style="margin-right:10px"><i class="iconfont iconduochuang"></i>多幢<span
                                style="color:red">{{dzList.length}}</span>幢</span>
                        <span><i class="iconfont iconziranchuang"></i>自然幢<span
                                style="color:red">{{zrzList.length}}</span>幢</span>
                    </div>
                    <ul>
                        <li v-for="(item,index) in dzList" :key="index"
                        >
                            <i class="iconfont iconduochuang"></i> {{item.xmmc}}
                        </li>
                        <li v-for="(item,index) in zrzList" :key="index"
                        >
                            <i class="iconfont iconziranchuang"></i> {{item.xmmc}}
                        </li>
                    </ul>
                </el-card>
            </div>
        </div>
        <div class="header-button">
            <el-button type="primary" class="saveBtn" @click="save">保存</el-button>
        </div>
        <el-dialog
                title="新增多幢"
                :visible.sync="dzIsVisible"
                width="70%"
                @close="dzClose"
                :modal-append-to-body="false"
        >
            <div class="search">
                <el-row>
                    <el-col :span="24">
                        <el-form :inline="true" class="demo-form-inline">
                            <el-form-item label="宗地编码">
                                <el-input
                                        v-model="queryData.zddm"
                                        placeholder="输入宗地编码"
                                ></el-input>
                            </el-form-item>
                            <el-form-item label="不动产权证号">
                                <el-input
                                        v-model="queryData.bdcqzh"
                                        placeholder="输入不动产权证号"
                                ></el-input>
                            </el-form-item>
                            <el-form-item label="不动产单元号">
                                <el-input
                                        maxlength="28"
                                        v-model="queryData.bdcdyh"
                                        placeholder="输入不动产单元号"
                                ></el-input>
                            </el-form-item>
                            <el-button type="primary" style="margin-left:30px" @click="search">查询</el-button>
                            <el-button type="warning" @click="reset">重置</el-button>
                        </el-form>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form :inline="true" class="demo-form-inline">
                            <el-form-item label="权利人">
                                <el-input
                                        v-model="queryData.qlrmc"
                                        placeholder="输入权利人"
                                ></el-input>
                            </el-form-item>
                            <el-form-item label="坐落">
                                <el-input
                                        v-model="queryData.zl"
                                        placeholder="输入坐落"
                                ></el-input>
                            </el-form-item>
                        </el-form>
                    </el-col>
                </el-row>
                <div class="table-data">
                    <table border="1">
                        <tr>
                            <td>序号</td>
                            <td>操作</td>
                            <td>宗地代码</td>
                            <td>不动产单元号</td>
                            <td>项目名称</td>
                            <td>不动产权证号</td>
                            <td>权利人</td>
                            <td>坐落</td>
                            <td>自然幢数量</td>
                        </tr>
                        <tr v-if="Data.length==0">
                            <td colspan="9">
                                <span class="noData">暂无数据</span>
                            </td>
                        </tr>
                        <tr v-else v-for="(item,index) in Data" :key="index">
                            <td>{{index+1}}</td>
                            <td @click="addDzData(item)" class="xz">
                                <span>选择</span>
                            </td>
                            <td>{{item.zddm}}</td>
                            <td>{{item.bdcdyh}}</td>
                            <td>{{item.xmmc}}</td>
                            <td>{{item.bdcqzh}}</td>
                            <td>{{item.qlr}}</td>
                            <td>{{item.zl}}</td>
                            <td>{{item.zrzCount}}</td>
                        </tr>
                    </table>
                </div>
            </div>
            <div class="page">
                <el-pagination
                        background
                        layout="prev, pager, next,total"
                        :page-size="queryData.pageSize"
                        :total="total"
                        @current-change="currentChange"
                >
                </el-pagination>
            </div>
        </el-dialog>
        <el-dialog
                title="新增自然幢"
                :visible.sync="zrzIsVisible"
                width="70%"
                @close="zrzClose"
                :modal-append-to-body="false"
        >
            <div class="search">
                <el-row>
                    <el-col :span="24">
                        <el-form :inline="true" class="demo-form-inline">
                            <el-form-item label="宗地编码">
                                <el-input
                                        v-model="queryData.zddm"
                                        placeholder="输入宗地编码"
                                ></el-input>
                            </el-form-item>
                            <el-form-item label="不动产权证号">
                                <el-input
                                        v-model="queryData.bdcqzh"
                                        placeholder="输入不动产权证号"
                                ></el-input>
                            </el-form-item>
                            <el-form-item label="不动产单元号">
                                <el-input
                                        maxlength="28"
                                        v-model="queryData.bdcdyh"
                                        placeholder="输入不动产单元号"
                                ></el-input>
                            </el-form-item>
                            <el-button type="primary" style="margin-left:30px" @click="search">查询</el-button>
                            <el-button type="warning" @click="reset">重置</el-button>
                        </el-form>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form :inline="true" class="demo-form-inline">
                            <el-form-item label="权利人">
                                <el-input
                                        v-model="queryData.qlrmc"
                                        placeholder="输入权利人"
                                ></el-input>
                            </el-form-item>
                            <el-form-item label="坐落">
                                <el-input
                                        v-model="queryData.zl"
                                        placeholder="输入坐落"
                                ></el-input>
                            </el-form-item>
                        </el-form>
                    </el-col>
                </el-row>
                <div class="table-data">
                    <table border="1">
                        <tr>
                            <td>序号</td>
                            <td>操作</td>
                            <td>宗地代码</td>
                            <td>不动产单元号</td>
                            <td>项目名称</td>
                            <td>不动产权证号</td>
                            <td>权利人</td>
                            <td>坐落</td>
                        </tr>
                        <tr v-if="Data.length==0">
                            <td colspan="8">
                                <span class="noData">暂无数据</span>
                            </td>
                        </tr>
                        <tr v-else v-for="(item,index) in Data" :key="index">
                            <td>{{index+1}}</td>
                            <td @click="addZrzData(item)" class="xz">
                                <span>选择</span>
                            </td>
                            <td>{{item.zddm}}</td>
                            <td>{{item.bdcdyh}}</td>
                            <td>{{item.xmmc}}</td>
                            <td>{{item.bdcqzh}}</td>
                            <td>{{item.qlr}}</td>
                            <td>{{item.zl}}</td>
                        </tr>
                    </table>
                </div>
            </div>
            <div class="page">
                <el-pagination
                        background
                        layout="prev, pager, next,total"
                        :page-size="queryData.pageSize"
                        :total="total"
                        @current-change="currentChange"
                >
                </el-pagination>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import {
        getAllList,
        getListByXzqbsm,
        getListByPbsm,
        getDdicByMC
    } from "@api/common";
    import {dzList, zrzList} from './../../api/search'
    import {getQjZdjbxxDetailById} from './../../api/zd'

    export default {
        name: "dzHb",
        data() {
            return {
                total: 1,
                dzIsVisible: false,
                zrzIsVisible: false,
                dzhbqData: [],    // 多幢合并前数据
                dzhbhData: {},       // 多幢合并后数据
                Data: [],
                xzq: [],
                djq: [],
                djzq: [],
                dzList: [],
                zrzList: [],
                zdbsm: '',
                queryData: {
                    bdcdyh: "",
                    bdcqzh: "",
                    qlrmc: "",
                    xmmc: "",
                    zddm: "",
                    zl: "",
                    pageNo: 1,
                    pageSize: 10,
                },
                syq: [
                    {
                        label: "国家所有",
                        value: "G",
                    },
                    {
                        label: "集体所有",
                        value: "J",
                    },
                    {
                        label: "土地所有权未确定或有争议",
                        value: "Z",
                    }
                ],
            }
        },
        mounted() {
            this.getXzqList();
        },
        methods: {
            getZdData(id) {
                getQjZdjbxxDetailById(id).then(res => {
                    this.dzhbhData.xzqbsm = res.result.xzqbsm
                    this.changeXzq(this.dzhbhData.xzqbsm)
                    this.dzhbhData.djqbsm = res.result.djqbsm
                    this.changeDjq(this.dzhbhData.djqbsm)
                    this.dzhbhData.djzqbsm = res.result.djzqbsm
                    this.dzhbhData.syqlxbsm = res.result.syqlxbsm
                    this.dzhbhData.zdtzmbsm = res.result.zdtzmbsm
                })
            },
            newAddDz() {
                this.dzIsVisible = true;
                this.geDztData(this.queryData)
            },
            newAddZrz() {
                this.zrzIsVisible = true;
                this.geZrztData(this.queryData)
            },
            deleteData(index) {
                let data = this.dzhbqData[index];
                // 多幢
                if (data.zrzCount) {
                    let dzIndex = this.dzList.indexOf(data);
                    this.dzList.splice(dzIndex, 1);

                } else {
                    let zrzIndex = this.zrzList.indexOf(data);
                    this.zrzList.splice(zrzIndex, 1)
                }
                this.dzhbqData.splice(index, 1)
                if (this.dzhbqData.length === 0) {
                    this.dzhbhData.xzqbsm = ""
                    this.dzhbhData.djqbsm = ""
                    this.dzhbhData.djzqbsm = ""
                    this.dzhbhData.syqlxbsm = ""
                    this.dzhbhData.zdtzmbsm = ""
                }
            },
            save() {
            },
            dzClose() {
                this.dzIsVisible = false;
            },
            zrzClose() {
                this.zrzIsVisible = false;
            },
            currentChange(val) {
                this.queryData.pageNo = val;
                this.geDztData(this.queryData);
            },
            geDztData(data) {
                dzList(data).then(res => {
                    this.Data = res.result.records
                    this.total = res.result.total;
                })
            },
            geZrztData(data) {
                zrzList(data).then(res => {
                    this.Data = res.result.records
                    this.total = res.result.total;
                })
            },
            search() {
                this.geDztData(this.queryData)
            },
            addData(data) {
                if (this.dzhbqData.length === 0) {
                    this.zdbsm = data.zdbsm;
                }
                this.zrzIsVisible = false;
                this.dzIsVisible = false;
                this.dzhbqData.push(data);
            },
            addDzData(data) {
                let arr = [];
                arr = this.dzhbqData.filter(i => i.bsm === data.bsm);
                if (arr.length > 0) {
                    this.$message.info("当前多幢已选择,请重新选择")
                    return
                }
                arr = this.dzhbqData.filter(i => i.zdbsm !== data.zdbsm);
                if (arr.length > 0) {
                    this.$confirm('当前选择多幢不在同一宗地下,是否继续选择？')
                        .then(_ => {
                            this.dzList.push(data)
                            data['type']='多幢'
                            this.addData(data)
                            return
                        })
                        .catch(_ => {
                            return
                        });
                } else {
                    this.dzList.push(data);
                    data['type']='多幢'
                    this.addData(data)
                }
            },
            addZrzData(data) {
                let arr = [];
                arr = this.dzhbqData.filter(i => i.bsm === data.bsm);
                if (arr.length > 0) {
                    this.$message.info("当前自然幢已选择,请重新选择")
                    return
                }
                arr = this.dzhbqData.filter(i => i.zdbsm !== data.zdbsm);
                if (arr.length > 0) {
                    this.$confirm('当前选择多幢不在同一宗地下,是否继续选择？')
                        .then(_ => {
                            this.zrzList.push(data)
                            data['type'] = '自然幢'
                            this.addData(data)
                            return
                        })
                        .catch(_ => {
                            return
                        });
                } else {
                    this.zrzList.push(data)
                    data['type'] = '自然幢';
                    this.addData(data)
                }
            },
            getXzqList() {
                getAllList()
                    .then((res) => {
                        this.xzq = res.result;
                    })
                    .catch((error) => {
                    });
            },
            changeXzq(id) {
                this.djq = [];
                this.djzq = [];
                switch (this.tabName) {
                    case "zd":
                        this.zdhbhData.djqbsm = '';
                        this.zdhbhData.djzqbsm = '';
                        break
                    case "dz":
                        this.zdhbhData.djqbsm = '';
                        this.zdhbhData.djzqbsm = '';
                        break
                    default:
                        break
                }
                getListByXzqbsm(id)
                    .then((res) => {
                        if (res.result == null) {
                            this.djq = null;
                        } else {
                            this.djq = res.result;
                        }
                    })
                    .catch((error) => {
                    });
            },
            changeDjq(item) {
                this.djzq = [];
                this.dzhbqData.djzqbsm = '';
                if (item == null) {
                } else {
                    getListByPbsm(item)
                        .then((res) => {
                            if (res.result == null) {
                                this.djzq = null;
                            } else {
                                this.djzq = res.result;
                            }
                        })
                        .catch((error) => {
                        });
                }
            },
            reset() {
                this.queryData = {
                    bdcdyh: "",
                    bdcqzh: "",
                    qlrmc: "",
                    xmmc: "",
                    zddm: "",
                    zl: "",
                    pageNo: 1,
                    pageSize: 10
                };
                this.geDztData(this.queryData)
            },
        },
        watch: {
            zdbsm: function (bsm) {
                this.getZdData(bsm)
            }
        }
    }
</script>

<style scoped lang="less">
    .hb {
        .menu {
            /deep/ .el-tabs__content {
                position: unset;
                margin-top: 62px;
                overflow: visible;
            }
            /deep/ .el-tabs__header {
                position: -webkit-fixed;
                position: fixed;
                top: 120px;
                z-index: 999;
                width: 100%;
                margin-bottom: 0;
                border: 0;
                /deep/ .el-tabs__nav-scroll {
                    height: 50px;
                    box-sizing: border-box;
                    padding-left: 20px;
                    .el-tabs__active-bar {
                        display: none;
                    }
                    > .el-tabs__nav {
                        border: 0;
                        > .el-tabs__item {
                            border: 1px solid #DEDEDE;
                            height: 36px;
                            line-height: 32px;
                            padding: 0 20px;
                            margin: 9px 10px 9px 0;
                            background-color: #ffffff;
                        }
                        .is-active {
                            color: #006CFF;
                            border: 1px solid #006CFF;
                        }
                    }
                }
                /deep/ .el-tabs__nav-wrap::after {
                    width: 0;
                }
            }
        }
    }

    .psn {
        position: unset !important;
    }

    .hb-tabs {
        height: auto;
        width: 100%;
        position: relative;

        .addBtn {
            position: absolute;
            right: 30px;
            top: 0;
            z-index: 999;
        }
        .header {
            box-sizing: border-box;
            padding: 18px 18px 0 18px;
            display: flex;
            justify-items: left;
            span {
                width: 130px;
                line-height: 40px;
                color: #9B9B9B;
            }
            .el-input {
                width: 200px;
                margin-right: 20px;
            }
        }

        .header-button {
            width: 1624px;
            height: 50px;
            position: fixed;
            bottom: 0;
            text-align: center;
            background-color: #ffffff;
        }
        table {
            margin-top: 10px;
            background-color: #fff;
            font-size: 14px;
            width: 100%;
            tr:nth-of-type(odd) {
                background: #FAFAFA;
                th {
                    height: 36px;
                }
            }
            .formInput {
                margin: 0;
                height: 36px;
                outline: none;
                border: none;
                color: #606764;
                overflow: visible;
                text-align: center;
                cursor: text;
            }
            tr:hover {
                background-color: #F5F7FA;
            }

        }

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

        table:hover {
            cursor: pointer;
        }

        .noData {
            color: #b2b2b2;
        }
        .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);
        }
        .xh {
            width: 100px;
        }
        .xzq, .djq, .djzq {
            width: 150px;
        }
        .tips {
            color: #9B9B9B;
            margin-left: 20px;
            margin-bottom: 14px;
        }
        .hbq {
            margin: 14px 20px 20px 20px;
        }
        .dzhbh {
            box-sizing: border-box !important;
            padding: 0 18px 0 0 !important;
            margin-top: 10px !important;
            display: block !important;
        }
        .hbh {
            margin-left: 20px;
            margin-top: 14px;
            margin-bottom: 70px;
            display: flex;
            flex-direction: column;
            flex-flow: nowrap;
            .data {
                width: 40%;
                float: left;
            }
            .el-card {
                border: 1px solid #E6E6E6;
                background-color: white;
                overflow: auto;
                .clearfix {
                    span {
                        color: #9B9B9B;
                    }
                }
                /deep/ .el-card__body {
                    padding: 10px 12px;
                }
                ul {
                    li {
                        padding: 5px;
                        line-height: 20px;
                        color: #4A4A4A;
                        .label {
                            vertical-align: middle;
                            color: #4A4A4A;
                            display: inline-block;
                            width: 104px;
                            text-align: right;
                        }
                        .value {
                            vertical-align: middle;
                            color: #6D7278;
                            display: inline-block;
                            padding-left: 10px;
                            width: calc(100% - 116px);
                            word-break: break-all;
                        }
                    }
                    .hasChoosed {
                        color: #BBB;
                    }
                }
                .zdjbxx {
                    width: 100%;
                    height: 320px;
                    margin-bottom: 10px;
                    float: left;
                }
                .zdmap {
                    width: calc(100% - 380px);
                    height: 200px;
                    float: left;
                }
            }
            .zxx {
                width: calc(60% - 40px);
                margin-left: 20px;
                display: flex;
                flex-direction: column;
                flex-flow: nowrap;
                float: left;
                .title {
                    color: red;
                    text-align: center;
                    padding: 5px 0;
                }
                /deep/ .el-card__body {
                    height: 320px;
                    overflow-y: scroll;
                    position: relative;
                }
                .line {
                    width: 1px;
                    height: calc(100% - 20px);
                    background-color: #EDEDED;
                    position: absolute;
                    top: 10px;
                    left: 50%;
                }
                .dz {
                    width: 33%;
                    overflow: auto;
                    ul {
                        li {
                            width: 96% !important;
                        }
                    }

                }
                .zrz {
                    width: 100%;
                    overflow: auto;
                }
                ul {
                    overflow: auto;
                    width: 100%;
                    float: left;
                    margin-left: 10px;
                    li {
                        width: 23%;
                        padding: 5px;
                        text-align: left;
                        line-height: 20px;
                        display: inline-block;
                        .label {
                            width: 90px;
                        }
                    }
                    li:nth-of-type(even) {
                        .label {
                            width: 110px;
                            text-indent: 20px;
                        }
                    }
                }
            }
        }
    }

    .cz {
        color: blue;
    }

    .cz:hover {
        color: blue;
        text-decoration: underline;
    }

    .xz {
        color: blue;
    }

    .table-data {
        height: 480px;
    }

    /deep/ .el-select {
        width: 100%;
    }
</style>