<template>
    <div>
        <el-dialog v-dialogDrag :close-on-click-modal="false"
                title="新增"
                :visible.sync="isVisible"
                width="70%"
                @close="close"
                :modal-append-to-body="false"
                center>
            <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-bode">
                    <table border="1">
                        <tr>
                            <th>序号</th>
                            <th>操作</th>
                            <th>宗地代码</th>
                            <th>不动产单元号</th>
                            <th>项目名称</th>
                            <th>不动产权证号</th>
                            <th>权利人</th>
                            <th>坐落</th>
                            <th>自然幢数量</th>
                        </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="addData(item)" class="xz">
                                <span>选择</span>
                            </td>
                            <td>{{item.zddm}}</td>
                            <td>{{item.bdcdyh}}</td>
                            <td>{{item.xmmc}}</td>
                            <td>{{item.bdcqzh}}</td>
                            <td>{{item.qlrmc}}</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>

    </div>
</template>

<script>
    import {dzList} from '@api/search'

    export default {
        name: "zdQueryData",
        data() {
            return {
                total: 1,
                queryData: {
                    bdcdyh: "",
                    bdcqzh: "",
                    qlrmc: "",
                    xmmc: "",
                    zddm: "",
                    zl: "",
                    pageNo: 1,
                    pageSize: 10,
                },
                Data: [],
                isVisible: false
            }
        },
        props: {
            centerDialogVisible: {
                type: Boolean,
                default: function () {
                    return false
                }
            },
            isClose: {
                type: Boolean,
                default: false
            }
        },
        mounted() {
            this.getData(this.queryData)
        },
        created() {
        },
        methods: {
            currentChange: function (val) {
                this.queryData.pageNo = val;
                this.getData(this.queryData);
            },
            reset: function () {
                this.queryData = {
                    bdcdyh: "",
                    bdcqzh: "",
                    qlrmc: "",
                    xmmc: "",
                    zddm: "",
                    zl: "",
                    pageNo: 1,
                    pageSize: 10
                };
                this.getData(this.queryData)
            },
            getData: function (data) {
                dzList(data).then(res => {
                    this.Data = res.result.records
                    this.total = res.result.total;
                })
            },
            search: function () {
                this.getData(this.queryData)
            },
            addData: function (val) {
                this.$emit("getData", val)
                if (this.isClose) {
                    this.close();
                }
            },
            close: function () {
                this.$emit('close')
                this.reset();
            }
        },
        watch: {
            centerDialogVisible(val) {
                this.isVisible = val
            }
        }
    }
</script>

<style scoped lang="less">

    .main {
        box-sizing: border-box;
        padding: 18px;
        height: auto;
        width: 80%;
    }

    /deep/ .el-form-item__label {
        width: 96px;
        text-align: right;
    }

    table {
        margin-top: 10px;
        background-color: #fff;
        font-size: 14px;
        width: 100%;
        tr:hover {
            background-color: #F5F7FA;
        }
    }
    th{
        height: 36px;
    }
    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;
    }
    .table-bode{
        height: 450px;
    }
    .page {
        margin-top: 20px;
    }

</style>