<template>
    <div>
        <el-dialog v-dialogDrag :close-on-click-modal="false" 
                title="选择宗地"
                :visible.sync="isVisible"
                width="50%"
                @close="close"
                :modal-append-to-body="false"
        >
            <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>
        </el-dialog>
    </div>
</template>

<script>
    import {zdlist} from './../../api/search'
    import {zrzcxlz} from './../../api/h'
    import {Message} from 'element-ui'

    export default {
        name: "cxlzQueryData",
        data() {
            return {
                total: 1,
                queryData: {
                    bdcdyh: "",
                    bdcqzh: "",
                    qlrmc: "",
                    qszt: ["2"],
                    xmmc: "",
                    zddm: "",
                    zl: "",
                    pageNo: 1,
                    pageSize: 10,
                },
                Data: [],
                isVisible: false,
                zdbsm: ''
            }
        },
        props: {
            centerDialogVisible: {
                type: Boolean,
                default: function () {
                    return false
                }
            },
            dylxs: {
                type: Array,
                default: function () {
                    return ['zd']
                }
            },
            zrzbsm: {
                type: String
            }
        },
        mounted() {
            this.getData(this.queryData)
        },
        created() {
        },
        methods: {
            saveNotarize: function (val) {
                this.zdbsm = val.zdbsm;
                this.$confirm('将落宗在该宗地上, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.save();
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消'
                    });
                });
            },
            currentChange: function (val) {
                this.queryData.pageNo = val;
                this.getData(this.queryData);
            },
            save: function () {
                zrzcxlz({
                    zdBsm: this.zdbsm,
                    zrzBsm: this.zrzbsm
                }).then(res => {
                    if (res.success) {
                        this.close()
                    } else {
                        Message.error(res.message)
                    }
                })
            },
            result: function () {
                this.queryData = {
                    bdcdyh: "",
                    bdcqzh: "",
                    qlrmc: "",
                    qszt: ["2"],
                    xmmc: "",
                    zddm: "",
                    zl: "",
                    pageNo: 1,
                    pageSize: 10,
                };
                this.getData(this.queryData)
            },
            getData: function (data) {
                zdlist(data).then(res => {
                    this.Data = res.result.records
                    this.total = res.result.total;
                })
            },
            search: function () {
                this.getData(this.queryData)
            },
            close: function () {
                this.$emit('close')
                this.result();
                this.isVisible = false
            }
        },
        watch: {
            centerDialogVisible(val) {
                this.isVisible = val
            }
        }
    }
</script>

<style scoped lang="less">

    .main {
        /*box-sizing: border-box;*/
        padding: 18px;
        height: 800px;
        width: 80%;
        position: absolute;
    }

    table {
        margin-top: 10px;
        background-color: #fff;
        font-size: 14px;
        width: 100%;
        tr:hover{
            background-color: #F5F7FA;
        }
    }

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

    table:hover {
        cursor: pointer;
    }

    .inputtitle {
        line-height: 40px;
    }

    .shop {
        margin-top: 20px;
    }

    .xz {
        color: blue;
    }

    .noData {
        color: #b2b2b2;
    }

    .search {
        height: 650px;
    }

    .xh {
        width: 50px;
    }

    .zddm {
        width: 120px;
    }

    .bdcdyh {
        width: 180px;
    }

    .xmmc {
        width: 100px;
    }

    .bdcqzh {
        width: 100px;
    }

    .qlr {
        width: 100px;
    }

    .zl {
        width: 100px;
    }

    .cz {
        width: 50px;
        span {
            color: blue;
        }
    }
</style>