<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 @click="addBdcdyh">批量单元号</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>
        <h-cxlz :h-cxlz-visble="hcxlzVisible" :bsms="bsms" @close="hcxlzClose"></h-cxlz>
        <!-- 双击户的弹出框 -->
        <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 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} from "../../../../api/lpb";


    export default {
        name: "",
        components: {LineTree, addLjz, addZdy, addCh, lpbContent, PlC, PlSh, PlH, PlZl, hbj, HCxlz},
        props: {},
        data() {
            return {
                bsms: ["123", "321", "231"],
                hbsm: '',
                hcxlzVisible: false,
                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: {
            hcxlzClose() {
                this.hcxlzVisible = false;
            },
            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"]
		},
		//批量添加不动产单元号
		addBdcdyh(){
			// this.pd[0].bsm //自然幢标识码
			console.log(this.$store.state.zrzh,'this.$store.state.zrzh');
		}
	},
	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>