<template>
	<view class="ranking-page">
		<view class="title">
			<view class="title-sreach">
				<view class="back-btn" @tap="back">
					<uni-icons type="left" size="26" color="#20243a"></uni-icons>
				</view>
				<view class="title-name">
					配送今日排行榜
				</view>
			</view>
		</view>

		<view class="notice-wrap" v-if="reward != ''">
			<view class="reward-card">
				<view class="reward-title">
					<view class="reward-icon">
						<text>奖</text>
					</view>
					<text>奖励规则</text>
				</view>
				<view class="reward-marquee">
					<view class="reward-marquee-inner">{{reward}}</view>
				</view>
			</view>
		</view>

		<view class="hero">
			<view class="hero-glow hero-glow-one"></view>
			<view class="hero-glow hero-glow-two"></view>
			<view class="hero-copy">
				<!-- <view class="hero-tag">实时战况</view> -->
				<view class="hero-title">今日配送之星</view>
				<view class="hero-subtitle">按今日完成订单数排名，晚 10 点截止</view>
			</view>

			<view class="podium">
				<view class="podium-card podium-second" :class="{'podium-empty': !rankItem(1).workerName}">
					<view class="podium-crown silver">2</view>
					<image class="podium-avatar" :src="rankItem(1).icon || '../../static/image/songshu.png'" mode="aspectFill"></image>
					<view class="podium-name">{{displayName(rankItem(1))}}</view>
					<view class="podium-count">{{displayCount(rankItem(1))}}单</view>
					<view class="podium-base">NO.2</view>
				</view>
				<view class="podium-card podium-first" :class="{'podium-empty': !rankItem(0).workerName}">
					<view class="podium-crown gold">1</view>
					<image class="podium-avatar champion" :src="rankItem(0).icon || '../../static/image/songshu.png'" mode="aspectFill"></image>
					<view class="podium-name">{{displayName(rankItem(0))}}</view>
					<view class="podium-count">{{displayCount(rankItem(0))}}单</view>
					<view class="podium-base">NO.1</view>
				</view>
				<view class="podium-card podium-third" :class="{'podium-empty': !rankItem(2).workerName}">
					<view class="podium-crown bronze">3</view>
					<image class="podium-avatar" :src="rankItem(2).icon || '../../static/image/songshu.png'" mode="aspectFill"></image>
					<view class="podium-name">{{displayName(rankItem(2))}}</view>
					<view class="podium-count">{{displayCount(rankItem(2))}}单</view>
					<view class="podium-base">NO.3</view>
				</view>
			</view>
		</view>

		<view class="content-list">
			<view class="list-head">
				<view>
					<view class="list-title">今日榜单</view>
					<view class="list-subtitle">多劳多得，冲刺奖励</view>
				</view>
				<view class="list-total">{{fireList.length}} 人上榜</view>
			</view>
			<view v-if="fireList.length == 0" class="empty-box">
				<image src="../../static/image/songshu.png" mode="aspectFit"></image>
				<view>暂无配送员上榜</view>
			</view>
			<view v-for="(item,index) in fireList" :key="index" class="content-item">
				<view class="rank-badge" :class="rankClass(index)">
					<uni-icons v-if="index < 3" type="medal-filled" size="22" :color="medalColor(index)"></uni-icons>
					<text v-else>{{index + 1}}</text>
				</view>
				<image class="box-avatar" :src="item.icon || '../../static/image/songshu.png'" mode="aspectFill"></image>
				<view class="box-right">
					<view class="box-right-num">{{item.workerName == null?'暂无':item.workerName}}</view>
					<view class="box-right-name">当前排名第 {{index + 1}}</view>
				</view>
				<view class="order-pill">
					<text>{{item.orderCount || 0}}</text> 单
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				range:[],
				fireList:[],
				indexList: [],
				reward:'',
				rewardList:[],
				bigImg:[],
				swiperDotIndex:0,
				
			};
		},
		onShow(){
			this.getMonth()
			this.getFireList()
		},
		onReachBottom() {
			this.getFireList();
			
		},
		methods: {
			rankItem(index) {
				return this.fireList[index] || {}
			},
			displayName(item) {
				return item.workerName || '虚位以待'
			},
			displayCount(item) {
				return item.orderCount || 0
			},
			rankClass(index) {
				if (index == 0) return 'rank-first'
				if (index == 1) return 'rank-second'
				if (index == 2) return 'rank-third'
				return ''
			},
			medalColor(index) {
				if (index == 0) return '#f8c33c'
				if (index == 1) return '#b9c2d1'
				return '#d99a55'
			},
			lunbochange(e) {
				this.current = e.detail.current
			},
			getFireList(){
				this.NB.sendRequest("/mall/delivery/countOrdersLimit", {
					regionId: JSON.parse(uni.getStorageSync('area')).id
				}, false, 'GET', 'application/x-www-form-urlencoded').then(res => {
					if (res.code == 200) {
						if(res.result.data != null){
							this.fireList = res.result.data
						}
						
						if(res.result.reward != undefined && res.result.reward != null){
							this.rewardList = res.result.reward
							this.reward = '排位规则：'
							for(let i = 0; i < res.result.reward.length; i++){
								this.reward += '第' + res.result.reward[i].orderNum + '名 - 奖励' + res.result.reward[i].reward + '元；'
							}
							this.reward += '晚上10点截止'
						}
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none'
						});
					}
					uni.hideLoading()
				})
			},
			searchList(res) {
				this.pageNum = 1;
				this.fireList = [];
				this.getFireList()
			},
			//获取当月1日到当前时间
			getMonth() {
				let date = new Date()
				let year = date.getFullYear().toString()   //'年'
				let month = date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1).toString():(date.getMonth()+1).toString()  //'月'
				let da = date.getDate() < 10 ? '0'+date.getDate().toString():date.getDate().toString()  //'日'
				let end = year + '-' + month + '-' + da  //当天
				let beg = year + '-' + month + '-01'    //当月第一天
				this.range = [beg,end]
			},
			largeImg(img) {
				if((img.productPicture == null &&img.productPictures == null) || (img.productPicture == '' &&img.productPictures == '') || (img.productPicture == null &&img.productPictures == '') || (img.productPicture == '' &&img.productPictures == null)){
					uni.showToast({
						title: "暂无可展示的图片",
						icon: 'none'
					});
					return
				}
				this.bigImg = []
				if(img.productPicture != null){
					let data = {
						productPicture:img.productPicture
					}
					this.bigImg.push(data)
				}
				if(img.productPictures != null){
					for(let i=0;i<img.productPictures.length;i++){
						this.bigImg.push(img.productPictures[i])
					}
				}
				this.$refs.imgPopup.open()
			},
			back() {
				uni.navigateBack()
			},
		}
	}
</script>

<style lang="scss">
	.ranking-page {
		min-height: 100vh;
		background: linear-gradient(180deg, #f0ffe1 0%, #eafff9 34%, #f6f8ff 100%);
		padding-bottom: 60rpx;
	}

	.title {
		width: 100%;
		background: linear-gradient(135deg, #e3ff96 0%, #c9ffcf 42%, #a6ffea 100%);
	}

	.title-sreach {
		width: 100%;
		display: flex;
		height: 176rpx;
		position: relative;
	}

	.back-btn {
		padding-top: 100rpx;
		width: 72rpx;
		height: 72rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.title-name {
		padding-top: 100rpx;
		font-size: 36rpx;
		font-weight: 800;
		color: #20243a;
		flex: 1;
		text-align: center;
		letter-spacing: 2rpx;
	}

	.notice-wrap {
		position: relative;
		z-index: 3;
		margin: 0 24rpx 20rpx;
	}

	.reward-card {
		display: flex;
		align-items: center;
		height: 82rpx;
		padding: 0 14rpx 0 16rpx;
		border: 1px solid rgba(119, 238, 204, 0.58);
		border-radius: 28rpx;
		background:
			linear-gradient(135deg, rgba(255, 255, 255, 0.92) 0%, rgba(245, 255, 247, 0.88) 100%),
			linear-gradient(90deg, #e3ff96, #a6ffea);
		box-shadow: 0 16rpx 34rpx rgba(55, 190, 166, 0.14);
		box-sizing: border-box;
	}

	.reward-title {
		flex-shrink: 0;
		display: flex;
		align-items: center;
		padding-right: 16rpx;
		color: #113c36;
		font-size: 24rpx;
		font-weight: 800;
	}

	.reward-icon {
		width: 42rpx;
		height: 42rpx;
		margin-right: 8rpx;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		background: linear-gradient(135deg, #e3ff96, #a6ffea);
		box-shadow: 0 8rpx 16rpx rgba(74, 206, 163, 0.2);
		color: #0f5a50;
		font-size: 22rpx;
		font-weight: 900;
	}

	.reward-marquee {
		flex: 1;
		min-width: 0;
		height: 54rpx;
		overflow: hidden;
		border-radius: 999rpx;
		background: rgba(255, 255, 255, 0.58);
	}

	.reward-marquee-inner {
		display: inline-block;
		min-width: 100%;
		padding-left: 100%;
		padding-right: 18rpx;
		box-sizing: border-box;
		height: 54rpx;
		line-height: 54rpx;
		white-space: nowrap;
		color: #0f5a50;
		font-size: 24rpx;
		font-weight: 800;
		animation: reward-marquee 16s linear infinite;
	}

	@keyframes reward-marquee {
		0% {
			transform: translateX(0);
		}
		100% {
			transform: translateX(-100%);
		}
	}

	.hero {
		position: relative;
		overflow: hidden;
		margin: 0 24rpx;
		min-height: 610rpx;
		border-radius: 0 0 42rpx 42rpx;
		background:
			radial-gradient(circle at 82% 18%, rgba(255, 255, 255, 0.38) 0, rgba(255, 255, 255, 0.2) 62rpx, transparent 64rpx),
			linear-gradient(145deg, #86f2d8 0%, #8edfff 46%, #9aa7ff 100%);
		box-shadow: 0 22rpx 44rpx rgba(68, 202, 185, 0.24);
	}

	.hero::before {
		content: '';
		position: absolute;
		left: -120rpx;
		top: -180rpx;
		width: 620rpx;
		height: 620rpx;
		border-radius: 50%;
		background: rgba(227, 255, 150, 0.2);
	}

	.hero::after {
		content: '';
		position: absolute;
		right: -160rpx;
		bottom: -200rpx;
		width: 520rpx;
		height: 520rpx;
		border-radius: 50%;
		background: rgba(255, 255, 255, 0.16);
	}

	.hero-glow {
		position: absolute;
		border-radius: 50%;
		filter: blur(2rpx);
	}

	.hero-glow-one {
		right: 74rpx;
		top: 72rpx;
		width: 92rpx;
		height: 92rpx;
		background: rgba(227, 255, 150, 0.58);
	}

	.hero-glow-two {
		left: 66rpx;
		top: 238rpx;
		width: 42rpx;
		height: 42rpx;
		background: rgba(255, 255, 255, 0.32);
	}

	.hero-copy {
		position: relative;
		z-index: 2;
		padding: 42rpx 40rpx 18rpx;
		color: #fff;
	}

	.hero-tag {
		display: inline-flex;
		padding: 10rpx 22rpx;
		border-radius: 999rpx;
		background: rgba(255, 255, 255, 0.24);
		font-size: 24rpx;
		color: #fff;
	}

	.hero-title {
		font-size: 48rpx;
		font-weight: 900;
		letter-spacing: 2rpx;
	}

	.hero-subtitle {
		margin-top: 10rpx;
		font-size: 25rpx;
		color: rgba(255, 255, 255, 0.82);
	}

	.podium {
		position: relative;
		z-index: 2;
		display: flex;
		align-items: flex-end;
		justify-content: space-between;
		padding: 22rpx 28rpx 34rpx;
	}

	.podium-card {
		width: 204rpx;
		min-height: 312rpx;
		padding: 24rpx 16rpx 0;
		box-sizing: border-box;
		border-radius: 34rpx 34rpx 20rpx 20rpx;
		background: rgba(255, 255, 255, 0.95);
		text-align: center;
		box-shadow: 0 18rpx 32rpx rgba(34, 54, 136, 0.18);
	}

	.podium-first {
		width: 232rpx;
		min-height: 368rpx;
		margin-bottom: 18rpx;
		background: linear-gradient(180deg, #fff9dc 0%, #fff 58%);
	}

	.podium-second {
		margin-bottom: 0;
	}

	.podium-third {
		margin-bottom: -10rpx;
	}

	.podium-empty {
		opacity: 0.72;
	}

	.podium-crown {
		width: 54rpx;
		height: 54rpx;
		margin: 0 auto 14rpx;
		border-radius: 50%;
		line-height: 54rpx;
		font-size: 28rpx;
		font-weight: 900;
		color: #fff;
	}

	.gold {
		background: linear-gradient(135deg, #ffc72e, #ff9f1c);
		box-shadow: 0 8rpx 18rpx rgba(255, 176, 31, 0.36);
	}

	.silver {
		background: linear-gradient(135deg, #dbe4f1, #aeb9c9);
	}

	.bronze {
		background: linear-gradient(135deg, #e6ad70, #c98145);
	}

	.podium-avatar {
		width: 108rpx;
		height: 108rpx;
		border-radius: 50%;
		border: 6rpx solid #fff;
		box-shadow: 0 10rpx 22rpx rgba(40, 67, 146, 0.16);
	}

	.podium-avatar.champion {
		width: 128rpx;
		height: 128rpx;
	}

	.podium-name {
		margin-top: 16rpx;
		font-size: 28rpx;
		font-weight: 800;
		color: #20243a;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.podium-count {
		margin-top: 8rpx;
		font-size: 24rpx;
		color: #6b7280;
	}

	.podium-base {
		margin: 22rpx -16rpx 0;
		height: 72rpx;
		line-height: 72rpx;
		border-radius: 0 0 20rpx 20rpx;
		background: linear-gradient(135deg, #3655d9, #6c7dff);
		font-size: 30rpx;
		font-weight: 900;
		color: rgba(255, 255, 255, 0.9);
	}

	.podium-first .podium-base {
		background: linear-gradient(135deg, #37cfa8, #58b8ff);
	}

	.podium-second .podium-base {
		background: linear-gradient(135deg, #75d6cf, #80a7ff);
	}

	.podium-third .podium-base {
		background: linear-gradient(135deg, #7fdcb9, #8f9fff);
	}

	.content-list {
		width: 92%;
		margin: -20rpx auto 0;
		position: relative;
		z-index: 4;
		border-radius: 34rpx;
		background: #fff;
		box-shadow: 0 18rpx 40rpx rgba(38, 48, 80, 0.09);
		overflow: hidden;
	}

	.list-head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 32rpx 30rpx 22rpx;
	}

	.list-title {
		font-size: 34rpx;
		font-weight: 900;
		color: #20243a;
	}

	.list-subtitle {
		margin-top: 8rpx;
		font-size: 24rpx;
		color: #99a1b3;
	}

	.list-total {
		padding: 10rpx 20rpx;
		border-radius: 999rpx;
		background: #f1f5ff;
		font-size: 24rpx;
		color: #5772e8;
		font-weight: 700;
	}

	.empty-box {
		padding: 48rpx 0 58rpx;
		text-align: center;
		color: #98a1b2;
		font-size: 26rpx;
	}

	.empty-box image {
		width: 136rpx;
		height: 136rpx;
		margin-bottom: 12rpx;
	}

	.content-item {
		min-height: 148rpx;
		margin: 0 24rpx;
		padding: 20rpx 0;
		box-sizing: border-box;
		font-size: 30rpx;
		border-top: 1px solid #f1f2f6;
		display: flex;
		align-items: center;
	}

	.rank-badge {
		width: 58rpx;
		height: 58rpx;
		margin-right: 18rpx;
		border-radius: 18rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background: #f5f6fa;
		color: #8b93a7;
		font-size: 26rpx;
		font-weight: 800;
	}

	.rank-first {
		background: #fff6d9;
	}

	.rank-second {
		background: #f0f4fa;
	}

	.rank-third {
		background: #fff0df;
	}

	.box-avatar {
		width: 94rpx;
		height: 94rpx;
		margin-right: 22rpx;
		border-radius: 50%;
		background: #f4f6fb;
	}

	.box-right {
		flex: 1;
		min-width: 0;
	}

	.box-right-num {
		color: #20243a;
		font-weight: 800;
		font-size: 30rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.box-right-name {
		margin-top: 10rpx;
		font-size: 24rpx;
		color: #9aa2b4;
	}

	.order-pill {
		min-width: 112rpx;
		padding: 12rpx 18rpx;
		border-radius: 999rpx;
		background: linear-gradient(135deg, #fff7e2, #fff0d2);
		color: #9b6517;
		font-size: 24rpx;
		text-align: center;
	}

	.order-pill text {
		font-size: 34rpx;
		font-weight: 900;
		color: #ff9818;
	}
</style>