<template>
	<div class="edit">
		<div class="tab-header">
			<el-row class="searchContent">
				<el-col :span="8">
					<el-radio-group v-model="tabPosition">
						<el-radio-button label="1">实测</el-radio-button>
						<el-radio-button label="0">预测</el-radio-button>
					</el-radio-group>
					<el-input
						v-model="bdcdyh"
						:style="{'width':inputWidth+'px'}"
						@focus="inputFocus"
						@blur="inputBlur"
						@change="inputChange"
						class="searchInput"
						placeholder="输入不动产单元号"
					><i slot="suffix" class="el-input__icon el-icon-search" @click="inputChange"></i></el-input>
				</el-col>
				<el-col :span="16">
					<div class="fr">
						<el-button class="radioBtn" label="1" border @click="create">创建楼盘</el-button>
						<el-button class="radioBtn" label="2" border @click="plScYcChange">实预测转换</el-button>
						<el-button class="radioBtn" label="3" border @click="plhVisible=true">批量户</el-button>
						<el-button class="radioBtn" label="4" border @click="plcVisible=true">批量层</el-button>
						<el-button class="radioBtn" label="5" border @click="plShVisible=true">批量室号</el-button>
						<el-button class="radioBtn" label="6" border @click="plzlVisible=true">批量坐落</el-button>
						<el-button class="radioBtn" label="7" border>批量单元号</el-button>
					</div>
				</el-col>
			</el-row>
		</div>
		<div
			class="tab-content"
			ref="tabContent"
			:style="{ height: lpbContentHight + 'px' }"
		>
			<!-- 左侧树结构 -->
			<div class="lp-tree" :class="createFlag ? 'w260' : 'w0'">
				<LineTree :pd="pd" class="treeData" :islpb="islpb"></LineTree>
				<p
					@click="createFlag = false"
					style="width:20px;float:left;margin-top: 12px;margin-left:10px;cursor:pointer;"
				>
					X
				</p>
			</div>
			<!-- 楼盘表主体 -->
			<div class="lp-overview" :style="{ width: lpbContentwidth + 'px' }">
				<lpbContent ref="lpbContent" :key="time"></lpbContent>
			</div>
			<!-- 右侧图例 -->
			<div class="lp-legend">
				<div class="handleCol">
					<div class="btn" @click="legendToggle">
						<i v-show="!legendToggleFlag" class="el-icon-d-arrow-left"></i>
						<i v-show="legendToggleFlag" class="el-icon-d-arrow-right"></i>
					</div>
					<div :class="selectedZt == 'dyzt'? 'dyzt selectedZt':'dyzt'" @click="selectedZt='dyzt'">
						<span>单元状态</span>
					</div>
					<div :class="selectedZt == 'fwxz'? 'fwxz selectedZt':'fwxz'" @click="selectedZt='fwxz'">
						<span>房屋性质</span>
					</div>
					<div :class="selectedZt == 'fwyt'? 'fwyt selectedZt':'fwyt'" @click="selectedZt='fwyt'">
						<span>房屋用途</span>
					</div>
				</div>
				<div
					class="legendTable-wrap"
					:style="{ width: legendToggleFlag ? '204px' : '0' }"
				>
					<table class="legendTable" v-show="selectedZt == 'dyzt'" cellspacing="1" cellpadding="1" border="1">
						<tr>
							<th>状态</th>
							<th>套数</th>
							<th>面积</th>
						</tr>
						<tr v-for="(item, index) in legendList" :key="index" class="cp" @click="handleChoosedH">
							<td>
								<i class="el-icon-star-on" :style="{ color: item.color }"></i
								>{{ item.name }}
							</td>
							<td>{{ item.ts }}</td>
							<td>{{ item.mj }}</td>
						</tr>
					</table>
					<table class="legendTable" v-show="selectedZt == 'fwxz'" cellspacing="1" cellpadding="1" border="1">
						<tr>
							<th>性质</th>
							<th>套数</th>
							<th>面积</th>
						</tr>
						<tr v-for="(item, index) in legendList" :key="index" class="cp" @click="handleChoosedH">
							<td>
								<i class="el-icon-star-on" :style="{ color: item.color }"></i
								>{{ item.name }}
							</td>
							<td>{{ item.ts }}</td>
							<td>{{ item.mj }}</td>
						</tr>
					</table>
					<table class="legendTable" v-show="selectedZt == 'fwyt'" cellspacing="1" cellpadding="1" border="1">
						<tr>
							<th>用途</th>
							<th>套数</th>
							<th>面积</th>
						</tr>
						<tr v-for="(item, index) in legendList" :key="index" class="cp" @click="handleChoosedH">
							<td>
								<i class="el-icon-star-on" :style="{ color: item.color }"></i
								>{{ item.name }}
							</td>
							<td>{{ item.ts }}</td>
							<td>{{ item.mj }}</td>
						</tr>
					</table>
				</div>
			</div>
		</div>

		<!-- 右键菜单弹出框 -->
		<el-dialog title="添加" :visible.sync="dialogVisible" width="50%" center>
			<!-- 根据菜单类型（menuType）和右键点击的楼盘类型（treeData.type）来区分弹框内容  -->
			<div class="addCh" v-show="menuType == 'ljz'">
				<addLjz ref="ljz"></addLjz>
			</div>
			<div class="addCh" v-show="menuType == 'zdy'">
				<addZdy ref="zdy"></addZdy>
			</div>
			<div class="addCh" v-show="menuType == 'ch'">
				<addCh ref="ch" :dialogVisible="dialogVisible" :treeData="treeData"></addCh>
			</div>
			<div class="btnGroup">
				<el-button type="primary" @click="saveInfo">保存</el-button>
				<el-button type="primary" @click="resetInfo">重置</el-button>
				<el-button type="primary" @click="dialogVisible = false"
					>取消</el-button
				>
			</div>
		</el-dialog>
		<!-- 批量操作弹出框 -->
		<pl-h :plh-visible="plhVisible" :bsms="bsms" @close="plhClose"></pl-h>
		<pl-zl :pl-zl-visible="plzlVisible" :bsms="bsms" @close="plZlClose"></pl-zl>
		<pl-c :plc-visible="plcVisible" :bsms="bsms" @close="plcClose"></pl-c>
        <pl-sh :plShVisible="plShVisible" :bsms="bsms" @close="plshClose"></pl-sh>
		<!-- 双击户的弹出框 -->
		<el-dialog title="户编辑" :visible.sync="hbjVisible" width="50%" center>
			<hbj ref="hbj" :bsm='hbsm'></hbj>
			<div class="btnGroup">
				<el-button type="primary" @click="hbjSaveInfo">保存</el-button>
				<el-button type="primary" @click="hbjResetInfo">重置</el-button>
				<el-button type="primary" @click="hbjVisible = false">取消</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import PlC from "./../../../../components/plc/plC"
import PlSh from "./../../../../components/plsh/plSh"
import PlH from "./../../../../components/plh/plH"
import PlZl from "./../../../../components/plzl/plZl"
import LineTree from "../../../../components/lineTree/lineTree";
import addLjz from "./ljz/index";
import addZdy from "./zdy/index";
import addCh from "./ch/index";
import hbj from "./hbj/index"
import lpbContent from "./lpbContent/index";
import {getLpbMenuTree,batchScYcChange} from "../../../../api/lpb";


export default {
	name: "",
	components: { LineTree, addLjz, addZdy, addCh, lpbContent,PlC,PlSh,PlH ,PlZl,hbj},
	props: {},
	data() {
		return {
			bsms:["123","321","231"],
			hbsm:'',
			dialogVisible: false,
            plcVisible:false,
            plhVisible:false,
			plShVisible:false,
            plzlVisible:false,
			hbjVisible:false,
			tabPosition:"1", //1是实测  0是预测
			radio1: "",
			radio2: "",
			createFlag: false,
			bdcdyh: "",
			islpb: true,
			pd: [], //创建楼盘的树结构数据
			menuType: "",
			treeData: {},
			inputWidth:74,
			selectedZt:'dyzt', //图例选中项，默认选中单元状态
			legendList: [
				{
					name: "未确权",
					color: "#2591FD",
					ts: "12",
					mj: "1633",
				},
				{
					name: "已确权",
					color: "#2591FD",
					ts: "22",
					mj: "3109",
				},
				{
					name: "已注销",
					color: "#2591FD",
					ts: "13",
					mj: "1457",
				},
				{
					name: "已备案",
					color: "#2591FD",
					ts: "3",
					mj: "409",
				},
				{
					name: "预抵押",
					color: "#2591FD",
					ts: "11",
					mj: "1466",
				},
				{
					name: "在建抵押",
					color: "#2591FD",
					ts: "13",
					mj: "1792",
				},
				{
					name: "抵押",
					color: "#2591FD",
					ts: "14",
					mj: "13",
				},
				{
					name: "查封",
					color: "#2591FD",
					ts: "9",
					mj: "1436",
				},
				{
					name: "异议",
					color: "#2591FD",
					ts: "34",
					mj: "4342",
				},
				{
					name: "限制",
					color: "#2591FD",
					ts: "2",
					mj: "285",
				},
			],
			legendToggleFlag: false,
			lpbContentHight: "",
			lpbContentwidth: "",
			time:''
		};
	},
	created() {
		window.addEventListener("resize", this.getHeight);
		this.getHeight();
	},
	mounted() {
		// this.getLpbMenuTree("1e0c83dfe2e73284f834a80a0947f0c9");
		this.getLpbMenuTree(this.$store.state.zrzbsm);
		// 楼盘表绘制区域宽度计算：楼盘表区域宽度-图例宽度34-滚动条宽度6
		setTimeout(() => {
			this.lpbContentwidth = this.$store.state.contentWidth - 34 - 6;
		}, 100);
	},
	methods: {
        plZlClose(){
            this.plzlVisible=false
		},
        plcClose(){
            this.plcVisible=false;
		},
		plhClose(){
            this.plhVisible=false;
		},
        plshClose(){
          	this.plShVisible=false
        },
		//获取高度计算lpb内容区高度
		getHeight() {
			this.lpbContentHight = window.innerHeight - 285;
		},
		//创建楼盘
		create() {
			this.createFlag = true;
		},
		//获取自然幢树结构数据
		getLpbMenuTree(zrzbsm) {
			getLpbMenuTree(zrzbsm)
				.then((res) => {
					this.pd = res.result;
				})
				.catch((error) => {});
		},
		//打开新建楼盘树结构右键菜单唤起的弹框
		openLpbDialog(data, type) {
			this.treeData = data;
			this.menuType = type;
			this.dialogVisible = true;
		},
		//弹框中的保存按钮，根据不同菜单点击类型调用不同子组件的保存方法
		saveInfo() {
			switch (this.menuType) {
				case "ljz":
					this.$refs.ljz.onSave(this.$refs.ljz.form, this.treeData.bsm);
					break;
				case "zdy":
					this.$refs.zdy.submitForm("form", this.pd[0].bsm, this.treeData.bsm);
					break;
				case "ch":
					this.$refs.ch.onSave(this.pd[0].bsm);
					break;
				default:
					break;
			}
		},
		//弹框中的重置按钮
		resetInfo() {
			switch (this.menuType) {
				case "ljz":
					this.$refs.ljz.reset();
					break;
				case "zdy":
					this.$refs.zdy.reset();
					break;
				case "ch":
					this.$refs.ch.reset();
					break;

				default:
					break;
			}
		},
		//关闭弹框
		closeDaialog() {
			this.dialogVisible = false;
		},
		//图例的展开收起
		legendToggle() {
			this.legendToggleFlag = !this.legendToggleFlag;
		},
		//获取选中户bsm
		getHbsm(data,type){
			this.bsms = data;
			if(type){
				// 双击
				this.hbsm = this.bsms[this.bsms.length-1];
				this.hbjVisible = true;
				this.$nextTick(function () {
					this.$refs.hbj.getHInfo(this.hbsm); 
				})
			}else{
				//单击 TO DO

			}
			console.log(this.bsms);
		},
		//不动产单元号输入框事件
		inputFocus(){
			this.inputWidth = 200
		},
		inputBlur(){
			this.inputWidth = 74
		},
		inputChange(){
			if (this.bdcdyh!='') {
				console.log('查询'+this.bdcdyh);
				this.$refs.lpbContent.lpbDataMap(this.bdcdyh);
			}else{
				this.$message({
					message: "请输入内容后查询",
					type: "warning",
				})
			}
		},
		//户保存
		hbjSaveInfo(){
			this.$refs.hbj.onSave(this.bsms[this.bsms.length-1],this.tabPosition);
		},
		//户编辑表单重置
		hbjResetInfo(){
			this.$refs.hbj.onReset();
		},
		//调用楼盘表信息查询接口
		getlpbData(){
			this.$refs.lpbContent.getLpb(this.$store.state.zrzbsm);
			//改变楼盘表子组件的key值，重新渲染
            this.time = new Date().getTime();
		},
		//实预测装换
		plScYcChange(){
			let data={
				zrzbsm:this.$store.state.zrzbsm,
				scyclx:"0"
			}
			batchScYcChange(data).then((res)=>{
				if(res.code===200){
					this.$message.success("实预测转换成功")
				}
			})
		},
		//选中房屋状态
		handleChoosedH(){
			//清除选中户
			// this.$refs.lpbContent.clearChoosedH()
			//给hBsmList传值
			this.$refs.lpbContent.choosedList=["0a66bc775dcec26385f9124cc0fd8656", "58cafdbee129bb412527f674ef9267ae", "4bbca678fa56d5ab97b8a62c7cb54898", "ecfd72e9a31a03ba0ab4e46faba2b51b", "049033ea9d244b4b5ea75521b6862239", "013352d8a001a1d5f790296b6843627b", "ed8e3f0e2b2682cf76b4d58b9a74e49c", "37cc53acaf2c3bb92be4b9adf06d94c9", "f5a5e14ce08c26056aca5861f56e5cf6", "11eeaaa5c9f5f1231c69d3b958d05568", "421978023a36d4920dbb86300cc52dc9", "e97f2af2588cc0e41ffb6b203df617c9", "7210987d94350472dca10d4ad71fffc5", "6eb1b50edce538a4c63574e9e28fedce", "43c5fecd7623ceabc37844e8a4722603", "c361ccfcd3da9f7288110c6fa202cb96", "2321512f6f8d0ec9f570c6eec9a892fe", "ea08fb234cd908c89a0d21c085dadb2f", "be71f7f0ec926e1850d3baec8817cdbd", "6f695d6b7ecb97f7ff17f22dbe86b93c", "4ee1604b2629e6797d3096c20229223b"]
		}
	},
	computed: {
	},
	destroyed() {
		window.removeEventListener("resize", this.getHeight);
	},
	watch: {
		//树结构和图例伸缩时修改楼盘表主要内容区宽度
		legendToggleFlag(n) {
			if (n) {
				this.lpbContentwidth -= 204;
			} else {
				this.lpbContentwidth += 204;
			}
		},
		createFlag(n) {
			if (n) {
				this.lpbContentwidth -= 260;
			} else {
				this.lpbContentwidth += 260;
			}
		},
	},
};
</script>
<style scoped lang="less">
.edit {
	height: 100%;
	background-color: #eaedf5;
	.tab-header {
		border: 1px solid #dedede;
		border-top: 0;
		box-sizing: border-box;
		padding: 20px 0;
		background-color: #ffffff;
		margin-bottom: 15px;
		.searchContent {
			box-sizing: border-box;
			padding: 0 20px;
			/deep/.el-radio-button__inner {
				border: 1px solid #00CACD;
				color: #00CACD;
			}
			/deep/.el-radio-button__inner:hover{
				color: #00CACD;
			}
			/deep/.is-active .el-radio-button__inner{
				color: #fff;
			}
			/deep/.el-radio-button__orig-radio:checked+.el-radio-button__inner{
				background-color: #00CACD;
				border-color: #00CACD;
			}
			.searchInput {
				transition: .5s;
				margin-left: 20px;
				display: inline-block;
			}
		}
		.radioBtn {
			margin-left: 20px;
			/deep/.el-radio-button__inner {
				border: 1px solid #dcdfe6;
				border-radius: 4px;
				box-shadow: 0 0 0 0 #409eff !important;
			}
		}
	}
	.tab-content {
		background-color: #ffffff;
		display: flex;
		overflow-y: scroll;
		.lp-tree {
			height: 100%;
			overflow: hidden;
			transition: 0.5s;
			.treeData {
				margin-top: 20px;
				margin-left: 20px;
				float: left;
			}
		}
		.w0 {
			width: 0;
		}
		.w260 {
			width: 260px;
		}
		.lp-overview {
			transition: 0.5s;
			flex: 1;
			padding-right: 20px;
			box-sizing: border-box;
		}
		.lp-legend {
			transition: 0.5s;
			height: 100%;
			font-size: 14px;
			.handleCol {
				width: 34px;
				float: right;
				height: 100%;
				.btn {
					cursor: pointer;
					height: 40px;
					line-height: 40px;
					text-align: center;
					background-color: #0091FF;
					color: #fff;
					border-bottom: 1px solid #e6e6e6;
				}
				.dyzt {
					height: 81px;
					line-height: 81px;
				}
				.fwxz,
				.fwyt {
					height: 122px;
				}
				.dyzt,
				.fwxz,
				.fwyt {
					cursor: pointer;
					border-bottom: 1px solid #e6e6e6;
					span {
						text-align: center;
						height: 100%;
						-webkit-writing-mode: vertical-rl;
						writing-mode: vertical-rl;
						line-height: 34px;
						letter-spacing: 2px;
					}
				}
				.selectedZt{
					background-color: #0091FF;
					color: #fff;
				}
			}
			.legendTable-wrap {
				transition: 0.5s;
				float: right;
				overflow: hidden;
				.legendTable {
					margin-top: -1px;
					tr {
						height: 40px;
						line-height: 40px;
						th:first-child {
							width: 80px;
						}
						th {
							width: 60px;
							height: 40px;
							white-space: nowrap;
						}
						td {
							height: 40px;
							text-align: center;
							white-space: nowrap;
						}
						td:first-child {
							text-align: left;
							text-indent: 2px;
						}
					}
				}
			}
		}
	}
	.tab-content::-webkit-scrollbar{
		width: 1px;
	}
	.btnGroup {
		margin: 20px auto 0;
		width: 230px;
	}
}
</style>