<template>
    <div class="main">
        <el-dialog
                title="户重新落宗"
                :visible.sync="isVisible"
                width="50%"
                @close="close"
                :modal-append-to-body="false"
        >
            <div class="content">
                <div class="input-suffix">
                    宗 地：
                    <input
                            placeholder="请选择宗地" v-model="hcxlzData.zdbsm" readonly="readonly"
                    />
                    <el-button type="primary" @click="drawer = true">选择宗地</el-button>
                </div>
                <div class="input-suffix">
                    自然幢：
                    <el-select v-model="hcxlzData.zrzbsm" filterable placeholder="请选择">
                        <el-option
                                v-for="item in zrzList"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </div>
                <div class="input-suffix">
                    逻辑幢：
                    <el-select v-model="hcxlzData.ljzbsm" filterable placeholder="请选择">
                        <el-option
                                v-for="item in ljzList"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </div>
                <div class="input-suffix">
                    幢单元：
                    <el-select v-model="hcxlzData.zdybsm" filterable placeholder="请选择">
                        <el-option
                                v-for="item in zdyList"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </div>
            </div>
            <div class="footer">
                <el-button type="primary" @click="save">保存</el-button>
                <el-button type="primary" @click="cancel">取消</el-button>
            </div>
            <el-drawer
                    title="选择宗地"
                    :visible.sync="drawer"
                    direction="rtl"
                    size="25%"
                    :before-close="drawerClose">
                <div>
                    <div class="search">
                        <el-button type="primary" @click="search">查询</el-button>
                        <el-button type="primary" @click="result">重置</el-button>
                        <el-row :gutter="10" class="shop">
                            <el-col :span="4" class="inputtitle">
                                宗地编码:
                            </el-col>
                            <el-col :span="8" class="">
                                <el-input v-model="queryData.zddm"></el-input>
                            </el-col>
                            <el-col :span="4" class="inputtitle">
                                不动产权证号:
                            </el-col>
                            <el-col :span="8" class="">
                                <el-input v-model="queryData.bdcqzh"></el-input>
                            </el-col>
                        </el-row>
                        <el-row :gutter="10">
                            <el-col :span="4" class="inputtitle">
                                不动产权单元号:
                            </el-col>
                            <el-col :span="8">
                                <el-input v-model="queryData.bdcdyh"></el-input>
                            </el-col>
                            <el-col :span="4" class="inputtitle">
                                权利人:
                            </el-col>
                            <el-col :span="8">
                                <el-input v-model="queryData.qlrmc"></el-input>
                            </el-col>
                        </el-row>
                        <el-row :gutter="10">
                            <el-col :span="4" class="inputtitle">
                                坐落:
                            </el-col>
                            <el-col :span="8">
                                <el-input v-model="queryData.zl"></el-input>
                            </el-col>
                        </el-row>
                        <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="cz">操作</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 class="xh">{{index+1}}</td>
                                <td class="zddm" :title="item.zddm">{{item.zddm}}</td>
                                <td class="bdcqdyh" :title="item.bdcdyh">{{item.bdcdyh}}</td>
                                <td class="xmmc" :title="item.xmmc">{{item.xmmc}}</td>
                                <td class="bdcqzh" :title="item.bdcqzd">{{item.bdcqzh}}</td>
                                <td class="qlr" :title="item.qlr">{{item.qlr}}</td>
                                <td class="zl" :title="item.zl">{{item.zl}}</td>
                                <td @click="saveNotarize(item)" class="cz">
                                    <span>落宗</span>
                                </td>
                            </tr>
                        </table>
                    </div>
                    <div class="page">
                        <el-pagination
                                background
                                layout="prev, pager, next,total"
                                :page-size="queryData.pageSize"
                                :total="total"
                                @current-change="currentChange"
                        >
                        </el-pagination>
                    </div>
                </div>
            </el-drawer>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: "hCxlz",
        data() {
            return {
                drawer: false,
                isVisible: false,
                hcxlzData: {
                    bsms: [],
                    zdbsm: '',
                    zrzbsm: '',
                    ljzbsm: '',
                    zdybsm: ''
                },
                total: 1,
                queryData: {
                    bdcdyh: "",
                    bdcqzh: "",
                    dylxs: ['zd'],
                    qlrmc: "",
                    qszt: "2",
                    xmmc: "",
                    zddm: "",
                    zl: "",
                    pageNo: 1,
                    pageSize: 10,
                },
                Data: [],
                zrzList: [],
                ljzList: [],
                zdyList: []
            }
        },
        props: {
            hCxlzVisble: {
                type: Boolean,
                default: false
            },
            bsms: {
                type: Array
            }
        },
        mounted() {
        },
        methods: {
            result: function () {
                this.queryData = {
                    bdcdyh: "",
                    bdcqzh: "",
                    qlrmc: "",
                    qszt: "2",
                    xmmc: "",
                    zddm: "",
                    zl: "",
                    pageNo: 1,
                    pageSize: 10,
                };
                this.getData(this.queryData)
            },
            getData: function (data) {
                data['dylxs'] = this.dylxs;
                getSearchList(data).then(res => {
                    this.Data = res.result.records
                    this.total = res.result.total;
                })
            },
            search: function () {
                this.getData(this.queryData)
            },
            drawerClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {
                    });
            },
            cancel() {
                console.log("cancel......")
            },
            save() {
                console.log("save.......")
            },
            close() {
                this.$emit('close', false);
                this.isVisible = false;
            },
        },
        watch: {
            hCxlzVisble: function (val) {
                this.isVisible = val
            }
        }
    }
</script>

<style scoped lang="less">
    .input-suffix {
        input {
            width: 210px;
            height: 30px;
            border-radius: 3px;
            border-color: #BBB;
        }
    }

    .content {
        text-align: center;
    }

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