<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
				layout="prev, pager, next,total"
				: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: "",
				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.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%;
}

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>