<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">
							<input class="formInput" ref="ljzh" @blur="inputBlur($event)" v-model="form.ljzh" />
						</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">
							<input class="formInput" ref="ljzmc" @blur="inputBlur($event)" v-model="form.ljzmc" />
						</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" oninput="value = (value.match(/^\d{0,9}(\.?\d{0,3})/g)[0]) || null"></el-input>
						</td>
						<td colspan="2" align="center">实测建筑面积(㎡)</td>
						<td colspan="4">
							<el-input v-model="form.scjzmj" oninput="value = (value.match(/^\d{0,9}(\.?\d{0,3})/g)[0]) || null"></el-input>
						</td>
					</tr>

					<tr height="30">
						<td colspan="2" align="center">预测地下面积(㎡)</td>
						<td colspan="4">
							<el-input v-model="form.ycdxmj" oninput="value = (value.match(/^\d{0,9}(\.?\d{0,3})/g)[0]) || null"></el-input>
						</td>
						<td colspan="2" align="center">实测地下面积(㎡)</td>
						<td colspan="4">
							<el-input v-model="form.scdxmj" oninput="value = (value.match(/^\d{0,9}(\.?\d{0,3})/g)[0]) || null"></el-input>
						</td>
					</tr>

					<tr height="30">
						<td colspan="2" align="center">预测其他面积(㎡)</td>
						<td colspan="4">
							<el-input v-model="form.ycqtmj" oninput="value = (value.match(/^\d{0,9}(\.?\d{0,3})/g)[0]) || null"></el-input>
						</td>
						<td colspan="2" align="center">实测其他面积(㎡)</td>
						<td colspan="4">
							<el-input v-model="form.scqymj" oninput="value = (value.match(/^\d{0,9}(\.?\d{0,3})/g)[0]) || null"></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="fwjg"
											 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'
			},

			rules:[],

			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: {

		inputBlur(e){
			if(e.target.value!=''){
				e.target.style.border=""
			}else{
				e.target.style.border="1px solid red";
				e.target.style.boxSizing = 'border-box';
			}
		},

		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.rules=[
				{
					data:this.form.ljzh,
					name:'自然幢号',
					dom:this.$refs.ljzh,
					rule: /^\s*$/g, //非空
				},
				{
					data:this.form.ljzmc,
					name:'不动产单元号',
					dom:this.$refs.ljzmc,
					rule: /^\s*$/g, //非空
				},
			];
			this.form.ytList.forEach((item,index)=>{
				this.rules.push(
					{
						data:item.fwytzdbsm,
						name:'用途',
						dom:this.$refs.yt[index],
						rule: /^\s*$/g, //非空
					},
				)
			});
			this.form.fwjgList.forEach((item,index)=>{
				this.rules.push(
						{
							data:item.fwjgzdbsm,
							name:'房屋结构',
							dom:this.$refs.fwjg[index],
							rule: /^\s*$/g, //非空
						},
				)
			});

			//自然幢标识码
			this.form.zrzbsm = bsm;
			let flag = true;
			this.rules.forEach(item=>{
				if(item.rule.test(item.data) || item.data == null){
					if(item.dom.$el){
						item.dom.$el.style.border = '1px solid red';
						item.dom.$el.style.boxSizing = 'border-box';
					}else{
						item.dom.style.border = '1px solid red';
						item.dom.style.boxSizing = 'border-box';
					}
					flag = false;
					return false
				}
			})
			this.$nextTick(()=>{
					if (flag && this.$refs.qlxzModule.getRulesResult()) {
						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:{

		"form.ljzh":function (val) {
			if (val != '') {
				this.$refs.ljzh.style.border = '';
			}
		},

		"form.ljzmc":function (val) {
			if (val != '') {
				this.$refs.ljzmc.style.border = '';
			}
		},

		"form.ytList": {
			handler : function (newVal, oldVal) {
				newVal.forEach((item,ind)=>{
					if(item.fwytzdbsm != ''){
						this.$refs.yt[ind].$el.style.border=""
					}
				})
			},
			deep:true
		},
		"form.fwjgList": {
			handler : function (newVal, oldVal) {
				newVal.forEach((item,ind)=>{
					if(item.fwjgzdbsm != ''){
						this.$refs.fwjg[ind].$el.style.border=""
					}
				})
			},
			deep:true
		},

		ljzbsm: {
			handler: function (item) {
				console.log(item,'item');
				if(item!='' && this.$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%;
		height: 36px
	}

	.el-select {
		display: block;
	}
}

table {
	font-size: 14px;
}

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