<template>
	<view class="rank-container">
		<!-- 沉浸式渐变头部 -->
		<view class="rank-header">
			<view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
			<!-- 榜单类型切换 -->
			<view class="rank-main-tabs">
				<view class="main-tab" :class="{ 'active': rankType === 1 }" @click="switchRankType(1)">
					<text class="fire-icon" v-if="rankType === 1">🔥</text>
					<text class="tab-main-txt">实时热销榜</text>
					<text class="fire-icon" v-if="rankType === 1">🔥</text>
				</view>
				<view class="main-tab" :class="{ 'active': rankType === 2 }" @click="switchRankType(2)">
					<text class="tab-main-txt">全天热销榜</text>
				</view>
			</view>

			<!-- 分类滑动导航 -->
			<scroll-view scroll-x class="cate-nav" :show-scrollbar="false">
				<view class="cate-item" :class="{ 'active': currentCateId === item.id }"
					v-for="(item, index) in categoryList" :key="index" @click="switchCategory(item.id)">
					<text class="cate-txt">{{ item.name }}</text>
				</view>
			</scroll-view>
		</view>

		<scroll-view scroll-y class="rank-content" @scrolltolower="loadMore">
			<!-- 顶部占位 -->
			<view class="header-placeholder" :style="{ height: (statusBarHeight + 180) + 'px' }"></view>

			<!-- Top 1-3 领奖台布局 (2 - 1 - 3) -->
			<view class="top-three-wrap" v-if="goodsList.length >= 3">
				<!-- Top 2 (左侧) -->
				<view class="top-card top-card-side" @click="goToDetail(goodsList[1].id)">
					<view class="top-badge-wrap">
						<image class="top-badge-img" src="/static/rank_badge.png" mode="widthFix"></image>
						<text class="top-badge-num">2</text>
					</view>
					<view class="top-img-box">
						<image class="top-img" :src="goodsList[1].image" mode="aspectFill"></image>
						<view class="top-sales-bar">已抢{{ goodsList[1].sales }}件</view>
					</view>
					<view class="top-title">
						<image src="https://img-haodanku-com.cdn.fudaiapp.com/FlyOSTvjC3LjrkUoJ0NPxx1qnGz4" class="p-icon"></image>
						<text class="top-name">{{ goodsList[1].title }}</text>
					</view>
					<text class="top-price">券后¥<text class="tp-val">{{ goodsList[1].finalPrice }}</text></text>
					<view class="top-coupon-tag">券 {{ goodsList[1].couponValue }}元</view>
				</view>

				<!-- Top 1 (中间，略高) -->
				<view class="top-card top-card-center" @click="goToDetail(goodsList[0].id)">
					<view class="top-badge-wrap">
						<image class="top-badge-img" src="/static/rank_badge.png" mode="widthFix"></image>
						<text class="top-badge-num">1</text>
					</view>
					<view class="top-img-box">
						<image class="top-img" :src="goodsList[0].image" mode="aspectFill"></image>
						<view class="top-sales-bar top-sales-bar-1">已抢{{ goodsList[0].sales }}件</view>
					</view>
					<view class="top-title">
						<image src="https://img-haodanku-com.cdn.fudaiapp.com/FlyOSTvjC3LjrkUoJ0NPxx1qnGz4" class="p-icon"></image>
						<text class="top-name">{{ goodsList[0].title }}</text>
					</view>
					<text class="top-price">券后¥<text class="tp-val">{{ goodsList[0].finalPrice }}</text></text>
					<view class="top-coupon-tag">券 {{ goodsList[0].couponValue }}元</view>
				</view>

				<!-- Top 3 (右侧) -->
				<view class="top-card top-card-side" @click="goToDetail(goodsList[2].id)">
					<view class="top-badge-wrap">
						<image class="top-badge-img" src="/static/rank_badge.png" mode="widthFix"></image>
						<text class="top-badge-num">3</text>
					</view>
					<view class="top-img-box">
						<image class="top-img" :src="goodsList[2].image" mode="aspectFill"></image>
						<view class="top-sales-bar">已抢{{ goodsList[2].sales }}件</view>
					</view>
					<view class="top-title">
						<image src="https://img-haodanku-com.cdn.fudaiapp.com/FlyOSTvjC3LjrkUoJ0NPxx1qnGz4" class="p-icon"></image>
						<text class="top-name">{{ goodsList[2].title }}</text>
					</view>
					<text class="top-price">券后¥<text class="tp-val">{{ goodsList[2].finalPrice }}</text></text>
					<view class="top-coupon-tag">券 {{ goodsList[2].couponValue }}元</view>
				</view>
			</view>

			<!-- Top 4+ 横向列表 -->
			<view class="rest-list">
				<view class="rest-item" v-for="(goods, idx) in goodsList.slice(3)" :key="idx" @click="goToDetail(goods.id)">
					<view class="rest-left">
						<view class="rest-badge-wrap">
							<image class="rest-badge-img" src="/static/rank_badge.png" mode="widthFix"></image>
							<text class="rest-badge-num">{{ idx + 4 }}</text>
						</view>
						<image class="rest-img" :src="goods.image" mode="aspectFill"></image>
					</view>
					<view class="rest-right">
						<view class="rest-title-row">
							<image src="https://img-haodanku-com.cdn.fudaiapp.com/FlyOSTvjC3LjrkUoJ0NPxx1qnGz4" class="p-icon"></image>
							<text class="rest-name">{{ goods.title }}</text>
						</view>
						<view class="rest-price-row">
							<text class="rest-price-tip">券后¥</text>
							<text class="rest-price-val">{{ goods.finalPrice }}</text>
							<text class="rest-price-old">¥{{ goods.originalPrice }}</text>
						</view>
						<view class="rest-coupon">券 {{ goods.couponValue }}元</view>
						<view class="rest-buy-bar">
							<text class="rest-buy-txt">近2小时已抢 <text class="rest-buy-num">{{ goods.sales }}</text> 件</text>
							<view class="rest-buy-btn">马上抢</view>
						</view>
					</view>
				</view>
			</view>

			<view class="loading-status" v-if="loading">火速加载中...</view>
			<view class="footer-placeholder"></view>
		</scroll-view>

		<!-- 底部导航 -->
		<bottom-nav :activeTab="1"></bottom-nav>
	</view>
</template>

<script>
	import BottomNav from '@/components/bottom-nav/bottom-nav.vue';

	export default {
		components: {
			BottomNav
		},
		data() {
			return {
				statusBarHeight: 44,
				rankType: 1,
				currentCateId: 0,
				categoryList: [
					{ id: 0, name: '全部' },
					{ id: 10, name: '居家' },
					{ id: 11, name: '美食' },
					{ id: 8, name: '儿童' },
					{ id: 3, name: '女装' },
					{ id: 4, name: '美妆' }
				],
				goodsList: [],
				loading: false,
				page: 1
			}
		},
		onLoad() {
			const sysInfo = uni.getSystemInfoSync();
			this.statusBarHeight = sysInfo.statusBarHeight || 44;
			this.getRankList(true);
		},
		methods: {
			switchRankType(type) {
				if (this.rankType === type) return;
				this.rankType = type;
				this.getRankList(true);
			},
			switchCategory(id) {
				if (this.currentCateId === id) return;
				this.currentCateId = id;
				this.getRankList(true);
			},
			getRankList(refresh = false) {
				if (refresh) {
					this.page = 1;
					this.goodsList = [];
				}
				if (this.loading) return;
				this.loading = true;

				uni.request({
					url: `https://api.cmspro.haodanku.com/ranking/lists?type=${this.rankType}&category_id=${this.currentCateId}&page=${this.page}&page_size=60&cid=qOstW90`,
					success: (res) => {
						if (res.data && res.data.code === 200 && res.data.data && res.data.data.list_item && res.data.data.list_item.list) {
							const list = res.data.data.list_item.list.map(item => {
								// 处理标题
								let title = item.itemshorttitle || item.itemtitle;
								if (title.length > 18) {
									title = title.substring(0, 18) + '...';
								}

								// 处理销量显示
								let salesCount = this.rankType === 1 ? (item.todaysale || item.itemsale2 || 0) : item.itemsale;
								let salesStr = salesCount >= 10000 ? (salesCount / 10000).toFixed(1) + '万' : salesCount;

								return {
									id: item.itemid,
									image: item.itempic,
									title: title,
									finalPrice: item.itemendprice,
									originalPrice: item.itemprice,
									couponValue: item.couponmoney || 0,
									sales: salesStr,
									shopName: item.shopname,
									labels: item.label || []
								};
							});
							this.goodsList = [...this.goodsList, ...list];
						}
					},
					complete: () => {
						this.loading = false;
					}
				});
			},
			loadMore() {
				// 榜单通常展示前60条
			},
			goToDetail(id) {
				uni.navigateTo({
					url: `/pages/detail/detail?id=${id}`
				});
			}
		}
	}
</script>

<style scoped>
	.rank-container {
		width: 100%;
		height: 100vh;
		background-color: #f5f6f8;
		display: flex;
		flex-direction: column;
	}

	/* ========== 头部区域 ========== */
	.rank-header {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		background: linear-gradient(180deg, #ff6034, #ff4b2b, #ff416c);
		z-index: 100;
		padding-bottom: 0;
	}

	.rank-main-tabs {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 88rpx;
		gap: 60rpx;
	}

	.main-tab {
		display: flex;
		align-items: center;
		gap: 4rpx;
	}

	.tab-main-txt {
		font-size: 30rpx;
		color: rgba(255, 255, 255, 0.7);
		transition: all 0.3s;
	}

	.main-tab.active .tab-main-txt {
		color: #ffffff;
		font-size: 34rpx;
		font-weight: bold;
	}

	.fire-icon {
		font-size: 28rpx;
	}

	/* 分类导航 */
	.cate-nav {
		white-space: nowrap;
		padding: 16rpx 0;
		background: #ffffff;
		border-radius: 20rpx 20rpx 0 0;
	}

	.cate-item {
		display: inline-block;
		padding: 8rpx 28rpx;
		margin: 0 8rpx;
		position: relative;
	}

	.cate-txt {
		font-size: 28rpx;
		color: #666;
	}

	.cate-item.active .cate-txt {
		color: #333;
		font-weight: bold;
	}

	.cate-item.active {
		border-bottom: 4rpx solid #ff4b2b;
	}

	/* ========== 滚动内容 ========== */
	.rank-content {
		flex: 1;
		height: 100%;
	}

	.header-placeholder {
		width: 100%;
	}

	/* ========== Top 1-3 领奖台 ========== */
	.top-three-wrap {
		display: flex;
		align-items: flex-end;
		justify-content: center;
		padding: 20rpx 16rpx 10rpx;
		background: #ffffff;
		margin: 0 0 16rpx;
		gap: 10rpx;
	}

	.top-card {
		display: flex;
		flex-direction: column;
		align-items: center;
		background: #ffffff;
		border-radius: 12rpx;
		overflow: hidden;
		position: relative;
	}

	.top-card-side {
		flex: 1;
	}

	.top-card-center {
		flex: 1.15;
		margin-top: -20rpx;
	}

	.top-badge-wrap {
		position: absolute;
		top: -6rpx;
		left: 8rpx;
		width: 60rpx;
		height: 60rpx;
		z-index: 10;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.top-badge-img {
		width: 60rpx;
		position: absolute;
	}

	.top-badge-num {
		position: relative;
		z-index: 11;
		font-size: 24rpx;
		font-weight: bold;
		color: #ffffff;
		margin-top: -6rpx;
	}

	.top-img-box {
		width: 100%;
		aspect-ratio: 1;
		border-radius: 12rpx;
		overflow: hidden;
		position: relative;
		background: #f5f5f5;
	}

	.top-img {
		width: 100%;
		height: 100%;
	}

	.top-sales-bar {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		background: linear-gradient(90deg, #ff9a44, #ff6534);
		color: #ffffff;
		font-size: 20rpx;
		text-align: center;
		padding: 6rpx 0;
		font-weight: bold;
	}

	.top-sales-bar-1 {
		background: linear-gradient(90deg, #ff5e62, #ff416c);
	}

	.top-title {
		display: flex;
		align-items: center;
		padding: 10rpx 8rpx 4rpx;
		width: 100%;
		box-sizing: border-box;
	}

	.p-icon {
		width: 24rpx;
		height: 24rpx;
		margin-right: 4rpx;
		flex-shrink: 0;
	}

	.top-name {
		font-size: 22rpx;
		color: #333;
		font-weight: bold;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		flex: 1;
	}

	.top-price {
		font-size: 22rpx;
		color: #ff4b2b;
		padding: 0 8rpx;
		width: 100%;
		box-sizing: border-box;
	}

	.tp-val {
		font-size: 30rpx;
		font-weight: bold;
	}

	.top-coupon-tag {
		background: linear-gradient(90deg, #ff9a44, #ff6534);
		color: #ffffff;
		font-size: 20rpx;
		padding: 4rpx 16rpx;
		border-radius: 20rpx;
		margin: 6rpx 0 12rpx;
	}

	/* ========== Top 4+ 列表 ========== */
	.rest-list {
		background: #ffffff;
		margin: 0 16rpx;
		border-radius: 16rpx;
		overflow: hidden;
	}

	.rest-item {
		display: flex;
		padding: 24rpx;
		border-bottom: 1rpx solid #f5f5f5;
	}

	.rest-left {
		flex-shrink: 0;
		width: 200rpx;
		height: 200rpx;
		border-radius: 12rpx;
		overflow: hidden;
		position: relative;
		background: #f5f5f5;
	}

	.rest-badge-wrap {
		position: absolute;
		top: -2rpx;
		left: 4rpx;
		width: 50rpx;
		height: 50rpx;
		z-index: 10;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.rest-badge-img {
		width: 50rpx;
		position: absolute;
	}

	.rest-badge-num {
		position: relative;
		z-index: 11;
		font-size: 22rpx;
		font-weight: bold;
		color: #ffffff;
		margin-top: -4rpx;
	}

	.rest-img {
		width: 100%;
		height: 100%;
	}

	.rest-right {
		flex: 1;
		margin-left: 20rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.rest-title-row {
		display: flex;
		align-items: center;
	}

	.rest-name {
		font-size: 26rpx;
		color: #333;
		font-weight: bold;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		flex: 1;
	}

	.rest-price-row {
		display: flex;
		align-items: baseline;
		margin-top: 10rpx;
	}

	.rest-price-tip {
		font-size: 22rpx;
		color: #ff4b2b;
	}

	.rest-price-val {
		font-size: 40rpx;
		color: #ff4b2b;
		font-weight: bold;
		margin-right: 10rpx;
	}

	.rest-price-old {
		font-size: 22rpx;
		color: #bbb;
		text-decoration: line-through;
	}

	.rest-coupon {
		display: inline-block;
		align-self: flex-start;
		background: linear-gradient(90deg, #ff9a44, #ff6534);
		color: #ffffff;
		font-size: 20rpx;
		padding: 4rpx 16rpx;
		border-radius: 20rpx;
		margin-top: 6rpx;
	}

	.rest-buy-bar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		background: linear-gradient(90deg, #fff0e6, #ffe8d6);
		border-radius: 30rpx;
		margin-top: 10rpx;
		padding: 4rpx 4rpx 4rpx 20rpx;
		overflow: hidden;
	}

	.rest-buy-txt {
		font-size: 20rpx;
		color: #ff6534;
	}

	.rest-buy-num {
		font-weight: bold;
		color: #ff4b2b;
	}

	.rest-buy-btn {
		background: linear-gradient(90deg, #ff6534, #ff4b2b);
		color: #ffffff;
		font-size: 22rpx;
		font-weight: bold;
		padding: 10rpx 24rpx;
		border-radius: 30rpx;
	}

	/* ========== 其他 ========== */
	.loading-status {
		text-align: center;
		padding: 40rpx 0;
		font-size: 24rpx;
		color: #999;
	}

	.footer-placeholder {
		height: 140rpx;
	}
</style>
