<template>
	<view class="ranking-container" :class="'theme-' + themeType">
		<!-- 现代化选项卡 -->
		<view class="ranking-tabs">
			<view class="tab-item" @tap="selectTab(1000)" :class="{ 'active': nowRank == 1000 }">
				<view class="tab-icon">🏪</view>
				<text class="tab-text">商超</text>
			</view>
			<view class="tab-item" @tap="selectTab(2000)" :class="{ 'active': nowRank == 2000 }">
				<view class="tab-icon">🍽️</view>
				<text class="tab-text">餐饮</text>
			</view>
			<view class="tab-item" @tap="selectTab(3000)" :class="{ 'active': nowRank == 3000 }">
				<view class="tab-icon">🍿</view>
				<text class="tab-text">小吃</text>
			</view>
		</view>

		<!-- 排行榜内容 -->
		<view class="ranking-content" v-if="wechatPushSalesList && wechatPushSalesList[nowRank]">
			<view class="ranking-item" v-for="(item, index) in wechatPushSalesList[nowRank]" :key="index"
				:class="'rank-' + (index + 1)">

				<!-- 排名徽章 -->
				<view class="rank-badge" :class="'rank-' + (index + 1)">
					<view v-if="index < 3" class="medal-icon">
						{{ index === 0 ? '🥇' : index === 1 ? '🥈' : '🥉' }}
					</view>
					<text v-else class="rank-number">{{ index + 1 }}</text>
				</view>

				<!-- 商品信息 -->
				<view class="item-content">
					<view class="item-name">{{ item.COMMODITY_NAME || item.Commodity_Name }}</view>
					<view class="item-stats">
						<view class="stat-item">
							<text class="stat-label">销售额</text>
							<text class="stat-value sales-amount">¥{{ $util.fmoney(item.TOTALPRICE || item.TotalPrice)
							}}</text>
						</view>
						<view class="stat-divider">|</view>
						<view class="stat-item">
							<text class="stat-label">销量</text>
							<text class="stat-value sales-count">{{ item.SELLCOUNT || item.SellCount }}</text>
						</view>
					</view>
				</view>

			</view>
		</view>

		<!-- 空状态 -->
		<view v-else class="empty-state">
			<view class="empty-icon">📊</view>
			<text class="empty-text">暂无排行数据</text>
		</view>
	</view>
</template>

<script>
export default {
	props: ['wechatPushSalesList', 'provinceCode'],
	data: () => {
		return {
			nowRank: 1000
		}
	},
	computed: {
		// 根据省份代码映射主题类型
		themeType() {
			const themeMap = {
				'330200': 'ningbo',    // 宁波
				'340000': 'anhui',     // 安徽
				'500000': 'chongqing', // 重庆
				'510000': 'sichuan',   // 四川
				'520000': 'guizhou',   // 贵州
				'530000': 'yunnan',    // 云南
				'630000': 'qinghai',   // 青海
				'734100': 'hainan'     // 海南
			}
			return themeMap[this.provinceCode] || 'yunnan'
		}
	},
	methods: {
		selectTab(index) {
			this.nowRank = index
		}
	},
	onLoad() {

	}
}
</script>

<style lang="scss" scoped>
// 主题色 mixin
@mixin theme-colors($primary, $secondary) {
	.tab-item.active {
		background: linear-gradient(135deg, $primary, $secondary) !important;
		box-shadow: 0 4rpx 12rpx rgba($primary, 0.3) !important;
	}

	.tab-item:hover {
		background: rgba($primary, 0.1);
	}

	.stat-value.sales-amount {
		color: $primary;
	}

	.ranking-item::before {
		background: linear-gradient(180deg, $primary, $secondary);
	}

	.ranking-item:hover::before {
		opacity: 1;
	}

	.rank-badge:not(.rank-1):not(.rank-2):not(.rank-3) {
		background: linear-gradient(135deg, $primary, $secondary);
	}
}

.ranking-container {
	margin: 20rpx 0;
}

/* 现代化选项卡 */
.ranking-tabs {
	display: flex;
	background: #f8f9fa;
	border-radius: 12rpx;
	padding: 6rpx;
	margin: 0 20rpx 24rpx;
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
	border: 1rpx solid #f0f0f0;
}

.tab-item {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 16rpx 8rpx;
	border-radius: 8rpx;
	transition: all 0.3s ease;
	cursor: pointer;

	&.active {
		transform: translateY(-2rpx);

		.tab-text {
			color: #fff !important;
			font-weight: 600;
		}

		.tab-icon {
			transform: scale(1.1);
		}
	}
}

.tab-icon {
	font-size: 32rpx;
	margin-bottom: 8rpx;
	transition: transform 0.3s ease;
}

.tab-text {
	font-size: 24rpx;
	color: #666;
	transition: all 0.3s ease;
	font-weight: 500;
}

/* 排行榜内容 */
.ranking-content {
	padding: 0 20rpx;
}

.ranking-item {
	display: flex;
	align-items: center;
	background: #fff;
	border-radius: 16rpx;
	padding: 20rpx 24rpx;
	margin-bottom: 16rpx;
	box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.06);
	border: 1rpx solid #f5f5f5;
	transition: all 0.3s ease;
	position: relative;
	overflow: hidden;

	&::before {
		content: '';
		position: absolute;
		left: 0;
		top: 0;
		bottom: 0;
		width: 4rpx;
		background: linear-gradient(180deg, #27B25F, #4CCC7F);
		opacity: 0;
		transition: opacity 0.3s ease;
	}

	&:hover {
		box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.1);
		transform: translateY(-2rpx);

		&::before {
			opacity: 1;
		}
	}

	// 前三名特殊样式
	&.rank-1 {
		background: linear-gradient(135deg, #fffbf0, #fff);

		&::before {
			background: linear-gradient(180deg, #ffb300, #ffd700);
			opacity: 1;
		}
	}

	&.rank-2 {
		background: linear-gradient(135deg, #f0f0f0, #fff);

		&::before {
			background: linear-gradient(180deg, #c0c0c0, #e8e8e8);
			opacity: 1;
		}
	}

	&.rank-3 {
		background: linear-gradient(135deg, #f5f1eb, #fff);

		&::before {
			background: linear-gradient(180deg, #a0714d, #cd853f);
			opacity: 1;
		}
	}
}

/* 排名徽章 */
.rank-badge {
	width: 60rpx;
	height: 60rpx;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 24rpx;
	font-weight: 700;
	box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.15);

	&.rank-1,
	&.rank-2,
	&.rank-3 {
		background: transparent;
		box-shadow: none;
	}

	.medal-icon {
		font-size: 36rpx;
		animation: pulse 2s infinite;
	}

	.rank-number {
		color: #fff;
		font-size: 24rpx;
		font-weight: 700;
	}
}

.rank-badge:not(.rank-1):not(.rank-2):not(.rank-3) {
	background: linear-gradient(135deg, #8c9eff, #a5b4fc);
}

@keyframes pulse {

	0%,
	100% {
		transform: scale(1);
	}

	50% {
		transform: scale(1.05);
	}
}

/* 商品信息 */
.item-content {
	flex: 1;
	display: flex;
	flex-direction: column;
}

.item-name {
	font-size: 28rpx;
	color: #333;
	font-weight: 600;
	margin-bottom: 12rpx;
	line-height: 1.4;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.item-stats {
	display: flex;
	align-items: center;
}

.stat-item {
	display: flex;
	align-items: center;
	min-width: 0;
	flex: 1;
}

.stat-label {
	font-size: 24rpx;
	color: #6c757d;
	margin-right: 8rpx;
	line-height: 40rpx;
	font-weight: 500;
	white-space: nowrap;
}

.stat-value {
	font-size: 24rpx;
	font-weight: 600;
	line-height: 40rpx;
	// font-family: 'DIN Alternate', 'Bahnschrift', monospace;
	white-space: nowrap;

	&.sales-amount {
		color: #27B25F; // 默认云南主题色，会被主题色覆盖
	}

	&.sales-count {
		color: #666;
	}
}

.stat-divider {
	margin: 0 16rpx;
	color: #e0e0e0;
	font-size: 20rpx;
}


/* 空状态 */
.empty-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 80rpx 20rpx;
	color: #999;
}

.empty-icon {
	font-size: 80rpx;
	margin-bottom: 20rpx;
	opacity: 0.6;
}

.empty-text {
	font-size: 28rpx;
	color: #999;
}

/* 主题色应用 - 根据传入的省份代码动态应用主题 */
.ranking-container.theme-ningbo {
	@include theme-colors(#1890FF, #69C0FF);
}

.ranking-container.theme-anhui {
	@include theme-colors(#748ED6, #91A7E3);
}

.ranking-container.theme-chongqing {
	@include theme-colors(#FA541C, #FF7A45);
}

.ranking-container.theme-sichuan {
	@include theme-colors(#FA8C16, #FFA940);
}

.ranking-container.theme-guizhou {
	@include theme-colors(#52C41A, #73D13D);
}

.ranking-container.theme-yunnan {
	@include theme-colors(#27B25F, #4CCC7F);
}

.ranking-container.theme-qinghai {
	@include theme-colors(#13C2C2, #36CFC9);
}

.ranking-container.theme-hainan {
	@include theme-colors(#E91E63, #F06292);
}
</style>
