<template>
	<div class="edit">
		<!-- <div class="tab-header">
			<el-row class="searchContent">
				<el-col :span="24" style="margin:0 0 10px 18px;">
					<el-radio-group v-model="scyclx" @change="scyclxChange">
						<el-radio-button label="0">预测</el-radio-button>
						<el-radio-button label="1">实测</el-radio-button>
					</el-radio-group>
					<el-input maxlength="28" v-model="bdcdyh" :style="{ width: inputWidth + 'px' }" class="searchInput"
						placeholder="输入不动产单元号或室号"><i slot="suffix" class="el-input__icon el-icon-search" @click="inputChange"></i>
					</el-input>
				</el-col>
			</el-row>
		</div> -->
		<div class="tab-content" ref="tabContent" :style="{ height: lpbContentHight + 'px' }" v-show="bjztFlag">
			<!-- 楼盘表主体 -->
			<div class="lp-overview" :style="{ width: lpbContentwidth + 'px' }">
				<lpbContent ref="lpbContent" :zrzbsm="formData.bsm" :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 :class="selectedZt == 'qsx' ? 'qsx selectedZt' : 'qsx'" @click="selectedZt = 'qsx'">
						<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, item.color)">
							<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, item.color)">
							<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, item.color)">
							<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>

					<table class="legendTable" v-show="selectedZt == 'qsx'" cellspacing="1" cellpadding="1" border="1">
						<tr>
							<th>数据缺失项</th>
							<th>套数</th>
							<th>面积</th>
						</tr>
						<tr v-for="(item, index) in qsxList" :key="index" class="cp" @click="handleChoosedH(item.bsms, item.color)">
							<td>
								<i class="fa fa-circle" :style="{ color: item.color }"></i>{{ item.name }}
							</td>
							<td>{{ item.ts }}</td>
							<td>0</td>
						</tr>
						<tr v-show="qsxList.length < 1">
							<td colspan="3" class="tac">暂无数据</td>
						</tr>
					</table>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import { Message } from "element-ui"
import addLjz from "./ljz/index";
import addZdy from "./zdy/index";
import addCh from "./ch/index";
import editCinfo from "./c/index";
import lpbContent from "./lpbContent/index";

export default {
	name: "bjlp",
	props: {
		formData: {
			type: Object,
			default: {}
		}
	},
	components: {
		// LineTree,
		addLjz,
		addZdy,
		addCh,
		lpbContent,
		editCinfo
	},
	data () {
		return {
			bsms: [],
			dialogVisible: false,
			scyclx: "0", //1是实测  0是预测
			radio1: "",
			radio2: "",
			createFlag: false,
			bdcdyh: "",
			islpb: true,
			pd: [], //创建楼盘的树结构数据
			menuType: "",
			treeData: {},
			inputWidth: 200,
			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: [],
			qsxList: [],
			legendToggleFlag: false,
			lpbContentHight: "",
			lpbContentwidth: "",
			time: "",
			dyztBsmList: {}, //单元状态bsmList
			cbsmList: [], // 层bsmlist
			bjztFlag: true,
			taskTitle: '添加',
			curBsm: '',
			qsztList: [],
			uploadVisible: false, //批量上传弹框
			fileData: {
				glbsmList: [],
				dylx: 'h'
			}
		};
	},
	created () {
		window.addEventListener("resize", this.getHeight);
		this.getHeight();
	},
	mounted () {
		//获取楼盘表树结构
		// this.getLpbMenuTree(formData.zrzbsm);
		//获取各项单元状态的户bsm
		// this.getDyztBsmList();
		//获取房屋用途统计数据
		// this.getLpbFwytAndQlxz();
		// 楼盘表绘制区域宽度计算：楼盘表区域宽度-图例宽度34-滚动条宽度6
		setTimeout(() => {
			this.lpbContentwidth = ((document.documentElement.clientWidth || document.body.clientWidth) - 340) - 34 - 6;
		}, 100);
	},
	methods: {
		//批量提交
		batchCommit () {
			if (this.bsms.length <= 0) {
				Message.warning("请选择操作户")
				return
			} else {
				if (this.qsztList.indexOf('1') > -1) {
					Message.warning("已提交的户无法继续操作")
				} else {
					batchCommit(this.bsms).then(res => {
						if (res.code === 200) {
							Message.success("提交成功");
							this.getlpbData();
						} else {
							this.$message.error(res.message);
						}
					})
				}
			}
		},
		//批量删除
		batchDelete () {
			if (this.bsms.length <= 0) {
				Message.warning("请选择操作户")
				return
			} else {
				if (this.qsztList.indexOf('1') > -1) {
					Message.warning("已提交的户无法继续操作")
				} else {
					batchDelete(this.bsms).then(res => {
						if (res.code === 200) {
							Message.success("删除成功");
							this.getlpbData();
						} else {
							this.$message.error(res.message);
						}
					})
				}
			}
		},
		//批量上传 start
		batchUpload () {
			if (this.bsms.length < 1) {
				Message.warning("请选择操作户")
				return
			} else {
				this.uploadVisible = true
			}
		},
		//取消选中
		batchCancelChoosed () {
			this.cbsmList = [];
			this.bsms = [];
			this.qsztList = [];
			this.$refs.lpbContent.hbsmList = [];
			this.$refs.lpbContent.cbsmList = [];
			this.$refs.lpbContent.choosedList = [];
			this.$refs.lpbContent.$refs.hBsm.forEach((item) => {
				item.style.border = '';
				item.className = "";
			});
			this.$refs.lpbContent.$refs.cBsm.forEach((item) => {
				item.style.border = '';
				item.className = "";
			});
		},
		uploadError (err, file, fileList) {
			Message.error("上传文件失败")
			console.log("上传文件失败", err)
		},
		uploadProgress () {
			vm.loadingShow('正在上传中')
		},
		uploadSuccess (res, file, fileList) {
			vm.loadingHide();
			Message.success("上传成功")
			this.uploadVisible = false;
		},
		handleRemove (file, fileList) {
			console.log(file, fileList);
		},
		handlePreview (file) {
			console.log(file);
		},
		handleExceed (files, fileList) {
			// this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
			this.$message.warning("上传失败")
		},
		beforeRemove (file, fileList) {
			return this.$confirm(`确定移除 ${file.name}？`);
		},
		//批量上传 end

		loading () {
			this.getLpbMenuTree(this.$store.state.zrzbsm);
		},
		lodding () {
			this.getlpbData();
		},
		//改变编辑或详细信息状态
		bjztChange () {
			this.bjztFlag = !this.bjztFlag;
		},
		//改变实预测数据类型
		scyclxChange (val) {
			//清空已选中层户
			this.cbsmList = [];
			this.bsms = [];
			this.qsztList = [];
			this.$refs.lpbContent.hbsmList = [];
			this.$nextTick(() => {
				//户
				if (this.$refs.lpbContent.$refs.hBsm) {
					this.$refs.lpbContent.$refs.hBsm.forEach(item => {
						item.style.borderColor = 'rgb(230, 230, 230)';
						if (item.className == "tdSelect") {
							item.className = "";
						}
					});
				}
				//层
				if (this.$refs.lpbContent.$refs.cBsm) {
					this.$refs.lpbContent.$refs.cBsm.forEach(item => {
						console.log(item.className, 'item.className');
						item.className = "floor";
					});
				}
			})
			//获取图例数据
			this.getDyztBsmList();
			this.getLpbFwytAndQlxz();
			//重新渲染楼盘表
			this.$refs.lpbContent.dataChange();
		},
		//获取高度计算lpb内容区高度
		getHeight () {
			this.lpbContentHight = window.innerHeight - 190;
		},
		//创建楼盘
		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.$nextTick(() => {
				this.resetInfo();
			});
			this.dialogVisible = true;
			this.taskTitle = '添加';
			this.curBsm = '';
		},
		//弹框中的保存按钮，根据不同菜单点击类型调用不同子组件的保存方法
		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;
				case "c":
					this.$refs.c.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;
				case "c":
					this.$refs.c.reset();
					break;

				default:
					break;
			}
		},
		//关闭弹框
		closeDaialog () {
			this.dialogVisible = false;
		},
		//图例的展开收起
		legendToggle () {
			this.legendToggleFlag = !this.legendToggleFlag;
		},
		//获取选中户bsm
		getHbsm (data, type) {
			if (type) {
				// 双击

			} else {
				//单击 TO DO
				this.bsms = data;
			}
		},
		//获取选中户信息
		getQsztList (data, type) {
			if (type) {
				// 双击

			} else {
				//单击 TO DO
				this.qsztList = data;
			}
		},
		//获取选中层bsmlist
		getCbsm (data) {
			this.cbsmList = data;
		},
		inputChange () {
			console.log(this.bdcdyh, 'this.bdcdyh');
			if (this.bdcdyh != "") {
				// console.log("查询" + this.bdcdyh);
				this.$refs.lpbContent.lpbDataMap(this.bdcdyh);
			} else {
				this.$message({
					message: "请输入内容后查询",
					type: "warning",
				});
			}
		},
		//调用楼盘表信息查询和图例统计接口
		getlpbData () {
			this.$refs.lpbContent.loadingData(this.$store.state.zrzbsm, this.scyclx);
			this.getDyztBsmList();
			this.getLpbFwytAndQlxz();
			//改变楼盘表子组件的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("实预测转换成功");
					this.$refs.lpbContent.loadingData(this.$store.state.zrzbsm, '1');
					this.$refs.lpbContent.loadingData(this.$store.state.zrzbsm, '0');
				} else if (res.code === 500) {
					this.$message.warning(res.message);
				}
			});
		},
		//切换房屋状态
		handleChoosedH (bsms, color) {
			//每次切换房屋状态，将之前高亮的户边框颜色重置为默认
			this.$refs.lpbContent.choosedList = [];
			this.$refs.lpbContent.$refs.hBsm.forEach((item) => {
				item.style.border = '';
				item.className = '';
			});
			this.bsms = bsms;
			//清除选中户
			this.$nextTick(() => {
				//给hBsmList传值
				// console.log(bsms,'bsms');
				this.$refs.lpbContent.choosedList = bsms;
				this.$refs.lpbContent.borderColor = color;
			})
		},
		//批量添加不动产单元号
		addBdcdyh () {
			if (this.qsztList.indexOf('1') > -1) {
				Message.warning("已提交的户无法继续操作")
			} else {
				batchGeneratorBdcdyh(this.$store.state.zrzh, this.pd[0].bsm, 0).then(
					(res) => {
						if (res.code === 200) {
							this.$message.success("生成完成！");
						} else if (res.code === 206) {
							let hasGenerateCount = res.result.hasGenerateCount;
							let unGenerateCount = res.result.unGenerateCount;
							if (+unGenerateCount === 0) {
								this.$message.warning("不存在未生成不动产单元号的户，无需生成不动产单元号！")
								return
							}
							this.open(hasGenerateCount, unGenerateCount);
						} else {
							this.$message.warning(res.message)
						}
					}
				);
			}
		},

		open (hasGenerateCount, unGenerateCount) {

			this.$confirm('未生成单元号有' + unGenerateCount + '户,已经生成单元号有' + hasGenerateCount + '户,是否覆盖全部重新生成？', '确认信息', {
				distinguishCancelAndClose: true,
				confirmButtonText: '覆盖全部生成',
				cancelButtonText: '跳过已生成单元号户'
			})
				.then(() => {
					batchGeneratorBdcdyh(this.$store.state.zrzh, this.pd[0].bsm, 2).then(
						(res) => {
							if (res.code === 200) {
								this.$message.success("生成完成！");
							}
						});
				})
				.catch(action => {
					if (action === 'cancel') {
						batchGeneratorBdcdyh(this.$store.state.zrzh, this.pd[0].bsm, 1).then(
							(res) => {
								if (res.code === 200) {
									this.$message.success("生成完成！");
								}
							});
					}
				});
		},

		//获取各项单元状态统计数据
		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
						})
					}
				}
			});
			getLpbQsxtj(data).then((res) => {
				if (res.code === 200) {
					this.qsxList = [
						{
							name: '坐落',
							bsms: res.result.zl.bsms,
							color: '#2591FD',
							ts: res.result.zl.bsms.length
						},
						{
							name: '分层分户图',
							bsms: res.result.fcfht.bsms,
							color: '#2591FD',
							ts: res.result.fcfht.bsms.length
						},
						{
							name: '室号',
							bsms: res.result.shbw.bsms,
							color: '#2591FD',
							ts: res.result.shbw.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;
		},
		bsms (n) {
			this.fileData.glbsmList = n;
			console.log(this.fileData, 'filedata');
		}
	},
};
</script>
<style scoped lang="scss">
.edit {
	height: 100%;
	background-color: #F4F9FF;

	.tab-header {
		border: 1px solid #dedede;
		box-sizing: border-box;
		padding: 20px 0;
		background-color: #ffffff;
		margin-bottom: 10px;
		position: relative;

		.searchContent {
			margin-left: 62px;
			box-sizing: border-box;
			padding: 0 20px;

			.searchInput {
				transition: 0.5s;
				margin-left: 20px;
				display: inline-block;
			}
		}

		.change {
			position: absolute;
			left: 0;
			top: 0;
			height: 100%;
			width: 80px;
			border-right: 1px solid #dedede;

			i {
				cursor: pointer;
				color: #0090FF;
				font-size: 36px;
				display: inherit;
				text-align: center;
				line-height: 128px;
			}
		}

		.radioBtn {
			margin-left: 10px;
			padding: 12px 10px;
			border: 0;

			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 {
		border: 1px solid #dedede;
		background-color: #ffffff;
		display: flex;

		.lp-tree {
			height: 100%;
			overflow: hidden;
			transition: 0.5s;

			.treeData {
				margin-top: 20px;
				margin-left: 26px;
				float: left;
			}
		}

		.w0 {
			width: 0;
		}

		.w260 {
			width: 260px;
		}

		.lp-overview {
			transition: 0.5s;
			flex: 1;
			border: 1px solid rgb(236, 236, 236);
			border-top: 0;
			border-bottom: 0;
			margin-right: 10px;
			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,
				.fwxz,
				.fwyt,
				.qsx {
					height: 122px;
				}

				.dyzt,
				.fwxz,
				.fwyt,
				.qsx {
					cursor: pointer;
					border-bottom: 1px solid #e6e6e6;
					border-left: 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: 260px;
	}

	.hbjDialog {
		/deep/ .el-dialog {
			margin-top: 10vh !important;
		}
	}

	.fa {
		padding-right: 4px;
	}

	.wrap {
		width: 100%;
		height: 30px;
		position: relative;

		.main-button {
			display: -webkit-flex;
			display: flex;
			flex-direction: column-reverse;
			flex-wrap: nowrap;
			position: absolute;
			left: 165px;
			top: 18px;
		}

		.download {
			position: absolute;
			left: 312px;
			top: 19px;
		}
	}
}
</style>