<template>
    <div>
        <el-dialog
                title="新增"
                :visible.sync="isVisible"
                width="50%"
                @close="close"
                :modal-append-to-body="false"
                center>
            <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>序号</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="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.qlr}}</td>
                        <td>{{item.zl}}</td>
                    </tr>

                </table>
            </div>
            <span slot="footer" class="dialog-footer">
              </span>
            <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 {getSearchList} from './../../api/search'

    export default {
        name: "queryData",
        data() {
            return {
                total:1,
                queryData: {
                    bdcdyh: "",
                    bdcqzh: "",
                    dylxs: ['zd'],
                    qlrmc: "",
                    qszt: "2",
                    xmmc: "",
                    zddm: "",
                    zl: "",
                    pageNo: 1,
                    pageSize: 10,
                },
                Data: [],
                isVisible: false
            }
        },
        props: {
            centerDialogVisible: {
                type: Boolean,
                default: function () {
                    return false
                }
            },
            dylxs: {
                type: Array,
                default: function () {
                    return ['zd']
                }
            }
        },
        mounted() {
            this.getData(this.queryData)
        },
        created() {
        },
        methods: {
            currentChange: function (val) {
                this.queryData.pageNo = val;
                this.getData(this.queryData);
            },
            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)
            },
            addData: function (val) {
                this.$emit("getData", val)
            },
            close: function () {
                this.$emit('close')
                this.result();
            }
        },
        watch: {
            centerDialogVisible(val) {
                this.isVisible = val
            }
        }
    }
</script>

<style scoped lang="less">

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

    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;
    }

</style>