<template>
	<el-row class="container">
		<el-col :span="24" class="header">
			<el-col :span="6" class="logo poi">
				<img src="~assets/img/logoImg.png" class="index_home"/>
				<span @click="goIndex">智链互联跨境电商ERP</span>
			</el-col>
			<el-col :span="14" class="nav-list fl">
					<ul class="list-tab">
						<li v-on:mouseover="changeActive($event)" v-on:mouseout="removeActive($event)" v-for="menu in upstageMenu" :key="menu.name" @click.prevent="upstageMenuClick(menu.name)" :class="menu.name==currentMenu?'active':''">
							<el-popover
								v-if="menu.child.length>0"
								placement="bottom"
								width="500"
							 	v-model="menu.visible"
								trigger="hover">
									<div class="general-function" v-for="item in menu.child" :key="item.name">
										<div class="general-title">{{item.name}}</div>
										<div class="general-type">
											<a v-for="itemChild in item.child" :key="itemChild.name" v-on:mouseover="pointChange($event)" v-on:mouseout="removeActive($event)" @click.prevent="productClick(itemChild.path,itemChild.id)" target="_blank" :href="itemChild.path">{{itemChild.name}}
											</a>
										</div>
									</div>
								<div slot="reference">{{menu.name}}</div>
							</el-popover>
							<a v-else target="_blank" href="/order/orderList" style="color:white">{{menu.name}}</a>
						</li>
					</ul>
			</el-col>
			<el-col :span="4" class="userinfo pl10">
				<!-- <el-dropdown trigger="hover"> -->
					<span class="el-dropdown-link userinfo-inner f-blue lh40">
						<i class="el-icon-user-solid f-blue"/>
						<el-popover
							placement="bottom"
							width="400"
							v-model="visible"
							trigger="hover">
								<div class="general-function" v-for="item in personalCenter" :key="item.name">
									<div class="b">{{item.name}}</div>
									<div class="general-type">
										<a v-for="itemChild in item.child" :key="itemChild.name" v-on:mouseover="pointChange($event)" v-on:mouseout="removeActive($event)" @click.prevent="productClick(itemChild.path,itemChild.id)" target="_blank" :href="itemChild.path">{{itemChild.name}}
										</a>
									</div>
								</div>
								<div class="operate-center pt15">
									<span>帮助中心</span>
									<span class="pl20"><i class="el-icon-switch-button g3 b"/>退出</span>
								</div>
							<span slot="reference">
								{{sysUserName}}
								<i class="el-icon-arrow-down el-icon--right"/>
							</span>
						</el-popover>
						<span>|</span>
						<span class="rel">
							<span class="abs car-num wh f12 tc">6</span>
							<i class="el-icon-shopping-cart-2 f18"/>
						</span>
					</span>
					<!-- <el-dropdown-menu slot="dropdown">
						<el-dropdown-item @click.native="rightsManagement" v-if="iSrightsManagement">权限管理</el-dropdown-item>
						<el-dropdown-item @click.native="logout">退出登录</el-dropdown-item>
					</el-dropdown-menu> -->
				<!-- </el-dropdown> -->
			</el-col>
		</el-col>
		<section>
			<transition name="fade" mode="out-in">
				<router-view></router-view>
			</transition>
			<div class="footer-style">
				<div class="footer-bottom">
					<span>版权所有：杭州智链互联网络科技有限公司</span>
					<span>Copyright2016-2019</span>
					<span>公安备案号：沪ICP备16032655号-4</span>
				</div>
			</div>
		</section>
	</el-row>
</template>
<script>
	import leftMenu from '@/components/leftMenu'
	export default {
		data() {
			return{
				collapsed:false,
				sysUserName: '',
				sysUserAvatar: '',
				upstageMenu:[
					{name:'首页',child:[],visible:false},
					{name:'选品',child:[],visible:false},
					{name:'设计',child:[],visible:false},
					{name:'图库',child:[],visible:false},
					{name:'产品',child:[
						{name:'通用板块',child:[{name: "定制产品",path: "/product/productList"}]},
						{name:'wish',child:[{name: "定制产品",path: "/product/productList"},{name: "待发布",path: "/product/productList"},{name: "在线产品",path: "/product/productList"},{name: "模板管理",path: "/product/productList"}]},
						{name:'shopify',child:[{name: "定制产品",path: "/product/productList"},{name: "待发布",path: "/product/productList"},{name: "在线产品",path: "/product/productList"},{name: "模板管理",path: "/product/productList"}]},
						{name:'shopline',child:[{name: "定制产品",path: "/product/productList"},{name: "待发布",path: "/product/productList"},{name: "在线产品",path: "/product/productList"},{name: "模板管理",path: "/product/productList"}]},
						{name:'amazon',child:[{name: "定制产品",path: "/product/productList"},{name: "待发布",path: "/product/productList"},{name: "在线产品",path: "/product/productList"},{name: "模板管理",path: "/product/productList"}]},],visible:false},
					{name:'订单',child:[{name:'订单管理',child:[{name: "全部订单",path: "/product/productList"},{name: "待付货款",path: "/product/productList"},{name: "待虚拟发货",path: "/product/productList"},{name: "发货成功",path: "/product/productList"},{name: "退款订单",path: "/product/productList"}]}],visible:false},
					{name:'物流',child:[],visible:false},
					{name:'数据',child:[{name:'财务',child:[{name: "支付记录",path: "/product/productList"}]},{name:'数据分析',child:[{name: "产品分析",path: "/product/productList"},{name: "店铺业绩",path: "/product/productList"}]}],visible:false}
				],
				personalCenter:[
					{name:'账号管理',child:[{name: "我的账号",path: "/product/productList"},{name: "收货地址",path: "/product/productList"},{name: "修改密码",path: "/product/productList"}]},
					{name:'平台授权',child:[{name: "定制产品",path: "/product/productList"},{name: "待发布",path: "/product/productList"},{name: "在线产品",path: "/product/productList"},{name: "模板管理",path: "/product/productList"},{name: "模板管理",path: "/product/productList"},{name: "模板管理",path: "/product/productList"}]},
				],
				currentMenu:'产品',
				visible:false,
				iSrightsManagement:false,
				permissionsPath:'/systemManagement/rightsManagement'
			}
		},
		components: {
			leftMenu
		},
		// computed:{
		// 	//顶部
		// 	getCurTop() {
		// 		return this.$store.state.global.topMenuTree || [];
		// 	}
		// },
		created() {
			let query = window.location.search.substring(1);
			let vars = query.split("&");
			for (let i=0;i<vars.length;i++) {
				let pair = vars[i].split("=");
				if(pair[0] === 'jumpType'){
					if (2 === Number(pair[1])) {
						this.currentMenu = '订单'
					} else if (1 === Number(pair[1])) {
						this.currentMenu = '产品'
					} else if (3 === Number(pair[1])) {
						this.currentMenu = '客服'
					} else if (4 === Number(pair[1])) {
						this.currentMenu = '物流'
					} else if (5 === Number(pair[1])) {
						this.currentMenu = '服务'
					} else if (6 === Number(pair[1])) {
						this.currentMenu = '数据'
					}
				}
			}
		},
		methods: {
			productClick(path,id){
				console.log(path)
				switch(path){
					case '/product/productList':
						this.$router.push({path})
					break;
					case '/product/productList?id=1':
					case '/product/productList?id=2':
					case '/product/productList?id=3':
						this.$router.push({path})
					break;
					case '/product/createProduct':
						this.$router.push({path})
					break;
					case '/product/templateList':
						// localStorage.setItem('leftMenu','templateList');
						// this.$store.commit('initSide', 'templateList');
						this.$router.push({path})
					break;
					case '/advertising/activityManagement':
						// localStorage.setItem('leftMenu','advertisingList');
						// this.$store.commit('initSide', 'advertisingList');
						this.$router.push({path})
					break;
					case '/epcManage/epcList':
						// localStorage.setItem('leftMenu','epcList');
						// this.$store.commit('initSide', 'epcList');
						this.$router.push({path})
					break;
					case '/productManagement/systemProduct?id=1':
					case '/productManagement/systemProduct?id=2':
					case '/productManagement/systemProduct?id=3':
						this.$router.push({path})
					break;
					case '/joom/createProductJoom':
						let routeData = this.$router.resolve({
							name: "createProductJoom",
							query: {currentType: 2}
						});
						window.open(routeData.href, '_blank');
						break;
					default:
						this.$router.push({path})
					break;
				}
				this.visible=false
			},
			upstageMenuClick(value){
				if(value=='产品'){
					this.$router.push({path:'/product/productList'})
				}
				if(value=='选品'){
					this.$router.push({path:'/selectionProduct/selectList'})
				}
				if(value=='订单'){
					this.$router.push({path:'/order/orderList'})
				}
				if(value=='物流'){
					this.$router.push({path:'/logistics/seventyonetTrack'})
				}
			},
			changeActive($event){
				$event.currentTarget.className="active";
			},
			removeActive($event){
				if($event.target.innerText!=this.currentMenu){
					$event.currentTarget.className="";
				}
			},
			pointChange($event){
				$event.currentTarget.className="activeMenu";
			},
			//退出登录
			logout: function () {
				var _this = this;
				this.$confirm('确认退出吗?', '提示', {
					type: 'warning'
				}).then(() => {
          this.axios({
            url: "assistant/exit",
            data: {},
            method: "post"
          }).then(res => {
						localStorage.removeItem('user');
						_this.$router.push('/login');
					})
				})
			},
			rightsManagement(){
				// localStorage.setItem('leftMenu','systemList');
				// this.$store.commit('initSide', 'systemList');
				this.$router.push({path:this.permissionsPath})
			},
			toMenuChoose(){
				let path=this.$route.path
				if(path){
					path=path.split("/")[1];
				}
				switch(path){
					case 'index':
						this.currentMenu='首页'
					break;
					case 'selectionProduct':
						this.currentMenu='选品'
					break;
					case 'design':
						this.currentMenu='设计'
					break;
					case 'photoGallery':
						this.currentMenu='图库'
					break;
					case 'product':
						this.currentMenu='产品'
					break;
					case 'order':
						this.currentMenu='订单'
					break;
					case 'logistic':
						this.currentMenu='物流'
					break;
					case 'dataShow':
						this.currentMenu='数据'
					break;
					default:
						this.currentMenu='选品'
					break;
				}
			},
			goIndex(){
				localStorage.setItem('leftMenu','productList');
				this.$router.push({name:'productList'})
			},
		},
		mounted() {
			let currentLeftMenu=localStorage.getItem('leftMenu')
			if(currentLeftMenu){
				this.$store.commit('initSide', currentLeftMenu);
			}
			var user = localStorage.getItem('user');
			if (user) {
				user = JSON.parse(user);
				this.sysUserName = user.name || '';
				this.sysUserAvatar = user.avatar || '';
			}
			this.toMenuChoose()
		},
		watch: {
			"$route": function() {
				this.toMenuChoose()
			}
		}
	}

</script>

<style scoped lang="less" rel="stylesheet/scss">
	// @import '../assets/css/variable.less';
	.container {
		position: absolute;
		top: 0px;
		bottom: 0px;
		width: 100%;
		font-size: 13px;
		.header {
			position: relative;
			padding: 0 20px;
   	 	height: 60px;
    	background-color: #367EE2;
			color:#fff;
			min-width: 1280px;
			.userinfo {
				float: right;
				margin-top: 20px;
				background: #fff;
   			width: 180px;
				height: 40px;
				.userinfo-inner {
					cursor: pointer;
					font-size: 16px;
					img {
						width: 40px;
						height: 40px;
						border-radius: 20px;
						margin: 10px 0px 10px 10px;
						float: right;
					}
				}
			}
			.nav-list{
				display: inline-block;
				padding: 0 0 0 14px;
				text-align: center;
				.list-tab{
					list-style: none;
					margin-top: 22px;
					margin-bottom: 0;
					padding-left: 0;
					height: 36px;
					line-height: 36px;
					li{
						display: block;
						float: left;
						position: relative;
						margin-bottom: -1px;
						margin-left: 20px;
						width: 70px;
						border: 0;
						font-size: 16px;
						font-weight: 700;
						cursor: pointer;
					}
					.active{
						background-color:#337ab7;
					}
				}
			}
			.fl{
				float: left;
				// margin-left: 100px;
			}
			.logo {
				line-height: 60px;
				height:60px;
				font-size: 20px;
				padding-right:20px;
				img {
					width: 40px;
					float: left;
					margin: 10px 10px 10px 18px;
				}
				.txt {
					color:#fff;
				}
			}
			.logo-collapse-width{
				width:60px
			}
			.tools{
				padding: 5px 23px;
				width:14px;
				height: 50px;
				line-height: 50px;
				cursor: pointer;
				.fa{
					display: inline-block;
					font: normal normal normal 14px/1 FontAwesome;
					font-size: inherit;
					text-rendering: auto;
					-webkit-font-smoothing: antialiased;
				}
				.fa-align-justify:before {
					content: "\F039";
				}
			}
		}
		.footer-style{
			width: 100%;
	    float: left;
			margin-bottom: 10px;
			border-top: 1px solid #d0d3d6;
			padding: 10px 20px;
			min-width: 1280px;
			font-size: 13px;
			line-height: 24px;
			text-align: center;
			color: #737679;
		.footer-advantage{
			display: flex;
			justify-content: space-around;
			align-items: center;
			color: #FFFFFF;
			margin-top:38px;
			.footer-flex{
				display: flex;
				.footer-mark{font-size:12px}
			}
			.footer-ball{
				width: 46px;
				height: 46px;
				border-radius: 46px;
				background: #FFFFFF;
				margin-right: 10px;
			}
		}
		.footer-line{
			opacity: 0.2;
			border: 1px solid #EEEEEE;
    	margin-top: 34px;
		}
		.footer-server{
				display:flex;
				color:#FFFFFF;
				margin-top: 30px;
				justify-content: center;
				opacity: 0.5;
				font-size: 12px;
				ul{
					display: flex;
					cursor: pointer;
					li{
						list-style:none;
						line-height: 16px;
						border-right: 1px solid #666666;
						margin-right: 15px;
						padding-right: 15px;
					}
					li:last-child{
							margin-right: 0px;
							padding-right: 0px;
							border: none
					}
				}
		}
		.footer-bottom{
			position: relative;
			margin: 10px auto 0 auto;
			width: 1020px;
			span{
				padding-right: 20px
			}
		}
		}
	}
	.general-function{
		display: flex;
		margin:10px 0;
		box-sizing: border-box;
		div,a{
			margin-left: 20px;
			min-width: 64px;
			height: 22px;
			line-height: 22px;
			cursor: pointer;
			margin-bottom: 10px;
		}
		.general-type{
			display: flex;
			width: 370px;
			flex-wrap: wrap;
			div{
				text-align: center
			}
		}
		.general-title{
			border-radius: 2px;
			border: 1px solid #ddd;
			color:#367EE2;
			cursor: auto;
			text-align:center;
			width: 75px;
		}
	}
	a{ text-decoration:none!important;color: #434649}
	.activeMenu{
		// margin-right: 10px;
		border-radius: 2px;
		padding: 2px 3px;
		white-space: nowrap;
		color: #fff;
		background: #367EE2;
		text-align: center
	}
	.car-num{
		height:12px;
		width: 12px;
		border-radius: 12px;
		background: #ec4339;
		line-height: initial;
		top: -5px;
		right: -5px;
	}
	.operate-center{
		border-top:1px dashed #ccc;
		width:200px;
		display:block;
		margin-left:125px;
		margin-top: 45px;
	}
</style>