<template>
	<el-container class="mainNoBack userBox">
		<el-aside class="userAside" style="width: 220px;">
			<el-container>
				<el-main class="nopadding">
					<el-menu class="menu mainMenu" :default-active="page">
						<div v-for="group in menu" :key="group.groupName">
							<el-menu-item-group v-if="group.show" :title="group.groupName">
								<div v-for="item in group.list" :key="item.component">
									<el-menu-item v-authSetup="item.actions" :index="item.component" @click="openPage">
										<el-icon v-if="item.icon"><component :is="item.icon"/></el-icon>
										<template #title>
											<span>{{item.title}}</span>
										</template>
									</el-menu-item>
								</div>
							</el-menu-item-group>
						</div>
					</el-menu>
				</el-main>
			</el-container>
		</el-aside>
		<el-main class="userMain userMainPadding_0">
			<Suspense>
				<template #default>
					<component :is="page" />
				</template>
				<template #fallback>
					<el-skeleton :rows="3" />
				</template>
			</Suspense>
		</el-main>
	</el-container>
</template>

<script>
import { defineAsyncComponent } from 'vue'

export default {
	components: {
		pushSettings: defineAsyncComponent(() => import('./setup/computerRoom')),
		upToEnterprise: defineAsyncComponent(() => import('./setup/computerRoom')),
		password: defineAsyncComponent(() => import('./setup/computerRoom')),
		regularTime: defineAsyncComponent(() => import('./setup/regularTime')),
		account: defineAsyncComponent(() => import('./setup/computerRoom')),
		mail: defineAsyncComponent(() => import('./setup/mail')),
		interface: defineAsyncComponent(() => import('./setup/interface')),
		cost: defineAsyncComponent(() => import('./setup/cost')),
		material: defineAsyncComponent(() => import('./setup/material')),
	},
	data() {
		return {
			menu: [
				{
					groupName: "数据类配置",
					show:true,
					list: [
						{
							icon: "sc-icon-MachineRoom",
							title: "机房配置",
							component: "account",
							actions:'roomConfig',
						},
						{
							icon: "sc-icon-CostAllocation",
							title: "费用配置",
							component: "password",
							actions:'costConfig'
						},
						{
							icon: "sc-icon-CostSetup",
							title: "费用类别配置",
							component: "cost",
							actions:'costCategoryAdd'
						},
						{
							icon: "sc-icon-MaterialSetup",
							title: "物料成本配置",
							component: "material",
							actions:'materialCostAdd'
						},
						{
							icon: "sc-icon-RegularTime",
							title: "系统定时任务维护",
							component: "regularTime",
							actions:'crontabAdd'
						},
					]
				},
				{
					groupName: "接口类配置",
					show:true,
					list: [
						{
							icon: "sc-icon-DataSource",
							title: "数据源邮件设置",
							component: "mail",
							actions:'mailConfigSet'
						},
						{
							icon: "sc-icon-K3Api",
							title: "K3接口配置",
							component: "interface",
							actions:'k3ApiConfigSet'
						},
					]
				},
			],
			user: {
				avatar:this.$store.state.global.login_avatar,
				name: this.$store.state.global.login_name,
				role: "",
			},
			userNameF:'',
			page: "account"
		}
	},
	//路由跳转进来 判断from是否有特殊标识做特殊处理
	beforeRouteEnter (to, from, next){
		next((vm)=>{
			if(from.is){
				//删除特殊标识，防止标签刷新重复执行
				delete from.is
				//执行特殊方法
				vm.$alert('路由跳转过来后含有特殊标识，做特殊处理', '提示', {
					type: 'success',
					center: true
				}).then(() => {}).catch(() => {})
			}
		})
	},
	created() {
		const userInfo = this.$TOOL.data.get('USER_INFO');
		this.user.role = userInfo.user_roles && userInfo.user_roles.role_names.length>0?userInfo.user_roles.role_names[0]:'';
		const permissions = this.$TOOL.data.get("PERMISSIONS");
		this.menu.forEach(item=>{
			item.show = false;
			item.list.forEach(em=>{
				if(permissions.auth.indexOf(em.actions)!=-1){
					item.show = true;
				}
			})
		})
		let pageView = this.menu.find(item=> item.show === true).list.find(em=> permissions.auth.indexOf(em.actions)!=-1);
		this.page = pageView.component;
	},
	methods: {
		openPage(item){
			this.page = item.index
		},
		async parentParams(files) {
			let params = {
				avatar: files
			}
			const res = await this.$API.user.uploadAvatar.post(params);
			if (res.code == 200) {
				this.$store.commit("SET_LOGIN_AVATAR", files);
			}
		}
	}
}
</script>
<style scoped lang="scss">
.noBorderRadius{border-radius: 0 !important;}
</style>
