<template>
    <div class="hb" ref="hbBox">
        <el-tabs v-model="tabName" class="menu" @tab-click="handleClick">
            <el-tab-pane label="宗地合并" name="zd">
                <div class="hb-tabs top20">
                    <span class="tips">合并前宗地信息</span>
                    <div class="hbq">
                        <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>
                                    <el-button
                                            type="primary"
                                            class="changeBtn outAdd addMinus"
                                            @click="newAdd"
                                    >+
                                    </el-button>
                                </td>
                            </tr>
                            <tr v-if="zdhbqData.length==0">
                                <td colspan="8">
                                    <span class="noData">暂无数据</span>
                                </td>
                            </tr>
                            <tr v-else v-for="(item,index) in zdhbqData" :key="index">
                                <td class="xh">{{index+1}}</td>
                                <td class="zddm"><input type="text" class="formInput" v-model="item.zddm"
                                                        readonly="readonly"/></td>
                                <td class="bdcdyh"><input type="text" class="formInput" v-model="item.bdcdyh"
                                                          readonly="readonly"/></td>
                                <td class="xmmc"><input type="text" class="formInput" v-model="item.xmmc"
                                                        readonly="readonly"/></td>
                                <td class="bdcqzh"><input type="text" class="formInput" v-model="item.bdcqzh"
                                                          readonly="readonly"/></td>
                                <td class="qlr"><input type="text" class="formInput" v-model="item.qlr"
                                                       readonly="readonly"/></td>
                                <td class="zl"><input type="text" class="formInput" v-model="item.zl"
                                                      readonly="readonly"/></td>
                                <td class="cz">
                                    <el-button
                                            type="primary"
                                            class="changeBtn outMinus addMinus"
                                            @click="deleteData(item,index)"
                                    >-
                                    </el-button>
                                </td>
                            </tr>
                        </table>
                    </div>
                    <span class="tips">合并后宗地信息</span>
                    <div class="hbh">
                        <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="zdhbhData.xzqbsm" @change="changeXzq(zdhbhData.xzqbsm)">
                                            <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="zdhbhData.djqbsm" @change="changeDjq(zdhbhData.djqbsm)">
                                            <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="zdhbhData.djzqbsm" @change="$forceUpdate()">
                                            <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="zdhbhData.syqlxbsm">
                                            <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="zdhbhData.zdtzmbsm">
                                            <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="zdhbhData.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">{{zdDzList.length}}</span>幢</span>
                                    <span><i class="iconfont iconziranchuang"></i>自然幢<span style="color:red">{{zdZrzList.length}}</span>幢</span>
                                </div>
                                <ul>
                                    <li v-for="(item,index) in zdDzList" :key="index+item.xmmc"
                                    >
                                        <i class="iconfont iconduochuang"></i> {{item.displays}}
                                    </li>
                                    <li v-for="(item,index) in zdZrzList" :key="index+item.xmmc"
                                    >
                                        <i class="iconfont iconziranchuang"></i> {{item.displays}}
                                    </li>
                                </ul>
                            </el-card>
                        </div>
                    </div>
                    <zd-query-data @getData="getData" :centerDialogVisible.sync="centerDialogVisible"
                                   :isZdClose="true"
                                   @close="close"></zd-query-data>
                    <div class="header-button" :style="{width:fgBoxWidth+'px'}">
                        <el-button type="primary" class="saveBtn" @click="save">保存</el-button>
                    </div>
                </div>
            </el-tab-pane>
            <el-tab-pane label="多幢合并" name="dz">
                <dz-hb></dz-hb>
            </el-tab-pane>
            <el-tab-pane label="户合并" name="h">
                <div class="hb-tabs psn" v-if="hhbtabs">
                    <hfghb></hfghb>
                </div>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>
    import {
        getAllList,
        getListByXzqbsm,
        getListByPbsm,
        getDdicByMC
    } from "@api/common";
    import {ZdHb,getQjZdjbxxDetailById} from "@api/zd"
    import {saveDzHb, ZdfggetZxx} from "@api/dz"
    import QueryData from '@components/queryData/queryData'
    import zdQueryData from '@components/zdQueryData/zdQueryData'
    import hfghb from '../hfghb/index'
    import dzHb from './../../../../components/dzHb/dzHb'
    export default {
        name: "",
        inject: ['getRightTree'],
        components: { zdQueryData, hfghb,dzHb},
        props: {},
        data() {
            return {
                tabName: 'zd',
                centerDialogVisible: false,
                zdhbqData: [],      // 宗地合并前数据
                zdhbhData: {},  // 宗地合并后数据
                dzhbhData: [
                    {
                        xmmc: ''
                    }
                ],  // 多幢合并后数据
                hhbhData: {},   // 户合并后数据
                zdbsm:'',   //宗地BSM
                fgBoxWidth: 0,
                xzq: [],
                djq: [],
                djzq: [],
                syq: [
                    {
                        label: "国家所有",
                        value: "G",
                    },
                    {
                        label: "集体所有",
                        value: "J",
                    },
                    {
                        label: "土地所有权未确定或有争议",
                        value: "Z",
                    }
                ],
                hhbtabs: false,
                zdDzList: [],
                zdZrzList: [],
            }
        },
        created() {
        },
        mounted() {
            this.getXzqList();
            this.$nextTick(() => {
                this.fgBoxWidth = this.$refs.hbBox.clientWidth;
            })
        },
        methods: {
            handleClick(tab, event) {
                if (tab.name === 'h') {
                    this.hhbtabs = true
                }
            },
            getZdData(id) {
                getQjZdjbxxDetailById(id).then(res => {
                    this.zdhbhData.xzqbsm = res.result.xzqbsm
                    this.changeXzq(this.zdhbhData.xzqbsm)
                    this.zdhbhData.djqbsm = res.result.djqbsm
                    this.changeDjq(this.zdhbhData.djqbsm)
                    this.zdhbhData.djzqbsm = res.result.djzqbsm
                    this.zdhbhData.syqlxbsm = res.result.syqlxbsm
                    this.zdhbhData.zdtzmbsm = res.result.zdtzmbsm
                })
            },
            save() {
                switch (this.tabName) {
                    case "zd":
                        this.zdHb();
                        break
                    case "h":
                        break;
                    default:
                        break
                }
            },
            zdHb() {
                let oldBsm = this.zdhbqData.map(function (item, index) {
                    return item.zdbsm;
                }).join(",")
                let data = {
                    newzddjqbsm: this.zdhbhData.djqbsm,
                    newzddjzqbsm: this.zdhbhData.djzqbsm,
                    newzdsyqlxbsm: this.zdhbhData.syqlxbsm,
                    newzduserbsm: "",
                    newzdxmmc: this.zdhbhData.xmmc,
                    newzdxzqbsm: this.zdhbhData.xzqbsm,
                    newzdzdtzmbsm: this.zdhbhData.zdtzmbsm,
                    oldzdbsms: oldBsm
                }
                console.log(data, '宗地合并数据')
                ZdHb(data).then(res => {
                    if (res.success) {
                        this.$message.success("合并成功");
                        //更新目录树
                        this.getRightTree(res.result,'2');
                        this.$router.push({
                            path: '/zd',
                            query: {
                                bsm: res.result,
                                source: 2
                            }
                        });
                    } else {
                        this.$message.error("合并失败")
                    }
                })
            },
            dzHb() {

            },
            hHb() {

            },
            getData(data) {
                let arr=[];
                switch (this.tabName) {
                    case "zd":
                        arr = this.zdhbqData.filter(i => i.zdbsm === data.zdbsm);
                        if (arr.length > 0) {
                            this.$message.info("当前宗地已选择,请重新选择")
                            break
                        }
                        arr = this.zdhbqData.filter(i => i.xzqbsm !== data.xzqbsm || i.djqbsm !== data.djqbsm || i.djzqbsm !== data.djzqbsm);
                        if (arr.length > 0) {
                            this.$confirm('当前宗地不在同一地籍子区下,是否继续选择？')
                                .then(_ => {
                                    this.addZdData(data);
                                })
                                .catch(_ => {
                                });
                        } else {
                            this.addZdData(data)
                        }
                        break
                    default:
                        break;
                }
            },
            deleteData(item, index) {
                switch (this.tabName) {
                    case "zd":
                        this.zdhbqData.splice(index, 1);
                        //删除幢信息中的数据
                        this.zdZrzList = this.zdZrzList.filter(i => i.zdbsm !== item.zdbsm);
                        this.zdDzList = this.zdDzList.filter(i => i.zdbsm !== item.zdbsm);
                        if (this.zdhbqData.length === 0) {
                            this.zdhbhData.xzqbsm = ""
                            this.zdhbhData.djqbsm = ""
                            this.zdhbhData.djzqbsm = ""
                            this.zdhbhData.syqlxbsm = ""
                            this.zdhbhData.zdtzmbsm = ""
                        }
                        break
                    case "dz":
                        this.dzhbqData.splice(index, 1)
                        break
                    default:
                        break
                }
            },
            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 = [];
                switch (this.tabName) {
                    case "zd":
                        this.zdhbhData.djzqbsm = '';
                        break
                    case "dz":
                        this.dzhbqData.djzqbsm = '';
                        break
                    default:
                        break
                }
                if (item == null) {
                } else {
                    getListByPbsm(item)
                        .then((res) => {
                            if (res.result == null) {
                                this.djzq = null;
                            } else {
                                this.djzq = res.result;
                            }
                        })
                        .catch((error) => {
                        });
                }
            },
            close: function () {
                this.centerDialogVisible = false;
            },
            newAdd: function () {
                this.centerDialogVisible = true;
            },
            addZdData(data) {
                if (this.zdhbqData.length === 0) {
                    this.zdbsm=data.zdbsm;
                }
                this.zdhbqData.push(data);
                this.centerDialogVisible = false;
                ZdfggetZxx(data.zdbsm).then(res => {
                    if (res.success) {
                        res.result.zrzList.forEach(item => {
                            item.zdbsm = data.zdbsm
                        })
                        res.result.dzList.forEach(item => {
                            item.zdbsm = data.zdbsm
                        })
                        if (this.zdZrzList.length === 0) {
                            this.zdZrzList = res.result.zrzList
                        } else {
                            this.zdZrzList = this.zdZrzList.concat(res.result.zrzList)
                        }
                        if (this.zdDzList.length === 0) {
                            this.zdDzList = res.result.dzList
                        } else {
                            this.zdDzList = this.zdDzList.concat(res.result.dzList)
                        }
                    }
                })
            },
            geDztData(data) {
                let arr=[];
                switch (this.tabName) {
                    case "zd":
                         arr = this.zdhbqData.filter(i => i.zdbsm === data.zdbsm);
                        if (arr.length > 0) {
                            this.$message.info("当前宗地已选择,请重新选择")
                            break
                        }
                         arr = this.zdhbqData.filter(i => i.xzqbsm !== data.xzqbsm || i.djqbsm !== data.djqbsm || i.djzqbsm !== data.djzqbsm);
                        if (arr.length > 0) {
                            this.$confirm('当前宗地不在同一地籍子区下,是否继续选择？')
                                .then(_ => {
                                    this.addZdData(data);
                                })
                                .catch(_ => {
                                });
                        } else {
                            this.addZdData(data)
                        }
                        break
                    case "dz":
                        arr = this.dzhbqData.filter(i => i.glbsm === data.glbsm);
                        if (arr.length > 0) {
                            this.$message.info("当前多幢已选择,请重新选择")
                            break
                        }
                        console.log(data,'data')
                        arr=this.dzhbqData.filter(i=>i.zdbsm !==data.zdbsm);
                        if (arr.length > 0) {
                            this.$message.info("当前选择多幢不在同一宗地下,请重新选择")
                            break
                        }
                        this.dzhbqData.push(data);
                        this.centerDialogVisible=false;
                        break
                    default:
                        break;
                }
            },
            //多幢合并保存
            dzhbSave() {
                console.log(this.dzhbqData, 'dzhbqData');
                let params = {
                    fwlist: [],
                    newdzxmmc: this.dzhbhData[0].xmmc,
                    zdbsm: ''
                }
                this.dzhbqData.forEach(item => {
                    params.fwlist.push({
                        zbsm: item.bsm,
                        ztype: item.dylx
                    })
                })
                this.$nextTick(() => {
                    console.log(params);
                    //TODO 调用保存接口
                    // saveDzHb(params).then((res) => {

                    // })
                    // .catch((error) => {

                    // });
                })
            }
        },
        computed: {},
        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 {
            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;
        }
        .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: 200px;
                    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;
    }

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