<script setup>
import { ref } from 'vue';
import navBar from '@/components/navBar.vue';

const ASSETS = Object.freeze({
    bg: '/static/coupon/bg.webp',
    border: '/static/coupon/border.webp',
    borderGrey: '/static/coupon/borderGrey.webp',
    expired: '/static/coupon/expired.webp',
    use: '/static/coupon/use.webp',
    used: '/static/coupon/used.webp'
});

// 优惠券类型: 1-满减券, 2-折扣券, 3-服务券
// 状态: available-可用, used-已使用, expired-已过期
const couponList = ref([
    {
        id: 1,
        type: 1, // 满减券
        status: 'available',
        title: '小游戏奖励优惠券',
        value: 150,
        condition: '满1000元可用',
        expireTime: '2026.03.31 23:59',
        tips: '仅限获得当日使用',
        expanded: false,
        scope: '仅适用于滤芯类产品',
        code: 'BM123453215523'
    },
    {
        id: 2,
        type: 2, // 折扣券
        status: 'available',
        title: '滤芯套装8折券',
        value: 8,
        condition: '',
        expireTime: '2026.03.31 23:59',
        tips: '必须滤芯包商品使用',
        expanded: false,
        scope: '仅适用于滤芯类产品',
        code: 'BM123453215524'
    },
    {
        id: 3,
        type: 3, // 服务券
        status: 'available',
        title: '上门检测水质服务',
        value: '',
        condition: '',
        expireTime: '2026.03.31 23:59',
        tips: '',
        expanded: false,
        scope: '仅适用于滤芯类产品',
        code: 'BM123453215525'
    },
    {
        id: 4,
        type: 1, // 满减券-已使用
        status: 'used',
        title: '小游戏奖励优惠券',
        value: 150,
        condition: '满1000元可用',
        expireTime: '2026.03.31 23:59',
        tips: '仅限获得当日使用',
        expanded: false,
        scope: '仅适用于滤芯类产品',
        code: 'BM123453215526'
    },
    {
        id: 5,
        type: 1, // 满减券-已过期
        status: 'expired',
        title: '小游戏奖励优惠券',
        value: 150,
        condition: '满1000元可用',
        expireTime: '2026.03.31 23:59',
        tips: '仅限获得当日使用',
        expanded: false,
        scope: '仅适用于滤芯类产品',
        code: 'BM123453215527'
    }
]);

// 获取边框图片
const getBorderImg = (status) => {
    return status === 'available' ? ASSETS.border : ASSETS.borderGrey;
};

// 获取状态图片
const getStatusImg = (status) => {
    if (status === 'used') return ASSETS.used;
    if (status === 'expired') return ASSETS.expired;
    return ASSETS.use;
};

// 切换展开/收起
const toggleExpand = (coupon) => {
    coupon.expanded = !coupon.expanded;
};
</script>

<template>
    <view class="container">
        <navBar />
        <view class="title">我的优惠券</view>
        <scroll-view scroll-y class="coupon-list">
            <view 
                v-for="coupon in couponList" 
                :key="coupon.id" 
                class="coupon"
                :class="{ 'coupon-disabled': coupon.status !== 'available' }"
            >
                <!-- 优惠券主体 -->
                <view class="coupon-main">
                    <image :src="ASSETS.bg" mode="scaleToFill" class="coupon-bg" />
                    <image :src="getBorderImg(coupon.status)" mode="scaleToFill" class="coupon-border" />
                    
                    <!-- 优惠券内容 -->
                    <view class="coupon-content">
                        <!-- 左侧金额/折扣区域（服务券不显示） -->
                        <view v-if="coupon.type !== 3" class="coupon-left">
                            <!-- 满减券 -->
                            <template v-if="coupon.type === 1">
                                <view class="price-wrap">
                                    <text class="currency">¥</text>
                                    <text class="price">{{ coupon.value }}</text>
                                </view>
                                <text class="condition">{{ coupon.condition }}</text>
                            </template>
                            
                            <!-- 折扣券 -->
                            <template v-else-if="coupon.type === 2">
                                <view class="discount-wrap">
                                    <text class="discount">{{ coupon.value }}</text>
                                    <text class="discount-unit">折</text>
                                </view>
                            </template>
                        </view>
                        
                        <!-- 右侧信息区域 -->
                        <view class="coupon-right" :class="{ 'coupon-right-service': coupon.type === 3 }">
                            <text class="coupon-title">{{ coupon.title }}</text>
                            <text class="expire-time">有效期至{{ coupon.expireTime }}</text>
                            <view v-if="coupon.tips" class="tips-wrap">
                                <text class="tips">使用须知：{{ coupon.tips }}</text>
                            </view>
                        </view>
                        
                        <!-- 状态按钮 -->
                        <image 
                            :src="getStatusImg(coupon.status)" 
                            mode="scaleToFill" 
                            class="status-img"
                            :class="{ 'status-expired': coupon.status === 'expired' }"
                        />
                        
                        <!-- 展开按钮 -->
                        <view v-if="coupon.status === 'available' && !coupon.expanded" class="expand-btn" @click="toggleExpand(coupon)">
                            <text class="expand-text">展开</text>
                            <up-icon name="arrow-down" size="24rpx" color="#666666"></up-icon>
                        </view>
                    </view>
                </view>
                
                <!-- 展开详情 -->
                <view v-if="coupon.status === 'available' && coupon.expanded" class="expand-detail">
                    <view class="detail-row">
                        <text class="detail-label">适用范围：</text>
                        <text class="detail-value">{{ coupon.scope }}</text>
                    </view>
                    <view class="detail-row">
                        <text class="detail-label">券编码：</text>
                        <text class="detail-value">{{ coupon.code }}</text>
                    </view>
                    <view class="collapse-btn" @click="toggleExpand(coupon)">
                        <text class="collapse-text">收起</text>
                        <up-icon name="arrow-up" size="24rpx" color="#666666"></up-icon>
                    </view>
                </view>
            </view>
        </scroll-view>
    </view>
</template>

<style lang="scss" scoped>
.container {
    width: 100vw;
    height: 100vh;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #73D8FF;
    box-sizing: border-box;
}

.title {
    margin-top: 180rpx;
    margin-bottom: 30rpx;
    justify-content: space-between;
    align-items: center;
    color: #2D4B5D;
    font-size: 48rpx;
    text-shadow: 1rpx 1rpx 0 #FFF, -1rpx -1rpx 0 #FFF, 1rpx -1rpx 0 #FFF, -1rpx 1rpx 0 #FFF;
}

.coupon-list {
    flex: 1;
    width: 100%;
    padding: 0 32rpx;
    box-sizing: border-box;
    overflow-y: hidden;
}

.coupon {
    width: 686rpx;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    margin-bottom: 20rpx;
    
    .coupon-main {
        width: 100%;
        height: 200rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
    }

    .coupon-bg {
        width: 704rpx;
        height: 190rpx;
        position: absolute;
        z-index: 1;
    }

    .coupon-border {
        width: 660rpx;
        height: 158rpx;
        position: absolute;
        z-index: 2;
        top: 20rpx;
    }
    
    .coupon-content {
        width: 660rpx;
        height: 146rpx;
        position: relative;
        z-index: 3;
        display: flex;
        align-items: center;
        padding: 0 20rpx;
        box-sizing: border-box;
    }
    
    .coupon-left {
        width: 160rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        
        .price-wrap {
            display: flex;
            align-items: baseline;
            color: #2D4B5D;
            
            .currency {
                font-size: 20rpx;
            }
            
            .price {
                font-size: 48rpx;
                font-weight: bold;
            }
        }
        
        .condition {
            font-size: 18rpx;
            padding: 0 12rpx;
            background: #73d8ff33;
            border-radius: 12rpx;
        }
        
        .discount-wrap {
            display: flex;
            align-items: baseline;
            color: #3BA7D5;
            
            .discount {
                font-size: 56rpx;
                font-weight: bold;
            }
            
            .discount-unit {
                font-size: 28rpx;
                margin-left: 4rpx;
            }
        }
    }
    
    .coupon-right {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding-left: 20rpx;
        
        .coupon-title {
            font-size: 28rpx;
            color: #2D4B5D;
            font-weight: bold;
            margin-bottom: 6rpx;
        }
        
        .expire-time {
            font-size: 24rpx;
            color: #666666;
            margin-bottom: 6rpx;
        }
         
        .tips-wrap {
            display: flex;
            align-items: center;
            
            .tips {
                font-size: 24rpx;
                color: #666666;
            }
        }
        
        &.coupon-right-service {
            padding-left: 40rpx;
            
            .coupon-title {
                font-size: 34rpx;
            }
            
            .expire-time {
                font-size: 28rpx;
            }
        }
    }
    
    .status-img {
        width: 114rpx;
        height: 48rpx;
        position: absolute;
        right: 20rpx;
        z-index: 4;
        
        &.status-expired {
            width: 108rpx;
            height: 108rpx;
        }
    }
    
    .expand-btn {
        position: absolute;
        right: 20rpx;
        bottom: 10rpx;
        display: flex;
        align-items: center;
        z-index: 4;
        
        .expand-text {
            font-size: 24rpx;
            color: #666666;
            margin-right: 4rpx;
        }
        
        .arrow-icon {
            font-size: 24rpx;
            color: #3BA7D5;
        }
    }
    
    .expand-detail {
        width: 694rpx;
        background: #F4FCFF;
        border-radius: 0 0 16rpx 16rpx;
        padding: 20rpx 30rpx;
        box-sizing: border-box;
        position: relative;
        z-index: 1;
        margin-top: -20rpx;
        
        .detail-row {
            display: flex;
            align-items: center;
            margin-bottom: 10rpx;
            color: #333333;
            
            .detail-label {
                font-size: 24rpx;
            }
            
            .detail-value {
                font-size: 24rpx;
            }
        }
        
        .collapse-btn {
            position: absolute;
            right: 30rpx;
            bottom: 20rpx;
            display: flex;
            align-items: center;
            
            .collapse-text {
                font-size: 24rpx;
                color: #666666;
                margin-right: 4rpx;
            }
        }
    }
}

.coupon-disabled {
    .coupon-left {
        .price-wrap, .discount-wrap {
            color: #B0C4CE;
        }
        
        .condition {
            color: #B0C4CE;
        }
    }
    
    .coupon-right {
        .coupon-title {
            color: #8CA3AF;
        }
        
        .expire-time, .tips-wrap .tips {
            color: #B0C4CE;
        }
    }
}
</style>
