<template>
	<div class="addCh">
		<el-table class="addChTable" :data="tableData" style="width: 100%" border>
			<el-table-column prop="cz" width="60" align="center">
				<template slot-scope="scope">
					<span class="cp" @click="handleRowClick(scope.row, scope.$index)">
						<i class="iconfont iconicon-test1" style="color:#FA6400;font-size:30px" @click="deleteYtInfo(index)"
							v-if="scope.row.cz == '+'"></i>
						<i class="iconfont iconicon-test" style="color:#FA6400;font-size:30px" @click="deleteYtInfo(index)"
							v-if="scope.row.cz == '-'"></i>
					</span>
				</template>
			</el-table-column>
			<el-table-column prop="zrzmc" label="自然幢" align="center">
			</el-table-column>
			<el-table-column prop="ljzmc" label="逻辑幢" align="center">
			</el-table-column>
			<el-table-column prop="zdymc" label="幢单元" align="center">
			</el-table-column>
			<el-table-column prop="qsc" label="起始层" align="center">
				<template slot-scope="scope">
					<el-input v-model="scope.row.qsc" type="number"></el-input>
				</template>
			</el-table-column>
			<el-table-column prop="jsc" label="结束层" align="center">
				<template slot-scope="scope">
					<el-input v-model="scope.row.jsc" type="number"></el-input>
				</template>
			</el-table-column>
			<el-table-column prop="hs" label="每层户数" align="center">
				<template slot-scope="scope">
					<el-input v-model="scope.row.hs" type="number"></el-input>
				</template>
			</el-table-column>
		</el-table>
	</div>
</template>

<script>
// import { insertChInfo } from "@api/lpb";
export default {
	name: "",
	components: {},
	props: {
		treeData: {},
		dialogVisible: {
			type: Boolean,
			default: false,
		},
		scyclx: {
			type: String,
			default: "1",
		},
	},
	data () {
		return {
			ljzBsm: null,
			zdyBsm: null,
			zrzBsm: null,
			tableData: [],
			formData: {
				cz: "+",
				ljzbsm: "",
				ljzmc: "",
				zdymc: "",
				zdybsm: "",
				zrzbsm: "",
				scyclx: "1",
				qsc: "",
				jsc: "",
				hs: "",
			},
		};
	},
	created () { },
	mounted () {
		console.log(this.treeData, "treeData");
	},
	methods: {
		//行操作
		handleRowClick (row, index) {
			if (row.cz == "+") {
				let temp = JSON.parse(JSON.stringify(this.formData));
				temp.qsc = '';
				temp.jsc = '';
				temp.hs = '';
				temp.cz = "-";
				this.tableData.push(temp);
			} else {
				this.tableData.splice(index, 1);
			}
		},
		onSave (bsm) {
			console.log(this.tableData)
			let totalHs = 0;
			for (let k = 0; k < this.tableData.length; k++) {
				if (this.tableData[k].qsc === "" || this.tableData[k].jsc === "" || this.tableData[k].hs === "") {
					this.$message.warning("表单不完整，请填写完整")
					return false
				}
				if (this.tableData[k].qsc - this.tableData[k].jsc > 0) {
					this.$message.warning("存在结束层大于起始层，请重写填写")
					return false
				}
				totalHs = totalHs + (this.tableData[k].jsc - this.tableData[k].qsc + 1) * this.tableData[k].hs;
			}
			if (totalHs >= 5000) {
				this.$message.warning("单次添加户数累积超过5000户，请分次添加！")
				return false
			}
			// insertChInfo(this.tableData).then((res) => {
			// 	if (res.code === 200) {
			// 		this.$message.success("保存成功");
			// 		//更新树结构数据
			// 		console.log(this);
			// 		this.$parent.$parent.getLpbMenuTree(bsm);
			// 		this.$parent.$parent.getlpbData();
			// 		//关闭弹框
			// 		this.$parent.$parent.closeDaialog();
			// 	} else {
			// 		this.$message({
			// 			message: res.message,
			// 			type: "warning",
			// 		})
			// 	}
			// });
		},
		//重置数据
		reset () {
			this.tableData[0].qsc = "";
			this.tableData[0].jsc = "";
			this.tableData[0].hs = "";
		},
	},
	computed: {},
	watch: {
		treeData: {
			handler (n) {
				this.formData = {
					cz: "+",
					ljzbsm: "",
					zdybsm: "",
					zrzbsm: "",
					scyclx: this.scyclx,
					qsc: "",
					jsc: "",
					hs: "",
				};
				//给自然幢，逻辑幢，幢单元的bsm和mc赋值
				switch (n.type) {
					case "zrz":
						this.formData.zrzbsm = n.bsm;
						this.formData.zrzmc = n.mc;
						break;
					case "ljz":
						this.formData.zrzbsm = n.zrzbsm;
						this.formData.ljzbsm = n.bsm;
						this.formData.zrzmc = n.zrzmc;
						this.formData.ljzmc = n.mc;
						break;
					case "zdy":
						this.formData.zrzbsm = n.zrzbsm;
						this.formData.ljzbsm = n.ljzbsm;
						this.formData.zdybsm = n.bsm;
						this.formData.zrzmc = n.zrzmc;
						this.formData.ljzmc = n.ljzmc;
						this.formData.zdymc = n.mc;
						break;
					default:
						break;
				}
				this.tableData = [];
				this.tableData.push(this.formData);
			},
			//深度监听，第一次接收到父组件传值就触发事件
			immediate: true,
			deep: true,
		},
		scyclx: {
			handler (n) {
				this.$nextTick(() => {
					this.formData.scyclx = this.scyclx;
				})
			}
		}
	},
};
</script>
<style lang="scss">
.addCh {
	.addChTable {
		.el-input__inner {
			height: 20px;
			margin: 0;
			line-height: 20px;
			outline: none;
			border: none;
			color: #606764;
			overflow: visible;
			cursor: text;
			text-align: center;
		}
	}

	.cp {
		cursor: pointer;
		position: relative;
		top: 4px;
	}

	.el-table .cell {
		line-height: 34px;
	}

	.el-table .cell,
	.el-table--border td:first-child .cell,
	.el-table--border th:first-child .cell {
		padding-left: 5px;
	}

	.el-table td,
	.el-table th {
		padding: 4px 0;
	}
}
</style>