<template>
    <div class="hb-tabs top20">
        <div class="hbq">
            <span class="tips" style="margin-left:0;">合并前幢信息(已选择幢{{dzhbqData.length}}个)</span>

            <div style="margin-top: 14px">
                <el-table
                        :data="dzhbqData"
                        border
                        style="width: 100%"
                        :height="tableHeight"
                        :header-cell-style="{'text-align':'center'}"
                        :cell-style="{'text-align':'center'}">
                    <el-table-column
                            width="200">
                        <template slot="header">
                            <el-button style="border:0;padding:0 10px"  @click="newAddDz">
                                <i class="iconfont iconicon-test2" style="color:#66b1ff;font-size:20px;position: relative;top:2px;left:-2px"></i>多幢
                            </el-button>
                            <el-button style="border:0;padding:0 10px"  @click="newAddDz">
                                <i class="iconfont iconicon-test2" style="color:#66b1ff;font-size:20px;position: relative;top:2px;left:-2px"></i>自然幢
                            </el-button>
                        </template>
                        <template slot-scope="scope">
                            <i class="iconfont icon-" style="color:#FA6400;font-size:26px;position: relative;top:2px;cursor: pointer;" @click="deleteData(scope.$index)"></i>
                        </template>
                    </el-table-column>
                    <el-table-column
                            type="index"
                            label="序号"
                            width="80">
                    </el-table-column>
                    <el-table-column
                            prop="zddm"
                            label="宗地代码">
                    </el-table-column>
                    <el-table-column
                            prop="bdcdyh"
                            label="不动产单元号"
                            width="350">
                    </el-table-column>
                    <el-table-column
                            prop="xmmc"
                            label="项目名称">
                    </el-table-column>
                    <el-table-column
                            prop="bdcqzh"
                            label="不动产权证号">
                    </el-table-column>
                    <el-table-column
                            prop="qlr"
                            label="权利人">
                    </el-table-column>
                    <el-table-column
                            prop="zl"
                            label="坐落">
                    </el-table-column>
                </el-table>
            </div>
        </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-row>
                                <el-col :span="7" style="display: inline-block;">
                                    <el-select v-model="dzhbhData.xzqbsm"  value-key="xzqbsm" placeholder="行政区" @change="changeXzq(dzhbhData.xzqbsm)" disabled>
                                        <el-option
                                                v-for="item in xzq"
                                                :key="item.bsm"
                                                :label="item.mc"
                                                :value="item.bsm">
                                        </el-option>
                                    </el-select>
                                </el-col>
                                <el-col :span="1">&nbsp;</el-col>
                                <el-col :span="7">
                                        <el-select v-model="dzhbhData.djqbsm"  placeholder="地籍区" @change="changeDjq(dzhbhData.djqbsm)" disabled>
                                            <el-option
                                                    v-for="item in djq"
                                                    :key="item.bsm"
                                                    :label="item.mc"
                                                    :value="item.bsm">
                                            </el-option>
                                        </el-select>
                                </el-col>
                                <el-col :span="1">&nbsp;</el-col>
                                <el-col :span="8">
                                        <el-select v-model="dzhbhData.djzqbsm"  placeholder="地籍子区" @change="$forceUpdate()" disabled>
                                            <el-option
                                                    v-for="item in djzq"
                                                    :key="item.bsm"
                                                    :label="item.mc"
                                                    :value="item.bsm">
                                            </el-option>
                                        </el-select>
                                </el-col>
                            </el-row>
                        </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 v-dialogDrag :close-on-click-modal="false"
                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" icon="el-icon-search">查询</el-button>
                            <el-button type="warning" @click="reset" icon="el-icon-refresh">重置</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 v-dialogDrag :close-on-click-modal="false"
                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" icon="el-icon-search">查询</el-button>
                            <el-button type="warning" @click="reset" icon="el-icon-refresh">重置</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, dzHb} 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",
                    }
                ],
                tableHeight:0,
            }
        },
        mounted() {
            this.getXzqList();
            this.$nextTick(()=>{
                this.tableHeight = (document.documentElement.clientHeight || document.body.clientHeight) - 610
            })
        },
        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) {
                console.log(JSON.stringify(index)+":row")
                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'] = 'dz'
                            this.addData(data)
                            return
                        })
                        .catch(_ => {
                            return
                        });
                } else {
                    this.dzList.push(data);
                    data['type'] = 'dz'
                    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'] = 'zrz'
                            this.addData(data)
                            return
                        })
                        .catch(_ => {
                            return
                        });
                } else {
                    this.zrzList.push(data)
                    data['type'] = 'zrz';
                    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">
   
    .psn {
        position: unset !important;
    }

    .hb-tabs {

        .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;
        }
        .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: 200px;
                    margin-bottom: 10px;
                    float: left;
                }
                .zdmap {
                    width: calc(100% - 380px);
                    height: 200px;
                    float: left;
                }
            }
            .zxx {
                width: calc(60% - 44px);
                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;
    }

    .xz {
        color: blue;
    }

    .table-data {
        height: 480px;
    }

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