<template>
	<div class="main">
		<div>
        	<p class="tips">查询条件</p>
			<div class="search">
				<el-row>
					<el-col :span="24" style="margin-left: -10px;">
						<el-form :inline="true" class="demo-form-inline" label-width="106px">
							<el-form-item label="宗地编码">
								<el-input
									v-model="queryData.zddm"
									placeholder="输入宗地编码"
								></el-input>
							</el-form-item>
							<el-form-item label="不动产权证号">
								<el-input
									v-model="queryData.bdcqzh"
									placeholder="输入坐落地址"
								></el-input>
							</el-form-item>
							<el-form-item label="不动产单元号">
								<el-input
									maxlength="28"
									v-model="queryData.bdcdyh"
									placeholder="输入不动产单元号"
								></el-input>
							</el-form-item>
							<el-button type="primary" @click="search">查询</el-button>
							<el-button type="warning" style="margin-left:10px" @click="result">重置</el-button>
						</el-form>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="24" style="margin-left: -10px;">
						<el-form :inline="true" class="demo-form-inline"  label-width="106px">
							<el-form-item label="权利人">
								<el-input
									v-model="queryData.qlrmc"
									placeholder="输入权利人姓名"
								></el-input>
							</el-form-item>
							<el-form-item label="坐落">
								<el-input
									v-model="queryData.zl"
									placeholder="输入坐落地址"
								></el-input>
							</el-form-item>
						</el-form>
					</el-col>
				</el-row>
			</div>
        	<p class="tips">查询列表</p>
			<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 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-column label="操作" align="center" width="100">
					<template slot-scope="scope">
						<el-tooltip class="item" effect="light" content="选择" placement="top">
                            <i class="iconfont iconbanli iconfontEdit" @click="xzzrz(scope.row)" style="padding:0 10px"></i>
                        </el-tooltip>
						<!-- <el-button @click="xzzrz(scope.row)" type="text" size="small"
							>选择
						</el-button> -->
					</template>
				</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 { cxlzZrzList } from "@api/zrz";
import cxlzQueryData from "@components/cxlxQueryData/cxlzQueryData";

export default {
	name: "",
	components: { cxlzQueryData },
	props: {},
	data() {
		return {
			total: 1,
			centerDialogVisible: false,
			zrzbsm: "",
			queryData: {
				bdcdyh: "",
				bdcqzh: "",
				qlrmc: "",
				xmmc: "",
				zddm: "",
				zl: "",
				pageNo: 1,
				pageSize: 12,
				type:'add',
			},
			Data: [],
			dylxs: ["zd"],
			tableHeight: 0,
		};
	},
	created() {},
	mounted() {
		this.getData(this.queryData);
		this.$nextTick(() => {
			this.tableHeight =
				(document.documentElement.clientHeight ||
					document.body.clientHeight) - 396;
		});
	},
	methods: {
		currentChange: function(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: "",
				qlrmc: "",
				xmmc: "",
				zddm: "",
				zl: "",
				pageNo: 1,
				pageSize: 12
			};
			this.getData(this.queryData);
		},
		getData: function(data) {
            cxlzZrzList(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;
}
.search{
	
	background-color: #FFFFFF;
	box-sizing: border-box;
	padding: 18px 0 4px 0;
	border: 1px solid #E6E6E6;
	margin-bottom: 18px;
}
.el-button {
	width: 100px;
}
.tips{
	color: #9B9B9B;
	margin-left: 2px;
	margin-bottom: 10px;
}

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>