<template>
	<div class="content">
		<div class="home-header">
			<div class="top">
				<div class="num-list flex">
					<div class="num-item hand" v-for="item in numList"
						:class="{'action-item':currentUrl.indexOf(item.path) !=-1}" @click="navto(item.path)">
						{{item.tit}}
					</div>
				</div>
				<div class="out-wrapper flex">
					<div class="hand u-name" @click="kf">
						客服
					</div>
					<div class="hand u-name" @click="navto('/user/setUserinfo')">
						{{userInfo.username}}
					</div>
					<div class="hand u-name" @click="navto('/user/setUserinfo')">
						余额：{{(userInfo.money*1).toFixed(2)}}
					</div>
					<div class="hand u-name" @click="logout" style="color: #ff4d4f;">
						退出
					</div>
				</div>
			</div>
		</div>

	</div>
</template>
<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		data() {
			return {
				numList: [{
						tit: '首页',
						path: '/home',

					},
					{
						tit: '用户中心',
						path: '/user',

					},
					{
						tit: '订单列表',
						path: '/order',

					}

				],
			};
		},
		computed: {
			...mapState(['baseInfo', 'userInfo']),
			currentUrl() {
				return this.$route.path
			},

		},
		mounted() {
			if (this.userInfo.agent_id == 1) {

				this.numList.splice(3, 0, {
					tit: '地址管理',
					path: '/address'
				});
        this.numList.splice(4, 0, {
        	tit: '结算审核',
        	path: '/dladmin'
        });
			} else {
				this.numList.splice(3, 0, {
					tit: '订单结算',
					path: '/settle',
				});
			}
		},
		methods: {
			logout() {
				window.localStorage.clear()
				this.$router.push('/login')
			},
			navto(path) {
				if (this.currentUrl.indexOf(path) == -1) {
					this.$router.push(path)
				}
			},
			kf() {
				if (this.baseInfo.service_kf) {
					window.open(this.baseInfo.service_kf)
				}
			},
		}
	};
</script>
<style lang="scss" scoped>
	.home-header {
		// background-color: ;
		// #1b2374   #262632
		background: linear-gradient(to right, #1b2374, #000);
		height: 65px;
		margin-bottom: 20px;
		color: #fff;
    width: 100vw;
		.top {
			width: 1425px;
			margin: auto;
			min-width: 1425px;
			display: flex;
			justify-content: space-between;

			box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.01);
			padding-left: 45px;

			// background-color: #fff;
			.num-list {
				flex-shrink: 0;

				.num-item {
					height: 65px;
					padding: 0 25px;
					// text-align: center;
					line-height: 65px;
				}

				.action-item {
					background-color: #007aff;
					font-weight: bold;
				}
			}
		}
	}

	.out-wrapper {
		flex-grow: 1;
		justify-content: flex-end;
		align-items: center;

		.u-name {
			padding: 20px;
			max-width: 300px;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
	}
</style>