<template>
	<div class="addCh">
		<el-table class="addChTable" :data="tableData" style="width: 100%" border>
			<el-table-column prop="cz" width="40" align="center">
				<template slot-scope="scope">
					<span class="cp" @click="handleRowClick(scope.row, scope.$index)">{{
						scope.row.cz
					}}</span>
				</template>
			</el-table-column>
			<el-table-column prop="zrzmc" label="自然幢" align="center">
				<!-- <template slot-scope="scope">
					<el-input size="small" v-model="scope.row.ljzbsm"></el-input>
				</template> -->
			</el-table-column>
			<el-table-column prop="ljzmc" label="逻辑幢" align="center">
				<!-- <template slot-scope="scope">
					<el-input size="small" v-model="scope.row.ljzbsm"></el-input>
				</template> -->
			</el-table-column>
			<el-table-column prop="zdymc" label="幢单元" align="center">
				<!-- <template slot-scope="scope">
					<el-input size="small" v-model="scope.row.zdybsm"></el-input>
				</template> -->
			</el-table-column>
			<el-table-column prop="qsc" label="起始层" align="center">
				<template slot-scope="scope">
					<el-input size="small" v-model="scope.row.qsc"></el-input>
				</template>
			</el-table-column>
			<el-table-column prop="jsc" label="结束层" align="center">
				<template slot-scope="scope">
					<el-input size="small" v-model="scope.row.jsc"></el-input>
				</template>
			</el-table-column>
			<el-table-column prop="mchs" label="每层户数" align="center">
				<template slot-scope="scope">
					<el-input size="small" v-model="scope.row.mchs"></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,
		},
	},
	data() {
		return {
			ljzBsm: null,
			zdyBsm: null,
			zrzBsm: null,
			tableData: [],
			formData: {
				cz: "+",
                ljzbsm: "",
                ljzmc:"",
                zdymc:"",
				zdybsm: "",
				zrzbsm: "",
				syclx: "0",
				qsc: "",
				jsc: "",
				hs: "",
			},
		};
	},
	created() {},
	mounted() {
		console.log(this.treeData, "treeData");
	},
	methods: {
		//行操作
		handleRowClick(row, index) {
			console.log(this.tableData, "this.tableData");
			console.log(this.formData, "this.formData");
			console.log(index);
			if (row.cz == "+") {
				let temp = JSON.parse(JSON.stringify(this.formData));
				temp.cz = "-";
				this.tableData.push(temp);
			} else {
				this.tableData.splice(index, 1);
			}
		},
		onSave(bsm) {
			insertChInfo(this.tableData).then((res) => {
				if (res.code === 200) {
					this.$message.success("保存成功");
					//更新树结构数据
					console.log(this);
					this.$parent.$parent.getLpbMenuTree(bsm);
					//关闭弹框
					this.$parent.$parent.closeDaialog();
				}
			});
		},
		//重置数据
		reset() {
			this.tableData = [
				{
					cz: "+",
					ljzbsm: "",
					zdybsm: "",
					qsc: "",
					jsc: "",
					mchs: "",
				},
			];
		},
	},
	computed: {},
	watch: {
		treeData: {
			handler(n) {
				this.formData = {
					cz: "+",
					ljzbsm: "",
					zdybsm: "",
					zrzbsm: "",
					syclx: "0",
					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,
		},
		// dialogVisible(n){
		//     this.tableData = [];
		//     if(n){
		//         this.tableData.push(this.formData);
		//     }
		// }
	},
};
</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;
	}
}
</style>