<template>
	<page-meta root-font-size="18px"></page-meta>
	<view class="content">
		<view class="index_top" style="position: relative;">
			<view class="serch" style="height: 50px;">
				<uni-search-bar class="flex1" @confirm="search" cancelButton="none" v-model="serchval"
					@clear="clearfilterlist">
				</uni-search-bar>
				<button class="mini-btn index_btn" type="primary" size="mini" @click="search">搜索</button>
			</view>
			<view style="height: 100rpx;"></view>
		</view>
		<view class="common_icons">
			<view class="common_info">
				<view class="common_title">常用菜单</view>
				<view class="uni-flex uni-row">
					<view class="common_cell" @click="purchasePutawayClick">
						<view class="cell_icon">
							<image src="../../static/icons_ui/icons_common_sjadd.svg"></image>
						</view>
						<text class="font_xs">采购上架</text>
					</view>
					<view class="common_cell" @click="demoClick">
						<view class="cell_icon">
							<image src="../../static/icons_ui/icons_common_sjadd.svg"></image>
						</view>
						<text class="font_xs">组件</text>
					</view>
					<!-- <view class="common_cell" @click="test">
					
						<view class="cell_icon">
							<image src="../../static/icons_ui/icons_common_sjadd.svg"></image>
						</view>
						<text class="font_xs">声音测试</text>
					</view> -->

					<!-- <view class="common_cell">
						<view class="cell_icon">
							<image src="../../static/icons_ui/icons_common_recceipt.svg"></image>
						</view>
						<text class="font_xs">上架后退货</text>
					</view>
					<view class="common_cell">
						<view class="cell_icon">
							<image src="../../static/icons_ui/icons_common_recceipt.svg"></image>
						</view>
						<text class="font_xs">上架后退货</text>
					</view>
					<view class="common_cell cell_last">
						<view class="cell_icon">
							<image src="../../static/icons_ui/icons_common_recceipt.svg"></image>
						</view>
						<text class="font_xs">上架后退货</text>
					</view> -->
				</view>
			</view>
		</view>
		
		<view class="menu" v-if="filterList.length>0">
			<view v-for="item in filterList" class="seachlist" @click="openFilterMenu(item.path)">
				<view>
					<image class="serchpic" mode="aspectFill" :src="item.url"></image>
				</view>
				<view class="serchtxt">{{ item.name }}</view>
			</view>
		</view>

		<view class="index_menu">
			<view class="menu_ab">
				<view class="menu_content" v-if="menu.length>0">
					<!-- 标题 -->
					<view :class="menuIndex == index ? 'index_title tit_active' : 'index_title'"
						v-for="(item,index) in menu" :data-current="index" @click="ontabtap($event,item)">{{item.title}}
					</view>
				</view>
				<!-- 菜单 -->
				<view class="index_menuinfo">
					<view class="icon_block" v-for="menuItem in selectedMenus" :key="menuItem.id"
						@click="openCheck(menuItem.path)">
						<text class="index_badge"
							v-if="menuItem.JobCount>0">{{menuItem.JobCount>9?'9+':menuItem.JobCount}}</text>
						<image :src="menuItem.url"></image>
						<text>{{menuItem.name}}</text>
					</view>
				</view>
			</view>
		</view>
		<comMessage ref="comMessage"></comMessage>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	import {
		getlogin,
		menus,
		getJobCountAsync,
		getMenus,
		getUserInfo,
		getUserInfoAsync,
	} from '@/api/index.js'
	
	import {
		getJobType
	} from '@/common/basic.js'
	
	import comMessage from '@/mycomponents/common/comMessage.vue'
	export default {
		computed: mapState(['forcedLogin', 'hasLogin', 'userName']),
		components: {
			comMessage
		},
		data() {
			return {
				title: 'WMS仓库管理系统',
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				serchval: "",
				nomore: false,
				menu: [],
				filterList: [],
				menuIndex: 0,
				selectedMenus: [],
				userMenus: [],
				max: 5,
				min: 0,
				rand: 0,
				timer: null
			}
		},
		onLoad() {
			let that = this;
			let menuIndex = localStorage.getItem('selectMenuIndex');
			this.menuIndex = Number(menuIndex);
			if(sessionStorage.hasLogin == 'true'){
				that.InitData();
				that.timerRefresh();
			}
				
			
		},
		onHide() {
			if (this.timer) {
				clearTimeout(this.timer);
				this.timer = null;
			}
		},
		onShow() {
			if(sessionStorage.hasLogin == 'true'){
			let that = this;
			if (that.timer != null)
				return;
			//刷新任务菜单数量
			uni.showLoading({
				title: "刷新中...",
				mask: true
			});
			that.timerRefresh();
			uni.hideLoading();
			}
		},
		mounted() {
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: "#5A7CF3 !important"
			})
			if (sessionStorage.hasLogin !== 'true') {
				uni.showModal({
					title: '未登录',
					content: '您未登录需要登录后才能继续', //如果需要强制登录，不显示取消按钮
					showCancel: !this.forcedLogin,
					success: (res) => {
						if (res.confirm) {
							//如果需要强制登录，使用reLanch方式
							if (this.forcedLogin) {
								uni.reLaunch({
									url: '../login/index'
								})
							} else {
								uni.navigateTo({
									url: '../login/index'
								})
							}
						}
					}
				})
			}
		},
		methods: {
			async InitData() {
				uni.showLoading({
					title: "加载中....",
					mask: true
				});
				let that = this;
				// let userWorkgroups = await getWorkgroups();
				let menus = await getMenus();
				if (menus.length > 0) {
					that.userMenus = menus;
					that.selectedMenus = menus[0].list;
					await that.refreshJobMenu(menus);
				} else {
					that.menu = null;
				}
				uni.hideLoading();
			},
		
			//刷新任务菜单上的任务数量
			async refreshJobMenu(menus) {
				//生成随机数
				// this.rand = Math.floor(Math.random() * (this.max - this.min + 1)) + this.min
				// menus[1].list[2].JobCount = this.rand;
				let that = this;
				let isToday = this.$isReceiptToday;
				let jobItems = await getJobCountAsync(isToday);
				let jobTypes = jobItems.items; //类型
				if (menus != null && jobTypes != null) {
					for (var g = 0; g < menus.length; g++) {
						let group = menus[g];
						for (var m = 0; m < group.list.length; m++) {
							let menu = group.list[m];
							if (menu.countUrl != '' && menu.countUrl != null) {
								let jobMenu = jobTypes.find(r => {
									return getJobType(r.jobType) == menu.countUrl
								})
								if (jobMenu != null) {
									menu.JobCount = jobMenu.count;
								}
							}
							if (that.menuIndex > 0 && that.menuIndex == g) {
								that.selectedMenus = group.list;
							}
						}
					}
				}
				setTimeout(() => {
					that.menu = menus
				}, 0);
				this.$forceUpdate();
			},
		
			search() {
				let that = this
				that.filterList = []
				that.nomore = false
				if (that.serchval.length !== 0) {
					this.menu.forEach((v) => {
						v.list.forEach((i) => {
							if (i.name.indexOf(that.serchval) !== -1) {
								// console.log("dddd", i)
								that.filterList.push(i)
							}
						})
					})
					if (that.filterList == 0) {
						that.nomore = true
					}
				}
			},
		
			clearfilterlist() {
				let that = this;
				that.filterList = [];
			},
		
			input(v) {
				this.serchval = v
				this.nomore = false
			},
			openCheck(url) {
				// that.timer
				uni.navigateTo({
					url: url
				});
			},
			openFilterMenu(url) {
				uni.navigateTo({
					url: url
				});
		
				this.serchval = '';
				this.filterList = [];
			},
			ontabtap(e, item) {
				this.selectedMenus = [];
				let index = e.target.dataset.current || e.currentTarget.dataset.current;
				this.menuIndex = index;
				localStorage.setItem('selectMenuIndex', index); //选择的菜单
				this.selectedMenus = item.list;
			},
			// 常用菜单,采购上架
			purchasePutawayClick() {
				uni.navigateTo({
					url: '/pages/putaway/purchasePutaway'
				});
			},
		
			// 组件
			demoClick() {
				uni.navigateTo({
					url: '/pages/demo/demo'
				});
			},
		
			timerRefresh() {
				let that = this;
				that.timer = setInterval(async function() {
					await that.refreshJobMenu(that.userMenus);
					console.log('刷新菜单');
				}, 60000)
			},
		
			// test() {
			// 	this.ScanErrorAudio();//播放语音
			// }
		}
	}
</script>

<style >
.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background-color: #F4F6F8;
	}

	.serch {
		width: 100%;
		display: flex;
		/* 	height: 130upx; */
		align-items: center;
	}

	.seachlist {
		display: flex;
		padding: 20rpx;
		border-bottom: 1px solid #eee;
		background: #fff;
	}

	.serchpic {
		width: 60upx;
		height: 60upx;
		border-radius: 10upx;
	}

	.serchtxt {
		font-size: .825rem;
		color: #000000;
		padding-left: 20upx;
		line-height: 60upx;
	}

	.flex1 {
		flex: 1;
		font-size: 18px;
	}

	.menu {
		width: 100%;
		float: left;
		z-index: 999;
		position: fixed;
		top: 94px;
		background-color: rgba(0, 0, 0, 0.5);
		height: 100%;
		/* in-height: 300px; */
		/* box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.1); */
	}

	uni-modal .uni-modal__bd {
		padding: 1.3em 1.6em 1.3em;
		min-height: 40px;
		/* font-size: 15px; */
		line-height: 1.4;
		/* color: #999; */
		max-height: 400px;
		overflow-x: hidden;
		overflow-y: auto;
	}
</style>
