<template>
	<!-- 兼职中心 -->
	<view class="page1">
		<view class="title">
			<view class="title-sreach">
				
				<view class="title-name">
					兼职中心
				</view>
			</view>
		</view>
		<view class="shop-title">
			<view class="title1">
				<image src="https://ooo.0o0.ooo/2019/04/28/5cc5a71a6e3b6.png" alt="" />
			</view>
			<view class="title2">
				<view class="title22">
					<view style="display: flex;font-size: 32rpx;font-weight: 700;">
						{{worker.workerName}}
						<!-- <img v-if="isBaozhang"
							src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/d27fa14c6bb7426482ed7821919d3aa7.png"
							alt="" style="width: 140rpx;height: 32rpx;background-size: 100%;margin: 20rpx;">
						<img v-else
							src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/176715c0f8ea41e7a9be8fa1c3edd670.png"
							alt="" style="width: 140rpx;height: 32rpx;background-size: 100%;margin: 20rpx;"> -->
					</view>
				</view>
				<view class="title33" @tap="goDetail('xx')">
					修改信息
					<uni-icons type="right" size="12"></uni-icons>
				</view>
			</view>
		</view>
		<view class="shop-order">
			<view class="order1">
				待办事项
			</view>
			<view class="order2">
				<view class="order22">
					<view class="order33" @tap="goDetail('tui',11)">
						<view class="order44">
							{{shouhouCount}}
						</view>
						<view class="order55">
							待退款/售后
						</view>
					</view>
					<view class="order33" @tap="goDetail('pj','cha')">
						<view class="order44">
							{{chapingCount}}
						</view>
						<view class="order55">
							待回复差评
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="shop-order">
			<view class="order1" style="display: flex;">
				<view style="flex: 1;">
					今日实时数据
				</view>
				<!-- <view @tap="goDetail('tj')">
					更多
					<uni-icons type="right" size="12"></uni-icons>
				</view> -->
			</view>
			<view class="data2">
				<view class="data22">
					<view class="data222" @tap="goTodayOrderList">
						{{orderData.orderCount == undefined?0:orderData.orderCount}}
					</view>
					<view class="data333">
						完成订单
					</view>
				</view>
				<view class="data22">
					<view class="data222" @tap="goTodayOrderList">
						{{orderData.amount == undefined ? 0 : orderData.amount}}
					</view>
					<view class="data333">
						配送佣金
					</view>
				</view>
				<view class="data22">
					<view class="data222">
						{{orderData.afterSaleCount == undefined ? 0 : orderData.afterSaleCount}}
					</view>
					<view class="data333">
						退/售后笔数
					</view>
				</view>
				<view class="data22">
					<view class="data222">
						{{orderData.afterSaleAmount == undefined ? 0 : orderData.afterSaleAmount}}
					</view>
					<view class="data333">
						退/售后金额
					</view>
				</view>
			</view>
		</view>
		<view class="shop-order">
			<view class="order1">
				必备工具
			</view>
			<view class="menu2">

				<view class="menu22" @tap="goDetail('xx')">
					<view class="menu33">
						<image src="../../static/image/dingdan/dd0.png" alt="" />
					</view>
					<view class="menu44">
						规则设置
					</view>
				</view>
				<view class="menu22" @tap="goDetail('dd')">
					<view class="menu33">
						<image src="../../static/image/dingdan/dd1.png" alt="" />
					</view>
					<view class="menu44">
						订单管理
					</view>
				</view>
				<view class="menu22" @tap="goDetail('qb')">
					<view class="menu33">
						<image src="../../static/image/dingdan/dd2.png" alt="" />
					</view>
					<view class="menu44">
						我的钱包
					</view>
				</view>
				<view class="menu22" @tap="goDetail('pj','')">
					<view class="menu33">
						<image src="../../static/image/dingdan/dd3.png" alt="" />
					</view>
					<view class="menu44">
						顾客评价
					</view>
				</view>
				<view class="menu22" @tap="goDetail('ph','')">
					<view class="menu33">
						<image src="../../static/image/dingdan/dd4.png" alt="" />
					</view>
					<view class="menu44">
						排行
					</view>
				</view>
				<view class="menu22" @tap="goDetail('tuiRecord')">
					<view class="menu33">
						<image src="../../static/image/dingdan/dd1.png" alt="" />
					</view>
					<view class="menu44">
						退款/售后记录
					</view>
				</view>
				<view class="menu22" @tap="logOut">
					<view class="menu33">
						<image src="../../static/image/dingdan/dd0.png" alt="" />
					</view>
					<view class="menu44">
						退出登录
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				worker: {},
				orderData: {},
				chapingCount: 0,
				shouhouCount: 0,
				daiquCount: 0,
				daisongCount: 0,
				isBaozhang: false
			}
		},
		methods: {
			init(){
				this.refreshPage()
			},
			refreshPage() {
				this.worker = uni.getStorageSync('worker') || {}
				this.getData()
			},
			getData() {
				const worker = uni.getStorageSync('worker') || {}
				this.daiquCount = 0
				this.daisongCount = 0
				this.shouhouCount = 0
				this.chapingCount = 0
				this.orderData = {}
				this.NB.sendRequest("/mall/delivery/countOrderByStatusIndex", {
					workerId:worker.workerId,
					regionId:JSON.parse(uni.getStorageSync('area')).id
				}, false, 'POST', 'application/x-www-form-urlencoded').then(res => {
					if (res.code == 200) {
						if(res.result != null){
							for(let i = 0;i<res.result.length;i++){
								if(res.result[i].status == 1){
									this.daiquCount = Number(res.result[i].orderCount)
								}else if(res.result[i].status == 2){
									this.daisongCount = Number(res.result[i].orderCount)
								}else if(res.result[i].status == 3){
									this.shouhouCount = Number(res.result[i].orderCount)
								}else if(res.result[i].status == 4){
									this.chapingCount = Number(res.result[i].orderCount);
								}else{
									this.orderData = res.result[i].workerIndex
								}
							}
						}
						this.$forceUpdate();
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none'
						});
						return
					}
					uni.hideLoading()
				})
			},
			goTodayOrderList() {
				uni.navigateTo({
					url: '/pages/worker/workerOrderList?today=1'
				})
			},
			logOut() {
				uni.clearStorage()
				getApp().globalData.userinfo = ''
				uni.reLaunch({
					url: '../login/login'
				})
			},
			goDetail(type, index) {
				let url = ''
				switch (type) {
					case 'tj':
						url = '/pages/worker/dataStatistics'
						break;
					case 'xx':
						url = '/pages/worker/partTimeJobRegister'
						break;
					case 'qb':
						url = '/pages/worker/wallet?walletType=worker'
						break;
					case 'dd':
						url = '/pages/worker/workerOrderList'
						break;
					case 'ph':
						url = '/pages/worker/ranking'
						break;
					case 'tui':
						url = '/pages/shop/afterService?type=worker'
						break;
					case 'tuiRecord':
						url = '/pages/shop/afterService?type=worker&mode=record'
						break;
					case 'pj':
						let item = {
							shopScore: uni.getStorageSync('worker').score,
							id: uni.getStorageSync('worker').workerId
						}
						url = '/pages/shop/shopEvaluate?item=' + JSON.stringify(item) + '&isMerchant=2&isCha=' + (
							index == 'cha' ? 1 : 0)
						break;
					default:
				}
				uni.navigateTo({
					url: url
				})
			},
			back() {
				uni.navigateBack()
			},
		}
	}
</script>

<style lang="scss">
	page {
		width: 100%;
		min-height: 100%;
		font-size: 24rpx;
		background: #F6FBF8;
		color: #00231C;
	}

	.page1 {
		width: 100%;
		min-height: 100vh;
		padding-bottom: 60rpx;
		box-sizing: border-box;
		position: relative;
		overflow: hidden;
		background:
			radial-gradient(circle at 16% 210rpx, rgba(227, 255, 150, 0.62), rgba(227, 255, 150, 0) 260rpx),
			radial-gradient(circle at 88% 150rpx, rgba(166, 255, 234, 0.68), rgba(166, 255, 234, 0) 280rpx),
			linear-gradient(180deg, #f1ffe7 0%, #f4fff9 360rpx, #f6fbf8 100%);
	}

	.title {
		width: 100%;
		height: 252rpx;
		background: linear-gradient(135deg, rgba(227, 255, 150, 0.92), rgba(166, 255, 234, 0.86));
		position: relative;
	}

	.title::after {
		content: '';
		position: absolute;
		left: -90rpx;
		right: -90rpx;
		bottom: -70rpx;
		height: 150rpx;
		border-radius: 0 0 50% 50%;
		background: rgba(255, 255, 255, 0.28);
	}

	.title-sreach {
		width: 100%;
		display: flex;
		height: 188rpx;
		position: relative;
		z-index: 1;
	}

	.back-btn {
		padding-top: 110rpx;
		width: 68rpx;
		height: 68rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
		background: rgba(255, 255, 255, 0.34);
	}

	.title-name {
		padding-top: 110rpx;
		font-size: 38rpx;
		font-weight: 900;
		flex: 1;
		text-align: center;
		color: #153b35;
		letter-spacing: 2rpx;
	}

	.shop-title {
		width: 92%;
		margin: -70rpx auto 0;
		padding: 26rpx;
		background:
			radial-gradient(circle at 92% 14%, rgba(166, 255, 234, 0.5), rgba(166, 255, 234, 0) 150rpx),
			linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(250, 255, 248, 0.94));
		border: 1px solid rgba(255, 255, 255, 0.78);
		border-radius: 34rpx;
		display: flex;
		align-items: center;
		font-size: 28rpx;
		font-weight: 800;
		box-shadow: 0 18rpx 42rpx rgba(0, 55, 44, 0.1);
		position: relative;
		z-index: 2;
		box-sizing: border-box;
	}

	.title1 {
		width: 92rpx;
		height: 92rpx;
		padding: 8rpx;
		border-radius: 28rpx;
		background: linear-gradient(135deg, #e3ff96, #a6ffea);
		box-sizing: border-box;
		box-shadow: 0 10rpx 24rpx rgba(32, 190, 154, 0.16);

		image {
			width: 100%;
			height: 100%;
			border-radius: 22rpx;
			display: block;
		}
	}

	.title2 {
		flex: 1;
		min-width: 0;
		display: flex;
		align-items: center;
		margin-left: 18rpx;
	}

	.title22 {
		flex: 1;
		min-width: 0;
		color: #153b35;
	}

	.title22 > view {
		align-items: center;
	}

	.title33 {
		flex-shrink: 0;
		height: 58rpx;
		line-height: 58rpx;
		padding: 0 18rpx;
		border-radius: 999rpx;
		background: rgba(255, 255, 255, 0.72);
		color: #08735d;
		font-size: 24rpx;
		font-weight: 800;
		box-shadow: inset 0 0 0 1px rgba(88, 220, 190, 0.32);
	}

	.shop-order {
		width: 92%;
		margin: 22rpx auto 0;
		background: rgba(255, 255, 255, 0.94);
		border-radius: 30rpx;
		padding: 0 24rpx 24rpx;
		box-shadow: 0 14rpx 34rpx rgba(0, 35, 28, 0.07);
		box-sizing: border-box;
	}

	.shop-title + .shop-order {
		background:
			radial-gradient(circle at 94% 12%, rgba(255, 220, 140, 0.32), rgba(255, 220, 140, 0) 150rpx),
			linear-gradient(160deg, #ffffff 0%, #fffdf7 54%, #f2fff7 100%);
		border: 1px solid rgba(255, 219, 145, 0.34);
	}

	.shop-title + .shop-order + .shop-order {
		background:
			radial-gradient(circle at 8% 16%, rgba(166, 255, 234, 0.38), rgba(166, 255, 234, 0) 170rpx),
			linear-gradient(145deg, #ffffff 0%, #f4fffb 52%, #eef8ff 100%);
		border: 1px solid rgba(132, 232, 205, 0.28);
	}

	.order1 {
		height: 78rpx;
		line-height: 78rpx;
		font-size: 30rpx;
		font-weight: 900;
		color: #153b35;
		border-bottom: 1px solid rgba(0, 35, 28, 0.06);
		display: flex;
		align-items: center;
	}

	.order1::before {
		content: '';
		width: 10rpx;
		height: 30rpx;
		margin-right: 12rpx;
		border-radius: 999rpx;
		background: linear-gradient(180deg, #e3ff96, #35d6a6);
	}

	.order22 {
		display: flex;
		min-height: 118rpx;
		padding-top: 22rpx;
		gap: 14rpx;
	}

	.order33 {
		flex: 1;
		text-align: center;
		padding: 14rpx 6rpx;
		border-radius: 24rpx;
		box-sizing: border-box;
		background: rgba(255, 255, 255, 0.6);
		box-shadow: inset 0 0 0 1px rgba(0, 35, 28, 0.04);
	}

	.order33:active,
	.menu22:active {
		transform: scale(0.96);
	}

	.order44 {
		display: inline-flex;
		min-width: 56rpx;
		height: 48rpx;
		align-items: center;
		justify-content: center;
		padding: 0 10rpx;
		border-radius: 999rpx;
		background: linear-gradient(135deg, rgba(227, 255, 150, 0.82), rgba(166, 255, 234, 0.82));
		font-size: 34rpx;
		line-height: 48rpx;
		font-weight: 900;
		color: #08735d;
		box-shadow: 0 8rpx 18rpx rgba(56, 196, 160, 0.12);
	}

	.shop-title + .shop-order .order44 {
		background: linear-gradient(135deg, #fff1bf, #ffd6a2);
		color: #9a5412;
		box-shadow: 0 8rpx 18rpx rgba(255, 163, 79, 0.14);
	}

	.shop-title + .shop-order + .shop-order .order1::before {
		background: linear-gradient(180deg, #a6ffea, #60b8ff);
	}

	.order55,
	.data333,
	.menu44 {
		color: #415c56;
		font-size: 23rpx;
	}

	.data2 {
		display: flex;
		min-height: 150rpx;
		text-align: center;
		padding-top: 26rpx;
		gap: 16rpx;
	}

	.data22 {
		flex: 1;
		position: relative;
		padding: 18rpx 8rpx;
		border-radius: 26rpx;
		background: rgba(255, 255, 255, 0.66);
		box-shadow: inset 0 0 0 1px rgba(68, 202, 185, 0.08);
	}

	.data22 + .data22::before {
		display: none;
	}

	.data222 {
		font-size: 42rpx;
		line-height: 54rpx;
		font-weight: 900;
		color: #0b6b5a;
		padding-bottom: 12rpx;
	}

	.menu2 {
		display: flex;
		flex-wrap: wrap;
		text-align: center;
		padding-top: 24rpx;
	}

	.menu22 {
		width: 25%;
		height: 142rpx;
	}

	.menu33 {
		width: 72rpx;
		height: 72rpx;
		margin: 0 auto 10rpx;
		border-radius: 24rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background: linear-gradient(135deg, #fff3d7, #ffd7b0);
		box-shadow: 0 10rpx 22rpx rgba(255, 151, 97, 0.14);

		image {
			width: 46rpx;
			height: 46rpx;
			background-size: 100%;
			display: block;
		}
	}

	.menu22:nth-child(2n) .menu33 {
		background: linear-gradient(135deg, #e4f4ff, #b9ddff);
	}

	.menu22:nth-child(3n) .menu33 {
		background: linear-gradient(135deg, #e3ff96, #a6ffea);
	}

	.menu22:nth-child(4n) .menu33 {
		background: linear-gradient(135deg, #fff2b8, #ffd98b);
	}

	.menu44 {
		height: 40rpx;
		line-height: 40rpx;
		font-weight: 700;
	}
</style>