<template>
    <view class="container">
        <!-- 分类标签 -->
        <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" v-if="item.red_package_config">
                    <view class="item_left">￥{{ item.red_package_config.money }}</view>
                    <view class="item_center">
                        <view class="title">{{ item.red_package_config.red_package_name }}</view>
                        <view class="time">{{ item.red_package_config.start_time }} -
                            {{ item.red_package_config.end_time }}</view>
                        <view class="desc">{{ item.red_package_config.belong_role === 1 ? '限指定店铺使用' :
                            (item.red_package_config.belong_role === 2 ? '限指定地区使用' :
                                '全平台使用') }}</view>
                    </view>
                    <view class="status2" :data-status="currentTab == 1 ? '已过期' : '已使用'"></view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import { menuButtonInfo, NavgateTo, picUrl, request } from '../../../utils/index';
import { apiArr } from '../../../api/user';

export default {
    data() {
        return {
            currentTab: 0, // 当前选中的标签索引
            changeIndex: 1,
            tabList: ['已使用', '已过期'],
            redPacketList: []
        }
    },
    methods: {
        async getRedPacketHistory(changeIndex) {
            console.log("🚀 ~ changeIndex:", changeIndex)
            const params = {
                user_id: uni.getStorageSync('userId'),
                history: changeIndex,
            }
            const res = await request(apiArr.redPackageMyred, 'POST', params);
            this.redPacketList = res.rows;
        },
        switchTab(index) {
            this.currentTab = index;
            this.changeIndex = index === 0 ? 1 : 3;
            this.getRedPacketHistory(this.changeIndex);
            console.log('选中的标签:', this.tabList[index]);
        }
    },
    onLoad() {
        this.getRedPacketHistory(1);
    }
}
</script>

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