<template>
	<div class="temp">
		<el-row
			class="qlxzModule"
			v-for="(items, index) in countList"
			:key="items.id"
		>
			<template v-for="(childItem,childIndex) in items.list" >
				<el-col :span="2" class="btnCol" :key="childIndex+'1'" :class="childIndex>0 ? 'childYT noTopBorder':''">
					<el-button
						v-show="childIndex<1"
						type="primary"
						class="changeBtn"
						@click="handleClick( index, 'add')"
						>+</el-button
					>
					<el-button
						v-show="childIndex<1"
						type="primary"
						class="changeBtn"
						@click="handleClick( index, 'minus')"
						>-</el-button
					>
					<div
						:class="items.hasNotBorder ? 'itemShow whiteItem' : 'whiteItem'"
						v-if="items.isInside"
					></div>
				</el-col>
				<el-col :span="2" class="btnCol" :key="childIndex+'8'" :class="childIndex>0 ? 'childYT':''">
					<!-- <template v-if="childIndex>0"> -->
						<span class="qlxz"  v-show="childIndex<1">权利性质</span><br>
						<el-button
							type="primary"
							class="changeBtn"
							@click="handleInClick(index, childIndex, 'add')"
							>+</el-button
						>
						<el-button
							type="primary"
							class="changeBtn"
							@click="handleInClick(index, childIndex, 'minus')"
							>-</el-button
						>
					 <!-- </template> -->
				</el-col>
				<el-col :span="5" :key="childIndex+'7'" :class="childIndex>0 ? 'childYT':''">
					<ul>
						<li>批准用途</li>
						<li>实际用途</li>
						<li>土地使用起始时间<i class="requisite">*</i></li>
					</ul>
				</el-col>
				<el-col :span="5" :key="childIndex+'6'" :class="childIndex>0 ? 'childYT':''">
					<ul>
						<li>
							<el-select class="formSelect percent30" v-model="childItem.pzytdm">
								<el-option
									v-for="item in $store.state.tdytList"
									:key="item.dm"
									:label="item.mc"
									:value="item.dm"
								>
								</el-option>
							</el-select>
						</li>
						<li>
							<el-select class="formSelect percent30" v-model="childItem.sjytdm">
								<el-option
									v-for="item in $store.state.tdytList"
									:key="item.dm"
									:label="item.mc"
									:value="item.dm"
								>
								</el-option>
							</el-select>
						</li>
						<li>
							<el-date-picker
								v-model="childItem.tdsyqssj"
								type="date"
								value-format="yyyy-MM-dd"
								placeholder="选择日期"
							>
							</el-date-picker>
						</li>
					</ul>
				</el-col>
				<el-col :span="5" :key="childIndex+'5'" :class="childIndex>0 ? 'childYT':''">
					<ul>
						<li>地类编码</li>
						<li>地类编码</li>
						<li>土地使用结束时间<i class="requisite">*</i></li>
					</ul>
				</el-col>
				<el-col :span="5" :key="childIndex+'4'" :class="childIndex>0 ? 'childYT':''">
					<ul>
						<li>
							<input type="text" placeholder="请输入" v-model="childItem.pzytdm" class="formInput" />
						</li>
						<li>
							<input type="text" placeholder="请输入" v-model="childItem.sjytdm" class="formInput" />
						</li>
						<li>
							<el-date-picker
									v-model="childItem.tdsyjssj"
									type="date"
									value-format="yyyy-MM-dd"
									placeholder="选择日期"
							>
							</el-date-picker>
						</li>
					</ul>
				</el-col>
			</template>
			
			<div class="title">
				<el-select class="formSelect" v-model="items.qlxzdm">
					<el-option
						v-for="item in $store.state.qlxzList"
						:key="item.dm"
						:label="item.mc"
						:value="item.dm"
					>
					</el-option>
				</el-select>
			</div>
		</el-row>
	</div>
</template>

<script>
import { getDdicByMC } from "../../api/common";
export default {
	props: {
		// widtd: {
		// 	type: String,
		// 	default: "70%",
		// },
	},
	data() {
		return {
			countList: [
				{
					id: Math.random(),
					isInside: false,
					hasNotBorder: false,
					"bsm": "",//权利性质标识码 
					"glbsm": "",//宗地BSM、自然幢BSM、户BSM、多幢BSM、宗海BSM 
					"qlxzdm": "",
					"zhqlxzlx": "", //除宗海数据外，默认都是空；0:用海类型权利性质;2:海岛用途权利性质
					list:[
						{
							"pzdjbsm": "",
							"pzdjmc": "",
							"pzytdm": "",
							"pzytmc": "",
							"pzytmj": 0,
							"qlxzbsm": "",
							"sjdjbsm": "",
							"sjdjmc": "",
							"sjytdm": "",
							"sjytmc": "",
							"sjytmj": 0,
							"syqx": "",
							"tdsyjssj": "",
							"tdsyqssj": "",
							"tdzh": ""
						}
					]
				},
			],
			outNum:0
		};
	},
	created(){
	},
	methods: {
		//外层操作
		handleClick( ind, type) {
			let outsideObj = {
				id: Math.random(),
				isInside: false,
				hasNotBorder: false,
				"bsm": "",//权利性质标识码 
				"glbsm": "",//宗地BSM、自然幢BSM、户BSM、多幢BSM、宗海BSM 
				"qlxzdm": "",
				"zhqlxzlx": "", //除宗海数据外，默认都是空；0:用海类型权利性质;2:海岛用途权利性质
				list:[
					{
						"pzdjbsm": "",
						"pzdjmc": "",
						"pzytdm": "",
						"pzytmc": "",
						"pzytmj": 0,
						"qlxzbsm": "",
						"sjdjbsm": "",
						"sjdjmc": "",
						"sjytdm": "",
						"sjytmc": "",
						"sjytmj": 0,
						"syqx": "",
						"tdsyjssj": "",
						"tdsyqssj": "",
						"tdzh": ""
					}
				]
			};
			if (type === "add") {
				this.countList.push(outsideObj);
				this.outNum++
			} else {
				this.countList.forEach((item, index) => {
					if (index == ind && this.countList.length > 1) {
						this.countList.splice(index, 1);
					}
				});
				this.outNum--
			}
		},
		//内层操作
		handleInClick(index, childIndex, type) {
			let insideObj = {
							"pzdjbsm": "",
							"pzdjmc": "",
							"pzytdm": "",
							"pzytmc": "",
							"pzytmj": 0,
							"qlxzbsm": "",
							"sjdjbsm": "",
							"sjdjmc": "",
							"sjytdm": "",
							"sjytmc": "",
							"sjytmj": 0,
							"syqx": "",
							"tdsyjssj": "",
							"tdsyqssj": "",
							"tdzh": ""
			};
			if (type === "add") {
				this.countList[index].list.splice(childIndex + 1, 0, insideObj);
			} else {
				this.countList[index].list.forEach((item, childInd) => {
					if (childIndex == childInd && this.countList[index].list.length > 1) {
						this.countList[index].list.splice(childIndex, 1);
					}
				});
			}
			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: auto;
		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 #E6E6E6;
					.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;
			}
		}
		.childYT{
			height: 114px;
			border-top: 1px solid grey;
			ul {
				margin-top: 0;
				li{
					.el-input__inner {
						height: 29px;
					}
				}
			}
			.changeBtn {
				margin-top: -48px;
			}
			.el-button + .el-button {
				margin-top: 4px;
			}
		}
		.noTopBorder{
			border-top: 0;
		}
		.noRightBorder{
			border-right: 0;
		}
		.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: 32px;
				}
			}
		}
	}
	.btnCol {
		position: relative;
		height: 146px;
		.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>