<template>
	<div class="mainServeBody">
		<commonPage title="个人中心"></commonPage>
		<el-main class="serveMain">
			<el-scrollbar class="mainScroll">
				<keep-alive :include="['mainView', 'serveView', 'personalCenter']">
					<component :is="componentName" />
				</keep-alive>
			</el-scrollbar>
		</el-main>

		<!--客服-->
		<scCustomer />
	</div>
</template>

<script>
import commonPage from "@/views/serveView/components/commonPage";
import mainView from './mainView';
import serveView from '@/views/serveView/index';
import personalCenter from '@/views/personalCenter/index';
import {eventBus} from "@/utils/eventBus";

export default {
	name: "index",
	components:{
		commonPage,
		mainView,
		serveView,
		personalCenter,
	},
	data(){
		return{
			componentName:"mainView"
		}
	},
	created() {
		let token = this.$TOOL.cookie.get('TOKEN');
		if (token && token != null) {
			// 登录成功连接ws
			let global_callback = function () {};
			this.$socketApi.createWebSocket(global_callback);
		}
	},
	mounted() {
		eventBus.$on('headerRouterBack', this.getRouterBack);
	},
	beforeUnmount() {

	},
	unmounted() {
		eventBus.$off('headerRouterBack', this.getRouterBack);
	},
	methods:{
		getRouterBack(res){
			this.componentName = res.name;
		}
	}
}
</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;
}
.mainServeBody{
	height: 100%;
	display: flex;
	flex-direction: column;
	background: #fff;
	.serveMain{
		flex: 1;
		padding: 0;
		border-radius: 0;
		.pageBody{
			display: flex;
			.pageLeft{
				height: 100%;
				.el-aside{
					height: 100%;
				}
			}
			.pageRight{
				flex: 1;
			}
		}
	}
}

.mainServeBody{
	height: 100%;
	display: flex;
	flex-direction: column;
	background: #fff;
	.serveMain{
		flex: 1;
		overflow: hidden;
		padding: 0;
		border-radius: 0;
		position: relative;
	}
}

.customerBoxView{
	position: absolute;
	right: 15px;
	top: 80%;
	z-index: 2000;
	cursor: move;
}
</style>
