<template>
	<div class="main">
		<el-form :inline="true" :model="formData" class="demo-form-inline">
			<el-form-item label="宗地编码">
				<el-input v-model="formData.user" placeholder="输入宗地编码"></el-input>
			</el-form-item>
			<el-form-item label="坐落">
				<el-input v-model="formData.user" placeholder="输入坐落地址"></el-input>
			</el-form-item>
			<el-form-item label="不动产单元号">
				<el-input
					v-model="formData.user"
					placeholder="输入不动产单元号"
				></el-input>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="onSubmit">查询</el-button>
				<el-button type="warning" @click="onSubmit">重置</el-button>
				<el-button type="primary" class="moreSearchBtn" @click="onSubmit"
					>更多查询</el-button
				>
			</el-form-item>
			<el-form-item class="db" label="查询范围">
				<el-checkbox-group v-model="formData.type">
					<el-checkbox label="宗地" name="type"></el-checkbox>
					<el-checkbox label="自然幢" name="type"></el-checkbox>
					<el-checkbox label="户" name="type"></el-checkbox>
					<el-checkbox label="构筑物" name="type"></el-checkbox>
					<el-checkbox label="林权" name="type"></el-checkbox>
					<el-checkbox label="宗海" name="type"></el-checkbox>
				</el-checkbox-group>
			</el-form-item>
		</el-form>
		<div class="dataGrid">
			<el-table :data="tableData" :row-class-name="tableRowClassName">
				<el-table-column type="index" width="80" align="center" label="序号">
				</el-table-column>
				<el-table-column prop="bdcdyh" align="left" label="不动产单元号">
				</el-table-column>
				<el-table-column prop="xmmc" align="left" label="项目名称">
				</el-table-column>
				<el-table-column prop="bdcqzh" align="left" label="不动产权证号">
				</el-table-column>
				<el-table-column prop="lx" align="left" width="120" label="类型">
				</el-table-column>
				<el-table-column prop="qlr" align="left" width="120" label="权利人">
				</el-table-column>
				<el-table-column prop="zl" align="left" label="坐落"> </el-table-column>
				<el-table-column prop="zrsj" align="left" width="120" label="转入时间">
				</el-table-column>
				<el-table-column prop="cjr" align="left" width="120" label="创建人">
				</el-table-column>
			</el-table>
			<div class="pagination">
				<el-pagination background layout="prev, pager, next" :total="1000">
				</el-pagination>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	name: "",
	components: {},
	props: {},
	data() {
		return {
			formData: {
				user: "",
				region: "",
				type: [],
			},
			tableData: [
				{
					bdcdyh: "610101001001GB00001W",
					xmmc: "万科集团万科城",
					bdcqzh: "陕（2017）西安市不动产权第00000",
					lx: "宗地",
					qlr: "李子新",
					zl: "灞桥－田家湾-咸宁东路,近浐河西路",
					zrsj: "2020.09.07 ",
					cjr: "李子新",
				},
			],
		};
	},
	created() {},
	mounted() {
		for (let i = 0; i < 11; i++) {
			let obj = {
				bdcdyh: "610101001001GB00001W",
				xmmc: "万科集团万科城",
				bdcqzh: "陕（2017）西安市不动产权第00000",
				lx: "宗地",
				qlr: "李子新",
				zl: "灞桥－田家湾-咸宁东路,近浐河西路",
				zrsj: "2020.09.07 ",
				cjr: "李子新",
			};
			this.tableData.push(obj);
		}
	},
	methods: {
		onSubmit() {},
		tableRowClassName({ row, rowIndex }) {
			if (rowIndex % 2 !== 0) {
				return "even-row";
			} else {
				return "";
			}
		},
	},
	computed: {},
	watch: {},
};
</script>
<style scoped lang="less">
.main {
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	padding: 0 18px;
	display: flex;
  flex-direction: column;
  background-color: #FCFDFF;
	.demo-form-inline {
		margin-top: 18px;
		.moreSearchBtn {
			background-color: #1ad6e1;
			border-color: #1ad6e1;
		}
		.moreSearchBtn:focus,
		.moreSearchBtn:hover {
			background-color: rgba(28, 200, 229, 0.6);
		}
	}
	.dataGrid {
		flex: auto;
		.pagination {
			padding: 18px 0;
		}
	}
}
</style>