<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"></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" class="psr">
							<el-input v-model="form.bdcdyh" maxlength="28" class="percent80"></el-input>
							<el-button
								@click.prevent=""
								size="mini"
								type="warning"
								class="createBtn"
								>生成</el-button
							>
						</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"></el-input>
						</td>
						<td colspan="2" align="center">实测建筑面积(㎡)</td>
						<td colspan="4">
							<el-input v-model="form.scjzmj"></el-input>
						</td>
					</tr>

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

					<tr height="30">
						<td colspan="2" align="center">预测其他面积(㎡)</td>
						<td colspan="4">
							<el-input v-model="form.ycqtmj"></el-input>
						</td>
						<td colspan="2" align="center">实测其他面积(㎡)</td>
						<td colspan="4">
							<el-input v-model="form.scqymj"></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"
						>
							<el-button
								type="primary"
								size="mini"
								style="margin-right: 10px"
								@click="addYtInfo"
								>添加</el-button
							>
							<span>用途</span>
						</td>
						<td colspan="1" align="center">
							<span @click="deleteYtInfo(index)">删除</span>
						</td>
						<td colspan="9">
							<el-select v-model="item1.fwytzdbsm" placeholder="请选择">
								<el-option
									v-for="item in $store.state.tdytList"
									:key="item.bsm"
									:label="item.mc"
									:value="item.bsm"
								>
								</el-option>
							</el-select>
						</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"
						>
							<el-button
								type="primary"
								size="mini"
								style="margin-right: 10px"
								@click="addFwjgInfo"
								>添加</el-button
							>
							<span>房屋结构</span>
						</td>
						<td colspan="1" align="center">
							<span @click="deleteFwjgInfo(index)">删除</span>
						</td>
						<td colspan="9">
							<el-select v-model="item1.fwjgzdbsm" placeholder="请选择">
								<el-option
									v-for="item in $store.state.jgOptions"
									:key="item.bsm"
									:label="item.mc"
									:value="item.bsm"
								>
								</el-option>
							</el-select>
						</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="4">
							<el-input v-model="form.zcs"></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" 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 { formdate } from "../../../../../libs/function";
export default {
	name: "ljz",
	components: {},
	data() {
		return {
			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: "", //自然幢号
				ljzmc: "", //逻辑幢顺序号
				bdcdyh: "", //不动产单元号
				mph: "", //门牌号
				jgrq: "", //竣工日期
				ycjzmj: "", //预测建筑面积
				scjzmj: "", //实测建筑面积
				ycdxmj: "", //预测地下面积
				scdxmj: "", //实测地下面积
				ycqtmj: "", //预测其他面积
				scqymj: "", //实测其他面积
				ytList: [
					{
						glbsm: "", //关联标识码
						fwytzdbsm: "", //房屋用途字典标识码
						sx: "", //顺序
					},
				],
				fwjgList: [
					{
						fwjgzdbsm: "", //房屋结构字典标识码
						glbsm: "", //关联标识码
						sx: "", //顺序
					},
				],
				dxcs: "", //地下层数
				dscs: "", //地上层数
				zcs: "", //总层数
				jzwzt: "", //建筑物状态
			};
		},
		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;
			insertLjzInfo(this.form).then((res) => {
				if (res.code === 200) {
					this.$message.success("保存成功");
					//更新树结构数据
					console.log(this);
					this.$parent.$parent.getLpbMenuTree(bsm);
					//关闭弹框
					this.$parent.$parent.closeDaialog();
				}
			});
		},
		onSubmit() {
			console.log(this.form);
		},
	},
	created() {this.form.zrzh = this.$store.state.zrzh;},
	mounted() {
	},
};
</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>