<template>
	<div class="h content-form">
		<el-form ref="form" :model="form" label-width="160px">
			<table
				border="1"
				width="100%"
				cellspacing="0"
				cellpadding="0"
				class="hTable"
			>
				<tbody>
					<tr height="30">
						<td colspan="12" align="center">
							<font size="4">逻辑幢基本信息</font>
						</td>
					</tr>
					<tr height="30">
						<td colspan="2" align="center">逻辑幢号</td>
						<td colspan="4">
							<el-input v-model="form.ljzh"></el-input>
						</td>
						<td colspan="2" align="center">自然幢号</td>
						<td colspan="4">
							<el-input v-model="form.zrzh" maxlength="24" disabled></el-input>
						</td>
					</tr>
					<tr height="30">
						<td colspan="2" align="center">逻辑幢名称</td>
						<td colspan="4">
							<el-input v-model="form.ljzmc"></el-input>
						</td>
						<td colspan="2" align="center">建筑物状态</td>
						<td colspan="4">
							<el-input v-model="form.jzwzt"></el-input>
						</td>
					</tr>

					<tr height="30">
						<td colspan="2" align="center">门牌号</td>
						<td colspan="4">
							<el-input v-model="form.mph"></el-input>
						</td>
						<td colspan="2" align="center">竣工日期</td>
						<td colspan="4">
							<el-date-picker
								v-model="form.jgrq"
								type="date"
								value-format="yyyy-MM-dd"
								placeholder="选择日期"
							>
							</el-date-picker>
						</td>
					</tr>

					<tr height="30">
						<td colspan="2" align="center">预测建筑面积(㎡)</td>
						<td colspan="4">
							<el-input v-model="form.ycjzmj" maxlength="8"></el-input>
						</td>
						<td colspan="2" align="center">实测建筑面积(㎡)</td>
						<td colspan="4">
							<el-input v-model="form.scjzmj" maxlength="8"></el-input>
						</td>
					</tr>

					<tr height="30">
						<td colspan="2" align="center">预测地下面积(㎡)</td>
						<td colspan="4">
							<el-input v-model="form.ycdxmj" maxlength="8"></el-input>
						</td>
						<td colspan="2" align="center">实测地下面积(㎡)</td>
						<td colspan="4">
							<el-input v-model="form.scdxmj" maxlength="8"></el-input>
						</td>
					</tr>

					<tr height="30">
						<td colspan="2" align="center">预测其他面积(㎡)</td>
						<td colspan="4">
							<el-input v-model="form.ycqtmj" maxlength="8"></el-input>
						</td>
						<td colspan="2" align="center">实测其他面积(㎡)</td>
						<td colspan="4">
							<el-input v-model="form.scqymj" maxlength="8"></el-input>
						</td>
					</tr>

					<tr
						height="30"
						v-for="(item1, index) in form.ytList"
						:key="'yt' + index"
					>
						<td
							colspan="2"
							v-if="index === 0"
							:rowspan="ytTitleRowspan"
							align="center"
						>
							<i class="iconfont iconicon-test1" style="margin-right: 8px;color:#66b1ff;font-size:30px" @click="addYtInfo"></i>
							<span>用途</span>
						</td>
						<td colspan="1" align="center">
							<i class="iconfont iconicon-test" style="color:#FA6400;font-size:30px" @click="deleteYtInfo(index)"></i>
						</td>
						<td colspan="9">
							<el-select-tree  style="width:100%"
											 ref="yt"
											 v-if="show"
											 :default-expand-all="defaultExpandAll"
											 :multiple="multiple"
											 :placeholder="placeholder"
											 :data="$store.state.fwytList"
											 :props="treeProps"
											 :check-strictly="checkStrictly"
											 :clearable="clearable"
											 v-model="item1.fwytzdbsm"
							></el-select-tree>
						</td>
					</tr>

					<tr
						height="30"
						v-for="(item1, index) in form.fwjgList"
						:key="'jg' + index"
					>
						<td
							colspan="2"
							v-if="index === 0"
							:rowspan="fwjgTitleRowspan"
							align="center"
						>
							<i class="iconfont iconicon-test1" style="margin-right: 8px;color:#66b1ff;font-size:30px" @click="addFwjgInfo"></i>
							<span>房屋结构</span>
						</td>
						<td colspan="1" align="center">
							<i class="iconfont iconicon-test" style="color:#FA6400;font-size:30px" @click="deleteFwjgInfo(index)"></i>
						</td>
						<td colspan="9">
							<el-select-tree  style="width:100%"
											 ref="yt"
											 v-if="show"
											 :default-expand-all="defaultExpandAll"
											 :multiple="multiple"
											 :placeholder="placeholder"
											 :data="$store.state.jgOptions"
											 :props="treeProps"
											 :check-strictly="checkStrictly"
											 :clearable="clearable"
											 v-model="item1.fwjgzdbsm"
							></el-select-tree>
						</td>
					</tr>

					<tr height="30">
						<td colspan="2" align="center">地下层数</td>
						<td colspan="4">
							<el-input v-model="form.dxcs"></el-input>
						</td>
						<td colspan="2" align="center">地上层数</td>
						<td colspan="4">
							<el-input v-model="form.dscs"></el-input>
						</td>
					</tr>

					<tr height="30">
						<td colspan="2" align="center">总层数</td>
						<td colspan="10">
							<el-input v-model="form.zcs"></el-input>
						</td>
					</tr>

					<tr height="30">
						<td colspan="2" rowspan="2" align="center">
							<span>备注</span>
						</td>
						<td colspan="10" rowspan="2">
							<el-input v-model="form.bz" type="textarea"></el-input>
						</td>
					</tr>
					<tr height="30"></tr>
				</tbody>
			</table>
		</el-form>
	</div>
</template>

<script>
import { insertLjzInfo } from "@api/lpb";
import { getQjLjzDetailById,updateQjLjz } from "@api/ljz";
import { formdate } from "@libs/function";
export default {
	name: "ljz",
	components: {},
	props: {
		ljzbsm:{
			type: String,
			default: '',
		}
	},
	data() {
		return {

			//树型结构
			show:true,
			clearable: true,
			defaultExpandAll: true,
			multiple: false,
			placeholder: '请选择',
			disabled: false,
			checkStrictly: true,
			treeProps: {
				value: 'bsm',
				children: 'children',
				label: 'mc'
			},

			form: {
				zrzbsm: "",
				ljzh: "", //逻辑幢号
				zrzh: "", //自然幢号
				ljzmc: "", //逻辑幢顺序号
				bdcdyh: "", //不动产单元号
				mph: "", //门牌号
				jgrq: "", //竣工日期
				ycjzmj: "", //预测建筑面积
				scjzmj: "", //实测建筑面积
				ycdxmj: "", //预测地下面积
				scdxmj: "", //实测地下面积
				ycqtmj: "", //预测其他面积
				scqymj: "", //实测其他面积
				ytList: [
					{
						glbsm: "", //关联标识码
						fwytzdbsm: "", //房屋用途字典标识码
						sx: "", //顺序
					},
				],
				fwjgList: [
					{
						fwjgzdbsm: "", //房屋结构字典标识码
						glbsm: "", //关联标识码
						sx: "", //顺序
					},
				],
				dxcs: "", //地下层数
				dscs: "", //地上层数
				zcs: "", //总层数
				jzwzt: "", //建筑物状态
			},
			value: "",
			ytTitleRowspan: 1, //用途的单元格垂直合并数量
			fwjgTitleRowspan: 1, //房屋结构的单元格垂直合并数量
		};
	},
	methods: {
		addYtInfo() {
			this.form.ytList.push({
				glbsm: "",
				fwytzdbsm: "",
				sx: "",
			});
			this.ytTitleRowspan = this.form.ytList.length;
		},
		deleteYtInfo(index) {
			if (this.form.ytList.length <= 1) {
				this.$message({
					message: "不能删除，最少含有一条用途信息",
					type: "warning",
				});
			} else {
				this.form.ytList.splice(index, 1);
				this.ytTitleRowspan = this.form.ytList.length;
			}
		},
		addFwjgInfo() {
			this.form.fwjgList.push({
				fwjgzdbsm: "", //房屋结构字典标识码
				glbsm: "", //关联标识码
				sx: "", //顺序
			});
			this.fwjgTitleRowspan = this.form.fwjgList.length;
		},
		//重置数据
		reset() {
			this.form = {
				// zrzbsm: "",
				ljzh: "", //逻辑幢号
				zrzh: this.$store.state.zrzh, //自然幢号
				ljzmc: "", //逻辑幢顺序号
				bdcdyh: "", //不动产单元号
				mph: "", //门牌号
				jgrq: "", //竣工日期
				ycjzmj: "", //预测建筑面积
				scjzmj: "", //实测建筑面积
				ycdxmj: "", //预测地下面积
				scdxmj: "", //实测地下面积
				ycqtmj: "", //预测其他面积
				scqymj: "", //实测其他面积
				ytList: [
					{
						glbsm: "", //关联标识码
						fwytzdbsm: "", //房屋用途字典标识码
						sx: "", //顺序
					},
				],
				fwjgList: [
					{
						fwjgzdbsm: "", //房屋结构字典标识码
						glbsm: "", //关联标识码
						sx: "", //顺序
					},
				],
				dxcs: "", //地下层数
				dscs: "", //地上层数
				zcs: "", //总层数
				jzwzt: "", //建筑物状态
			};
			this.ytTitleRowspan= 1; //用途的单元格垂直合并数量
			this.fwjgTitleRowspan= 1; //用途的单元格垂直合并数量
		},
		deleteFwjgInfo(index) {
			if (this.form.fwjgList.length <= 1) {
				this.$message({
					message: "不能删除，最少含有一条房屋结构信息",
					type: "warning",
				});
			} else {
				this.form.fwjgList.splice(index, 1);
				this.fwjgTitleRowspan = this.form.fwjgList.length;
			}
		},
		onSave(data, bsm) {
			//自然幢标识码
			this.form.zrzbsm = bsm;
			if(this.ljzbsm == ''){
				insertLjzInfo(this.form).then((res) => {
					if (res.code === 200) {
						this.$message.success("保存成功");
						//更新树结构数据
						console.log(this);
						this.$parent.$parent.getLpbMenuTree(bsm);
						//关闭弹框
						this.$parent.$parent.closeDaialog();
					}else{
						this.$message.error(res.message);
					}
				});
			}else{
				//逻辑幢更新接口调用 TODO 
				console.log('保存');
				updateQjLjz(this.form).then((res)=>{
					if(res.code === 200){
						this.$message.success("修改成功")
					}
				})
			}
		},
		onSubmit() {
			// console.log(this.form);
		},
		//根据逻辑幢bsm查询逻辑幢信息
		getLjzInfo(bsm){
			//逻辑幢信息查询接口调用 bsm为逻辑幢bsm
			getQjLjzDetailById(bsm).then((res)=>{
				if(res.code === 200){
					this.form = res.result;
					this.form.zrzh = this.$store.state.zrzh;
					this.form.fwjgList= [
						{
							fwjgzdbsm: "", //房屋结构字典标识码
							glbsm: "", //关联标识码
							sx: "", //顺序
						},
					];
					this.form.ytList= [
						{
							glbsm: "", //关联标识码
							fwytzdbsm: "", //房屋用途字典标识码
							sx: "", //顺序
						},
					];
					if(this.form.qjfwjg.length>0){
						this.form.fwjgList= [];
						for(let i =0;i<this.form.qjfwjg.length;i++){
							this.form.fwjgList.push({
								fwjgzdbsm: this.form.qjfwjg[i].fwjgzdbsm, //房屋结构字典标识码
								glbsm: this.form.qjfwjg[i].glbsm, //关联标识码
								sx: this.form.qjfwjg[i].sx, //顺序
							})
						}
					}
					if(this.form.qjfwyt.length>0){
						this.form.ytList= [];
						for(let i =0;i<this.form.qjfwyt.length;i++){
							this.form.ytList.push({
								fwytzdbsm: this.form.qjfwyt[i].fwytzdbsm, //房屋结构字典标识码
								glbsm: this.form.qjfwyt[i].glbsm, //关联标识码
								sx: this.form.qjfwyt[i].sx, //顺序
							})
						}
					}
					console.log(JSON.stringify(this.form)+":this.form")
				}
			})
			this.$forceUpdate();
		}
	},
	created() {
	},
	mounted() {
		this.form.zrzh = this.$store.state.zrzh;
	},
	watch:{
		ljzbsm: {
			handler: function (item) {
				console.log(item,'item');
				if(item!='' && this.$parent.$parent.menuType == 'ljz'){
					this.getLjzInfo(this.ljzbsm)
				}
			},
			immediate: true
		},
	}
};
</script>
<style rel="stylesheet/less" lang="less" scoped>
.h {
	min-height: 200px;
	width: 100%;
	margin: 0 auto;

	/deep/.el-input__inner {
		width: 100%;
		border: 0;
	}

	/deep/textarea {
		width: 100%;
		border: 0;
	}

	.el-form-item {
		font-weight: bold;
		font-size: xx-large;
	}

	table {
		background: #fff;
		table-layout: fixed;
	}

	td {
		//bgcolor:#F1F4FC;
		background-color: #fff;
		width: 8.33%;
	}

	.el-select {
		display: block;
	}
}

table {
	font-size: 14px;
}

.hTable {
	margin-top: 10px;
}
</style>