<template>
	<div class="home-box">
		<el-container>
			<el-aside :class="{ 'aside-show': isActive }">
				<div class="logo-box" :class="{ 'logo-box-show': isActive }">
					<img
						class="logo-img"
						src="@/assets/images/logo-realestate.png"
						alt=""
						@click="toHome"
					/>
					<span class="logo-text" v-show="!textLogo">不动产权籍调查系统</span>
				</div>
				
				<div class="search-box">
					<el-input
								maxlength="28"
								v-model="treeKey"
								class="searchInput"
								placeholder="请输入关键字"
						><i
								slot="suffix"
								class="el-input__icon el-icon-search"
								@click="inputChange"
						></i
						></el-input>
				</div>
				<div class="treeModule"  :style="{height:treeHeight+'px'}">
					<LineTree :pd="pd" v-if="lineTreeVisible" @itemClick="itemClick"></LineTree>
				</div>
			</el-aside>
			<el-container class="calcWidth">
				<el-header>
					<div class="header-top">
						<!-- <div class="top-items" @click="toggleClick">
							<i class="iconfont iconsuojin" v-show="!isActive"></i>
							<i class="iconfont iconzhankai" v-show="isActive"></i>
						</div> -->
						<div
							class="top-items"
							v-for="(item, index) in headTop"
							:key="index + '1'"
							:class="{ 'is-active': item.select }"
							:style="{'height':item.name == '首页' && item.select ? '64'+'px' : '65'+'px'}"
							@click="selectTopItems(index)"
						>
							<i :class="item.icon"></i>
							<span>{{ item.name }}</span>
						</div>
					</div>
					<div class="right-tools">
						<div class="tuOrShu">
							<i class="iconfont icondiqiu" title="图形管理" v-if="!isMap" @click="goMap"></i>
							<i class="iconfont iconxinxi" title="属性管理" v-else @click="goBack"></i>
						</div>
					</div>
					<!-- <div class="header-bottom">
						<Navigation ref="navigation"></Navigation>
					</div> -->
					<el-dialog v-dialogDrag :close-on-click-modal="false" title="新建" :visible.sync="dialogVisible" width="48%">
						<Create @closeDialog="closeDialog" :auth="false"></Create>
					</el-dialog>
				</el-header>
				<el-main>
					<router-view />
				</el-main>
			</el-container>
		</el-container>
		<!-- <div class="treeModule-show" :class="{ 'w0': isActive }"></div> -->
	</div>
</template>
<script>
import util from "@/libs/util.js";
import Navigation from "../components/IvyElement/navigation";
import Create from "./panel/create/index";
import LineTree from "../components/lineTree/lineTree";
import { setTimeout } from "timers";
import { getTree,getDdicByMC,getTreeList,getTreeByBsm,getListMenu } from "../api/common";

export default {
	components: {
		// Navigation,
		LineTree,
		Create,
	},
    provide(){
        return{
            getRightTree: this.getRightTree,
			getTreeByBsm:this.getTreeByBsm,
			getTreeByS:this.getTreeByS
		}
	},
	data() {
		return {
			navigationList: [],
			isActive: false,
			textLogo: false,
			activePath: "",
			defaultActive: "",
			headTop: [
				{
					path: "/panel",
					select: false,
				},
				{
					path: "/create",
					select: false,
				},
				{
					path: "/add",
					select: false,
				},
				{
					path: "/modify",
					select: false,
				},
				{
					path: "/change",
					select: false,
				},
				{
					path: "/search",
					select: false,
				},
				{
					path: "/manage",
					select: false,
				},
			],
			// 上导航选中id
			indId: undefined,
			menuList: [],
			pathAndCodeObj: {
				"/article-draft": "PSH004",
				"/article-publish": "PSH005",
				"/article-recycle": "PSH006",
				"/notice-draft": "PSH007",
				"/notice-publish": "PSH008",
				"/notice-recycle": "PSH009",
				"/column_management": "PSH018",
				"/announcement_template": "PSH019",
				"/business_management": "PSH020",
			},
			pd: this.$store.state.treeData,
			dialogVisible: false,
          	isMap:false,
			treeHeight:0,
			routerInfo:null,
			lineTreeVisible:false,
			treeKey:'',
		};
	},
	computed: {
		permission_routes() {
			return this.$store.state.permission_routes.navigation;
		},
	},
	watch: {
		"$route.path": function(newPath) {
			//监测路由变化，高亮顶部导航
			this.headTop.forEach((item, index) => {
				item.select = false;
				if (item.path == newPath) {
					item.select = true;
				}
			});
			if(newPath == "/search" || newPath == "/panel" || newPath == "/add" || newPath == "/change" || newPath == "/modify"){
				this.getTreeList();
				if(this.isMap){
					this.isMap = false;
				}
			} else if(newPath == '/viewMap'){
				this.isMap = true;
			}else{
				
			}
		},
		"$store.state.treeData":function (val) {
			this.pd = val;
		},
		'$store.state.treeZdbsm':function (val) {
			// console.log(val,'val');
		},
	},
	mounted(){
		this.$nextTick(()=>{
			this.lineTreeVisible = true
		})
		var routePath = this.$route.path;
		if(routePath == '/viewMap'){
			this.isMap = true;
		}else{
			this.isMap = false;
		}
	},
	created() {
		if (this.$route.meta) {
			this.defaultActive = this.$route.meta.code;
		}
		if (this.permission_routes.length !== 0) {
			this.navigationList = this.permission_routes;
		} else {
			// let list = JSON.parse(util.cookies.get('navigation-1')).concat(JSON.parse(util.cookies.get('navigation')))
			//mock数据
			let list = [
				{
					name: "首页",
					icon: "iconfont iconshouye",
					path: "/panel",
				},
				{
					name: "新建",
					icon: "iconfont iconxinjian",
					path: "/create",
				},
				{
					name: "添加",
					icon: "iconfont icontianjia",
					path: "/add",
				},
				{ 
					name: "更正", 
					icon: "iconfont icongengzheng", 
					path: "/modify" },
				{
					name: "变更",
					icon: "iconfont iconbiangeng",
					path: "/change",
				},
				{
					name: "综合查询",
					icon: "iconfont iconzonghechaxun",
					path: "/search",
				},
				{
					name: "系统管理",
					icon: "iconfont iconxitongguanli",
					path: "/manage",
				}
			];
			this.navigationList = list;
		}
		this.sortNavigation(this.navigationList, 0);
		// if (util.cookies.get("indId")) {
		// 	let indId = util.cookies.get("indId") - 0;
		// 	this.navSelect(indId);
		// 	this.sortNavigation(this.navigationList, indId);
		// }
		this.getDic();
		//刷新页面后根据不同路由获取不同树结构数据
		if(this.$route.path == '/zrz'){
			this.getTreeByBsm(this.$store.state.zrzbsm,'zrz',this.$route.query.auth)
		}else if(this.$route.path == '/zd'){
			this.getRightTree(this.$store.state.zdbsm)
		}else if(this.$route.path == '/dz'){
			this.getTreeByBsm(this.$store.state.dzbsm,'dz',this.$route.query.auth)
		}else if(this.$route.path == '/gzw'){
			this.getTreeByBsm(this.$store.state.gzwbsm,'gzw',this.$route.query.auth)
		}else{
			this.getTreeList();
		}
		//刷新页面后根据不同路由高亮相对应的导航
		if(this.$route.path == '/zrz' || this.$route.path == '/zd' || this.$route.path == '/dz'){

		}else{
			this.headTop.forEach(item=>{
				if (item.path == this.$route.path) {
					item.select = true;
				}
			})
		}
		this.$nextTick(()=>{
            this.treeHeight = this.$el.clientHeight - 132;
		});
	},
	methods: {
        getTreeByS(zdbsms){
            getListMenu(zdbsms).then(res=>{
                if (res.success) {
                    this.pd=res.result;
                }
			})
		},
		//请求字典数据
		async getDic() {
			let s = this.$store.state;
			s.zjzlList = s.zjzlList.length == 0 ?await this.getDicData("证件种类") : s.zjzlList;
			s.gjList = s.gjList.length == 0 ?await this.getDicData("国家和地区") : s.gjList;
			s.ssList = s.ssList.length == 0 ?await this.getDicData("省市") : s.ssList;
			s.qlrlxList = s.qlrlxList.length == 0 ?await this.getDicData("权利人类型") : s.qlrlxList;
			s.xbList = s.xbList.length == 0 ? await this.getDicData("性别") : s.xbList;
			s.sshyList = s.sshyList.length == 0 ?await this.getDicData("所属行业") : s.sshyList;
			s.qllxList = s.qllxList.length == 0 ?await this.getDicData("权利类型") : s.qllxList;
			s.zdtzmList = s.zdtzmList.length == 0 ?await this.getDicData("宗地（宗海）特征码") : s.zdtzmList;
			s.qlsdfsList = s.qlsdfsList.length == 0 ?await this.getDicData("权利设定方式") : s.qlsdfsList;
            s.gyfsList = s.gyfsList.length == 0 ?await this.getDicData("共有方式") : s.gyfsList;
			s.qlxzList = s.qlxzList.length == 0 ?await this.getDicData("权利性质") : s.qlxzList;
			s.tdytList = s.tdytList.length == 0 ?await this.getDicData("土地用途") : s.tdytList;
			s.fwytList = s.fwytList.length == 0 ?await this.getDicData("房屋用途") : s.fwytList;
			s.tddjList = s.tddjList.length == 0 ?await this.getDicData("土地等级") : s.tddjList;
			s.fwlxList = s.fwlxList.length == 0 ?await this.getDicData("房屋类型") : s.fwlxList;
			s.hxList = s.hxList.length == 0 ?await this.getDicData("户型") : s.hxList;
			s.hxjgList = s.hxjgList.length == 0 ?await this.getDicData("户型结构") : s.hxjgList;
			s.fwjgList = s.fwjgList.length == 0 ?await this.getDicData("户型结构") : s.fwjgList;
			s.gzwlxList = s.gzwlxList.length == 0 ?await this.getDicData("构(建)筑物类型") : s.gzwlxList;

			s.fwxzOptions = s.fwxzOptions.length == 0 ?await this.getDicData("房屋性质") : s.fwxzOptions;
			s.cbOptions = s.cbOptions.length == 0 ?await this.getDicData("房屋产别") : s.cbOptions;
			s.cqlyOptions = s.cqlyOptions.length == 0 ?await this.getDicData("产权来源") : s.cqlyOptions;
			s.jgOptions = s.jgOptions.length == 0 ?await this.getDicData("房屋结构") : s.jgOptions;
			s.gmjjhyflbsmList = s.gmjjhyflbsmList.length == 0 ?await this.getDicData("国民经济行业分类代码") : s.gmjjhyflbsmList;
		},
		async getDicData(name) {
			return await getDdicByMC(name).then((res)=> {
					return res.result
				   });
		},
		//根据宗地bsm查询树数据
		getRightTree(bsm,source) {
			getTree(bsm,source).then((res) => {
				if (res.success) {
					this.pd = res.result;
					this.$store.state.newZdbsm = '';
					this.$store.state.treeData = res.result;
				}
			});
		},
		//根据自然幢/多幢/户bsm查询树数据
		getTreeByBsm(bsm,type,source) {
			if (this.$store.state.oldZdbsm == '' || this.$store.state.newZdbsm != this.$store.state.oldZdbsm) {
				getTreeByBsm(bsm,type,source).then((res) => {
					if (res.success) {
						this.pd = res.result;
						this.$store.state.treeData = res.result;
						this.$store.state.newZdbsm = '';
					}
				});
			}else{

			}
		},

		sortNavigation(data, selectId) {
			let headTop = this.headTop;
			data.forEach((item, index) => {
				headTop[index].name = item.name;
				headTop[index].icon = item.icon;
			});
		},
		// menuSelect(data, selectId) {
		// 	this.menuList = data[selectId].children;
		// },
		handleOpen(key, keyPath) {
			console.log(key, keyPath);
		},
		handleClose(key, keyPath) {
			console.log(key, keyPath);
		},
		toggleClick() {
			this.isActive = !this.isActive;
			if (!this.isActive) {
				setTimeout(() => {
					this.textLogo = this.isActive;
				}, 200);
			} else {
				this.textLogo = this.isActive;
			}
		},
		selectTopItems(ind) {
			console.log(this.headTop);
			if (ind == 1) {
				//点击新建，弹框
				this.dialogVisible = true;
			} else {
				this.dialogVisible = false;
				this.indId = ind;
				// this.menuSelect(this.navigationList, ind);
				// this.$store.dispatch("setTabs/init_tabs");
				// this.$store.dispatch("setTabs/set_active_index", "/panel");
				this.$router.push(this.headTop[ind].path);
				this.navSelect(ind);
				// util.cookies.set("indId", ind);
			}
		},
		// 上导航选中id
		navSelect(id) {
			this.headTop.forEach((item, index) => {
				item.select = false;
				if (index == id) {
					item.select = true;
				}
			});
		},
		//树控件点击事件
		itemClick(data) {
			console.log(data);
		},
		//关闭新建子组件弹框
		closeDialog() {
			this.dialogVisible = false;
		},
		getTreeList(){
			getTreeList().then((res)=>{
				this.pd=res.result;
				this.$store.state.newZdbsm = '';
			})
		},
		goBack(){
			this.isMap = false;
			var curretRouterInfo = JSON.parse(sessionStorage.getItem("curretRouterInfo"));
		//this.$router.back(-1);
			if(curretRouterInfo){
				this.$router.push({
					path: curretRouterInfo.path,
					query: curretRouterInfo.query
				});
			}else {
				this.$router.back(-1);
			}

		},
		goMap(){
			var curretRouterInfo = {
				path:this.$route.path,
				query:this.$route.query
			}
			sessionStorage.setItem('curretRouterInfo',JSON.stringify(curretRouterInfo));
			this.isMap = true;
			var routerQuery = null;
			var path = this.$route.path;
			if(path == "/zd"){
				routerQuery = {
					bsm:this.$route.query.bsm,
					type:"zd"
				};
			}else if(path == "/zrz"){
				routerQuery = {
					bsm:this.$route.query.bsm,
					type:"zrz"
				}
			}
			this.$router.push({
				path: "/viewMap",
				query: routerQuery
			});
		},
		toHome(){
        	this.$router.push({ path: "/panel" });
		},
		inputChange(){

		}
	},
};
</script>
<style lang="less" scoped>
.home-box {
	width: 100%;
	height: 100vh;
	position: relative;
    min-width: 1680px;
    overflow-x: auto;
	.calcWidth{
		width: calc(100% - 300px);
	}
	.el-container {
		height: 100%;
	}
	.el-header {
		background-color: #fff;
		padding: 0 !important;
		height: 66px!important;
		position: relative;
		.header-top {
			height: 66px;
			// border-bottom: 1px solid#EAEAEA;
			box-sizing: border-box;
			background-image: url('../assets/images/banner.png');
			display: flex;
			flex-grow: 1;
			justify-content: center;
			align-items: center;
			.top-items {
				cursor: pointer;
				height: 66px;
				padding: 0 30px;
				font-size: 18px;
				line-height: 66px;
				float: left;
				position: relative;
				color: #ffffff;
				// border-left: 1px solid #EAEAEA;
    			/*border-right: 1px solid #EAEAEA;*/
				i {
					margin-right: 6px;
					font-size: 18px;
					position: relative;
					top: 1px;
				}
				.hamburger {
					font-size: 16px;
					line-height: 72px;
					color: #000;
				}
			}
			.top-items:hover{
				background: hsla(0,0%,100%,.2);
			}
			.top-items.is-active {
				background: hsla(0,0%,100%,.2);
			}
		}
		.header-bottom {
			height: 50px;
			box-shadow: 0px 2px 4px 0px rgba(222, 222, 222, 0.7);
			border-bottom: 1px solid rgba(234, 234, 234, 1);
			box-sizing: border-box;
		}
		.right-tools{
			float: right !important;
			position: absolute;
			right: 18px;
			top: 20px;
			.tuOrShu{
				.iconfont{
					cursor: pointer;
					color:#ffffff;
					font-size:30px
				}
			}
		}

	}
	.el-aside {
		width: 280px !important;
		background-color: #ffffff;
		color: #333;
		// text-align: center;
		overflow: hidden;
		transition: width 0.3s;
		.logo-box {
			width: 100%;
			height: 66px;
			border-bottom: 1px solid rgba(255, 255, 255, 0.2);
			box-sizing: border-box;
			padding: 10px 20px;
			transition: width 0.3s;
			background-color: #287CC5;
			.logo-img {
				width: 44px;
				float: left;
			}
			.logo-text {
				padding-left: 10px;
				color: #ffffff;
				line-height: 44px;
				font-size: 20px;
			}
		}
		.search-box{
			height: 65px;
			box-sizing: border-box;
			padding: 18px 20px;
			border-right: 1px solid #dedede;
			.searchInput{
				/deep/ .el-input__inner{
					width: 240px;
					height: 38px;
					background: #FFFFFF;
					border-radius: 4px;
					border: 1px solid #DEDEDE;
				}
				/deep/ .el-input__suffix{
					top: 0!important;
				}
			}
		}
		.treeModule {
			box-sizing: border-box;
			border-right: 1px solid #dedede;
		}
		.logo-box-show {
			width: 64px;
		}
		.el-menu {
			border-right: 0;
		}
		.el-submenu .el-menu-item {
			text-align: left;
			text-indent: 15px;
		}
	}
	.aside-show {
		width: 64px !important;
	}

	.el-main {
        //background-color: #F4F9FF;
        background-color: #F4F9FF;
		color: #333;
		// text-align: center;
		// line-height: 160px;
		padding: 0;
	}

	.treeModule-show{
		width: 280px;
		height: calc(100% - 120px);
		position: absolute;
		top: 120px;
		left: 0;
		z-index: 1;
		pointer-events: none;
		-webkit-box-shadow: inset -14px 0px 16px red;
		box-shadow: inset -23px 0px 16px #ffffff;
		transition: 0.3s;
	}
	.w0{
		width: 64px;
	}
}
</style>