<template>
	<div class="temp">
		<el-row
			class="qlxzModule"
			v-for="(items, index) in countList"
			:key="items.id"
		>
			<el-col :span="2" class="btnCol">
				<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
				>
				<div
					:class="items.hasNotBorder ? 'itemShow whiteItem' : 'whiteItem'"
					v-if="items.isInside"
				></div>
			</el-col>
			<el-col :span="2" class="btnCol">
				<span class="qlxz">权利性质</span><br>
				<el-button
					type="primary"
					class="changeBtn"
					@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>土地使用起始时间<i class="requisite">*</i></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 pzytList"
								:key="item.dm"
								:label="item.mc"
								:value="item.dm"
							>
							</el-option>
						</el-select>
					</li>
					<li>
						<el-select class="formSelect percent30" v-model="items.sjyt">
							<el-option
								v-for="item in sjytList"
								:key="item.dm"
								:label="item.mc"
								:value="item.dm"
							>
							</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>年限<i class="requisite">*</i></li>
				</ul>
			</el-col>
			<el-col :span="3">
				<ul>
					<li>
						<input type="text" v-model="items.pzyt" class="formInput" />
					</li>
					<li>
						<input type="text" v-model="items.sjyt" 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>土地使用结束时间<i class="requisite">*</i></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 djList"
								: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 djList"
								: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>
import { getDdicByMC } from "../../api/common";
export default {
	props: {
		widtd: {
			type: String,
			default: "70%",
		},
		title: {
			type: String,
			default: "",
		},
		topHeight: {
			type: String,
			default: "15vh",
		},
	},
	data() {
		return {
			pzytList:[],
			sjytList:[],
			djList:[],
			countList: [
				{
					id: Math.random(),
					isInside: false,
					hasNotBorder: false,
					qlxz: "",
					pzyt: "",
					sjyt: "",
					tdsyqssj: "",
					dlbm: "",
					dlbm2: "",
					nx: "",
					dj1: "",
					dj2: "",
					tdsyjssj: "",
				},
			],
		};
	},
	created(){
		this.getDicData()
	},
	methods: {
		//获取字典数据
		getDicData(){
			getDdicByMC("土地用途")
				.then((res) => {
					console.log(res.result);
					this.pzytList = res.result;
					this.sjytList = res.result;
				})
				.catch((error) => {});
			getDdicByMC("土地等级")
				.then((res) => {
					console.log(res.result);
					this.djList = res.result;
				})
				.catch((error) => {});
		},
		//外层操作
		handleClick(id, ind, type) {
			if (type === "add") {
				this.countList.push({
					id: Math.random(),
					isInside: false,
					hasNotBorder: 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);
					}
				});
			}
			this.hasBorderOrNot();
		},
		//内层操作
		handleInClick(obj, ind, type) {
			if (type === "add") {
				this.countList.splice(ind + 1, 0, {
					id: obj.id,
					childId: Math.random(),
					isInside: true,
					hasNotBorder: false,
					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);
				}
			}
			this.hasBorderOrNot();
		},
		//判断是否显示边框
		hasBorderOrNot() {
			this.countList.forEach((item, index) => {
				if (index == this.countList.length - 1) {
					item.hasNotBorder = true;
				} else {
					item.hasNotBorder = item.isInside && !this.countList[index + 1].isInside ? true : false;
				}
			});
		},
		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;
			position: relative;
			.qlxz {
				line-height: 34px;
			}
			ul {
				margin-top: 34px;
				li {
					height: 37px;
					line-height: 37px;
					text-decoration: none;
					border-bottom: 1px solid grey;
					.el-select{
						width: 100%;
					}
					.el-input{
						width: 100%;
					}
					.el-input__inner {
						height: 34px;
					}
				}
				li:last-child {
					border-bottom: none;
				}
			}
			.whiteItem {
				background-color: #fff;
				position: absolute;
				width: 100%;
				height: 2px;
				bottom: -1px;
				left: 0;
			}
			.itemShow {
				bottom: 2px;
			}
		}
		.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;
				}
			}
		}
	}
	.btnCol {
		position: relative;
		.changeBtn {
			width: 46px;
			height: 46px;
			font-size: 30px;
			padding: 4px 6px;
			position: absolute;
			top: 50%;
			left: 50%;
			margin-top: -38px;
			margin-left: -23px;
		}
		.el-button + .el-button {
			margin-left: -23px;
			margin-top: 16px;
		}
	}
	.el-row:nth-last-child(1) {
		border-bottom: none;
	}
}
</style>