<template>
	<view class="home">
		<view class="top">
			<view class="personage" @click="$goBack(2,'/pages/my/my')">
				<text class="time">{{time}}</text>
				<view class="img">
					<image src="../../static/head.png" mode=""></image>
				</view>
				<text class="name">{{user.name}}/{{user.department}}</text>
			</view>
		</view>
		<view class="bom">
			<view v-for="(v,i) in menu" :key="i" class="btn" @click="$goBack(2,v.route)">
				<image :src="v.url" mode=""></image>
				{{v.name}}
			</view>
		</view>
		<image src="../../static/home/bj.png" mode="" class="bj"></image>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	export default {
		data() {
			return {
				time: null,
				menu: [],
				menus: [{
						id: 1,
						name: '灌装生产',
						url: '../../static/home/production.png',
						route: '/pages/production/production'
					},
					{
						id: 2,
						name: '产能统计',
						url: '../../static/home/production.png',
						route: '/pages/statistics/statistics?name=1'
					},
					{
						id: 3,
						name: '出库统计',
						url: '../../static/home/statistics.png',
						route: '/pages/statistics/statistics?name=0'
					},
					{
						id: 4,
						name: '经销商查看',
						url: '../../static/home/examine.png',
						route: '/pages/dealer/dealer'
					},
					{
						id: 5,
						name: '库存查看',
						url: '../../static/home/time.png',
						route: '/pages/inventory/inventory'
					},
					{
						id: 6,
						name: '市场稽查',
						url: '../../static/home/time.png',
						route: '/pages/bazaar/bazaar'
					},
					{
						id: 7,
						name: '窜货记录',
						url: '../../static/home/record.png',
						route: '/pages/fleeingGoods/fleeingGoods'
					},
					{
						id: 8,
						name: '新品发放记录',
						url: '../../static/home/newproduct.png',
						route: '/pages/newProduct/newProduct'
					},
					{
						id: 99,
						name: 'ERP生产推送',
						url: '../../static/home/tuisong.png',
						route: '/pages/inquire/inquire'
					},
				]
			};
		},
		onShow: function() {
			wx.hideHomeButton();
		},
		onLoad() {
			this.time = this.getTime();
		},
		computed: {
			...mapState({
				user: store => store.user,
				power: store => store.power
			})
		},
		created() {
			this.menu = []
			// console.log(this.power);
			// this.power.forEach(v => {
			// 	if (this.menus[v - 1]) {
			// 		this.menu.push(this.menus[v - 1])
			// 	}
			// })
			let arr = []
			this.power.forEach(v => {
				let a = this.menus.filter(v1 => {
					return v1.id === v
				})
				arr.push(a)
			})
			this.menu = arr.flat(Infinity)
		},
		methods: {
			// 获取当前时间
			getTime() {
				// 获取时间
				let date = new Date();
				// 获取月份
				let m = date.getMonth() + 1;
				// 获取日
				let d = date.getDate();
				let md = m + '月' + d + '日'
				return md
			},
		}
	}
</script>

<style lang="scss">
	html,
	body {
		width: 100%;
		height: 100%;
	}

	.home {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		letter-spacing: 5rpx;
		position: relative;

		.bj {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			z-index: -1;
		}

		.top {
			height: 25%;
			background-color: #e40315;
			position: relative;

			.personage {
				width: 80%;
				height: 85%;
				background-color: #fff;
				padding: 20rpx;
				border-radius: 20rpx;
				box-shadow: 0rpx 5rpx 35rpx -15rpx #000;
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
				bottom: -50rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.time {
					color: #acacac;
				}

				.img {
					text-align: center;

					image {
						width: 160rpx;
						height: 160rpx;
						border-radius: 50%;
						margin: 0 auto;
					}
				}

				.name {
					text-align: center;
					color: #919191;
					margin-bottom: 20rpx;
				}
			}
		}

		.bom {
			padding: 100rpx 50rpx 0;
			display: flex;
			flex-wrap: wrap;

			.btn {
				width: 215rpx;
				height: 215rpx;
				border-right: 1rpx solid #e1e1e1;
				border-bottom: 1rpx solid #e1e1e1;
				text-align: center;
				color: #919191;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;

				&:nth-child(3n) {
					border-right: 0;
				}

				image {
					width: 50rpx;
					height: 50rpx;
					margin-bottom: 15rpx;
				}
			}
		}
	}
</style>