<template>
	<div class="temp">
		<el-row
			class="qlxzModule"
			v-for="(items, index) in countList"
			:key="items.id"
		>
			<el-col :span="2">
				<el-button
					v-if="!items.isInside"
					type="primary"
					class="changeBtn"
					@click="handleClick(items.id, index, 'add')"
					>+</el-button
				>
				<el-button
					v-if="!items.isInside"
					type="primary"
					class="changeBtn"
					@click="handleClick(items.id, index, 'minus')"
					>-</el-button
				>
			</el-col>
			<el-col :span="2">
				<span class="qlxz">权利性质</span>
				<el-button
					type="primary"
					class="changeBtn mt6"
					@click="handleInClick(items, index, 'add')"
					>+</el-button
				>
				<el-button
					type="primary"
					class="changeBtn"
					@click="handleInClick(items, index, 'minus')"
					>-</el-button
				>
			</el-col>
			<el-col :span="3">
				<ul>
					<li>批准用途</li>
					<li>实际用途</li>
					<li>土地使用起始时间</li>
				</ul>
			</el-col>
			<el-col :span="4">
				<ul>
					<li>
						<el-select class="formSelect percent30" v-model="items.pzyt">
							<el-option
								v-for="item in compareList"
								:key="item.value"
								:label="item.label"
								:value="item.value"
							>
							</el-option>
						</el-select>
					</li>
					<li>
						<el-select class="formSelect percent30" v-model="items.sjyt">
							<el-option
								v-for="item in compareList"
								:key="item.value"
								:label="item.label"
								:value="item.value"
							>
							</el-option>
						</el-select>
					</li>
					<li>
						<el-date-picker
							v-model="items.tdsyqssj"
							type="date"
							placeholder="选择日期"
						>
						</el-date-picker>
					</li>
				</ul>
			</el-col>
			<el-col :span="3">
				<ul>
					<li>地类编码</li>
					<li>地类编码</li>
					<li>年限</li>
				</ul>
			</el-col>
			<el-col :span="3">
				<ul>
					<li>
						<input type="text" v-model="items.dlbm" class="formInput" />
					</li>
					<li>
						<input type="text" v-model="items.dlbm2" class="formInput" />
					</li>
					<li>
						<input type="text" v-model="items.nx" class="formInput" />
					</li>
				</ul>
			</el-col>
			<el-col :span="3">
				<ul>
					<li>等级</li>
					<li>等级</li>
					<li>土地使用结束时间</li>
				</ul>
			</el-col>
			<el-col :span="4">
				<ul>
					<li>
						<el-select class="formSelect percent30" v-model="items.dj1">
							<el-option
								v-for="item in compareList"
								:key="item.value"
								:label="item.label"
								:value="item.value"
							>
							</el-option>
						</el-select>
					</li>
					<li>
						<el-select class="formSelect percent30" v-model="items.dj2">
							<el-option
								v-for="item in compareList"
								:key="item.value"
								:label="item.label"
								:value="item.value"
							>
							</el-option>
						</el-select>
					</li>
					<li>
						<el-date-picker
							v-model="items.tdsyjssj"
							type="date"
							placeholder="选择日期"
						>
						</el-date-picker>
					</li>
				</ul>
			</el-col>
			<div class="title">
				<el-select class="formSelect" v-model="items.qlxz">
					<el-option
						v-for="item in compareList"
						:key="item.value"
						:label="item.label"
						:value="item.value"
					>
					</el-option>
				</el-select>
			</div>
		</el-row>
	</div>
</template>

<script>
export default {
	props: {
		widtd: {
			type: String,
			default: "70%",
		},
		title: {
			type: String,
			default: "",
		},
		topHeight: {
			type: String,
			default: "15vh",
		},
	},
	data() {
		return {
			compareList: [
				{ label: "=", value: "=" },
				{ label: "<=", value: "<=" },
				{ label: ">=", value: ">=" },
			],
			countList: [
				{
					id: Math.random(),
					isInside: false,
					qlxz: "",
					pzyt: "",
					sjyt: "",
					tdsyqssj: "",
					dlbm: "",
					dlbm2: "",
					nx: "",
					dj1: "",
					dj2: "",
					tdsyjssj: "",
				},
			],
		};
	},
	methods: {
		//外层操作
		handleClick(id, ind, type) {
			if (type === "add") {
				this.countList.splice(ind + 1, 0, {
					id: Math.random(),
					isInside: false,
					qlxz: "",
					pzyt: "",
					sjyt: "",
					tdsyqssj: "",
					dlbm: "",
					dlbm2: "",
					nx: "",
					dj1: "",
					dj2: "",
					tdsyjssj: "",
				});
			} else {
				this.countList.forEach((item, index) => {
					if (item.id == id && this.countList.length > 1) {
						this.countList.splice(index, 1);
					}
				});
			}
		},
		//内层操作
		handleInClick(obj, ind, type) {
			if (type === "add") {
				this.countList.splice(ind + 1, 0, {
					id: obj.id,
					childId: Math.random(),
					isInside: true,
					qlxz: "",
					pzyt: "",
					sjyt: "",
					tdsyqssj: "",
					dlbm: "",
					dlbm2: "",
					nx: "",
					dj1: "",
					dj2: "",
					tdsyjssj: "",
				});
			} else {
				if (obj.childId) {
					this.countList.forEach((item, index) => {
						if (item.childId == obj.childId && this.countList.length > 1) {
							this.countList.splice(index, 1);
						}
					});
				} else {
					let tempNum = 0;
					let tempIndex = 0;
					this.countList.forEach((item, index) => {
						if (item.id == obj.id && this.countList.length > 1) {
							tempIndex = tempNum == 0 ? index : tempIndex;
							tempNum++;
						}
					});
					this.countList.splice(tempIndex,tempNum)
				}
			}
		},
		getQlxzDataList(){
			return this.countList
		}
	},
};
</script>
<style lang="less">
.temp {
	width: 100%;
	.qlxzModule {
		height: 148px;
		position: relative;
		border-bottom: 1px solid grey;
		.el-col {
			height: 100%;
			border-right: 1px solid grey;
			.qlxz {
				line-height: 34px;
			}
			.mt6 {
				margin-top: 6px;
			}
			ul {
				margin-top: 34px;
				li {
					height: 37px;
					line-height: 37px;
					text-decoration: none;
					border-bottom: 1px solid grey;
					.el-input__inner {
						height: 34px;
						width: 164px;
					}
				}
				li:last-child {
					border-bottom: none;
				}
			}
		}
		.el-col:nth-last-child(2) {
			border-right: none;
		}
		.title {
			width: 83.33333%;
			height: 34px;
			line-height: 34px;
			background-color: #fff;
			border-bottom: 1px solid grey;
			position: absolute;
			right: 0;
			top: 0;
			.formSelect {
				top: -1px;
				width: 100%;
				.el-input__inner {
					height: 34px;
				}
			}
		}
		.changeBtn {
			width: 46px;
			height: 46px;
			margin-top: 40px;
			font-size: 30px;
			padding: 6px 4px;
		}
		.el-button + .el-button {
			margin-top: 10px;
			margin-left: 0;
		}
	}
	.qlxzModule:nth-last-child(1) {
		border-bottom: none;
	}
}
</style>