<template>
	<div class="main">
		<div class="search">
			<el-form :inline="true" class="demo-form-inline">
				<el-row>
					<el-col :span="8">
						<el-form-item label="宗地编码">
							<el-input
								v-model="queryData.zddm"
								placeholder="输入宗地编码"
							></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="不动产权证号">
							<el-input
								v-model="queryData.bdcqzh"
								placeholder="输入坐落地址"
							></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="不动产单元号">
							<el-input 
								maxlength="28"
								v-model="queryData.bdcdyh"
								placeholder="输入不动产单元号"
							></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="8">
						<el-form-item label="权利人">
							<el-input
								v-model="queryData.qlrmc"
								placeholder="输入权利人姓名"
							></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="坐落">
							<el-input
								v-model="queryData.zl"
								placeholder="输入坐落地址"
							></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-button type="primary" @click="search">查询</el-button>
						<el-button type="warning" style="margin-left:10px" @click="result">重置</el-button>
					</el-col>
				</el-row>
			</el-form>

			<el-table :data="Data" :height="tableHeight">
				<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>
		</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;
    .el-button{
        margin: 0 22px;
    }
}
.el-form-item{
    width: 100%;
    box-sizing: border-box;
    padding: 0 20px;
    /deep/.el-form-item__content{
        width: calc(100% - 96px);
    }
}
</style>