<template>
	<div class="main">
		<SearchHead @getSearchCondition="getData"></SearchHead>
		<div class="dataGrid" ref="dataGrid">
			<el-table
				:data="tableData"
				:height="tableHeight"
				:row-class-name="tableRowClassName"
			>
				<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="handleClick(scope.row)" type="text" size="small"
							>办理</el-button
						>
						<el-button type="text" size="small">定位</el-button>
					</template>
				</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="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>
import SearchHead from "../../../components/searchHead/searchHead";
export default {
	name: "",
	components: { SearchHead },
	props: {},
	data() {
		return {
			formData: {
				user: "",
				region: "",
				type: [],
			},
			tableData: [
				{
					bdcdyh: "610101001001GB00001W",
					xmmc: "万科集团万科城",
					bdcqzh: "陕（2017）西安市不动产权第00000",
					lx: "宗地",
					qlr: "李子新",
					zl: "灞桥－田家湾-咸宁东路,近浐河西路",
					zrsj: "2020.09.07 ",
					cjr: "李子新",
				},
			],
			tableHeight: "",
		};
	},
	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);
		}
		this.tableHeight = this.$refs.dataGrid.offsetHeight - 68;
	},
	methods: {
		onSubmit() {},
		tableRowClassName({ row, rowIndex }) {
			if (rowIndex % 2 !== 0) {
				return "even-row";
			} else {
				return "";
			}
		},

		//获取子组件点击查询触发的事件
		getData(obj) {
			console.log(obj);
			//将obj作为参数调用接口查询表格数据
		},
		//点击办理
		handleClick(row) {
			let path = "";
			switch (row.lx) {
				case "自然幢":
					path = "/zrz";
					break;
				case "宗地":
					path = "/zd";
					break;
				default:
					break;
			}
			this.$router.push(path);
		},
	},
	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: 1;
		.pagination {
			padding: 18px 0;
		}
	}
}
</style>