<template>
	<view class="homePage-container">
		 <view id="tjCons">
			 <!-- 数字货架 -->
			 <div class="panel-box" v-if="$hasPermissions('M_ERManage_mobile')">
			 	<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')" v-if="$hasPermissions('M_BackToManage_mobile')">
					 <div class="icon">
						 <u-icon name="huowu-tuihui" custom-prefix="iscm-icon" size="70"></u-icon>
					 </div>
					 <div class="title">调回管理</div>
				 </div>
				 <div class="graid-box-1" @click="toPage('/pages/latePlay/chooseBulk')" v-if="$hasPermissions('M_printLabel_mobile')">
					 <div class="icon">
						<u-icon name="dayin" custom-prefix="iscm-icon" size="65"></u-icon>
					 </div>
					 <div class="title">补打贴签</div>
				 </div>
				 <div class="graid-box-1" @click="toPage('/pages/shelfSetting/shelfList')" v-if="$hasPermissions('M_shelfSetting_mobile')">
					 <div class="icon">
						<u-icon name="ison_shelf" custom-prefix="iscm-icon" size="65"></u-icon>
					 </div>
					 <div class="title">货架设置</div>
				 </div>
				 <div class="graid-box-1" @click="toPage('/pages/approveStore/list')" v-if="$hasPermissions('M_auditStore_mobile')">
					 <div class="icon">
						<u-icon name="mendianzhuanxiangshenhe" custom-prefix="iscm-icon" size="70"></u-icon>
						<u-badge type="error" size="mini" :offset="[-5,20]" :count="storeAuthNums"></u-badge>
					 </div>
					 <div class="title">门店审核</div>
				 </div>
				 <div class="graid-box-1" @click="toPage('/pages/stockCheck/shelfList')" v-if="$hasPermissions('M_stockCheck_mobile')">
					 <div class="icon">
						<u-icon name="icon_warehousing" custom-prefix="iscm-icon" size="65"></u-icon>
						<u-badge type="error" size="mini" :offset="[-5,20]" :count="stockCheckNums"></u-badge>
					 </div>
					 <div class="title">库存盘点</div>
				 </div>
				 <div class="graid-box-1" @click="toPage('/pages/shelfOrder/shelfOrder')" v-if="$hasPermissions('M_shelfOrder_mobile')">
					 <div class="icon">
						<u-icon name="icon_order" custom-prefix="iscm-icon" size="65"></u-icon>
					 </div>
					 <div class="title">货架订单</div>
				 </div>
				 <div class="graid-box-1" @click="toPage('/pages/vinAnalyse/shelfList')" v-if="$hasPermissions('M_vinStatistics_mobile')">
					 <div class="icon">
						<u-icon name="fenxi" custom-prefix="iscm-icon" size="65"></u-icon>
					 </div>
					 <div class="title">VIN分析</div>
				 </div>
				 <!-- <div class="graid-box-1" @click="toPage('/pages/index/printAbc')">
					 <div class="title">打印ABC</div>
				 </div> -->
			 </div>
		 </view>
	</view>
</template>
<script>
	import iconItemsList from '@/components/icon-items-list/icon-items-list.vue';
	import { shelfReplenishStateCount } from '@/api/shelfReplenish'
	import { queryStockCheckWaitStateNum } from '@/api/stockCheck'
	import { xprhStoreApplyQueryPage } from '@/api/approveStore'
	export default {
		components: {
			iconItemsList,
		},
		data() {
			return {
				// 数字货架
				storageRacksNavList: [],
				theme: '',
				storeAuthNums: 0,
				stockCheckNums: 0,
				listHeight: 400
			}
		},
		onReady() {
			const query = uni.createSelectorQuery().in(this);
			query.select('#tjCons').boundingClientRect(data => {
			  this.listHeight = Math.floor(data.height-40)
			}).exec();
		},
		onLoad() {
			// 设置底部tabbar 样式
			const theme = getApp().globalData.theme
			this.theme = theme
			// 数字货架导航按钮
			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()
			this.getStoreNums()
			this.getStockCheckNums()
		},
		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
					}
				})
			},
			getStoreNums(){
				xprhStoreApplyQueryPage({pageNo:1,pageSize:1,auditStatus:'WAIT'}).then(res => {
					 this.storeAuthNums = res.data.count || 0
				})
			},
			getStockCheckNums(){
				queryStockCheckWaitStateNum().then(res => {
					 this.stockCheckNums = res.data || 0
				})
			}
		}
	}
</script>

<style lang="scss">
	.homePage-container {
		width: 100%;
		padding: 0 30rpx;
		.graid-box{
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			background-color: #ffffff;
			border-radius: 30upx;
			padding: 10upx 20upx;
			box-shadow: 3upx 2upx 6upx #eee;
			margin-bottom: 20upx;
			.graid-box-1{
				padding: 20rpx 0;
				width: 25%;
				font-size: 24rpx;
				color: #424D5E;
				text-align: center;
				.title{
					font-size: 28rpx;
					color: #191919;
					font-weight: bold;
				}
				.icon{
					text-align: center;
					position: relative;
				}
			}
		}
		.panel-box {
			background-color: #ffffff;
			border-radius: 30upx;
			padding: 10upx 20upx;
			box-shadow: 3upx 2upx 6upx #eee;
			margin-top: 20upx;
			margin-bottom: 20upx;
			.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;
				}
			}
		}
		.sales-list{
			.title{
				display: flex;
				align-items: center;
				justify-content: space-between;
				.title-name{
					font-size: 32upx;
					color: #333;
					font-weight: 1000;
				}
				.title-all{
					color: rgb(144, 147, 153);
				}
			}
		}
	}
</style>
