<template>
	<div class="home">
		<el-container class="home-wrapper">
			<!-- 头部 -->
			<el-header class="home-header">
				<div class="home-loge">
					<!-- <img src="~assets/img/logo.jpg" alt="logo.jpg" /> -->
					<!-- <span>电商后台管理系统</span> -->
				</div>
				<div class="out-wrapper">
					<el-button type="info" @click="logout">退出</el-button>
				</div>
			</el-header>
			<div class="boddy-wrap">
				<div class="el-menu-wrap ">
					<el-menu active-text-color="#0f83fe" unique-opened :collapse="!isopen" :collapse-transition="false"
						router :default-active="currenIndex">
						<el-submenu v-for="item in menulist" :key="item.id" :index="item.id + ''">
							<template slot="title">
								<i :class="menulogonj[item.id]"></i>
								<span>{{ item.authName }}</span>
							</template>
							<el-menu-item :index="'/' + subItem.path + ''" v-for="subItem in item.children"
								:key="subItem.id">
								<template slot="title">
									<i class="el-icon-menu"></i>
									<span>{{ subItem.authName }}</span>
								</template>
							</el-menu-item>
						</el-submenu>
					</el-menu>
				</div>

				<div class="home-main">
					<router-view></router-view>
				</div>
			</div>

		</el-container>
	</div>
</template>

<script>
	export default {
		name: 'Home',
		data() {
			return {
				menulist: [{
						id: 1,
						authName: '注册码管理',
						children: [{
								id: 2,
								authName: '注册码列表',
								path: 'home/regList'
							},
							{
								id: 3,
								authName: '注册码购买',
								path: 'home/buyReg'
							}
						]
					},
					{
						id: 4,
						authName: '用户管理',
						children: [{
							id: 5,
							authName: '用户列表',
							path: 'home/abonementList'
						}, ]
					},
					{
						id: 6,
						authName: '订单管理',
						children: [{
							id: 7,
							authName: '订单列表',
							path: 'home/orderList'
						}, ]
					},
					{
						id: 8,
						authName: '地址管理',
						children: [{
							authName: '地址列表',
							path: 'home/addressList'
						}, ]
					},
					{
						id: 9,
						authName: '充值管理',
						children: [{
							authName: '充值记录',
							path: 'home/rechangeList'
						}, {
							authName: '充值',
							path: 'home/rechange'
						}]
					},
					{
						id: 10,
						authName: '提现管理',
						children: [{
							id: 11,
							authName: '提现记录',
							path: 'home/takingList'
						}, {
							id: 12,
							authName: '提现',
							path: 'home/taking'
						}]
					},
					{
						id: 13,
						authName: '转账管理',
						children: [{
							id: 14,
							authName: '转账记录',
							path: 'home/transferList'
						}, {
							id: 15,
							authName: '转账',
							path: 'home/transfer'
						}]
					},
				],
				menulogonj: {
					1:'el-icon-s-order',
					4: 'el-icon-s-custom',
					103: 'el-icon-s-cooperation',
					101: 'el-icon-s-goods',
					102: 'el-icon-s-order',
					145: 'el-icon-s-marketing',
				},
				isopen: true,
				openOrClose: ['el-icon-arrow-right', 'el-icon-arrow-left'],
			}
		},
		computed: {
			currenIndex() {
				return this.$route.path
			},
		},
		methods: {
			logout() {
				window.sessionStorage.clear()
				this.$router.push('/login')
			},
			async getMenList() {
				const {
					data: res
				} = await this.$http.get('menus')
				if (res.meta.status !== 200) return this.$message.error(res.meta.msg)
				this.menulist = res.data
			},
			closeBtn() {
				this.isopen = !this.isopen
			},
		},
		created() {
			// this.getMenList()
		},
	}
</script>

<style scoped>
	.home {
		height: 100%;
		background-color: #eaedf2;
	}

	.home-wrapper {
		height: 100%;
	}

	.home-header {
		background-color: #fff;
		display: flex;
		justify-content: space-between;
		margin-bottom: 20px;
		box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.01);
	}

	.home-loge {
		height: 100%;
		display: flex;
		align-items: center;
	}

	.home-loge img {
		height: 100%;
	}

	.home-loge span {
		margin-left: 15px;
		color: rgb(234, 237, 242);
		font-size: 18px;
	}

	.out-wrapper {
		display: flex;
		align-items: center;
	}

	.home-nav {
		/* background-color: rgb(50, 55, 68); */
		/* padding: 0 200px; */
	}

	.close-btn {
		color: aliceblue;
		display: flex;
		justify-content: space-between;
		padding: 0 10px;
		background-color: rgb(72, 81, 101);
		font-size: 25px;
	}

	.el-menu-wrap {
		width: 250px;
		display: inline-block;
		position: relative;
	}

	.home-main {
		/* width: 900px; */
		/* background-color: rgb(234, 237, 242); */
		width: 1130px;
		min-height: 800px;
		margin-left: 20px;
	}

	/deep/ .el-card__body {
		min-height: 700px;
		margin-top: 0;
	}

	/deep/ .el-card {
		margin-top: 0;
	}

	.boddy-wrap {
		min-width: 1200px;
		height: 100%;
		display: flex;
		justify-content: center;
	}
</style>