<template>
    <div class="main">
        <div class="search">
            <!-- <el-row :gutter="10" class="shop">
                <el-col :span="8" class="inputtitle">
                    <span>宗地编码</span>
                    <el-input v-model="queryData.zddm"></el-input>
                </el-col>
                <el-col :span="8" class="inputtitle">
                    <span>不动产权证号</span>
                    <el-input v-model="queryData.bdcqzh"></el-input>
                </el-col>
                <el-col :span="8" class="inputtitle">
                    <span>不动产权单元号</span>
                    <el-input v-model="queryData.bdcdyh"></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.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> -->
            <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="输入宗地编码"
								@change="query"
							></el-input>
						</el-form-item>
						<el-form-item label="不动产权证号">
							<el-input
								v-model="queryData.bdcqzh"
								placeholder="输入坐落地址"
								@change="query"
							></el-input>
						</el-form-item>
						<el-form-item label="不动产单元号">
							<el-input
								v-model="queryData.bdcdyh"
								placeholder="输入不动产单元号"
								@change="query"
							></el-input>
						</el-form-item>
						<el-form-item label="权利人">
							<el-input
								v-model="queryData.qlrmc"
								placeholder="输入权利人姓名"
								@change="query"
							></el-input>
						</el-form-item>
						<el-form-item label="坐落">
							<el-input
								v-model="queryData.zl"
								placeholder="输入坐落地址"
								@change="query"
							></el-input>
						</el-form-item>

					<!-- <el-button
						type="primary"
						class="moreSearchBtn"
						@click="moreSearch"
						>高级查询
					</el-button> -->
						<!-- @click="ismore = !ismore" -->
					</el-form>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="24">
					<el-form :inline="true" :model="queryData" class="demo-form-inline">
						<el-form-item class="demo-form-inline" label="查询范围">
							<el-checkbox-group v-model="queryData.dylxs" @change="query">
								<el-checkbox label="zd" name="type">宗地</el-checkbox>
								<el-checkbox label="dz" name="type">多幢</el-checkbox>
								<el-checkbox label="zrz" name="type">自然幢</el-checkbox>
								<el-checkbox label="h" name="type">户</el-checkbox>
								<el-checkbox label="gzw" name="type">构筑物</el-checkbox>
								<el-checkbox label="lq" name="type">林权</el-checkbox>
								<el-checkbox label="zh" name="type">宗海</el-checkbox>
							</el-checkbox-group>
						</el-form-item>
                        
                    <el-button type="primary" @click="query">查询</el-button>
                    <el-button type="warning" @click="reset">重置</el-button>
					</el-form>
				</el-col>
				<el-col :span="2">
				</el-col>
			</el-row>
            
            <el-table
                    :data="Data"
                    :height="tableHeight"
                    :row-class-name="tableRowClassName"
            >
                    <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>
                <el-table-column type="index" width="80" align="center" label="序号">
                </el-table-column>
                <el-table-column label="操作" width="100">
                    <template slot-scope="scope">
                        <el-button @click="xzzrz(scope.row)" type="text" size="small"
                        >选择
                        </el-button>
                    </template>
                </el-table-column>
                <el-table-column prop="zddm" align="left" label="宗地代码">
                </el-table-column>
                <el-table-column prop="bdcdyh" align="left" label="不动产单元号">
                </el-table-column>
                <el-table-column prop="xmmc" align="left" width="150" label="项目名称">
                </el-table-column>
                <el-table-column prop="bdcqzh" align="left" label="不动产权证号">
                </el-table-column>
                <el-table-column prop="qlrmc" align="left" width="120" label="权利人">
                </el-table-column>
                <el-table-column prop="zl" align="left" label="坐落"></el-table-column>
            </el-table>
            <!-- <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"],
                tableHeight:0
            };
        },
        created() {
        },
        mounted() {
            this.getData(this.queryData);
            if ((document.documentElement.clientWidth || document.body.clientWidth) < 1890) {
                this.$nextTick(()=>{
                    this.tableHeight = (document.documentElement.clientHeight || document.body.clientHeight) - 355;
                })
            }else{
                this.$nextTick(()=>{
                    this.tableHeight = (document.documentElement.clientHeight || document.body.clientHeight) - 304;
                })
            }
        },
        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;
    }

    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;
        span{
            display: inline-block;
            width: 120px;
            text-align: left;
        }
        /deep/ .el-input{
            width: calc(100% - 120px);
        }
    }

    .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;
    }
    /deep/ .el-form-item__label{
        width: 96px;
    }
    /deep/ .el-form{
        margin-left: -28px;
    }
</style>