<template>
	<view class="tabbar-box">
		<view class="bar-box" @click="clickBar(index)" v-for="(item,index) in tabList" :key="index" :class="item.shaking?'shaking':''">
			<view class="red-dot" v-if="index == 0 && indexZhipaiCount > 0">
				{{formatBadgeCount(indexZhipaiCount)}}
			</view>
			<view class="red-dot" v-if="index == 1 && indexWorkerCount > 0">
				{{formatBadgeCount(indexWorkerCount)}}
			</view>
			<view class="red-dot" v-if="index == 4 && indexMyCount > 0">
				{{formatBadgeCount(indexMyCount)}}
			</view>
			<view class="img-box" v-if="index != 2">
				<img :src="item.isCheck?item.tabIconSelect:item.tabIcon" alt="" />
			</view>
			<view class="big-img-box" v-if="index == 2">
				<img :src="item.isCheck?item.tabIconSelect:item.tabIcon" alt="" />
			</view>
			<view class="text-box" v-if="index != 2" :style="{color:item.isCheck?'#48D1CC':'#000'}">
				{{item.tabName}}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabList: [{
					tabName: '首页',
					tabIcon: '/static/images/tabbar/shouye1.png',
					tabIconSelect: '/static/images/tabbar/shouye.png',
					isCheck: true,
					shaking:false
				}, {
					tabName: '配送',
					tabIcon: '/static/images/tabbar/peisong1.png',
					tabIconSelect: '/static/images/tabbar/peisong.png',
					isCheck: false,
					shaking:false
				}, {
					tabName: '发布',
					tabIcon: '/static/images/tabbar/fabu222.png',
					tabIconSelect: '/static/images/tabbar/shouye.png',
					isCheck: false,
					shaking:false
				}, {
					tabName: '鱼塘',
					tabIcon: '/static/images/tabbar/xianyu1.png',
					tabIconSelect: '/static/images/tabbar/xianyu.png',
					isCheck: false,
					shaking:false
				}, {
					tabName: '我的',
					tabIcon: '/static/images/tabbar/wode1.png',
					tabIconSelect: '/static/images/tabbar/wode.png',
					isCheck: false,
					shaking:false
				}],
				indexZhipaiCount:0,
				indexWorkerCount:0,
				indexMyCount:0,
				countRefreshId:0
			}
		},
		props: {
			//页面的宽度
			width: {
				type: Number,
				default: true
			},
			//选中tab的下标
			currentIndex: {
				type: Number,
				default: 0
			}
		},
		watch: {
			//监听currentIndex变化
			currentIndex(newVal) {
				for (let i = 0; i < this.tabList.length; i++) {
					if (newVal == i) {
						this.tabList[i].isCheck = true
					} else {
						this.tabList[i].isCheck = false
					}
				}
			}
		},
		mounted() {
			uni.$on('deliveryStatusCountsChange', this.setDeliveryStatusCounts)
			this.setDeliveryStatusCounts(uni.getStorageSync('deliveryStatusCounts') || {})
		},
		beforeDestroy() {
			uni.$off('deliveryStatusCountsChange', this.setDeliveryStatusCounts)
		},
		methods: {
			hasLogin() {
				const token = uni.getStorageSync('hiver_token')
				return !!(token && typeof token === 'string' && token.trim() && token !== 'null' && token !== 'undefined')
			},
			goLogin(index) {
				const redirectKey = 'login_redirect_' + Date.now()
				uni.setStorageSync(redirectKey, '/pages/index/index?tabIndex=' + index)
				uni.navigateTo({
					url: '/package2/login/login?redirect=' + redirectKey
				})
			},
			formatBadgeCount(count) {
				const value = Number(count) || 0
				return value > 99 ? '99+' : value
			},
			setDeliveryStatusCounts(counts) {
				this.indexWorkerCount = (Number(counts.daiqu) || 0) + (Number(counts.daisong) || 0)
				this.$forceUpdate()
			},
			//点击tab切换
			clickBar(index) {
				if (index !== 0 && !this.hasLogin()) {
					this.goLogin(index)
					return
				}
				
				for (let i = 0; i < this.tabList.length; i++) {
					if (index == i) {
						this.$emit('tab-index', i);
						if(index == 2) return
						if(index != 0){
							this.getWorkerCounts()
						}
						this.tabList[i].isCheck = true
						if (this.tabList[i].shaking) return

						this.tabList[i].shaking = true

						setTimeout(() => {
							this.tabList[i].shaking = false
						}, 500)
					} else {
						this.tabList[i].isCheck = false
						this.$forceUpdate()
					}
				}
			},
			getWorkerCounts(){
				const refreshId = ++this.countRefreshId
				this.indexZhipaiCount = 0
				this.indexWorkerCount = 0
				this.indexMyCount = 0
				let deliveryStatusCounts = {
					daiqu: 0,
					daisong: 0
				}
				let shopId = uni.getStorageSync('shopId')
				let worker = uni.getStorageSync('worker')
				let workerResult = {
					zhipaiCount: 0,
					workerTabCount: 0,
					myCount: 0,
					workerCounts: 0,
					deliveryStatusCounts
				}
				let shopCounts = 0
				let tasks = []
				if(worker){
					const area = uni.getStorageSync('area') ? JSON.parse(uni.getStorageSync('area')) : {}
					tasks.push(this.tui.request("/mall/delivery/countOrderByStatus", "POST", {workerId:worker.workerId,regionId:area.id}, false, true).then((res) => {
						if (res.code == 200) {
							let result = {
								zhipaiCount: 0,
								workerTabCount: 0,
								myCount: 0,
								workerCounts: 0,
								deliveryStatusCounts: {
									daiqu: 0,
									daisong: 0
								}
							}
							if(res.result != null){
								for(let i = 0;i<res.result.length;i++){
									const orderCount = Number(res.result[i].orderCount) || 0
									if(res.result[i].status == 0){
										result.zhipaiCount = orderCount
									}else if(res.result[i].status == 1 || res.result[i].status == 2){
										if (res.result[i].status == 1) {
											result.deliveryStatusCounts.daiqu = orderCount
										} else if (res.result[i].status == 2) {
											result.deliveryStatusCounts.daisong = orderCount
										}
										result.workerTabCount += orderCount
									}else{
										result.myCount += orderCount
									}
									if(res.result[i].status == 3){
										result.workerCounts = orderCount
									}
								}
							}
							workerResult = result
						} else {
							this.tui.toast(res.message);
						}
						uni.hideLoading();
					}).catch((res) => {}));
				}else{
					uni.setStorageSync('workerCounts', 0)
					uni.setStorageSync('deliveryStatusCounts', deliveryStatusCounts)
					uni.$emit('deliveryStatusCountsChange', deliveryStatusCounts)
				}
				if(shopId){
					tasks.push(this.tui.request("/mall/order/countByShop/"+shopId, "GET", {}, false, true).then((res) => {
						if (res.code == 200) {
							this.shopData = res.result
							let total = 0
							const orderStatusCount = this.shopData.orderStatusCount || []
							for(let i=0;i<orderStatusCount.length;i++){
								if(orderStatusCount[i].counttype){
									const count = Number(orderStatusCount[i].count) || 0
									if(orderStatusCount[i].counttype == 'daisong'){
										total += count
									}else if(orderStatusCount[i].counttype == 'daiqu'){
										total += count
									}else if(orderStatusCount[i].counttype == 'daixiaofei'){
										total += count
									}else if(orderStatusCount[i].counttype == 'daichucan'){
										total += count
									}
								}
							}
							const pendingBadReviewCount = Number(this.shopData.pendingBadReviewCount) || 0
							const refundCount = Number(this.shopData.refundCount) || 0
							const shopDeliveryPendingCount = Number(this.shopData.shopDeliveryPendingCount) || 0
							const transferDeliveryPendingCount = Number(this.shopData.transferDeliveryPendingCount) || 0
							total += pendingBadReviewCount
							total += refundCount
							total += shopDeliveryPendingCount
							total += transferDeliveryPendingCount
							shopCounts = total
						} else {
							this.tui.toast(res.message)
						}
						uni.hideLoading()
					}).catch((res) => {}))
				}else{
					uni.setStorageSync('shopCounts', 0)
				}
				return Promise.all(tasks).then(() => {
					if (refreshId != this.countRefreshId) return
					this.indexZhipaiCount = workerResult.zhipaiCount
					this.indexWorkerCount = workerResult.workerTabCount
					this.indexMyCount = workerResult.myCount + shopCounts
					uni.setStorageSync('workerCounts', workerResult.workerCounts)
					uni.setStorageSync('shopCounts', shopCounts)
					uni.setStorageSync('deliveryStatusCounts', workerResult.deliveryStatusCounts)
					uni.$emit('deliveryStatusCountsChange', workerResult.deliveryStatusCounts)
					uni.$emit('myCenterCountsChange', {
						workerCounts: workerResult.workerCounts,
						shopCounts: shopCounts
					})
					this.$forceUpdate()
				})
			}
		}
	}
</script>

<style>
	.tabbar-box {
		width: 100%;
		position: fixed;
		bottom: 0;
		height: 150rpx;
		background: rgba(255, 255, 255, 1);
		margin: 0 auto;
		display: flex;
		z-index: 998;
		border-top: 1px solid #eee;
		border-top-left-radius: 60rpx;
		border-top-right-radius: 60rpx;
	}

	.bar-box {
		height: 100%;
		flex: 1;
		position: relative;
	}
	.red-dot {
		position: absolute;
		top: 10rpx;
		right: 24rpx;
		z-index: 2;
		min-width: 34rpx;
		height: 34rpx;
		padding: 0 10rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 999rpx;
		box-sizing: border-box;
		text-align: center;
		color: #ffffff;
		background: linear-gradient(135deg, #ff8a1f 0%, #ff3f5f 100%);
		border: 4rpx solid rgba(255, 255, 255, 0.96);
		box-shadow: 0 8rpx 18rpx rgba(255, 63, 95, 0.34);
		font-size: 20rpx;
		font-weight: 900;
		font-family: Arial, 'PingFang SC', sans-serif;
	}

	.img-box {
		width: 50rpx;
		height: 50rpx;
		margin: 20rpx auto 10rpx;
		cursor: pointer;
		display: block;
		transition: all 0.3s;
		transform-origin: center center;
		user-select: none;
	}

	.img-box img{
		width: 50rpx;
		height: 50rpx;
		background-size: 100%;
	}
	.big-img-box img{
		width: 80%;
		height: 90%;
		background-size: 100%;
		margin: -20rpx 0 0 10%;
	}

	@keyframes simple-scale-shake {
		0% {
			transform: scale(1);
		}
		10% {
			transform: scale(1.5);
		}
		20% {
			transform: scale(0.9);
		}
		30% {
			transform: scale(1.15);
		}
		40% {
			transform: scale(0.95);
		}
		50% {
			transform: scale(1.1);
		}
		60% {
			transform: scale(0.97);
		}
		70% {
			transform: scale(1.05);
		}
		80% {
			transform: scale(0.99);
		}
		90% {
			transform: scale(1.02);
		}
		100% {
			transform: scale(1);
		}
	}

	.shaking {
		animation: simple-scale-shake 0.8s ease-out;
	}

	.text-box {
		text-align: center;
		font-size: 20rpx;
		font-family: 'PingFang HK';
		font-weight: bold;
	}
	.big-img-box{
		width: 100%;
		height: 100%;
	}
</style>