<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 commonPage from "@/views/serveView/components/commonPage";
import footerPage from "@/views/serveView/components/footerPage";

import { defineAsyncComponent } from 'vue'
import {eventBus} from "@/utils/eventBus";
export default {
	name: "serveView",
	components:{
		commonPage,
		footerPage,

		term: defineAsyncComponent(() => import('./components/term')),
		widget: defineAsyncComponent(() => import('./components/widget')),
		order: defineAsyncComponent(() => import('./components/order')),
	},
	data(){
		return{
			page: "term",
			menu: [
				{
					groupName: "服务支持",
					list: [
						{
							icon: "sc-icon-TermQuery",
							title: "维保期限查询",
							component: "term"
						},
						{
							icon: "sc-icon-ComponentQuery",
							title: "主控部件查询",
							component: "widget"
						},
						{
							icon: "sc-icon-OrderQuery",
							title: "订单号查询",
							component: "order"
						},
					]
				},
			],
		}
	},
	watch:{

	},
	mounted() {
		// 获取新消息
		eventBus.$on('queryBack', this.getQueryBack);
	},
	unmounted() {
		// 获取新消息
		eventBus.$off('queryBack', 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>
