<template>
	<view class="coupon-list-page">
		<custom-navbar title="历史记录" :show-back="true" title-color="#333" background-color="#FFFFFF"
			:showHeadle="false"></custom-navbar>

		<view class="list-content">
			<!-- 已过期 -->
			<CouponCard
				v-for="item in couponList"
				:key="item.id"
				:coupon="item"
				@action="handleCardAction"
			/>
		</view>
	</view>
</template>

<script>
import CouponCard from './components/couponCard.vue';
	export default {
		components: { CouponCard },
		data() {
			return {
				// 模拟接口数据
				couponList: [
					{
						id: 1,
						amount: 20,
						condition: '满150元可用',
						platform: '平台',
						tag: '新人专享券',
						expiry: '有效期至2025.08.21 10:10',
						status: 'expired' // 已过期
					},
					{
						id: 2,
						amount: 40,
						condition: '满380元可用',
						platform: '平台',
						tag: '新人专享券',
						expiry: '有效期至2025.08.21 10:10',
						status: 'used' // 已使用
					},
					{
						id: 3,
						amount: 330,
						condition: '满5650元可用',
						platform: '平台',
						tag: '新人专享券',
						expiry: '有效期至2025.08.21 10:10',
						status: 'expired', // 立即领取
						isNew: false, // 显示新获取图标
    					isExpiringSoon: false // 不显示快过期图标
					},
					{
						id: 4,
						amount: 20,
						condition: '满120元可用',
						platform: '平台',
						tag: '新人专享券',
						expiry: '有效期至2025.08.21 10:10',
						status: 'expired', // 立即使用
						isNew: false,  // 不显示新获取图标
    					isExpiringSoon: true // 显示快过期图标
					}
				]
			};
		},
		methods: {
			handleCardAction(status) {
				if (status === 'receive') {
					console.log('领取优惠券');
					// 调用领取接口
				} else if (status === 'use') {
					console.log('使用优惠券');
					// 跳转使用页面
				}
			}
		}
	};
</script>

<style lang="less">
	/* 页面整体容器 */
	.coupon-list-page {
		background-color: #f8f8f8;
		min-height: 100vh;
		padding: 20rpx 30rpx 20rpx;
		box-sizing: border-box;
	}

	/* 卡片列表区域 */
	.list-content {
		display: flex;
		flex-direction: column;
		gap: 20rpx;
	}
</style>