<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=""
					/>
					<span class="logo-text" v-show="!textLogo">不动产权籍调查系统</span>
				</div>
				<div class="treeModule">
					<LineTree :pd="pd"></LineTree>
				</div>
			</el-aside>
			<el-container>
				<el-header height="100px">
					<div class="header-top">
						<div class="top-items" @click="toggleClick">
							<i class="fa fa-outdent hamburger" v-show="!isActive"></i>
							<i class="fa fa-indent hamburger" v-show="isActive"></i>
						</div>
						<div
							class="top-items"
							v-for="(item, index) in headTop"
							:key="index + '1'"
							:class="{ 'is-active': item.select }"
							@click="selectTopItems(index)"
						>
							<i :class="item.icon"></i>
							<span>{{ item.name }}</span>
						</div>
					</div>
					<div class="header-bottom">
						<Navigation ref="navigation"></Navigation>
					</div>
				</el-header>
				<el-main>
					<router-view />
				</el-main>
			</el-container>
		</el-container>
	</div>
</template>
<script>
import util from "@/libs/util.js";
import screenfull from "screenfull";
import Navigation from "../components/IvyElement/navigation";
import LineTree from "../components/lineTree/lineTree";
import { setTimeout } from "timers";
export default {
	components: {
		Navigation,
		LineTree,
	},
	data() {
		return {
			navigationList: [],
			isActive: false,
			textLogo: false,
			activePath: "",
			defaultActive: "",
			headTop: [
				{
					select: true,
				},
				{
					select: false,
				},
				{
					select: false,
				},
				{
					select: false,
				},
				{
					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: [
				{
					label: "行政区(1)",
					children: [],
				},
				{
					label: "行政区(2)",
					children: [
						{
							label: "地籍区1",
							children: [],
						},
						{
							label: "地籍区2",
							children: [
								{
									label: "国有",
									children: [
										{
											label: "宗地代码1933",
											children: [
												{
													label: "自然幢号1256",
												},
											],
										},
										{
											label: "宗地代码2100",
											children: [
												{
													label: "自然幢号1543",
												},
											],
										},
									],
								}
							],
						},
						{
							label: "地籍区3",
							children: [],
						},
						{
							label: "地籍区4",
							children: [],
						},
					],
				},
				{
					label: "行政区(3)",
					children: [],
				},
				{
					label: "行政区(4)",
					children: [],
				},
				{
					label: "行政区(5)",
					children: [],
				},
			],
		};
	},
	computed: {
		permission_routes() {
			return this.$store.state.permission_routes.navigation;
		},
	},
	watch: {
		"$route.path": function(newPath) {
			this.defaultActive = this.pathAndCodeObj[newPath];
		},
	},
	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: "fa fa-address-card-o",
					path: "/officialAccount_panel",
				},
				{ name: "更正", icon: "fa fa-address-card-o", path: "/applets_panel" },
				{
					name: "变更",
					icon: "fa fa-address-card-o",
					path: "/appointment_panel",
				},
				{
					name: "综合查询",
					icon: "fa fa-address-card-o",
					path: "/system_panel",
				},
			];
			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);
		}
	},
	methods: {
		sortNavigation(data, selectId) {
			let headTop = this.headTop;
			data.forEach((item, index) => {
				headTop[index].name = item.name;
				headTop[index].icon = item.icon;
			});
			this.menuSelect(data, selectId);
		},
		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) {
			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("/panel");
			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;
				}
			});
		},
		screen() {
			// 如果不允许进入全屏，发出不允许提示
			// if (!screenfull.enabled) {
			//   this.$message('您的浏览器不能全屏');
			//   return false
			// }
			screenfull.toggle();
		},
	},
};
</script>
<style lang="less" scoped>
.home-box {
	width: 100%;
	height: 100vh;
	.el-container {
		height: 100%;
	}
	.el-header {
		background-color: #fff;
		padding: 0 !important;
		.header-top {
			height: 60px;
			border-bottom: 1px solid rgba(242, 242, 242, 1);
			box-sizing: border-box;
			.top-items {
				cursor: pointer;
				height: 60px;
				padding: 0 30px;
				font-size: 16px;
				line-height: 60px;
				float: left;
				position: relative;
				color: #4a4a4a;
				i {
					margin-right: 6px;
				}
				.hamburger {
					font-size: 16px;
					line-height: 60px;
					color: #000;
				}
			}
			.top-items:not(:last-child)::after {
				content: "";
				width: 1px;
				height: 14px;
				background: #eaeaea;
				position: absolute;
				right: -1px;
				top: 24px;
			}
			.top-items.is-active {
				color: #006cff;
			}
		}
		.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;
		}
	}
	.el-aside {
		width: 290px !important;
		background-color: #1d50dd;
		color: #333;
		// text-align: center;
		overflow: hidden;
		transition: width 0.3s;
		.logo-box {
			width: 100%;
			height: 120px;
			border-bottom: 1px solid rgba(255, 255, 255, 0.2);
			padding: 30px 0 28px 0;
			box-sizing: border-box;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			align-items: center;
			transition: width 0.3s;
			.logo-img {
				width: 38px;
				height: 38px;
			}
			.logo-text {
				font-size: 14px;
				color: rgba(255, 255, 255, 1);
				line-height: 14px;
			}
		}
		.treeModule {
			box-sizing: border-box;
			padding: 20px 20px;
		}
		.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: #F1F4FC;
		color: #333;
		// text-align: center;
		// line-height: 160px;
		padding: 0;
	}
}
</style>