<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="less">
.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>