<template>
	<div class="pageBody">
		<div class="pageLeft">
			<el-main>
				<el-aside width="210px">
					<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-aside>
			</el-main>
		</div>
		<div class="pageRight">
			<component :is="page"/>
		</div>
	</div>
</template>

<script>
import {defineAsyncComponent} from "vue";
import {eventBus} from "@/utils/eventBus";
export default {
	name: "personalCenter",
	components:{
		editAccount: defineAsyncComponent(() => import('./components/editAccount')),
		companyDetail: defineAsyncComponent(() => import('./components/companyDetail')),
		queryHistory: defineAsyncComponent(() => import('./components/queryHistory')),
		product: defineAsyncComponent(() => import('./components/product')),
		problem: defineAsyncComponent(() => import('./components/problem')),
		feedback: defineAsyncComponent(() => import('./components/feedback')),
	},
	data(){
		return{
			page: "editAccount",
			menu: [
				{
					groupName: "个人中心",
					list: [
						{
							icon: "sc-icon-Account",
							title: "编辑账号",
							component: "editAccount"
						},
						{
							icon: "sc-icon-CompanyServe",
							title: "更新公司信息",
							component: "companyDetail"
						},
						{
							icon: "sc-icon-See",
							title: "查找历史记录",
							component: "queryHistory"
						},
					]
				},
				{
					groupName: "自助服务",
					list: [
						{
							icon: "sc-icon-Myproduct",
							title: "我的产品",
							component: "product"
						},
						{
							icon: "sc-icon-Questionnaire",
							title: "提交问题单",
							component: "problem"
						},
						{
							icon: "sc-icon-Feedback",
							title: "我的反馈",
							component: "feedback"
						},
					]
				},
			],
		}
	},
	mounted() {
		// 获取新消息
		eventBus.$on('userBack', this.getQueryBack);
	},
	unmounted() {
		// 获取新消息
		eventBus.$off('userBack', this.getQueryBack);
	},
	methods:{
		getQueryBack(res){
			this.$nextTick(()=>{
				this.page = res.name;
			})
		},
		openPage(item){
			this.page = item.index
		},
	}
}
</script>

<style scoped lang="scss">
.mainScroll ::v-deep .el-scrollbar__view{
	height: calc(100%);
}
.pageRight ::v-deep .mainTable .el-table .el-table__inner-wrapper:before{
	height: 0;
}
.mainMenu .el-menu-item.is-active:after{
	background: none;
	width: 0;
}

.pageBody{
	height: 100%;
	display: flex;
	.pageLeft{
		height: 100%;
		.el-aside{
			height: 100%;
		}
	}
	.pageRight{
		flex: 1;
		overflow: hidden;
	}
}
</style>
