<template>
	<div class="edit">
		<div class="tab-header">
			<el-row class="searchContent">
				<el-col :span="8">
					<el-radio-group  v-model="scyclx" @change="scyclxChange">
						<el-radio-button label="1">实测</el-radio-button>
						<el-radio-button label="0">预测</el-radio-button>
					</el-radio-group>
					<el-input
						maxlength="28"
						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"
							><i class="iconfont iconchuangjianloupan"></i>创建楼盘</el-button
						>
						<el-button class="radioBtn" label="2" border @click="plScYcChange"
							><i class="iconfont iconshiyucezhuanhuan"></i>实预测转换</el-button
						>
						<el-button
							class="radioBtn"
							label="3"
							border
							@click="openPl('h')"
							><i class="iconfont iconpilianghu"></i> 批量户</el-button
						>
						<el-button
							class="radioBtn"
							label="4"
							border
							@click="openPlC"
							><i class="iconfont iconpiliangceng"></i>批量层</el-button
						>
						<el-button
							class="radioBtn"
							label="5"
							border
							@click="openPl('sh')"
							><i class="iconfont iconpiliangshihao"></i>批量室号</el-button
						>
						<el-button
							class="radioBtn"
							label="6"
							border
							@click="openPl('zl')"
							><i class="iconfont iconpiliangzuola"></i>批量坐落</el-button
						>
						<el-button class="radioBtn" label="7" border @click="addBdcdyh"
							><i class="iconfont iconpiliangdanyuanhao"></i>批量单元号</el-button
						>
						<el-button
							class="radioBtn"
							label="7"
							border
							@click="hcxlzVisible = true"
							><i class="iconfont fa-building-o"></i>户重新落宗</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" @loading="loading"></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 dyztList"
							:key="index"
							class="cp"
							@click="handleChoosedH(item.bsms)"
						>
							<td>
								<i class="fa fa-circle" :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 fwxzList"
							:key="index"
							class="cp"
							@click="handleChoosedH(item.bsms)"
						>
							<td>
								<i class="fa fa-circle" :style="{ color: item.color }"></i
								>{{ item.name }}
							</td>
							<td>{{ item.ts }}</td>
							<td>{{ item.mj }}</td>
						</tr>
						<tr v-show="fwxzList.length < 1">
							<td colspan="3" class="tac">暂无数据</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 fwytList"
							:key="index"
							class="cp"
							@click="handleChoosedH(item.bsms)"
						>
							<td>
								<i class="fa fa-circle" :style="{ color: item.color }"></i
								>{{ item.name }}
							</td>
							<td>{{ item.ts }}</td>
							<td>{{ item.mj }}</td>
						</tr>
						<tr v-show="fwytList.length < 1">
							<td colspan="3" class="tac">暂无数据</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"
					:scyclx="scyclx"
					: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" @lodding="lodding"></pl-h>
		<pl-zl :pl-zl-visible="plzlVisible" :bsms="bsms" @close="plZlClose" @lodding="lodding"></pl-zl>
		<pl-c :plc-visible="plcVisible" :bsms="cbsmList" @close="plcClose" @lodding="lodding"></pl-c>
		<pl-sh :plShVisible="plShVisible" :bsms="bsms" @close="plshClose" @lodding="lodding"></pl-sh>
		<h-cxlz
			:h-cxlz-visble="hcxlzVisible"
			:bsms="bsms"
			@close="hcxlzClose"
		></h-cxlz>
		<!-- 双击户的弹出框 -->
		<el-dialog title="户编辑" class="hbjDialog" :visible.sync="hbjVisible" width="70%" center>
			<hbj ref="hbj" :bsm="hbsm" :scyclx="scyclx"></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 {Message} from "element-ui"
import HCxlz from "./../../../../components/hCxlz/hCxlz";
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, getLpbTj,batchGeneratorBdcdyh,getLpbFwytAndQlxz } from "../../../../api/lpb";

export default {
	name: "",
	components: {
		LineTree,
		addLjz,
		addZdy,
		addCh,
		lpbContent,
		PlC,
		PlSh,
		PlH,
		PlZl,
		hbj,
		HCxlz,
	},
	props: {},
	data() {
		return {
			bsms: [],
			hbsm: "",
			dialogVisible: false,
			plcVisible: false,
			plhVisible: false,
			plShVisible: false,
			plzlVisible: false,
			hbjVisible: false,
			hcxlzVisible:false,
			scyclx: "1", //1是实测  0是预测
			radio1: "",
			radio2: "",
			createFlag: false,
			bdcdyh: "",
			islpb: true,
			pd: [], //创建楼盘的树结构数据
			menuType: "",
			treeData: {},
			inputWidth: 74,
			selectedZt: "dyzt", //图例选中项，默认选中单元状态
			dyztList: [
				{
					name: "未确权",
					color: "#83AAFE",
					ts: "12",
					mj: "1633",
				},
				{
					name: "已确权",
					color: "#6EDEE1",
					ts: "22",
					mj: "3109",
				},
				{
					name: "已备案",
					color: "#8ADC88",
					ts: "3",
					mj: "409",
				},
				{
					name: "预抵押",
					color: "#F2AD67",
					ts: "11",
					mj: "1466",
				},
				{
					name: "在建抵押",
					color: "#F191C8",
					ts: "13",
					mj: "1792",
				},
				{
					name: "抵押",
					color: "#FF8282",
					ts: "14",
					mj: "13",
				},
				{
					name: "查封",
					color: "#D7CECF",
					ts: "9",
					mj: "1436",
				},
				{
					name: "异议",
					color: "#D4A3EB",
					ts: "34",
					mj: "4342",
				},
				{
					name: "限制",
					color: "#A5A3FB",
					ts: "2",
					mj: "285",
				},
			],
			fwxzList: [],
			fwytList: [],
			legendToggleFlag: false,
			lpbContentHight: "",
			lpbContentwidth: "",
			time: "",
			dyztBsmList: {}, //单元状态bsmList
			cbsmList:[], // 层bsmlist
		};
	},
	created() {
		window.addEventListener("resize", this.getHeight);
		this.getHeight();
	},
	mounted() {
		//获取楼盘表树结构
		this.getLpbMenuTree(this.$store.state.zrzbsm);
		//获取各项单元状态的户bsm
		this.getDyztBsmList();
		//获取房屋用途统计数据
		this.getLpbFwytAndQlxz();
		// 楼盘表绘制区域宽度计算：楼盘表区域宽度-图例宽度34-滚动条宽度6
		setTimeout(() => {
			this.lpbContentwidth = this.$store.state.contentWidth - 34 - 6;
		}, 100);
	},
	methods: {
        loading(){
            this.getLpbMenuTree(this.$store.state.zrzbsm);
		},
        openPlC(){
            if (this.cbsmList.length <= 0) {
                Message.warning("请选择层")
            	return
            }
            this.plcVisible=true
		},
        openPl(val){
            if (this.bsms.length <= 0) {
                Message.warning("请选择操作户")
                return
            }
            switch (val) {
                case 'h':
                    this.plhVisible=true;
                    break;
                case 'zl':
                    this.plzlVisible=true;
                    break;
                case 'sh':
                    this.plShVisible=true;
                    break;
                default:
                    break;
            }
        },
	    lodding(){
            this.getlpbData();
		},
		hcxlzClose() {
			this.hcxlzVisible = false;
		},
		plZlClose() {
			this.plzlVisible = false;
		},
		plcClose() {
			this.plcVisible = false;
		},
		plhClose() {
			this.plhVisible = false;
		},
		plshClose() {
			this.plShVisible = false;
		},
		//改变实预测数据类型
		scyclxChange(val){
			//清空已选中层户
			this.cbsmList = [];
			this.bsms = [];
			console.log(this.$refs.lpbContent.$refs.cBsm,'this.$refs.lpbContent.$refs.cBsm');
			this.$nextTick(()=>{
				this.$refs.lpbContent.$refs.hBsm.forEach(item=>{
					if (item.className == "tdSelect") {
						item.className = "";
					}
				});
				this.$refs.lpbContent.$refs.cBsm.forEach(item=>{
					console.log(item.className,'item.className');
					item.className = "floor";
				});
			})
			//获取图例数据
			this.getDyztBsmList();
		},
		//获取高度计算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);
		},
		//获取选中层bsmlist
		getCbsm(data){
			this.cbsmList = data;
			console.log(this.cbsmList);
		},
		//不动产单元号输入框事件
		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: this.scyclx,
			};
			batchScYcChange(data).then((res) => {
				if (res.code === 200) {
					this.$message.success("实预测转换成功");
				}
			});
		},
		//选中房屋状态
		handleChoosedH(bsms) {
			console.log(bsms,'bsms');
			// Dyzt:{list:[],mj:''}
			//清除选中户
			this.$refs.lpbContent.clearChoosedH();
			//给hBsmList传值
			this.$refs.lpbContent.choosedList = bsms;
		},
		//批量添加不动产单元号
		addBdcdyh() {
			// this.pd[0].bsm //自然幢标识码
			batchGeneratorBdcdyh(this.$store.state.zrzh, this.pd[0].bsm).then(
				(res) => {
					if (res.code === 200) {
						this.$message.success("生成完成！");
					} else {
						this.$message.warning("生成失败！");
					}
				}
			);
		},
		//获取各项单元状态统计数据
		getDyztBsmList() {
			let data = {
				zrzbsm: this.$store.state.zrzbsm,
				scyclx: this.scyclx,
			};
			getLpbTj(data).then((res) => {
				if (res.code === 200) {
					this.dyztList = res.result;
					this.dyztList.splice(1,0,this.dyztList[8]);
					this.dyztList.pop();
					this.dyztList.forEach(item=>{
						item.ts = item.bsms.length;
							switch (item.name) {
								case 'Qqzt':
									item.color = "#6EDEE1";
									item.name = "已确权"
									break;
								case 'Wqqzt':
									item.color = "#83AAFE";
									item.name = "未确权"
									break;
								case 'Bazt':
									item.color = "#8ADC88";
									item.name = "已备案"
									break;
								case 'Ydyzt':
									item.color = "#F2AD67";
									item.name = "预抵押"
									break;
								case 'Zjgcdyzt':
									item.color = "#F191C8";
									item.name = "在建抵押"
									break;
								case 'Dyzt':
									item.color = "#FF8282";
									item.name = "抵押"
									break;
								case 'Cfzt':
									item.color = "#D7CECF";
									item.name = "查封"
									break;
								case 'Yyzt':
									item.color = "#D4A3EB";
									item.name = "异议"
									break;
								case 'Xzzt':
									item.color = "#A5A3FB";
									item.name = "限制"
									break;
								default:
									break;
							}
					})
				}
			});
		},
		// 获取房屋用途和房屋性质统计数据
		getLpbFwytAndQlxz(){
			let data = {
				zrzbsm: this.$store.state.zrzbsm,
				scyclx: this.scyclx,
			};
			getLpbFwytAndQlxz(data).then((res) => {
				if (res.code === 200) {
					// this.fwytList = res.result
					this.fwytList = res.result.fwyt;
					this.fwxzList = res.result.qlxz;
					if(this.fwytList.length>0){
						this.fwytList.forEach(item=>{
							item.color = "#2591FD";
							item.ts = item.bsms.length
						})
					}
					if(this.fwxzList.length>0){
						this.fwxzList.forEach(item=>{
							item.color = "#2591FD";
							item.ts = item.bsms.length
						})
					}
				}
			});
		}
	},
	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;
			}
		},
		selectedZt(n){
			this.legendToggleFlag = true;
		}
	},
};
</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: 0.5s;
				margin-left: 20px;
				display: inline-block;
			}
		}
		.radioBtn {
			margin-left: 16px;
			padding:12px 14px;
			i{
				font-size: 13px;
    			padding-right: 4px;
			}
			/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;
	}
	.hbjDialog{
		/deep/ .el-dialog{
			margin-top: 10vh!important;
		}
	}
	.fa{
		padding-right: 4px;
	}
}
</style>