<template>
	<view class="homePage-container">
		 <!-- 数字货架 -->
		 <div class="panel-box">
		 	<div class="panel-title"><div class="texts">数字货架</div></div>
		 	<div class="panel-body"><iconItemsList :list="storageRacksNavList"></iconItemsList></div>
		 </div>
		 <!-- 调回管理 -->
		 <div class="graid-box">
			 <div class="graid-box-1" @click="toPage('/pages/shuntBackManage/shuntBackList')">
				 <div class="title">调回管理</div>
				 <div>商品调回记录查询</div>
			 </div>
			 <div class="graid-box-1" @click="toPage('/pages/latePlay/chooseBulk')">
				 <div class="title">补打贴签</div>
				 <div>遗漏标签快捷处理</div>
			 </div>
		 </div>
	</view>
</template>
<script>
	import iconItemsList from '@/components/icon-items-list/icon-items-list.vue';
	import { shelfReplenishStateCount } from '@/api/shelfReplenish'
	export default {
		components: {
			iconItemsList,
		},
		data() {
			return {
				// 数字货架
				storageRacksNavList: [],
				theme: ''
			}
		},
		onLoad() {
			// 设置底部tabbar 样式
			const theme = getApp().globalData.theme
			this.theme = theme
			uni.setTabBarItem({
			  "index": 0,
			  "iconPath": "static/"+theme+"/tabbar/stock.png",
			  "selectedIconPath": "static/"+theme+"/tabbar/stock-active.png",
			})
			uni.setTabBarItem({
			  "index": 1,
			  "iconPath": "static/"+theme+"/tabbar/stock.png",
			  "selectedIconPath": "static/"+theme+"/tabbar/stock-active.png",
			})
			uni.setTabBarItem({
			  "index": 2,
			  "iconPath": "static/"+theme+"/tabbar/home.png",
			  "selectedIconPath": "static/"+theme+"/tabbar/home-active.png",
			})
			uni.setTabBarItem({
			  "index": 3,
			  "iconPath": "static/"+theme+"/tabbar/user.png",
			  "selectedIconPath": "static/"+theme+"/tabbar/user-active.png",
			})
			uni.setTabBarStyle({
			  color: this.$config("topBarTitleColors"),
			  selectedColor: this.$config("primaryColor"),
			  borderStyle: 'white',
			  complete: function(res){
				console.log(res)
			  }
			})
			// 数组货架导航按钮
			this.storageRacksNavList = [
				{
					id: 'scanVin',
					icon: `/static/${this.theme}/navIcon/home_icon_confirm@3x.png`,
					name: '待确认',
					url: '/pages/replenishmentManage/replenishmentList?billState=WAIT_CONFIRM',
					target: 'page',
					count: 0,
					auth: true
				},
				{
					id: 'scanGoods',
					icon: `/static/${this.theme}/navIcon/home_icon_out@3x.png`,
					name: '待出库',
					url: '/pages/replenishmentManage/replenishmentList?billState=WAIT_OUT_STOCK',
					target: 'page',
					count: 0,
					auth: true
				},
				{
					id: 'bhrk',
					icon: `/static/${this.theme}/navIcon/home_icon_warehousing@3x.png`,
					name: '待签收',
					url: '/pages/replenishmentManage/replenishmentList?billState=WAIT_CHECK',
					target: 'page',
					count: 0,
					auth: true
				},
				{
					id: 'jsgl',
					icon: `/static/${this.theme}/navIcon/home_icon_entire@3x.png`,
					name: '全部',
					url: '/pages/replenishmentManage/replenishmentList?billState=ALL',
					target: 'page',
					count: 0,
					auth: true
				}
			]
		},
		onShow() {
			this.queryByTypeSum()
		},
		methods:{
			toPage(url){
				uni.navigateTo({
					url:url
				})
			},
			// 查询补货单每个状态的数据条数
			queryByTypeSum () {
				shelfReplenishStateCount({}).then(res => {
					if (res.data && res.status == 200) {
						this.storageRacksNavList[0].count = res.data.WAIT_CONFIRM || 0
						this.storageRacksNavList[1].count = res.data.WAIT_OUT_STOCK || 0
						this.storageRacksNavList[2].count = res.data.WAIT_CHECK || 0
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	.homePage-container {
		width: 100%;
		padding: 30rpx;
		.graid-box{
			display: flex;
			align-items: center;
			.graid-box-1{
				background-color: #ffffff;
				border-radius: 30upx;
				box-shadow: 3upx 2upx 6upx #eee;
				padding: 30rpx;
				width: 50%;
				font-size: 28rpx;
				color: #424D5E;
				.title{
					font-size: 45rpx;
					color: #191919;
					font-weight: bold;
				}
			}
			> div{
				&:first-child{
					margin-right: 15rpx;
				}
				&:last-child{
					margin-left: 15rpx;
				}
			}
		}
		.panel-box {
			background-color: #ffffff;
			border-radius: 30upx;
			padding: 10upx 20upx;
			box-shadow: 3upx 2upx 6upx #eee;
			margin-bottom: 30upx;
			.panel-title {
				display: flex;
				align-items: center;
				padding: 20upx 12upx;
				.texts {
					font-size: 32upx;
					flex-grow: 1;
				}
				.btns {
					font-size: 28upx;
					color: #999;
					display: flex;
					align-items: center;
				}
			}
			.panel-body {
				padding: 0 10upx;
				.nodata {
					text-align: center;
					font-size: 24upx;
					width: 100%;
					color: #999999;
					padding: 30upx 0;
				}
			}
		}
	}
</style>
