<template>
	<div class="main">
		<template v-if="isCxlz">
			<!-- <p class="tips">查询条件</p> -->
			<div class="search">
				<el-row>
					<el-col :span="24" style="margin-left: -10px;">
						<el-form :inline="true" class="demo-form-inline" label-width="106px">
							<el-form-item label="宗地编码">
								<el-input
									v-model="queryData.zddm"
									placeholder="输入宗地编码"
								></el-input>
							</el-form-item>
							<el-form-item label="不动产权证号">
								<el-input
									v-model="queryData.bdcqzh"
									placeholder="输入坐落地址"
								></el-input>
							</el-form-item>
							<el-form-item label="不动产单元号">
								<el-input
									maxlength="28"
									v-model="queryData.bdcdyh"
									placeholder="输入不动产单元号"
								></el-input>
							</el-form-item>
							<el-button type="primary" @click="search" icon="el-icon-search">查询</el-button>
							<el-button type="warning" style="margin-left:10px" @click="result" icon="el-icon-refresh">重置</el-button>
						</el-form>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="24" style="margin-left: -10px;">
						<el-form :inline="true" class="demo-form-inline"  label-width="106px">
							<el-form-item label="权利人">
								<el-input
									v-model="queryData.qlrmc"
									placeholder="输入权利人姓名"
								></el-input>
							</el-form-item>
							<el-form-item label="坐落">
								<el-input
									v-model="queryData.zl"
									placeholder="输入坐落地址"
								></el-input>
							</el-form-item>
						</el-form>
					</el-col>
				</el-row>
			</div>
			<!-- <p class="tips">查询列表</p> -->
			<el-table :data="Data" :height="tableHeight">
				<td class="xh">序号</td>
				<td class="cz">操作</td>
				<td class="zddm">宗地代码</td>
				<td class="bdcdyh">不动产单元号</td>
				<td class="xmmc">项目名称</td>
				<td class="bdcqzh">不动产权证号</td>
				<td class="qlr">权利人</td>
				<td class="zl">坐落</td>
				<el-table-column type="index" width="80" align="center" label="序号">
				</el-table-column>
				<el-table-column prop="zddm" align="left" label="宗地代码">
				</el-table-column>
				<el-table-column prop="bdcdyh" align="left" label="不动产单元号">
				</el-table-column>
				<el-table-column prop="xmmc" align="left" width="150" label="项目名称">
				</el-table-column>
				<el-table-column prop="bdcqzh" align="left" label="不动产权证号">
				</el-table-column>
				<el-table-column prop="qlrmc" align="left" width="120" label="权利人">
				</el-table-column>
				<el-table-column prop="zl" align="left" label="坐落"></el-table-column>
				<el-table-column label="操作" align="center" width="100">
					<template slot-scope="scope">
						<el-tooltip class="item" effect="light" content="选择" placement="top">
							<i class="iconfont iconbanli iconfontEdit" @click="xzzrz(scope.row)" style="padding:0 10px"></i>
						</el-tooltip>
						<!-- <el-button @click="xzzrz(scope.row)" type="text" size="small"
							>选择
						</el-button> -->
					</template>
				</el-table-column>
			</el-table>
			<div class="page">
				<el-pagination
					background
					layout="prev, pager, next,total"
					:page-size="queryData.pageSize"
					:total="total"
					@current-change="currentChange"
				>
				</el-pagination>
			</div>
		</template>
		<div class="lpb"  v-if="!isCxlz">
			<div class="lpb-header">
						<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' }"
							@change="inputChange"
							class="searchInput"
							placeholder="输入不动产单元号或室号"
							><i
								slot="suffix"
								class="el-input__icon el-icon-search"
								@click="inputChange"
							></i
						></el-input>
			<el-link type="primary" style="margin-left:20px" @click="isCxlz=true">重新选择户</el-link>
			</div>
			<div class="lpb-content" ref="lpbContentWrap" :style="{ height: lpbContentHeight + 'px' }">
				<!-- 楼盘表主体 -->
				<div class="lp-overview" :style="{ width: lpbContentwidth + 'px' }">
					<lpbContent ref="lpbContent" class="" :zrzbsm='zrzbsm' lpbParent = 'isCxlz'></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,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>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import { cxlzZrzList } from "@api/zrz";
import lpbContent from "../../../zrz/lpb/bjlp/lpbContent/index";

export default {
	name: "",
	props: {},
	components: { lpbContent },
	data() {
		return {
			total: 1,
			queryData: {
				bdcdyh: "",
				bdcqzh: "",
				qlrmc: "",
				xmmc: "",
				zddm: "",
				zl: "",
				pageNo: 1,
				pageSize: 12,
				type:'add',
			},
			Data: [],
			dylxs: ["zd"],
			tableHeight: 0,
			isCxlz:true,
			zrzbsm:'',
			scyclx:'0', //实预测类型
			bdcdyh:'',//室号搜索
			inputWidth: 220,//搜索框宽度
			legendToggleFlag: false,
			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: [],
			lpbContentHeight: 0,
			lpbContentwidth: 0,
		};
	},
	created() {},
	mounted() {
		this.getData(this.queryData);
		this.$nextTick(() => {
			this.tableHeight =
				(document.documentElement.clientHeight ||
					document.body.clientHeight) - 352;
          	this.lpbContentHeight = (document.documentElement.clientHeight || document.body.clientHeight) - 220;
			this.lpbContentwidth = this.$refs.lpbContentWrap.clientWidth - 34 - 6;
		});
	},
	methods: {
		currentChange: function(val) {
			this.queryData.pageNo = val;
			this.getData(this.queryData);
		},
		xzzrz: function(item) {
			this.isCxlz = false;
			this.zrzbsm = item.bsm;
		},
		close: function() {
			this.centerDialogVisible = false;
		},
		result: function() {
			this.queryData = {
				bdcdyh: "",
				bdcqzh: "",
				qlrmc: "",
				xmmc: "",
				zddm: "",
				zl: "",
				pageNo: 1,
				pageSize: 12
			};
			this.getData(this.queryData);
		},
		getData: function(data) {
            cxlzZrzList(data).then((res) => {
				this.Data = res.result.records;
				this.total = res.result.total;
			});
		},
		search: function() {
			this.getData(this.queryData);
		},
		
		//实预测转换
		scyclxChange(){
		//清空已选中层户
				// this.bsms = [];
				this.$refs.lpbContent.hbsmList = [];
				this.$nextTick(()=>{
					//户
					this.$refs.lpbContent.$refs.hBsm.forEach(item=>{
						item.style.borderColor = 'rgb(230, 230, 230)';
						if (item.className == "tdSelect") {
							item.className = "";
						}
					});
					//层
					this.$refs.lpbContent.$refs.cBsm.forEach(item=>{
						console.log(item.className,'item.className');
						item.className = "floor";
					});
				})
				//获取图例数据
				this.getDyztBsmList();
				this.getLpbFwytAndQlxz();
		},
		inputChange() {
			if (this.bdcdyh != "") {
				// 根据不动产单元号或者室号搜索
				// this.$refs.lpbContent.lpbDataMap(this.bdcdyh);
			} else {
				this.$message({
					message: "请输入内容后查询",
					type: "warning",
				});
			}
		},
		//图例的展开收起
		legendToggle() {
			this.legendToggleFlag = !this.legendToggleFlag;
		},
		//获取各项单元状态统计数据
		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: {},
	watch: {
		//树结构和图例伸缩时修改楼盘表主要内容区宽度
		legendToggleFlag(n) {
			if (n) {
				this.lpbContentwidth -= 204;
			} else {
				this.lpbContentwidth += 204;
			}
		},
		//选择自然幢展示楼盘表后，查询右侧图例数据
		isSearch(n){
		if (!n) {
			this.getDyztBsmList();
			this.getLpbFwytAndQlxz();
		}
		},
		//改变syclx，更新楼盘表数据
		scyclx(n){
			this.$refs.lpbContent.lpbData = n == 0 ? this.$refs.lpbContent.yclpbData : this.$refs.lpbContent.sclpbData
		},
		selectedZt(n){
			this.legendToggleFlag = true;
		},
	},
};
</script>
<style scoped lang="less">
.main {
	box-sizing: border-box;
	padding: 18px;
	height: auto;
}
.search{
	
	background-color: #FFFFFF;
	box-sizing: border-box;
	padding: 18px 0 4px 0;
	border: 1px solid #E6E6E6;
	margin-bottom: 10px;
}
.el-button {
	width: 100px;
}
.tips{
	color: #9B9B9B;
	margin-left: 2px;
	margin-bottom: 10px;
}

table {
	margin-top: 10px;
	background-color: #fff;
	font-size: 14px;
	width: 100%;
	table-layout: fixed;
	tr:hover {
		background-color: #f5f7fa;
	}
	td,
	th {
		text-align: center;
		height: 36px;
		min-width: 50px;
		overflow: hidden;
		white-space: nowrap;
		-ms-text-overflow: ellipsis;
		text-overflow: ellipsis;
	}
}

table:hover {
	cursor: pointer;
}

.inputtitle {
	line-height: 40px;
	span {
		display: inline-block;
		width: 120px;
		text-align: left;
	}
	/deep/ .el-input {
		width: calc(100% - 120px);
	}
}

.shop {
	margin-top: 20px;
}

.xh {
	width: 50px;
}

.zddm {
	width: 120px;
}

.bdcdyh {
	width: 180px;
}

.xmmc {
	width: 100px;
}

.bdcqzh {
	width: 100px;
}

.qlr {
	width: 100px;
}

.zl {
	width: 100px;
}

.cz {
	width: 50px;
	span {
		color: blue;
	}
}

.noData {
	color: #b2b2b2;
}

.page {
	position: fixed;
	bottom: 20px;
	width: auto;
	height: auto;
}
.lpb{
	box-sizing: border-box;
	padding-left: 2px;
			.searchInput {
				transition: 0.5s;
				margin-left: 20px;
				display: inline-block;
	}
	.lpb-content{
		margin-top: 20px;
		background-color: #ffffff;
		display: flex;
		overflow-y: scroll;
		.lp-overview {
			transition: 0.5s;
			flex: 1;
			margin-right: 20px;
			box-sizing: border-box;
			border: 1px solid rgb(236, 236, 236);
			border-top: 0;
			border-bottom: 0;
		}
		.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 {
			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;
				}
			}
			}
		}
		}
	}
}
</style>