<template>
    <view class="container">
        <!-- 顶部统计 -->
        <view class="stats">
            <view class="stat-item">
                <view class="stat-label">红包数（个）</view>
                <view class="stat-value">1000,000</view>
            </view>
            <view class="stat-item">
                <view class="stat-label">红包金额（元）</view>
                <view class="stat-value">1000,000</view>
            </view>
        </view>
        
        <!-- 分类标签 -->
        <view class="tabs">
            <view 
                v-for="(tab, index) in tabList" 
                :key="index"
                :class="['tab', { active: currentTab === index }]"
                @click="switchTab(index)"
            >
                {{ tab }}
            </view>
        </view>
        
        <!-- 红包列表 -->
        <view class="content">
            <view v-for="(item, index) in redPacketList" :key="index">
                <view class="item">
                    <view class="item_left">
                        <view class="price">￥{{ item.yuan }}</view>
                        <view v-if="item.manjian" class="manjian">{{ item.manjian }}</view>
                    </view>
                    <view class="item_center">
                        <view class="title">{{ item.name }}</view>
                        <view class="time">{{ item.time }}</view>
                        <view class="desc">{{ item.shiyong }}</view>
                    </view>
                    <view class="item_right">
                        <view class="status" @click="useRedPacket(item)">{{ item.status }}</view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import { menuButtonInfo, NavgateTo, picUrl, request } from '../../../utils/index';
export default {
    data() {
        return {
            currentTab: 0, // 当前选中的标签索引
            tabList: ['全部', '平台', '地区', '店铺', '历史记录'], // 标签列表
            redPacketList: [
                {
                    name: '新用户注册红包',
                    time: '2085.07.77 00:27到期',
                    shiyong: '全平台使用',
                    status: '去使用',
                    yuan: 5.32
                },
                {
                    name: '满减红包',
                    time: '2085.07.77 00:27到期',
                    shiyong: '全平台使用',
                    status: '去使用',
                    yuan: 5,
                    manjian: '满0元可用'
                },
                {
                    name: '固定红包',
                    time: '2085.07.77 00:27到期',
                    shiyong: '限改店铺指定商品使用',
                    status: '去使用',
                    yuan: 5
                },
                {
                    name: '固定红包',
                    time: '2085.07.77 00:27到期',
                    shiyong: '限广州地区使用',
                    status: '去使用',
                    yuan: 5
                }
            ]
        }
    },
    methods: {
        useRedPacket(item) {
            console.log('使用红包:', item);
        },
        switchTab(index) {
            this.currentTab = index;
            console.log('选中的标签:', this.tabList[index]);
            if(this.tabList[index] == '历史记录'){
                NavgateTo('/packages/user/history/index');
            }
        }
    }
}
</script>

<style>
@import url("./index.css");
</style>