<template>
    <div class="main">
        <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="xzzrz(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>
        <cxlz-query-data :centerDialogVisible="centerDialogVisible" :dylxs="dylxs" @close="close"
                         :zrzbsm="zrzbsm"></cxlz-query-data>
        <div>
            <el-pagination
                    background
                    @size-change="sizeChange"
                    @current-change="currentChange"
                    :current-page.sync="queryData.pageNo"
                    :page-size="queryData.pageSize"
                    layout="total, prev, pager, next"
                    :total="total">
            </el-pagination>
        </div>

    </div>
</template>

<script>
    import {getSearchList} from './../../../../api/search'
    import cxlzQueryData from "../../../../components/cxlxQueryData/cxlzQueryData";

    export default {
        name: "",
        components: {cxlzQueryData},
        props: {},
        data() {
            return {
                total: 1,
                centerDialogVisible: false,
                zrzbsm: "",
                queryData: {
                    bdcdyh: "",
                    bdcqzh: "",
                    dylxs: ['zrz'],
                    qlrmc: "",
                    qszt: "",
                    xmmc: "",
                    zddm: "",
                    zl: "",
                    pageNo: 1,
                    pageSize: 5
                },
                Data: [],
                dylxs: ['zd']
            }
        },
        created() {
        },
        mounted() {
            this.getData(this.queryData)
        },
        methods: {
            sizeChange: function (val) {
                console.log(`每页 ${val} 条`);
                this.queryData.pageSize = val
            },
            currentChange: function (val) {
                console.log(`当前页: ${val}`);
                this.queryData.pageNo = val
                this.getData(this.queryData)
            },
            xzzrz: function (item) {
                this.centerDialogVisible = true;
                this.zrzbsm = item.glbsm;
            },
            close: function () {
                this.centerDialogVisible = false;
            },
            result: function () {
                this.queryData = {
                    bdcdyh: "",
                    bdcqzh: "",
                    dylxs: ['zrz'],
                    qlrmc: "",
                    qszt: "",
                    xmmc: "",
                    zddm: "",
                    zl: "",
                    pageNo: 1,
                    pageSize: 10
                };
                this.getData(this.queryData)
            },
            getData: function (data) {
                getSearchList(data).then(res => {
                    this.Data = res.result.records
                    this.total = res.total
                })
            },
            search: function () {
                this.getData(this.queryData)
            },
        },
        computed: {},
        watch: {},
    }
</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%;
    }

    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>