<template>
	<view class="home_content">
		<nav-bar title="首页"></nav-bar>
		<view class="zd_wrapper">
			<view class="zd-row menu-wrap">
				<view class="menu-item" v-for="(e, i) in menuList" :key="e.id" @tap="toPage(e)">
					<image class="menu-img" :style="{'background-color': ['#ff814a', '#4982fd'][i]}" :src="require('../../static/images/menu/' + e.icon + '.png')" alt="">
					<view class="menu-name">{{e.title}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import NavBar from '@/components/NavBar.vue'
	export default {
		components: {
			NavBar
		},
		data() {
			return {
				userName: this.$store.getters.userInfo !== '' ? JSON.parse(this.$store.getters.userInfo).person_name : '',
				menuList: [
					{id: 1, title: '工单管理', icon: 'RF1', path: '/pages/management/order-detail'},
					{id: 2, title: '退桶任务', icon: 'RF2', path: '/pages/management/call-task'},
				]
			};
		},
		methods: {
			toPage (e) {
				let url = e.path + '?title=' + e.title
				uni.redirectTo({
					url: url
				})
			}
		}
	}
</script>

<style lang="stylus">
@import '../../common/style/mixin.styl';
.home_content
	_wh(100%, 100%)
	padding 2.07rem 0.4rem 1.4rem 0.4rem
	_bis(,'../../static/images/home_bg.jpg', 100%, 100%,bottom)
.zd_wrapper
	_wh(100%,100%)
	padding 0.37rem 0.4rem 0.4rem 0.4rem
	_bis(,'../../static/images/bg-task-r2.png', 100%, 100%,center)
.menu-wrap
	flex-wrap wrap
	justify-content center
	align-content center
	height 100%
	
.menu-item
	width 25%
	padding 0 2%
::v-deep .menu-img
	display block
	_wh(90px, auto)
	margin 0 auto
	img
		position relative
		opacity 1
		width 100%
.menu-name
	margin-top .6rem
	_font(.4rem, .4rem, #00a7ea, 700,center)
</style>
