<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 addMinus outAdd"
						@click="handleClick(index, 'add')">+</el-button>
					<el-button v-show="childIndex < 1" type="primary" class="changeBtn addMinus outMinus"
						@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 addMinus inAdd" @click="handleInClick(index, childIndex, 'add')">+
					</el-button>
					<el-button type="primary" class="changeBtn addMinus inMinus"
						@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-tree v-if="show" :default-expand-all="defaultExpandAll" :multiple="multiple"
								:placeholder="placeholder" :disabled="disabled" :data="$store.state.tdytList" :props="treeProps"
								:check-strictly="checkStrictly" :clearable="clearable" v-model="childItem.pzytdm"></el-select-tree>
						</li>
						<li>
							<el-select-tree v-if="show" :default-expand-all="defaultExpandAll" :multiple="multiple"
								:placeholder="placeholder" :disabled="disabled" :data="$store.state.tdytList" :props="treeProps"
								:check-strictly="checkStrictly" :clearable="clearable" v-model="childItem.sjytdm"></el-select-tree>
						</li>
						<li>
							<el-date-picker v-model="childItem.tdsyqssj" :picker-options="childItem.pickerStart" type="date"
								value-format="yyyy-MM-dd" placeholder="选择日期" @input="startTime(index, childIndex)">
							</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" style="top: -1px;" v-model="childItem.pzytdm" class="formInput" />
						</li>
						<li>
							<input type="text" v-model="childItem.sjytdm" class="formInput" />
						</li>
						<li>
							<el-date-picker v-model="childItem.tdsyjssj" type="date" value-format="yyyy-MM-dd"
								:picker-options="childItem.pickerEnd" placeholder="选择日期" @input="endTime(index, childIndex)">
							</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%",
			,
					a () {
	return {
		//树型结构
		how: true,
			arable: true,
			aultExpandAll: true,
			tiple: false,
			ceholder: "请选择",
			abled: false,
			ckStrictly: true,
			eProps: {
			lue: "dm",
			ildren: "children",
			bel: "mc",
			
						ntList: [
			
			id: Math.random(),
				isInside: false,
				hasNotBorder: false,
			bsm: "", //权利性质标识码
			lbsm: "", //宗地BSM、自然幢BSM、户BSM、多幢BSM、宗海BSM
			lxzdm: "",
			zhqlxzlx: "", //除宗海数据外，默认都是空；0:用海类型权利性质;2:海岛用途权利性质
				list: [
					{
					pzdjbsm: "",
						pzdjmc: "",
						pzytdm: "",
					pzytmc: "",
				pzytmj: 0,
				qlxzbsm: "",
					sjdjbsm: "",
					sjdjmc: "",
				sjytdm: "",
				sjytmc: "",
				jytmj: 0,
				syqx: "",
				tdsyjssj: "",
				tdsyqssj: "",
					pickerStart: {},
					pickerEnd: {},
				tdzh: "",
			},
				
			
			
			Num: 0,
		
		
			ed () { },
		hods: {
		外层操作
		ndleClick (ind, type) {
			 outsideObj = {
				Math.random(),
			Inside: false,
			sNotBorder: false,
				 "", //权利性质标识码
			bsm: "", //宗地BSM、自然幢BSM、户BSM、多幢BSM、宗海BSM
			xzdm: "",
		zhqlxzlx: "", //除宗海数据外，默认都是空；0:用海类型权利性质;2:海岛用途权利性质
		list: [
			{
			pzdjbsm: "",
			pzdjmc: "",
			pzytdm: "",
			pzytmc: "",
			pzytmj: 0,
			qlxzbsm: "",
				sjdjbsm: "",
				sjdjmc: "",
				sjytdm: "",
			sjytmc: "",
			sjytmj: 0,
						syqx: "",
			tdsyjssj: "",
						tdsyqssj: "",
			tdzh: "",
				
			
			};
			(type === "add") {
			is.countList.push(outsideObj);
			is.outNum++;
			lse {
				.countList.forEach((item, index) => {
			f (index == ind && this.countList.length > 1) {
			this.countList.splice(index, 1);
			}
		});
		this.outNum--;
										
					Click (index, childIndex, type) {
						eObj = {
							",
							,
						"",
						"",
					: 0,
					m: "",
					m: "",
						"",
					: "",
					: "",
					: 0,
					"",
				jssj: "",
					sj: "",
				: "",
										e === "add") {
					ountList[index].list.splice(childIndex + 1, 0, insideObj);
						
					ountList[index].list.forEach((item, childInd) => {
				(childIndex == childInd && this.countList[index].list.length > 1) {
			this.countList[index].list.splice(childIndex, 1);
			}
		});
		
			s.hasBorderOrNot();
						是否显示边框
			orderOrNot () {
			s.countList.forEach((item, index) => {
			 (index == this.countList.length - 1) {
				m.hasNotBorder = true;
					 {
						sNotBorder =
						sInside && !this.countList[index + 1].isInside ? true : false;
																									aList () {
					this.countList;
							时间判断
			tTime (index, childIndex) {
				tartTime = this.countList[index].list[childIndex].tdsyqssj;
			 endTime = this.countList[index].list[childIndex].tdsyjssj;
			s.countList[index].list[childIndex].pickerEnd = {
				bledDate: (time) => {
			f (Object.keys(startTime).length > 0) {
			return new Date(startTime).getTime() > time.getTime();
				lse {
					rn time.getTime() < Date.now();
																									t.keys(startTime).length > 0 && Object.keys(endTime).length > 0) {
							ear = new Date(startTime).getFullYear();
						ear = new Date(endTime).getFullYear();
												ime (index, childIndex, e) {
		onsole.log(e, 'eeeeee');
		let startTime = this.countList[index].list[childIndex].tdsyqssj;
			let endTime = this.countList[index].list[childIndex].tdsyjssj;
			this.countList[index].list[childIndex].pickerStart = {
				disabledDate: (time) => {
					if (Object.keys(endTime).length > 0) {
						return new Date(endTime).getTime() < time.getTime();
					} else {
						return time.getTime() > Date.now();
					}
				}
			}
			if (Object.keys(startTime).length > 0 && Object.keys(endTime).length > 0) {
				let startYear = new Date(startTime).getFullYear();
				let endYear = new Date(endTime).getFullYear();
			}
		},
	},
};
</script>
<style lang="scss">
.temp {
	width: 100%;

	.qlxzModule {
		height: auto;
		position: relative;
		border-bottom: 1px solid #e6e6e6;

		.el-col {
			// height: 100%;
			border-right: 1px solid #E6E6E6;
			position: relative;
			text-align: right;
			padding-right: 10px;

			.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;
					}

					input {
						position: relative;
						top: -2px;
						height: 35px;
						width: calc(100% - 1px) !important;
					}
				}

				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 #E6E6E6;

			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 #E6E6E6;
			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;
	}

	/deep/.el-select-tree {
		width: 100%;

		.el-input__inner {
			height: 30px !important;
		}
	}
}
</style>