<template>
    <view class="scroll-container theme-light">
        <view class="member-card-page">
            <MemberInfoSubNav title="我的会员卡" @back="goBack" />
            <view class="member-card-page__body">
                <!-- 卡类型切换 -->
                <view class="mc-type-tabs">
                    <view
                        class="mc-type-tab"
                        :class="{ 'mc-type-tab--active': currentCardType === 'stored' }"
                        @tap="switchCardType('stored')"
                    >
                        <image class="mc-type-tab__icon" src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/wallet.png" mode="aspectFit" />
                        <text>储值卡</text>
                    </view>
                    <view
                        class="mc-type-tab"
                        :class="{ 'mc-type-tab--active': currentCardType === 'other' }"
                        @tap="switchCardType('other')"
                    >
                        <image class="mc-type-tab__icon" src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/ticket.png" mode="aspectFit" />
                        <text>非储值卡</text>
                        <text class="mc-type-tab__count" v-if="otherCards.length > 0">{{ otherCards.length }}</text>
                    </view>
                </view>

                <!-- 储值卡区域 -->
                <view v-if="currentCardType === 'stored'" class="mc-stored-section">
                    <!-- 储值卡卡片 -->
                    <view class="mc-stored-hero">
                        <view class="mc-stored-hero__inner">
                            <view class="mc-stored-hero__header">
                                <view class="mc-stored-hero__title-row">
                                    <image
                                        class="mc-stored-hero__crown"
                                        src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/crown.png"
                                        mode="aspectFit"
                                    />
                                    <text class="mc-stored-hero__name">{{ displayStoredCard.name }}</text>
                                </view>
                                <view class="mc-stored-hero__badge">
                                    <text>储值卡</text>
                                </view>
                            </view>
                            <view class="mc-stored-hero__balance">
                                <text class="mc-stored-hero__balance-label">账户余额</text>
                                <view class="mc-stored-hero__balance-amount">
                                    <text class="mc-stored-hero__balance-symbol">¥</text>
                                    <text class="mc-stored-hero__balance-num">{{ displayStoredCard.remainingAmount }}</text>
                                </view>
                            </view>
                            <view class="mc-stored-hero__footer">
                                <view
                                    class="mc-stored-hero__recharge"
                                    hover-class="mi-tap-btn--hover"
                                    :hover-stay-time="150"
                                    @tap="goRecharge"
                                >
                                    <image
                                        class="mc-stored-hero__recharge-icon"
                                        src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/plus.png"
                                        mode="aspectFit"
                                    />
                                    <text>充值</text>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>

                <!-- 非储值卡区域 -->
                <view v-if="currentCardType === 'other'">
                    <!-- 筛选条件 -->
                    <view class="mc-filter-tabs">
                        <view
                            class="mc-filter-tab"
                            :class="{ 'mc-filter-tab--active': currentFilter === 'all' }"
                            @tap="changeFilter('all')"
                        >
                            <text>全部</text>
                            <text class="mc-filter-tab__count">{{ filterCounts.all }}</text>
                        </view>
                        <view
                            class="mc-filter-tab"
                            :class="{ 'mc-filter-tab--active': currentFilter === 'active' }"
                            @tap="changeFilter('active')"
                        >
                            <text>有效</text>
                            <text class="mc-filter-tab__count">{{ filterCounts.active }}</text>
                        </view>
                        <view
                            class="mc-filter-tab"
                            :class="{ 'mc-filter-tab--active': currentFilter === 'expired' }"
                            @tap="changeFilter('expired')"
                        >
                            <text>已失效</text>
                            <text class="mc-filter-tab__count">{{ filterCounts.expired }}</text>
                        </view>
                    </view>

                    <!-- 卡片轮播展示 -->
                    <view class="mc-swiper-cards" v-if="filteredOtherCards.length > 0">
                        <swiper
                            class="mc-swiper"
                            :current="currentOtherCardIndex"
                            :previous-margin="'60rpx'"
                            :next-margin="'60rpx'"
                            :circular="filteredOtherCards.length > 2"
                            :autoplay="false"
                            @change="onSwiperChange"
                        >
                            <swiper-item
                                v-for="(c, index) in filteredOtherCards"
                                :key="c.id || index"
                                class="mc-swiper-item"
                            >
                                <view
                                    class="mc-swiper-card"
                                    :class="{
                                        'mc-swiper-card--active': index === currentOtherCardIndex,
                                        'mc-swiper-card--blur': index !== currentOtherCardIndex
                                    }"
                                    @tap="selectOtherCard(index)"
                                >
                                    <view class="mc-swiper-card__inner" :class="getCardStatusClass(c)">
                                        <view class="mc-swiper-card__header">
                                            <view class="mc-swiper-card__title-row">
                                                <image
                                                    class="mc-swiper-card__crown"
                                                    src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/crown.png"
                                                    mode="aspectFit"
                                                />
                                                <text class="mc-swiper-card__name">{{ c.name }}</text>
                                            </view>
                                            <view class="mc-swiper-card__badge" :class="getBadgeClass(c)">
                                                <text>{{ getStatusLabel(c) }}</text>
                                            </view>
                                        </view>
                                        <text class="mc-swiper-card__validity" v-if="!isCountCard(c)">{{ c.validity }}</text>
                                        <view class="mc-swiper-card__footer">
                                            <view class="mc-swiper-card__days-info">
                                                <text class="mc-swiper-card__days-label">{{ getCardDisplayLabel(c) }}</text>
                                                <text class="mc-swiper-card__days-num" :class="{ 'mc-swiper-card__days-num--warning': isExpiringSoon(c), 'mc-swiper-card__days-num--expired': isExpired(c) }">
                                                    {{ getCardDisplayValue(c) }}
                                                </text>
                                                <text class="mc-swiper-card__days-unit">{{ getCardDisplayUnit(c) }}</text>
                                            </view>
                                        </view>
                                        <view class="mc-swiper-card__warning" v-if="isExpiringSoon(c)">
                                            <image class="mc-swiper-card__warning-icon" src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/clock1.png" mode="aspectFit" />
                                            <text class="mc-swiper-card__warning-text">即将到期，请及时续费</text>
                                        </view>
                                    </view>
                                </view>
                            </swiper-item>
                        </swiper>
                        <view class="mc-swiper-dots" v-if="filteredOtherCards.length > 1">
                            <view
                                v-for="(c, index) in filteredOtherCards"
                                :key="index"
                                class="mc-swiper-dot"
                                :class="{ 'mc-swiper-dot--active': index === currentOtherCardIndex }"
                            ></view>
                        </view>
                    </view>

                    <!-- 无卡片提示 -->
                    <view class="mc-empty" v-if="filteredOtherCards.length === 0">
                        <image class="mc-empty__icon" src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/ticket.png" mode="aspectFit" />
                        <text class="mc-empty__text">{{ currentFilter === 'expired' ? '暂无失效会员卡' : '暂无会员卡' }}</text>
                        <view class="mc-empty__btn" @tap="goPurchaseCard" v-if="currentFilter !== 'expired'">
                            <text>购买会员卡</text>
                        </view>
                    </view>
                </view>

                <view class="mc-section-tabs">
                    <view
                        class="mc-section-tab"
                        :class="{ 'mc-section-tab--active': activeSection === 'records' }"
                        @tap="switchSection('records')"
                    >
                        <text>{{ currentCardType === 'stored' ? '充值记录' : '使用记录' }}</text>
                    </view>
                    <view
                        class="mc-section-tab"
                        :class="{ 'mc-section-tab--active': activeSection === 'transactions' }"
                        @tap="switchSection('transactions')"
                    >
                        <text>会员卡流水</text>
                    </view>
                </view>

                <view class="mc-records" v-if="activeSection === 'records'">
                    <view class="mc-records__header">
                        <text class="mc-records__title">{{ currentCardType === 'stored' ? '充值记录' : '使用记录' }}</text>
                        <view class="mc-records__tabs" v-if="currentCardType !== 'stored'">
                            <view
                                v-for="tab in recordTabs"
                                :key="tab.key"
                                class="mc-records__tab"
                                :class="{ 'mc-records__tab--active': activeFilter === tab.key }"
                                hover-class="mi-tap-tab--hover"
                                :hover-stay-time="150"
                                @tap="switchFilter(tab.key)"
                            >
                                <text
                                    class="mc-records__tab-text"
                                    :class="{ 'mc-records__tab-text--active': activeFilter === tab.key }"
                                >
                                    {{ tab.label }}
                                </text>
                            </view>
                        </view>
                    </view>
                    <view class="mc-records__divider"></view>
                    
                    <scroll-view
                        class="mc-records__scroll"
                        scroll-y="true"
                        :show-scrollbar="false"
                    >
                        <!-- 储值卡充值记录 -->
                        <template v-if="currentCardType === 'stored'">
                            <view
                                v-for="(item, index) in rechargeRecords"
                                :key="item.id || index"
                                class="mc-records__item"
                            >
                                <view v-if="index > 0" class="mc-records__divider"></view>
                                <view class="mc-records__item-inner">
                                    <view class="mc-records__icon-wrap mc-records__icon-wrap--orange">
                                        <image
                                            class="mc-records__icon"
                                            src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/pluscircle.png"
                                            mode="aspectFit"
                                        />
                                    </view>
                                    <view class="mc-records__info">
                                        <text class="mc-records__item-title">储值卡充值</text>
                                        <text class="mc-records__item-time">{{ formatRecordTime(item.payTime || item.createdAt) }}</text>
                                    </view>
                                    <text
                                        class="mc-records__value"
                                        :class="item.status === 'SUCCESS' ? 'mc-records__value--positive' : (item.status === 'FAILED' ? 'mc-records__value--negative' : 'mc-records__value--pending')"
                                    >
                                        +¥{{ item.totalAmount }}
                                    </text>
                                </view>
                            </view>
                            <view v-if="!rechargeRecords.length && !loadingRechargeRecords" class="mc-records__empty">
                                <text class="mc-records__empty-text">暂无充值记录</text>
                            </view>
                            <view v-if="loadingRechargeRecords" class="mc-transactions__loading">
                                <text>加载中...</text>
                            </view>
                        </template>
                        
                        <!-- 非储值卡使用记录 -->
                        <template v-else>
                            <view
                                v-for="(item, index) in filteredRecords"
                                :key="item.id"
                                class="mc-records__item"
                            >
                                <view v-if="index > 0" class="mc-records__divider"></view>
                                <view
                                    class="mc-records__item-inner"
                                    hover-class="mi-tap-row--hover"
                                    :hover-stay-time="150"
                                    @tap="showRecordDetail(item)"
                                >
                                    <view
                                        class="mc-records__icon-wrap"
                                        :class="'mc-records__icon-wrap--' + getUsageRecordIconTheme(item)"
                                    >
                                        <text class="mc-records__icon-text">{{ getUsageRecordIcon(item) }}</text>
                                    </view>
                                    <view class="mc-records__info">
                                        <text class="mc-records__item-title">{{ getUsageRecordTitle(item) }}</text>
                                        <text class="mc-records__item-time">{{ formatTime(item.createdAt) }}</text>
                                    </view>
                                    <text
                                        class="mc-records__value"
                                        :class="'mc-records__value--negative'"
                                    >
                                        -{{ item.changeAmount || 0 }}次
                                    </text>
                                </view>
                            </view>
                            <view v-if="!filteredRecords.length" class="mc-records__empty">
                                <text class="mc-records__empty-text">暂无使用记录</text>
                            </view>
                        </template>
                    </scroll-view>
                </view>

                <view class="mc-transactions" v-if="activeSection === 'transactions'">
                    <view class="mc-transactions__header">
                        <text class="mc-transactions__title">会员卡流水</text>
                        <view class="mc-transactions__refresh" @tap="loadTransactions">
                            <text>刷新</text>
                        </view>
                    </view>
                    <scroll-view
                        class="mc-transactions__scroll"
                        scroll-y="true"
                        :show-scrollbar="false"
                    >
                        <view class="mc-transactions__list">
                            <view
                                v-for="(item, index) in transactions"
                                :key="item.id"
                                class="mc-transactions__item"
                            >
                                <view v-if="index > 0" class="mc-transactions__divider"></view>
                                <view
                                    class="mc-transactions__item-inner"
                                    hover-class="mi-tap-row--hover"
                                    :hover-stay-time="150"
                                    @tap="showTransactionDetail(item)"
                                >
                                    <view
                                        class="mc-transactions__icon-wrap"
                                        :class="'mc-transactions__icon-wrap--' + getTransactionTypeClass(item.operationType)"
                                    >
                                        <text class="mc-transactions__icon-text">{{ getTransactionIcon(item.operationType) }}</text>
                                    </view>
                                    <view class="mc-transactions__info">
                                        <text class="mc-transactions__item-title">{{ getTransactionTypeName(item.operationType) }}</text>
                                        <text class="mc-transactions__item-time">{{ formatTime(item.createdAt) }}</text>
                                    </view>
                                    <text
                                        class="mc-transactions__value"
                                        :class="'mc-transactions__value--' + getTransactionValueClass(item.operationType)"
                                    >
                                        {{ formatTransactionValue(item) }}
                                    </text>
                                </view>
                            </view>
                            <view v-if="!transactions.length && !loadingTransactions" class="mc-transactions__empty">
                                <text class="mc-transactions__empty-text">暂无流水记录</text>
                            </view>
                            <view v-if="loadingTransactions" class="mc-transactions__loading">
                                <text>加载中...</text>
                            </view>
                        </view>
                    </scroll-view>
                </view>

                <view class="mc-rules">
                    <text class="mc-rules__title">使用规则</text>
                    <view
                        v-for="(rule, index) in rules"
                        :key="index"
                        class="mc-rules__item"
                    >
                        <view class="mc-rules__bullet"></view>
                        <text class="mc-rules__text">{{ rule }}</text>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script setup>
import { ref, computed, watch } from 'vue'
import { onShow, onLoad } from '@dcloudio/uni-app'
import MemberInfoSubNav from '@/components/memberInfo/MemberInfoSubNav.vue'
import {
    loadMemberStore,
    computeRemainingDays,
    renewMemberCard,
    saveMemberStore
} from '@/common/memberInfo/store.js'
import { backToMemberCenter, PAGE, navigateToPage } from '@/common/constants/routes.js'
import { getMyMemberCards, getMyMemberCardsWithStatus, getMemberCardTransactions, getMemberCardTransactionsByRecordId, checkPayPasswordSet, createPayment, getStoredCardInfo, getStoredCardRechargeRecords } from '@/api/main.js'
import { getMemberId } from '@/utils/request.js'

const currentFilter = ref('all')
const currentCardType = ref('stored') // 'stored' 或 'other'
const cards = ref([])
const allCards = ref([])
const storedCards = ref([]) // 储值卡
const otherCards = ref([]) // 非储值卡
const currentStoredCard = ref(null) // 当前选中的储值卡
const activeCards = ref([])
const expiredCards = ref([])
const currentOtherCardIndex = ref(0)
const recordTabs = ref([
    { key: 'all', label: '全部' },
    { key: 'GROUP_CLASS', label: '团课消费' },
    { key: 'CHECK_IN', label: '到店健身' }
])
const records = ref([])
const rules = ref([])
const activeFilter = ref('all')
const activeSection = ref('records')
const transactions = ref([])
const loadingTransactions = ref(false)
const loading = ref(false)
const storedCardBalance = ref(0)
const rechargeRecords = ref([])
const loadingRechargeRecords = ref(false)

const filterCounts = computed(() => ({
    all: otherCards.value.length,
    active: otherCards.value.filter(c => isActiveCard(c)).length,
    expired: otherCards.value.filter(c => isExpired(c)).length
}))

const otherStoredCards = computed(() => {
    if (!currentStoredCard.value) {
        return storedCards.value
    }
    return storedCards.value.filter(card => card.id !== currentStoredCard.value.id)
})

const filteredOtherCards = computed(() => {
    if (currentFilter.value === 'all') return otherCards.value
    if (currentFilter.value === 'active') return otherCards.value.filter(c => isActiveCard(c))
    if (currentFilter.value === 'expired') return otherCards.value.filter(c => isExpired(c))
    return otherCards.value
})

const filteredRecords = computed(() => {
    const deductRecords = transactions.value.filter(item => item.operationType === 'DEDUCT')
    if (activeFilter.value === 'all') {
        return deductRecords
    }
    return deductRecords.filter(item => item.relatedBizType === activeFilter.value)
})

function getUsageRecordTitle(item) {
    const bizMap = {
        'GROUP_CLASS': '团课消费',
        'CHECK_IN': '到店健身',
        'PT_CLASS': '私教课消费'
    }
    return bizMap[item.relatedBizType] || '消费'
}

function getUsageRecordIcon(item) {
    const iconMap = {
        'GROUP_CLASS': '🏋️',
        'CHECK_IN': '✅',
        'PT_CLASS': '💪'
    }
    return iconMap[item.relatedBizType] || '📋'
}

function getUsageRecordIconTheme(item) {
    const themeMap = {
        'GROUP_CLASS': 'orange',
        'CHECK_IN': 'green',
        'PT_CLASS': 'purple'
    }
    return themeMap[item.relatedBizType] || 'default'
}

const displayStoredCard = computed(() => {
	console.log("06281--"+storedCardBalance.value)
    const balance = storedCardBalance.value != null ? storedCardBalance.value : 0
	console.log("06281--"+balance)
    return {
        name: '储值卡',
        remainingAmount: balance.toFixed(2)
    }
})

// 加载储值卡余额
async function loadStoredCardBalance() {
    const memberId = getMemberId()
    if (!memberId) return

    try {
        const res = await getStoredCardInfo(memberId)
		storedCardBalance.value = res.balance || 0
    } catch (e) {
        console.error('获取储值卡余额失败:', e)
        storedCardBalance.value = 0
    }
}

// 加载储值卡充值记录
async function loadRechargeRecords() {
    const memberId = getMemberId()
    if (!memberId) return

    if (loadingRechargeRecords.value) return
    loadingRechargeRecords.value = true

    try {
        const res = await getStoredCardRechargeRecords(memberId, 1, 50, { cache: false })
		rechargeRecords.value = res.list || []
    } catch (e) {
        console.error('获取充值记录失败:', e)
        rechargeRecords.value = []
    } finally {
        loadingRechargeRecords.value = false
    }
}

function formatRecordTime(timeStr) {
    if (!timeStr) return ''
    const date = new Date(timeStr)
    const year = date.getFullYear()
    const month = String(date.getMonth() + 1).padStart(2, '0')
    const day = String(date.getDate()).padStart(2, '0')
    const hour = String(date.getHours()).padStart(2, '0')
    const minute = String(date.getMinutes()).padStart(2, '0')
    return `${year}-${month}-${day} ${hour}:${minute}`
}

function formatDate(dateStr) {
    if (!dateStr) return '永久有效'
    try {
        const date = new Date(dateStr)
        const year = date.getFullYear()
        const month = String(date.getMonth() + 1).padStart(2, '0')
        const day = String(date.getDate()).padStart(2, '0')
        return `${year}-${month}-${day}`
    } catch (e) {
        return dateStr
    }
}

function formatChineseDate(dateStr) {
    if (!dateStr) return ''
    try {
        const date = new Date(dateStr)
        const year = date.getFullYear()
        const month = String(date.getMonth() + 1).padStart(2, '0')
        const day = String(date.getDate()).padStart(2, '0')
        return `${year}年${month}月${day}日`
    } catch (e) {
        return dateStr
    }
}

function switchCardType(type) {
    currentCardType.value = type
    currentOtherCardIndex.value = 0
    activeSection.value = 'records'

    if (type === 'stored') {
        loadStoredCardBalance()
        loadRechargeRecords()
    } else {
        if (filteredOtherCards.value.length > 0) {
            loadTransactions()
        }
    }
}

function switchSection(section) {
    activeSection.value = section
    if (section === 'records') {
        if (currentCardType.value === 'stored') {
            loadRechargeRecords()
        } else {
            loadTransactions()
        }
    } else if (section === 'transactions') {
        loadTransactions()
    }
}

function selectStoredCard(card) {
    currentStoredCard.value = card
    loadTransactions(card.id)
}

function getCardRemainingDays(c) {
    return computeRemainingDays(c.validityEnd || c.expireTime)
}

function getCardDaysDiff(c) {
    const endDateStr = c.validityEnd || c.expireTime
    if (!endDateStr) return 0
    const end = new Date(endDateStr)
    if (isNaN(end.getTime())) return 0
    const now = new Date()
    now.setHours(0, 0, 0, 0)
    end.setHours(0, 0, 0, 0)
    return Math.ceil((end - now) / 86400000)
}

function getCardDaysLabel(c) {
    const diff = getCardDaysDiff(c)
    return diff >= 0 ? '还剩' : '已过期'
}

function getCardDaysValue(c) {
    const diff = getCardDaysDiff(c)
    return Math.abs(diff)
}

function isStoredCard(c) {
    if (c.memberCardType) {
        return c.memberCardType === 'STORED_VALUE_CARD'
    }
    return c.remainingAmount !== null && c.remainingAmount !== undefined && c.remainingAmount > 0
}

function isTimeCard(c) {
    if (c.memberCardType) {
        return c.memberCardType === 'TIME_CARD'
    }
    return false
}

function isCountCard(c) {
    if (c.memberCardType) {
        return c.memberCardType === 'COUNT_CARD'
    }
    return false
}

function getCardDisplayLabel(c) {
    if (isTimeCard(c)) {
        return getCardDaysDiff(c) >= 0 ? '还剩' : '已过期'
    } else if (isCountCard(c)) {
        return '剩余'
    }
    return getCardDaysDiff(c) >= 0 ? '还剩' : '已过期'
}

function getCardDisplayValue(c) {
    if (isTimeCard(c)) {
        return Math.abs(getCardDaysDiff(c))
    } else if (isCountCard(c)) {
        return c.remainingTimes || 0
    }
    return Math.abs(getCardDaysDiff(c))
}

function getCardDisplayUnit(c) {
    if (isTimeCard(c)) {
        return '天'
    } else if (isCountCard(c)) {
        return '次'
    }
    return '天'
}

function isActiveCard(c) {
    if (isCountCard(c)) {
        // 次数卡：检查是否还有剩余次数
        return (c.remainingTimes || 0) > 0 && (c.status === 'active' || c.status === 'ACTIVE')
    }
    // 时长卡：检查是否在有效期内
    const diff = getCardDaysDiff(c)
    return diff > 0 && (c.status === 'active' || c.status === 'ACTIVE')
}

function isExpiringSoon(c) {
    if (isCountCard(c)) {
        // 次数卡不显示临期提示
        return false
    }
    const diff = getCardDaysDiff(c)
    return diff > 0 && diff <= 3
}

function isExpired(c) {
    if (isCountCard(c)) {
        // 次数卡：没有剩余次数即为用完
        return (c.remainingTimes || 0) <= 0 || c.status === 'USED_UP' || c.status === 'used_up'
    }
    // 时长卡：检查是否已过期
    const diff = getCardDaysDiff(c)
    return diff <= 0 || c.status === 'EXPIRED' || c.status === 'expired'
}

function getStatusLabel(c) {
    if (isCountCard(c)) {
        if ((c.remainingTimes || 0) <= 0) return '已用完'
        return '有效'
    }
    if (isExpired(c)) return '已失效'
    if (isExpiringSoon(c)) return '临期'
    return '有效'
}

function getCardStatusClass(c) {
    if (isCountCard(c)) {
        if ((c.remainingTimes || 0) <= 0) return 'mc-swiper-card__inner--expired'
        return 'mc-swiper-card__inner--active'
    }
    if (isExpired(c)) return 'mc-swiper-card__inner--expired'
    if (isExpiringSoon(c)) return 'mc-swiper-card__inner--expiring'
    return 'mc-swiper-card__inner--active'
}

function getBadgeClass(c) {
    if (isCountCard(c)) {
        if ((c.remainingTimes || 0) <= 0) return 'mc-swiper-card__badge--expired'
        return 'mc-swiper-card__badge--active'
    }
    if (isExpired(c)) return 'mc-swiper-card__badge--expired'
    if (isExpiringSoon(c)) return 'mc-swiper-card__badge--expiring'
    return 'mc-swiper-card__badge--active'
}

function onSwiperChange(e) {
    currentOtherCardIndex.value = e.detail.current
    if (activeSection.value === 'records' || activeSection.value === 'transactions') {
        loadTransactions()
    }
}

function selectOtherCard(index) {
    currentOtherCardIndex.value = index
    if (activeSection.value === 'records' || activeSection.value === 'transactions') {
        loadTransactions()
    }
}

function changeFilter(filter) {
    currentFilter.value = filter
    currentOtherCardIndex.value = 0
}

function goPurchaseCard() {
    navigateToPage(PAGE.PURCHASE_CARD)
}

function goRecharge() {
    navigateToPage(`${PAGE.RECHARGE_STORED_CARD}`)
}

// 从后端刷新会员卡数据
async function refreshFromServer() {
    const memberId = getMemberId()
    if (!memberId) {
        console.log('[MemberCard] 没有 memberId，无法刷新')
        return
    }

    console.log('[MemberCard] 开始刷新会员卡数据, memberId:', memberId)
    loading.value = true
    uni.showLoading({ title: '加载中...' })

    try {
        const res = await getMyMemberCardsWithStatus(memberId, 'all')
        console.log('[MemberCard] API 返回:', res)
        
        uni.hideLoading()
        loading.value = false

        let rawCards = []
        if (Array.isArray(res)) {
            rawCards = res
        } else if (res.code === 200 && res.data) {
            rawCards = res.data
        } else if (Array.isArray(res.data)) {
            rawCards = res.data
        }

        console.log('[MemberCard] 解析后的会员卡列表:', rawCards)

        const formattedCards = rawCards.map(myCard => {
            const cardName = myCard.memberCardName || myCard.cardName || myCard.name || `会员卡#${myCard.memberCardId || myCard.id}`
            const validityEnd = myCard.validityEnd || myCard.expireTime
            const validityStart = myCard.validityStart || myCard.purchaseTime || myCard.createdAt
            const cardType = myCard.memberCardType || myCard.cardType || ''
            return {
                id: myCard.id || myCard.memberCardRecordId,
                name: cardName,
                status: myCard.status || 'ACTIVE',
                validity: `有效期至 ${formatChineseDate(validityEnd)}`,
                validityEnd: validityEnd,
                validityStart: validityStart,
                remainingTimes: myCard.remainingTimes,
                remainingAmount: myCard.remainingAmount,
                memberCardType: cardType
            }
        })

        // 分类存储
        allCards.value = formattedCards
        storedCards.value = formattedCards.filter(c => isStoredCard(c))
        otherCards.value = formattedCards.filter(c => !isStoredCard(c))
        activeCards.value = formattedCards.filter(c => isActiveCard(c))
        expiredCards.value = formattedCards.filter(c => isExpired(c))

        // 设置当前储值卡
        if (storedCards.value.length > 0 && !currentStoredCard.value) {
            currentStoredCard.value = storedCards.value[0]
        } else if (storedCards.value.length === 0) {
            currentStoredCard.value = null
        }

        // 更新store
        store.cards = formattedCards
        if (formattedCards.length > 0) {
            const firstActiveCard = formattedCards.find(c => isActiveCard(c)) || formattedCards[0]
            store.card = { ...firstActiveCard }
            store.cardInfo = {
                expireDate: firstActiveCard.validity,
                remainingDays: getCardRemainingDays(firstActiveCard)
            }
        }
        saveMemberStore(store)

        console.log('[MemberCard] 数据刷新成功，总数:', formattedCards.length, '储值卡:', storedCards.value.length, '非储值卡:', otherCards.value.length)
    } catch (e) {
        uni.hideLoading()
        loading.value = false
        console.error('[MemberCard] 刷新会员卡数据失败:', e)
        
        try {
            const res = await getMyMemberCards(memberId)
			console.log(111)
			console.log(res)
            let rawCards = []
            if (Array.isArray(res)) {
                rawCards = res
            } else if (res.code === 200 && res.data) {
                rawCards = res.data
            } else if (Array.isArray(res.data)) {
                rawCards = res.data
            }

            const formattedCards = rawCards.map(myCard => {
				console.log(1212)
				console.log(myCard)
                const cardName = myCard.memberCardName || myCard.cardName || myCard.name || `会员卡#${myCard.memberCardId || myCard.id}`
                const validityEnd = myCard.validityEnd || myCard.expireTime
                const validityStart = myCard.validityStart || myCard.purchaseTime || myCard.createdAt
                const cardType = myCard.memberCardType || myCard.cardType || ''
                return {
                    id: myCard.id || myCard.memberCardRecordId,
                    name: cardName,
                    status: myCard.status || 'ACTIVE',
                    validity: `有效期至 ${formatChineseDate(validityEnd)}`,
                    validityEnd: validityEnd,
                    validityStart: validityStart,
                    remainingTimes: myCard.remainingTimes,
                    remainingAmount: myCard.remainingAmount,
                    memberCardType: cardType
                }
            })

            allCards.value = formattedCards
            storedCards.value = formattedCards.filter(c => isStoredCard(c))
            otherCards.value = formattedCards.filter(c => !isStoredCard(c))
            activeCards.value = formattedCards.filter(c => isActiveCard(c))
            expiredCards.value = []
            
            if (storedCards.value.length > 0 && !currentStoredCard.value) {
                currentStoredCard.value = storedCards.value[0]
            }
            
            store.cards = formattedCards
            saveMemberStore(store)
        } catch (e2) {
            console.error('[MemberCard] 旧API也失败:', e2)
        }
    }

    if (currentCardType.value === 'other' && otherCards.value.length > 0) {
        loadTransactions()
    }
}

function goBack() {
    backToMemberCenter()
}

function switchFilter(filter) {
    activeFilter.value = filter
}

function showRecordDetail(item) {
    const title = getUsageRecordTitle(item)
    const time = formatTime(item.createdAt)
    const change = `-${item.changeAmount || 0}次`
    uni.showModal({
        title: title,
        content: `${time}\n变动：${change}`,
        showCancel: false
    })
}

async function loadTransactions(cardId) {
    loadingTransactions.value = true
    try {
        let res
        if (currentCardType.value === 'stored') {
            const memberId = getMemberId()
            if (!memberId) {
                loadingTransactions.value = false
                return
            }
            res = await getMemberCardTransactions(memberId)
        } else {
            const currentCard = getCurrentOtherCard()
            if (currentCard && currentCard.id) {
                res = await getMemberCardTransactionsByRecordId(currentCard.id)
            } else {
                transactions.value = []
                loadingTransactions.value = false
                return
            }
        }
        
        if (Array.isArray(res)) {
            transactions.value = res
        } else if (res && Array.isArray(res.value)) {
            transactions.value = res.value
        } else if (res && Array.isArray(res.data)) {
            transactions.value = res.data
        } else {
            transactions.value = []
        }
    } catch (e) {
        console.error('加载会员卡流水失败:', e)
        transactions.value = []
    } finally {
        loadingTransactions.value = false
    }
}

function getCurrentOtherCard() {
    if (filteredOtherCards.value.length > 0 && currentOtherCardIndex.value < filteredOtherCards.value.length) {
        return filteredOtherCards.value[currentOtherCardIndex.value]
    }
    return null
}

function getTransactionTypeName(type) {
    const map = {
        PURCHASE: '购买',
        DEDUCT: '扣减',
        RENEW: '续费',
        REFUND: '退款',
        EXPIRE: '过期'
    }
    return map[type] || type
}

function getTransactionIcon(type) {
    const map = {
        PURCHASE: '💰',
        DEDUCT: '💳',
        RENEW: '🔄',
        REFUND: '🔙',
        EXPIRE: '⏰'
    }
    return map[type] || '📋'
}

function getTransactionTypeClass(type) {
    const map = {
        PURCHASE: 'purchase',
        DEDUCT: 'deduct',
        RENEW: 'renew',
        REFUND: 'refund',
        EXPIRE: 'expire'
    }
    return map[type] || 'default'
}

function getTransactionValueClass(type) {
    if (type === 'PURCHASE' || type === 'RENEW') {
        return 'positive'
    }
    return 'negative'
}

function formatTransactionValue(item) {
    const parts = []
    if (item.changeAmount !== null && item.changeAmount !== undefined) {
        const prefix = (item.changeAmount > 0 ? '+' : '')
        parts.push(`${prefix}${item.changeAmount}次`)
    }
    if (item.changeBalance !== null && item.changeBalance !== undefined) {
        const prefix = (item.changeBalance > 0 ? '+' : '')
        parts.push(`${prefix}${item.changeBalance}元`)
    }
    if (parts.length === 0) {
        return '-'
    }
    return parts.join(' ')
}

function formatTime(timeStr) {
    if (!timeStr) return '-'
    try {
        const date = new Date(timeStr)
        const year = date.getFullYear()
        const month = String(date.getMonth() + 1).padStart(2, '0')
        const day = String(date.getDate()).padStart(2, '0')
        const hour = String(date.getHours()).padStart(2, '0')
        const minute = String(date.getMinutes()).padStart(2, '0')
        return `${year}-${month}-${day} ${hour}:${minute}`
    } catch (e) {
        return timeStr
    }
}

function showTransactionDetail(item) {
    let content = `时间：${formatTime(item.createdAt)}\n`
    content += `类型：${getTransactionTypeName(item.operationType)}\n`
    content += `变动：${formatTransactionValue(item)}\n`
    if (item.afterRemainingCount !== null && item.afterRemainingCount !== undefined) {
        content += `剩余次数：${item.afterRemainingCount}次\n`
    }
    if (item.afterRemainingBalance !== null && item.afterRemainingBalance !== undefined) {
        content += `剩余金额：${item.afterRemainingBalance}元\n`
    }
    if (item.remark) {
        content += `备注：${item.remark}`
    }
    uni.showModal({
        title: '流水详情',
        content: content,
        showCancel: false
    })
}

watch(activeSection, (newSection) => {
    if (newSection === 'transactions') {
        loadTransactions()
    }
})

onLoad((options) => {
    if (options && options.tab) {
        if (options.tab === 'stored') {
            currentCardType.value = 'stored'
            activeSection.value = 'transactions'
        } else if (options.tab === 'other') {
            currentCardType.value = 'other'
        }
    }
})

// 每次页面显示时从后端刷新会员卡数据
onShow(() => {
    const memberId = getMemberId()
    console.log('========== 当前登录用户信息 ==========')
    console.log('会员ID (memberId):', memberId)
    console.log('====================================')
    refreshFromServer()
    if (currentCardType.value === 'stored') {
        loadStoredCardBalance()
        loadRechargeRecords()
    }
})
</script>

<style lang="scss">
@import '@/common/style/base.css';
@import '@/common/style/memberInfo/pages/page-reset.css';
@import '@/common/style/memberInfo/pages/sub-page-base.css';
@import '@/common/style/memberInfo/member-info-component-reset.css';
@import '@/common/style/memberInfo/member-info-sub-nav.css';
@import '@/common/style/memberInfo/member-info-tap.css';
@import '@/common/style/memberInfo/pages/member-card-page.css';

// 卡类型切换样式
.mc-type-tabs {
    display: flex;
    margin: 0 16px 16px;
    background: #FFFFFF;
    border-radius: 12px;
    padding: 8px;
    gap: 8px;
}

.mc-type-tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 0;
    border-radius: 8px;
    font-size: 14px;
    color: #718096;
    background: #F7FAFC;
    transition: all 0.2s;

    &--active {
        background: #1677FF;
        color: #FFFFFF;
        font-weight: 600;
    }
}

.mc-type-tab__icon {
    width: 18px;
    height: 18px;
}

.mc-type-tab__count {
    font-size: 12px;
    padding: 2px 6px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.1);
}

.mc-type-tab--active .mc-type-tab__count {
    background: rgba(255, 255, 255, 0.3);
}

// 储值卡区域样式
.mc-stored-section {
    margin-bottom: 20px;
}

.mc-stored-hero {
    margin: 0 16px;
}

.mc-stored-hero__inner {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 16px;
    padding: 20px;
    color: #FFFFFF;
}

.mc-stored-hero__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.mc-stored-hero__title-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.mc-stored-hero__crown {
    width: 24px;
    height: 24px;
}

.mc-stored-hero__name {
    font-size: 18px;
    font-weight: 600;
}

.mc-stored-hero__badge {
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 12px;
    background: rgba(255, 255, 255, 0.3);
}

.mc-stored-hero__balance {
    margin-bottom: 20px;
}

.mc-stored-hero__balance-label {
    font-size: 13px;
    opacity: 0.8;
    margin-bottom: 4px;
}

.mc-stored-hero__balance-amount {
    display: flex;
    align-items: baseline;
}

.mc-stored-hero__balance-symbol {
    font-size: 18px;
    font-weight: 600;
}

.mc-stored-hero__balance-num {
    font-size: 36px;
    font-weight: 700;
}

.mc-stored-hero__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.mc-stored-hero__validity {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.mc-stored-hero__validity-label {
    font-size: 12px;
    opacity: 0.8;
}

.mc-stored-hero__validity-date {
    font-size: 14px;
}

.mc-stored-hero__recharge {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    border-radius: 20px;
    background: #FFFFFF;
    color: #667eea;
    font-size: 14px;
    font-weight: 600;
}

.mc-stored-hero__recharge-icon {
    width: 16px;
    height: 16px;
}

// 无储值卡提示
.mc-stored-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 16px;
    margin: 0 16px;
    background: #FFFFFF;
    border-radius: 16px;
}

.mc-stored-empty__icon {
    width: 64px;
    height: 64px;
    opacity: 0.4;
    margin-bottom: 16px;
}

.mc-stored-empty__text {
    font-size: 14px;
    color: #8A99B4;
    margin-bottom: 20px;
}

.mc-stored-empty__btn {
    padding: 12px 32px;
    border-radius: 24px;
    background: #1677FF;
    color: #FFFFFF;
    font-size: 14px;
    font-weight: 600;
}

// 储值卡列表
.mc-stored-list {
    margin: 16px 16px 0;
    background: #FFFFFF;
    border-radius: 12px;
    padding: 12px 16px;
}

.mc-stored-list__title {
    font-size: 13px;
    color: #8A99B4;
    margin-bottom: 12px;
}

.mc-stored-list__item {
    padding: 12px 0;
}

.mc-stored-list__item:not(:last-child) {
    border-bottom: 1px solid #F0F0F0;
}

.mc-stored-list__item-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.mc-stored-list__item-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.mc-stored-list__item-name {
    font-size: 14px;
    color: #1A202C;
}

.mc-stored-list__item-balance {
    font-size: 13px;
    color: #667eea;
    font-weight: 600;
}

.mc-stored-list__item-arrow {
    width: 16px;
    height: 16px;
    opacity: 0.5;
}

// 筛选条件样式
.mc-filter-tabs {
    display: flex;
    margin: 0 16px 16px;
    background: #FFFFFF;
    border-radius: 12px;
    padding: 8px;
    gap: 8px;
}

.mc-filter-tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 0;
    border-radius: 8px;
    font-size: 14px;
    color: #718096;
    background: #F7FAFC;
    transition: all 0.2s;

    &--active {
        background: #1677FF;
        color: #FFFFFF;
        font-weight: 600;
    }
}

.mc-filter-tab__count {
    font-size: 12px;
    padding: 2px 6px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.1);
}

.mc-filter-tab--active .mc-filter-tab__count {
    background: rgba(255, 255, 255, 0.3);
}

// 卡片轮播样式
.mc-swiper-cards {
    margin: 0 16px 20px;
    padding-bottom: 16px;
}

.mc-swiper {
    height: 240px;
}

.mc-swiper-item {
    display: flex;
    align-items: center;
    justify-content: center;
}

.mc-swiper-card {
    width: 100%;
    height: 220px;
    transition: all 0.3s ease;
    transform-origin: center center;
    overflow: hidden;
    border-radius: 16px;

    &--active {
        transform: scale(1);
        filter: blur(0);
        opacity: 1;
    }

    &--blur {
        transform: scale(0.85);
        filter: blur(4px);
        opacity: 0.6;
    }
}

.mc-swiper-card__inner {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 16px;
    padding: 20px;
    color: #FFFFFF;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;

    &--active {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    }

    &--expiring {
        background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    }

    &--expired {
        background: linear-gradient(135deg, #c0c0c0 0%, #909090 100%);
    }
}

.mc-swiper-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.mc-swiper-card__title-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.mc-swiper-card__crown {
    width: 24px;
    height: 24px;
}

.mc-swiper-card__name {
    font-size: 18px;
    font-weight: 600;
}

.mc-swiper-card__badge {
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;

    &--active {
        background: rgba(255, 255, 255, 0.3);
    }

    &--expiring {
        background: #FFE4E4;
        color: #E74C3C;
    }

    &--expired {
        background: rgba(255, 255, 255, 0.2);
    }
}

.mc-swiper-card__validity {
    font-size: 13px;
    opacity: 0.8;
    margin-bottom: 12px;
}

.mc-swiper-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
}

.mc-swiper-card__days-info {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.mc-swiper-card__days-label {
    font-size: 14px;
    opacity: 0.9;
}

.mc-swiper-card__days-num {
    font-size: 32px;
    font-weight: 700;

    &--warning {
        color: #FFE4E4;
    }

    &--expired {
        color: #FF6B6B;
    }
}

.mc-swiper-card__days-unit {
    font-size: 14px;
    opacity: 0.8;
}

.mc-swiper-card__renew {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.3);
}

.mc-swiper-card__renew-icon {
    width: 16px;
    height: 16px;
}

.mc-swiper-card__renew-text {
    font-size: 13px;
}

.mc-swiper-card__warning {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding: 10px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.2);
}

.mc-swiper-card__warning-icon {
    width: 16px;
    height: 16px;
}

.mc-swiper-card__warning-text {
    font-size: 13px;
}

.mc-swiper-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
}

.mc-swiper-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;

    &--active {
        width: 20px;
        border-radius: 3px;
        background: #667eea;
    }
}

// 空状态样式
.mc-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 16px;
    margin: 0 16px;
    background: #FFFFFF;
    border-radius: 16px;
}

.mc-empty__icon {
    width: 64px;
    height: 64px;
    opacity: 0.4;
    margin-bottom: 16px;
}

.mc-empty__text {
    font-size: 14px;
    color: #8A99B4;
    margin-bottom: 20px;
}

.mc-empty__btn {
    padding: 12px 32px;
    border-radius: 24px;
    background: #1677FF;
    color: #FFFFFF;
    font-size: 14px;
    font-weight: 600;
}

.mc-section-tabs {
    display: flex;
    margin: 0 16px;
    background: #FFFFFF;
    border-radius: 12px;
    padding: 4px;
}

.mc-section-tab {
    flex: 1;
    padding: 12px 0;
    text-align: center;
    border-radius: 8px;
    font-size: 15px;
    color: #718096;
    transition: all 0.2s;

    &--active {
        background: #1677FF;
        color: #FFFFFF;
        font-weight: 600;
    }
}

.mc-transactions {
    margin: 0 16px;
    background: #FFFFFF;
    border-radius: 16px;
    overflow: hidden;
}

.mc-transactions__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 16px;
    border-bottom: 1px solid #F0F0F0;
}

.mc-transactions__title {
    font-size: 17px;
    font-weight: 600;
    color: #1A202C;
}

.mc-transactions__refresh {
    font-size: 13px;
    color: #1677FF;
}

.mc-transactions__scroll {
    height: 400rpx;
    overflow: hidden;
}

.mc-transactions__list {
    padding: 8px 0;
}

.mc-transactions__divider {
    height: 1px;
    background: #F0F0F0;
    margin: 0 16px;
}

.mc-transactions__item-inner {
    display: flex;
    align-items: center;
    padding: 16px;
    gap: 16px;
}

.mc-transactions__icon-wrap {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;

    &--purchase {
        background: #F0FFF4;
    }
    &--deduct {
        background: #FFF5F5;
    }
    &--renew {
        background: #EBF8FF;
    }
    &--refund {
        background: #FEF3E2;
    }
    &--expire {
        background: #F7FAFC;
    }
    &--default {
        background: #F7FAFC;
    }
}

.mc-transactions__icon-text {
    font-size: 24px;
}

.mc-transactions__info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.mc-transactions__item-title {
    font-size: 15px;
    font-weight: 500;
    color: #1A202C;
}

.mc-transactions__item-time {
    font-size: 12px;
    color: #A0AEC0;
}

.mc-transactions__value {
    font-size: 16px;
    font-weight: 600;

    &--positive {
        color: #059669;
    }
    &--negative {
        color: #DC2626;
    }
}

.mc-transactions__empty {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 16px;
}

.mc-transactions__empty-text {
    font-size: 14px;
    color: #8A99B4;
}

.mc-transactions__loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 16px;
}

.mc-records__scroll {
    height: 400rpx;
    overflow: hidden;
}

.mc-records__value {
    font-size: 16px;
    font-weight: 600;

    &--positive {
        color: #059669;
    }
    &--negative {
        color: #DC2626;
    }
    &--pending {
        color: #F59E0B;
    }
}

.mc-records__icon-text {
    font-size: 24px;
}
</style>
