<template>
	<el-container class="mainNoBack userBox">
		<el-aside class="userAside" style="width: 220px;">
			<el-container>
				<el-header style="height: auto;display: block;">
					<div class="user-info-top">
						<ossImgUpload @parentParams="parentParams" :url="this.$store.state.global.login_avatar" type="2" />
						<div class="userView">
							<h2 class="name">{{ this.$store.state.global.login_name }}</h2>
							<p v-if="user.role!=''"><el-tag round effect="plain" size="small" disable-transitions>{{ user.role }}</el-tag></p>
						</div>
					</div>
				</el-header>
				<el-main class="nopadding noBorderRadius">
					<el-menu class="menu mainMenu" :default-active="page">
						<el-menu-item-group v-for="group in menu" :key="group.groupName" :title="group.groupName">
							<el-menu-item v-for="item in group.list" :key="item.component" :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>
						</el-menu-item-group>
					</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 {
		name: 'userCenter',
		components: {
			account: defineAsyncComponent(() => import('./user/account')),
			seting: defineAsyncComponent(() => import('./user/seting')),
			pushSettings: defineAsyncComponent(() => import('./user/pushSettings')),
			password: defineAsyncComponent(() => import('./user/password')),
			space: defineAsyncComponent(() => import('./user/space')),
			logs: defineAsyncComponent(() => import('./user/logs')),
			upToEnterprise: defineAsyncComponent(() => import('./user/upToEnterprise')),
			bind: defineAsyncComponent(() => import('./user/bind')),
		},
		data() {
			return {
				menu: [
					{
						groupName: "账号设置",
						list: [
							{
								icon: "sc-icon-Account",
								title: "账号信息",
								component: "account"
							},
							{
								icon: "sc-icon-Password",
								title: "修改密码",
								component: "password"
							},
							{
								icon: "sc-icon-Notice",
								title: "通知设置",
								component: "pushSettings"
							},
							{
								icon: "sc-icon-Secure",
								title: "账户安全",
								component: "bind"
							},
						]
					},
					{
						groupName: "数据管理",
						list: [
							{
								icon: "sc-icon-UserLog",
								title: "操作日志",
								component: "logs"
							}
						]
					},
				],
				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]:'';
		},
		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>
