<template>
	<!-- 入口文件 -->
  <a-layout id="components-layout-demo-custom-trigger">
    <a-layout-sider v-model="collapsed" :trigger="null" collapsible>
			
      <div class="logo" />
			
      <a-menu 
		theme="dark" 
		mode="inline" 
		:selectedKeys='selectedKeys'
		:default-selected-keys="[$route.path]"  
		:inline-collapsed="collapsed"
		 @select='selectMenuItem' 
		> 
			
			<template v-for='(item,index) in menuList'>
					
				<a-sub-menu :key="item.pageUrl" v-if='item.children.length > 0'>
					<span slot="title"><a-icon type="user" /><span>{{item.menuName}}</span></span>
					<a-menu-item v-for="(sun,ind) in item.children" :key="sun.pageUrl">
						<router-link :to="item.pageUrl">
							{{sun.menuName}}
						</router-link>
					</a-menu-item>
					
				</a-sub-menu>
					
				<a-menu-item :key="item.pageUrl" v-else>
					<router-link :to="item.pageUrl">
						<a-icon type="video-camera" />
						<span>{{item.menuName}}</span>
					</router-link>
				</a-menu-item>
			</template>
     
      </a-menu>
			
			
    </a-layout-sider>
    <a-layout>
			
      <a-layout-header style="background: #fff; padding: 0">
        <a-icon
          class="trigger"
          :type="collapsed ? 'menu-unfold' : 'menu-fold'"
					@click="() => (collapsed = !collapsed)"
        />
      </a-layout-header>
			<keep-alive>
				<a-layout-content
					:style="{ margin: '24px 16px', padding: '24px', background: '#fff', minHeight: '280px' }"
				>
					<!-- 面包屑 -->
					<a-breadcrumb :routes="routes" style="background-color: #f0f2f5; padding: 10px 0;" separator=">">
						<template slot="itemRender" slot-scope="{ route, params, routes, paths }"  >
							<span v-if="routes.length === 1">
							  {{ route.meta.title }}
							</span>
							<router-link v-else :to="`${route.path}`" >
								{{ route.meta.title }} 
							</router-link>
						</template>
					</a-breadcrumb>
					<transition>
						<router-view/>
					</transition>
				</a-layout-content>
			</keep-alive>
			
    </a-layout>
  </a-layout>
</template>

<script>
export default {
  data() {
    return {
      collapsed: false,
      selectedKeys:['/admin'],
	  menuList:[
		{
			id:'0',
			menuName:'首頁(yè)',
			pageUrl:"/admin",
			title:"首頁(yè)",
			children:[]
		},
		{
			id:'1',
			menuName:'文章管理',
			pageUrl:"/wzgl",
			title:"文章",
			children:[
				{
					id:'1-1',
					menuName: "文章概覽",
					pageUrl:"/wzgl",
					title:"文章概覽",
				}
			]
		},
		{
			id:'2',
			menuName:'人員管理',
			pageUrl:"/rygl",
			title:"人員",
			children:[]
		},
		{
			id:'3',
			menuName:'系統(tǒng)設(shè)置',
			pageUrl:"/xtgl",
			title:"系統(tǒng)",
			children:[]
		},
		
	],
	routes: []	
    };
  },
	created() {
		this.routes = this.$route.matched.filter(item => item.meta.title)
			//刷新頁(yè)面回到初始展開頁(yè)面
			// this.$router.push({
			// 	path: this.selectedKeys[0]
			// })
	},
	methods:{
		
		selectMenuItem(item,key){
			this.$router.push({path: key})
		}
	},
	watch:{
		// 監(jiān)聽路由變化
		$route(e){
			this.routes = e.matched.filter(items => items.meta.title)
			this.selectedKeys=[e.path] 
		}
	},
};
</script>

<style scoped="scoped">
#components-layout-demo-custom-trigger{
	height: 100%;
}
#components-layout-demo-custom-trigger .trigger {
  font-size: 18px;
  line-height: 64px;
  padding: 0 24px;
  cursor: pointer;
  transition: color 0.3s;
}

#components-layout-demo-custom-trigger .trigger:hover {
  color: #1890ff;
}

#components-layout-demo-custom-trigger .logo {
  height: 32px;
  background: rgba(255, 255, 255, 0.2);
  margin: 16px;
}
</style>

{
    path: '/',
    name: 'admin',
    component: _import('pages/index'),
		children:[
			{
				 path: '/',
				 redirect: { name: 'Home' },
			},
			{
				path:"/admin",
				name:"Home",
				component: _import('pages/home/index')
			},
			{
				path:"/wzgl",
				name:"Article",
				component: _import('pages/article/article')
			},
			{
				path:"/xtgl",
				name:"System",
				component: _import('pages/system/system')
			},
			{
				path:"/rygl",
				name:"Munber",
				component: _import('pages/menber/users')
			},
		]
  },


//最后需要添加一句代碼,防止多次點(diǎn)擊的push的路由問題
const routerPush = VueRouter.prototype.push
VueRouter.prototype.push = function push(location) {
  return routerPush.call(this, location).catch(error=> error)
}