<template>
	<div class="home-page">
		<div class="base-info">
			<h5>顾问基本信息</h5>
			<ul class="info-list">
				<li><span class="lable">微信号：</span></li>
				<li><span class="lable">微信昵称：</span></li>
				<li><span class="lable">微信手机号：</span></li>
				<li><span class="lable">机器码：</span></li>
				<li><span class="lable">有货账号：</span></li>
				<li><span class="lable">有货UID：</span></li>
				<li><span class="lable">所属分组：</span></li>
				<li><span class="lable">运营人员：</span></li>
			</ul>
			<button class="copy-link-btn">复制活动链接</button>
		</div>

		<div class="home-menu">
			<span
				v-for="(item, index) in homeMenu"
				:key="index" class="menu-item"
				:class="{actived: item.text === curMenu}"
				@click="changeMenu(item.text)">{{item.text}}</span>
		</div>

		<Knowledge v-if="curMenu === '知识库'"></Knowledge>
		<OrderList v-if="curMenu === '订单信息'"></OrderList>
		<Exchange v-if="curMenu === '退换货'"></Exchange>
		<Coupon v-if="curMenu === '优惠券'"></Coupon>
		<UserInfo v-if="curMenu === '用户信息'"></UserInfo>
	</div>
</template>

<script>
import Knowledge from './components/knowledge';
import OrderList from './components/orderList';
import Exchange from './components/exchange';
import Coupon from './components/coupon';
import UserInfo from './components/user-info';

export default {
	name: 'Home',
	data() {
		return {
			homeMenu: [
				{text: '用户信息'},
				{text: '订单信息'},
				{text: '退换货'},
				{text: '优惠券'},
				{text: '知识库'}
			],
			curMenu: '用户信息'
		};
	},
	methods: {
		changeMenu(item) {
			this.curMenu = item;
		}
	},
	components: {
		Knowledge,
		OrderList,
		Exchange,
		Coupon,
		UserInfo
	}
};
</script>

<style lang="scss">
html, body {
	width: 100%;
	margin: 0;
	padding: 0;
	font-size: 12px;
	max-width: 750px;
	margin: 0 auto;
}

a {
	color: #000;
	text-decoration: none;
}

ul, li {
	list-style: none;
	margin: 0;
	padding: 0;
}

.red {
	color: #d8021a;
}

.base-info {
	width: 90%;
	background: #efefef;
	border-radius: 5px;
	margin: 20px auto 0;
	padding: 10px;
	box-sizing: border-box;

	h5 {
		text-align: center;
		padding: 0;
		margin: 0;
	}

	.copy-link-btn {
		width: 100%;
		margin: 0 auto;
		background: #000;
		color: #fff;
		text-align: center;
		border: none;
		outline: none;
		margin: 0 auto;
		display: block;
		height: 24px;
		line-height: 24px;
		border-radius: 5px;
	}

	.info-list {
		li {
			width: 50%;
			float: left;
			height: 24px;
			line-height: 24px;
		}
	}
}

.home-menu {
	display: flex;
	justify-content: space-evenly;
	margin-top: 20px;

	.menu-item {
		background: #efefef;
		padding: 5px;
		border-radius: 5px;

		&.actived {
			background: #d8021a;
			color: #fff;
		}
	}
}
</style>