<template>
	<div id="main" class="header-bar">
		<header>
			<ul class="nav">
				<div class="logo">GrandStar</div>
				<li class="header-bar-hover-warp nav-li">
					<div @click="isChildMenu = !isChildMenu" class="menu-modal">
						功能导览
						<i class="el-icon-arrow-down el-icon--right"></i>
					</div>
				</li>
				<li class="nav-li" v-for="i in barData" :key="i.id">
					<span>{{ i.name }}</span>
				</li>
				<!-- <li class="active nav-li">
            <router-link to="/main/canvas/">canvas</router-link>
          </li>
          <li class="nav-li">
            <router-link to="/main/iotPlatformRoom/#/wel/index">云帆</router-link>
          </li>
          <li class="nav-li">
            <router-link to="/main/about">主服务about</router-link>
          </li> -->
				<div class="header-bar-hover" v-if="isChildMenu">
					<!-- <ul class="left-menu">
					<li>
						<div class="active-warp">
							<i class="el-icon-edit"></i>
							<span class="text">常用功能</span>
						</div>
					</li>
					<li>
						<div class="active-warp">
							<i class="el-icon-edit"></i>
							<span class="text">订购服务</span>
							<i class="el-icon-arrow-down"></i>
						</div>
						<div class="child-menu">
							<div class="active-warp">外贸ERP</div>
							<div class="active-warp">外贸ERP</div>
							<div class="active-warp">外贸ERP</div>
						</div>
					</li>
					<li>
						<div class="active-warp">
							<i class="el-icon-edit"></i>
							<span class="text">推荐服务</span>
						</div>
					</li>
				</ul> -->
					<div class="header-bar-hover-content">
						<!-- <el-alert
						title="可将常用功能收纳此栏目中，帮助使用者快捷找到菜单。同时将在顶部导览栏目中生成前7个功能入口。"
						type="warning"
						class="el-alert"
						center
						show-icon>
					</el-alert>
					<el-button type="primary" icon="el-icon-plus">功能配置</el-button>
					<div class="fun-lists">
						<div class="fun-list active">
							<i class="el-icon-edit"></i>
							<span>客户管理</span>
						</div>
						<div class="fun-list">
							<i class="el-icon-edit"></i>
							<span>客户管理</span>
						</div>
						<div class="fun-list">
							<i class="el-icon-edit"></i>
							<span>客户管理</span>
						</div>
						<div class="fun-list">
							<i class="el-icon-edit"></i>
							<span>客户管理</span>
						</div>
						<div class="fun-list">
							<i class="el-icon-edit"></i>
							<span>客户管理</span>
						</div>
						
					</div> -->
						<ul class="menu-warp">
							<li
								v-for="i in menuData.children"
								:key="i.id"
								class="menu-ul"
							>
								<div class="menu-title">{{ i.name }}</div>
								<ul style="background: #fff">
									<li
										@click="toWDLY(j)"
										style="cursor: pointer"
										v-for="j in i.children"
										:key="j.id"
									>
										{{ j.name }}
									</li>
								</ul>
							</li>
						</ul>
					</div>
				</div>
			</ul>
			<div class="fr">
				<!-- <el-input
            class="input-search"
            placeholder="请输入关键词"
            suffix-icon="el-icon-search"
			size="mini"
            v-model="input1">
          </el-input>
          <el-dropdown class="dropdown-box">
            <span class="el-dropdown-link">
              中文<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>English</el-dropdown-item>
              <el-dropdown-item>中文</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown> -->
				<el-badge :value="12" class="badge">
					<i class="el-icon-message-solid"></i>
				</el-badge>

				<el-dropdown class="dropdown-box">
					<span class="el-dropdown-link">
						{{ userData.role_name }}<i class="el-icon-arrow-down el-icon--right"></i>
					</span>
					<el-dropdown-menu slot="dropdown">
						<el-dropdown-item>个人中心</el-dropdown-item>
						<el-dropdown-item @click.native="$router.push('/')"
							>退出</el-dropdown-item
						>
					</el-dropdown-menu>
				</el-dropdown>
			</div>
		</header>
	</div>
</template>
  
  <script>
import { registerMicroApps, start } from 'qiankun'
import { getAll } from '@/libs/micros'
import router from '../router'
import store from '../store'
export default {
	components: {},
	data() {
		return {
			input1: null,
			isChildMenu: false,
			menuData: [],
			barData: [],
			userData:JSON.parse(window.localStorage.getItem('token'))
		}
	},
	computed: {
		commonData() {
			return this.$store.state.commonData
		},
	},
	methods: {
		toWDLY(_i) {
			console.log(_i)
			this.$router.push('/main/fjhxCloudVue/#/' + _i.path)
			this.isChildMenu = false
		},
		changeParentState() {
			this.$store.commit('setCommonData', { parent: 1 })
		},
		getData() {
			const v = this
			v.$get('/api/blade-system/menu/routes').then((res) => {
				if(res.msg == '暂无承载数据') return
				res.data.map(item=>{
					if(item.id === '1619633989348249601') this.menuData = item
				})
				
				v.barData = res.data
				
			})
		},
	},
	created() {
		this.getData()
	},
}
</script>
  
  <style scoped lang="less">
.header-bar {
	background: #20222a;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1100;
	.menu-modal {
		cursor: pointer;
	}
	.header-bar-hover {
		position: fixed;
		z-index: 205;
		top: 50px;
		left: 0px;
		right: 0;
		display: flex;
		background: #fff;
		box-shadow: 0px 3px 10px 1px rgba(0, 0, 0, 0.1);
		height: 500px;
		.header-bar-hover-content {
			margin: 32px 20px;
			text-align: left;
			.el-alert {
				line-height: 20px;
				text-align: center;
				background: #dfecff;
				color: #666666;
				font-weight: 400;
				margin-bottom: 20px;
				i {
					color: #46a6ff;
				}
			}
			.fun-lists {
				width: 700px;
				overflow: hidden;
				.fun-list {
					width: 120px;
					height: 40px;
					margin: 20px 20px 0 0;
					background: #f1f1f1;
					border-radius: 4px 4px 4px 4px;
					line-height: 40px;
					color: #333333;
					font-size: 12px;
					float: left;
					text-align: center;
					cursor: pointer;
					span {
						margin-left: 10px;
					}
				}
				.fun-list.active {
					border: 1px solid #46a6ff;
					background: #fff;
					color: #46a6ff;
					box-sizing: border-box;
					i {
						color: #46a6ff;
					}
				}
			}
		}

		ul {
			padding: 0 20px;
			margin: 0;
			width: 230px;
			background: #f1f1f1;
			text-align: left;

			li {
				color: #333333;
				list-style: none;
				margin: 0;
				position: relative;
				.text {
					margin-left: 10px;
					font-size: 14px;
					font-weight: bold;
				}
				.el-icon-arrow-down {
					position: absolute;
					right: 0;
					top: 20px;
				}
				.child-menu {
					margin-left: 24px;
					font-size: 12px;
					font-weight: 400;
				}
			}
			.active-warp {
				cursor: pointer;
			}

			.active-warp:hover {
				color: #0084ff;
				i {
					color: #0084ff;
				}
			}
		}
		.menu-warp {
			width: 100vw;
			background: #fff;
			overflow: hidden;
			.menu-ul {
				float: left;
				width: 100px;
				margin-right: 80px;
				.menu-title {
					font-weight: bold;
					color: #333333;
					height: 40px;
					line-height: 40px;
					border-bottom: 1px solid #ddd;
				}
				ul {
					li {
						list-style: none;
						margin: 0;
						padding: 0;
						height: 34px;
						line-height: 34px;
						font-size: 12px;
						font-weight: 400;
						cursor: pointer;
					}
					li:hover {
						color: #0084ff;
					}
				}
			}
		}
	}
	.nav {
		display: flex;
		padding: 0;
		margin: 0;
		height: 50px;
		overflow: hidden;
		.logo {
			color: #fff;
			font-size: 20px;
			font-weight: bold;
			line-height: 50px;
			margin: 0 20px;
		}
		.nav-li {
			width: 130px;
			height: 50px;
			font-size: 16px;
			font-weight: 700;
			text-align: center;
			line-height: 50px;
			list-style: none;
			color: #fff;
			a {
				color: #fff;
			}
		}
		.nav-li.active {
			background: #0084ff;
			color: #fff;
			a {
				color: #fff;
			}
		}
	}
	header {
		z-index: 11205;
		left: 0;
		right: 0;
		top: 0;
		height: 50px;
		display: flex;
		justify-content: space-between;
		.fr {
			display: flex;
			.input-search {
				margin: 12px 40px 12px 0;
				width: 240px;
				input {
					height: 30px;
				}
			}
			.dropdown-box {
				margin: 0 24px 0 0px;
				line-height: 50px;
			}
			.badge {
				margin: 15px 24px 15px 0;
				height: 20px;
				width: 20px;
				i {
					color: #bbbbbb;
				}
			}
			.user-img {
				margin: 12px 12px 12px 0;
			}
		}
	}
}

header > a {
	margin: 0 20px;
}
</style>

  