<template>
	<view class="content">
		<!-- 顶部渐变背景（作为固定区域的背景） -->
		<view class="fixed-top-bg"></view>

		<!-- 固定在顶部的区域：导航栏 + 标签栏 -->
		<view class="fixed-top-container">
			<!-- 导航栏 -->
			<view class="nav-bar">
				<view class="nav-bar-l" @click="goBack">
					<image class="nav-bar-l-img"
						src="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/a52cd5ad-a26f-4426-ad59-e2d481fe0e92.png"
						mode="widthFix"></image>
				</view>
				<view class="nav-bar-c">
					<view class="nav-bar-c-text">我的优惠券</view>
				</view>
				<view class="nav-bar-r">
					<view class="nav-bar-r-text" @click="gotoCouponHistory()">历史记录</view>
				</view>
			</view>

			<view class="coupon-title">
				<view class="coupon-tab" @click="selectd(0)">
					<view class="coupon-tab-text" :class="{ active: isselect === 0 }">全部优惠券</view>
					<image class="tab-line-img" v-if="isselect === 0"
						src="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/b304a532-2c5d-467b-b7f7-f30f58cdc7ec.png">
					</image>
				</view>
				<view class="coupon-tab" @click="selectd(1)">
					<view class="coupon-tab-text" :class="{ active: isselect === 1 }">即将到期</view>
					<image class="tab-line-img" v-if="isselect === 1"
						src="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/b304a532-2c5d-467b-b7f7-f30f58cdc7ec.png">
					</image>
				</view>
			</view>
		</view>

		<view class="list-coupon-container">
			<!-- 已领取的优惠券 -->
			<view class="list-coupon" v-if="isselectd && !timesout">
				<!-- 已领取标题 -->
				<view class="collectd-title">
					<image class="collectd-title-icon"
						src="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/71c747be-b80c-496e-aeab-821a7dddcfc2.png"
						mode="widthFix"></image>
					<view class="collectd-title-text">已领取的优惠券</view>
				</view>

				<!-- 空状态提示 -->
				<view v-if="filterCollectedList.length === 0" class="empty-tip">
					<view class="empty-text">暂无已领取的优惠券</view>
				</view>

				<!-- 已领取优惠券卡片列表（使用组件） -->
				<CouponCard v-for="(item, index) in showCollectedList" :key="'collected-' + index" :coupon="item"
					@action="(status) => handleAvailableAction(status, item)" />

				<!-- 展开/收起按钮（仅已领取优惠券使用） -->
				<view v-if="filterCollectedList.length > 4" class="expand-btn" @click="toggleExpand">
					<view class="expand-text">{{ isExpanded ? '收起全部' : '展开全部' }}</view>
					<image class="expand-icon"
						:src="isExpanded ? 'https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/fe418cfb-99c5-43ca-8ffd-5c656fb1cd06.png' : 'https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/169e99f5-8181-43d9-b290-f0526690ff83.png'"
						mode="widthFix"></image>
				</view>
			</view>

			<!-- 更多可领优惠券（无展开/收起） -->
			<view class="list-coupon" v-if="!timesout">
				<!-- 可领取标题 -->
				<view class="collectd-title">
					<image class="collectd-title-icon"
						src="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/71c747be-b80c-496e-aeab-821a7dddcfc2.png"
						mode="widthFix"></image>
					<view class="collectd-title-text">更多可领优惠券</view>
				</view>

				<!-- 空状态提示 -->
				<view v-if="availableCouponList.length === 0" class="empty-tip">
					<view class="empty-text">暂无可领取的优惠券</view>
				</view>

				<!-- 可领取优惠券卡片列表（使用组件） -->
				<CouponCard v-for="(item, index) in formattedAvailableList" :key="'available-' + index" :coupon="item"
					@action="(status) => handleAvailableAction(status, item)" />
			</view>
			<view class="no-data" v-if="collectedCouponList.length<0">
				<image class="no-data-img"
					src="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/035b7613-338b-4a71-9975-291cec794f89.png"
					mode="widthFix"></image>
			</view>
			<view class="daoqi" v-if="isselect==1">
				<CouponCard class="daoqi-list" v-for="(item, index) in formattedAvailableLis"
					:key="'available-' + index" :coupon="item"
					@action="(status) => handleAvailableAction(status, item)" />
			</view>
		</view>
	</view>
</template>

<script>
	import CouponCard from './components/couponCard.vue';

	export default {
		components: {
			CouponCard
		},
		data() {
			return {
				timesout: false,
				statusBarHeight: 0,
				isselectd: true,
				isselect: 0, // 默认选中全部优惠券
				isExpanded: false, // 已领取优惠券是否展开
				// 已领取优惠券列表
				collectedCouponList: [{
						denomination: 20,
						condition: '满150元可用',
						name: '平台|新人专享券',
						expireTime: '有效期至2025.08.21 10:10',
						tagType: 'new',
						status: 'available'
					},
					{
						denomination: 45,
						condition: '满300元可用',
						name: '平台|新人专享券',
						expireTime: '有效期至2025.08.21 10:10',
						tagType: 'new',
						status: 'available'
					},
					{
						denomination: 330,
						condition: '满5650元可用',
						name: '平台|新人专享券',
						expireTime: '有效期至2025.08.21 10:10',
						tagType: 'soon',
						status: 'available'
					},
					{
						denomination: 20,
						condition: '满150元可用',
						name: '平台|新人专享券',
						expireTime: '有效期至2025.04.21 23:10',
						tagType: 'expire',
						status: 'available'
					},
					{
						denomination: 10,
						condition: '满99元可用',
						name: '平台|满减券',
						expireTime: '有效期至2025.09.10 23:59',
						tagType: 'new',
						status: 'available'
					},
					{
						denomination: 50,
						condition: '满500元可用',
						name: '平台|满减券',
						expireTime: '有效期至2025.08.30 12:00',
						tagType: 'new',
						status: 'available'
					}
				],
				// 更多可领优惠券列表
				availableCouponList: [{
						denomination: 20,
						condition: '满150元可用',
						name: '平台|新人专享券',
						expireTime: '有效期至2025.08.21 10:10',
						tagType: 'new' // 用于图标
					},
					{
						denomination: 330,
						condition: '满5650元可用',
						name: '平台|新人专享券',
						expireTime: '有效期至2025.08.21 10:10',
						tagType: 'new'
					},
					{
						denomination: 888,
						condition: '满9999元可用',
						name: '平台|新人专享券',
						expireTime: '有效期至2025.08.21 10:10',
						tagType: 'new'
					}
				],
				timeoutdatalist: [{
						denomination: 20,
						condition: '满150元可用',
						name: '平台|新人专享券',
						expireTime: '还剩09:59:59过期',
						tagType: 'new' // 用于图标
					},
					{
						denomination: 20,
						condition: '满150元可用',
						name: '平台|新人专享券',
						expireTime: '还剩09:59:59过期',
						tagType: 'new' // 用于图标
					},
					{
						denomination: 20,
						condition: '满150元可用',
						name: '平台|新人专享券',
						expireTime: '还剩09:59:59过期',
						tagType: 'expired' // 用于图标
					},
				]
			}
		},
		computed: {
			// 已领取优惠券筛选后列表（根据标签）
			filterCollectedList() {
				if (this.isselect === 0) {
					return this.collectedCouponList
				} else {
					// 即将到期逻辑交由后端处理，这里暂时返回空（可根据后端返回字段调整）
					return []
				}
			},
			// 已领取优惠券实际展示列表：默认前4个，展开后显示全部
			showCollectedList() {
				const list = this.filterCollectedList
				const rawList = this.isExpanded ? list : list.slice(0, 4)
				// 映射为组件所需格式
				return rawList.map(item => this.formatCollectedCoupon(item))
			},
			// 可领取列表映射为组件格式
			formattedAvailableList() {
				return this.availableCouponList.map(item => this.formatAvailableCoupon(item))
			},
			formattedAvailableLis() {
				return this.timeoutdatalist.map(item => this.formatAvailableCoupon(item))
			},
			
		},
		methods: {
			// 将已领取优惠券原始数据转换为组件 coupon 对象
			formatCollectedCoupon(item) {
				const [platform, tag] = item.name.split('|')
				let status = ''
				if (item.status === 'available') status = 'use'
				else if (item.status === 'expired') status = 'expired'
				else if (item.status === 'used') status = 'used'
				else status = 'use' // 默认

				return {
					amount: item.denomination,
					condition: item.condition,
					platform: platform || '平台',
					tag: tag || '优惠券',
					expiry: item.expireTime,
					status: status,
					isNew: item.tagType === 'new',
					isExpiringSoon: item.tagType === 'soon' || item.tagType === 'expire'
				}
			},
			// 将可领取优惠券原始数据转换为组件 coupon 对象
			formatAvailableCoupon(item) {
				const [platform, tag] = item.name.split('|')
				return {
					amount: item.denomination,
					condition: item.condition,
					platform: platform || '平台',
					tag: tag || '优惠券',
					expiry: item.expireTime,
					status: 'receive', // 可领取
					isNew: item.tagType === 'new', // 根据需要设置，默认 true 也可以
					isExpiringSoon: false
				}
			},
			// 处理已领取卡片的点击（立即使用/已过期/已使用）
			handleAvailableAction(status, clickedItem) {
				if (status === 'receive') {
					console.log('领取优惠券', clickedItem);
					uni.showToast({
						title: '领取成功',
						icon: 'success'
					});
					const originItem = this.availableCouponList.find(item =>
						item.denomination === clickedItem.amount &&
						item.condition === clickedItem.condition &&
						item.name === `${clickedItem.platform}|${clickedItem.tag}`
					);

					if (originItem) {
						const index = this.availableCouponList.indexOf(originItem);
						this.availableCouponList.splice(index, 1);
						this.collectedCouponList.unshift({
							...originItem,
							tagType: 'new', // 标记为新领取
							status: 'available'
						});
					}
				} else if (status === 'use') {
					console.log('使用优惠券', clickedItem);
					uni.navigateTo({
						url: '/pages/coupon/couponDetail'
					});
				}
			},
			toggleExpand() {
				this.isExpanded = !this.isExpanded
			},
			selectd(i) {
				this.isselect = i
				console.log(this.isselect, '选中项');
				// 切换标签时重置为收起状态
				// this.isExpanded = false
				// this.isselectd=false
				if (i == 1) {
					this.timesout = true
				} else {
					this.timesout = false
				}
			},
			gotoCouponHistory() {
				uni.navigateTo({
					url: '/pages/coupon/couponHistory',
					fail(err) {
						console.error('跳转失败', err)
					}
				})
			},
			goBack() {
				uni.navigateBack({
					delta: 1
				})
			},
		},
		onLoad() {
			// 移除定时器启动逻辑
		},
		onUnload() {},
		onHide() {
			// 移除定时器暂停逻辑
		},
		onShow() {
			const systemInfo = uni.getWindowInfo()
			const statusBarHeight = systemInfo.statusBarHeight;
			this.statusBarHeight = statusBarHeight
			console.log('刘海/状态栏高度：', statusBarHeight + 'px');

		},
		onPullDownRefresh() {

		}
	}
</script>

<style scoped>
	.nav-bar-l {
		margin-top: 200rpx;
	}

	/* 全局容器 */
	.content {
		position: relative;
		width: 750rpx;
		min-height: 100vh;
		background-color: #f5f5f5;
		/* 预留固定区域高度，避免内容被遮挡 */
		padding-top: 200rpx;
		box-sizing: border-box;
	}

	/* 固定区域的渐变背景（和原背景样式一致） */
	.fixed-top-bg {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 99;
		width: 750rpx;
		height: 260rpx;
		background: linear-gradient(180deg, #FFEAE6 0%, #FFFBF9 100%);
	}

	/* 固定在顶部的容器：导航栏+标签栏 */
	.fixed-top-container {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 100;
		width: 750rpx;
		height: 200rpx;
		padding: 0 30rpx;
		box-sizing: border-box;
	}

	/* 导航栏样式 */
	.nav-bar {
		display: flex;
		align-items: flex-end;
		padding-top: 60rpx;
		/* 适配状态栏高度 */
		height: 140rpx;
		box-sizing: border-box;
	}

	.nav-bar-l-img {
		width: 18rpx;
		height: 35.74rpx;
	}

	.nav-bar-c {
		margin-left: 24rpx;
		margin-bottom: 5rpx;
	}

	.nav-bar-c-text {
		font-family: AlimamaShuHeiTi, AlimamaShuHeiTi;
		font-weight: bold;
		font-size: 40rpx;
		color: #000000;
	}

	.nav-bar-r {
		margin-left: auto;
		margin-bottom: 8rpx;
	}

	.nav-bar-r-text {
		font-family: PingFangSC, PingFang SC;
		font-size: 30rpx;
		color: #666666;
	}

	.list-coupon .coupon-card {
		margin-bottom: 20rpx;
	}

	/* 标签栏样式 */
	.coupon-title {
		display: flex;
		height: 60rpx;
		align-items: center;
		margin-top: 37rpx;
	}

	.coupon-tab {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-right: 40rpx;
	}

	.coupon-tab-text {
		font-family: PingFangSC, PingFang SC;
		font-size: 30rpx;
		color: #666666;
		margin-bottom: 8rpx;
		width: 150rpx;
		text-align: center;
	}

	.coupon-tab-text.active {
		font-weight: 600;
		color: #333333;
	}

	.tab-line-img {
		width: 53rpx;
		height: 6rpx;
	}

	/* 优惠券列表外层容器 */
	.list-coupon-container {
		position: relative;
		z-index: 2;
		margin-top: 50rpx;
	}

	/* 优惠券列表容器（复用样式） */
	.list-coupon {
		width: 750rpx;
		background: #FFFFFF;
		border-radius: 40rpx;
		margin-bottom: 10rpx;
		margin-top: 10rpx;
		padding: 30rpx;
		box-sizing: border-box;
	}

	/* 空状态样式 */
	.empty-tip {
		text-align: center;
		padding: 60rpx 0;
		color: #999;
		font-size: 28rpx;
	}

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

	/* 标题样式 */
	.collectd-title {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.collectd-title-icon {
		width: 41rpx;
		margin-right: 8rpx;
	}

	.collectd-title-text {
		font-family: PingFangSC, PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #333333;
	}

	/* 展开/收起按钮 */
	.expand-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 0 auto;
		padding: 12rpx 45rpx 12rpx 20rpx;
		border: 1rpx solid #eee;
		border-radius: 40rpx;
		width: 161rpx;
	}

	.expand-text {
		font-size: 28rpx;
		color: #666;
		margin-right: 10rpx;
	}

	.expand-icon {
		width: 30rpx;
		height: 30rpx;
	}

	.no-data-img {
		width: 430rpx;
		margin: 299rpx 0 0 160rpx;
	}

	.daoqi {
		margin: 80rpx 0 0rpx 30rpx;
	}

	.daoqi-list {
		margin-bottom: 20rpx;
	}
</style>