<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 class="xh">序号</td>
                    <td class="cz">操作</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>
                </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 @click="xzzrz(item)" class="cz">
                        <span>选择</span>
                    </td>
                    <td class="zddm" :title="item.zddm">{{ item.zddm }}</td>
                    <td class="bdcdyh" :title="item.bdcdyh">{{ item.bdcdyh }}</td>
                    <td class="xmmc" :title="item.xmmc">{{ item.xmmc }}</td>
                    <td class="bdcqzh" :title="item.bdcqzh ">{{ item.bdcqzh }}</td>
                    <td class="qlr" :title="item.qlr">{{ item.qlr }}</td>
                    <td class="zl">{{ 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 class="page">
            <el-pagination
                    background
                    layout="prev, pager, next,total"
                    :page-size="queryData.pageSize"
                    :total="total"
                    @current-change="currentChange"
            >
            </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: "2",
                    xmmc: "",
                    zddm: "",
                    zl: "",
                    pageNo: 1,
                    pageSize: 12,
                },
                Data: [],
                dylxs: ["zd"],
            };
        },
        created() {
        },
        mounted() {
            this.getData(this.queryData);
        },
        methods: {
            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: "2",
                    xmmc: "",
                    zddm: "",
                    zl: "",
                    pageNo: 1,
                    pageSize: 12,
                };
                this.getData(this.queryData);
            },
            getData: function (data) {
                getSearchList(data).then((res) => {
                    this.Data = res.result.records;
                    this.total = res.result.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%;
        table-layout: fixed;
        tr:hover{
            background-color: #F5F7FA;
        }
        td, th {
            text-align: center;
            height: 36px;
            min-width: 50px;
            overflow: hidden;
            white-space: nowrap;
            -ms-text-overflow: ellipsis;
            text-overflow: ellipsis;
        }
    }

    table:hover {
        cursor: pointer;
    }

    .inputtitle {
        line-height: 40px;
    }

    .shop {
        margin-top: 20px;
    }

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

    .noData {
        color: #b2b2b2;
    }

    .page {
        position: fixed;
        bottom: 20px;
        width: auto;
        height: auto;
    }
</style>