<template>
    <div class="page">
        <div class="card-swiper">
            <div class="swiper-container" @touchstart="handleTouchStart" @touchmove="handleTouchMove" @touchend="handleTouchEnd">
                <div
                    class="card-wrapper"
                    v-for="(card, index) in cardList"
                    :key="card.id"
                    :style="{ transform: `translateX(${(index - currentIndex) * 100 + offsetX}%)` }"
                >
                    <div class="card-info" @click.stop="(e: MouseEvent) => toggleCardNo(card.id, e)" :class="{ flipping: isFlipping[card.id] }">
                        <p class="card-name">Virtual</p>
                        <img class="card-type" src="@/assets/images/c-type.png" alt="" srcset="" />
                        <img class="logo" src="@/assets/images/logo1.png" alt="" srcset="" />
                        <template v-if="showCardNo[card.id]">
                            <div class="number">
                                {{ card?.cardNo }}
                                <span class="copy" @click.stop="cardCopy(card.cardNo, 'cardNo')"><icon name="copy" :size="23" color="" /></span>
                            </div>
                            <div class="card-b">
                                <div class="valid">
                                    <span class="lable">{{ t('cards.p13') }}</span>
                                    <span>{{ card.firstName }} {{ card.lastName }}</span>
                                </div>
                                <div class="valid">
                                    <span class="lable">{{ t('cards.p14') }}</span>
                                    <span>{{ card.expire }}</span>
                                </div>
                                <div class="valid">
                                    <span class="lable">CVV</span>
                                    <div class="cvv">
                                        {{ card.cvv }}
                                        <span class="copy" @click.stop="cardCopy(card.cvv, 'cvv')"><icon name="copy" :size="23" color="" /></span>
                                    </div>
                                </div>
                            </div>
                        </template>
                        <template v-else>
                            <div class="zw">**** 7549</div>
                        </template>

                        <img
                            v-if="card.status != 1"
                            src="https://upload.wikimedia.org/wikipedia/commons/a/a4/Flag_of_the_United_States.svg"
                            class="flags"
                            @click.stop="ucardActivate(card.id)"
                        />
                    </div>
                </div>
            </div>
            <div class="swiper-indicators" v-if="cardList.length > 1">
                <div
                    v-for="(card, index) in cardList"
                    :key="card.id"
                    class="indicator-dot"
                    :class="{ active: index === currentIndex }"
                    @click="currentIndex = index"
                ></div>
            </div>
        </div>
        <div class="actions" v-if="currentCard.isOk">
            <div class="action-btn" @click="goToCardRecharge">
                <icon name="icon_recharge" :size="28" color="#EA002A" />
                <span>{{ t('cards.recharge') }}</span>
            </div>
            <div class="action-btn" @click="goToFindPassword">
                <icon name="icon_card password reset" :size="28" color="#EA002A" />
                <span>{{ t('cards.findPassword') }}</span>
            </div>

            <div class="action-btn" @click="goToFreezeCard" v-if="currentCard.freezeStatus === 2">
                <icon name="icon_unfreeze" :size="28" color="#EA002A" />
                <span>{{ t('cards.unfreezeCard') }}</span>
            </div>
            <div class="action-btn" @click="goToFreezeCard" v-else>
                <icon name="icon_freeze" :size="28" color="#EA002A" />
                <span>{{ t('cards.freezeCard') }}</span>
            </div>
        </div>
        <template v-if="!currentCard.isOk">
            <div class="balance-content1">{{ t('apply-record-detail.p1') }}</div>
            <div class="g">
                <img src="../assets/images/apply-record-1.png" alt="" />
                <div class="g-l">
                    <div class="g-item">
                        <div class="label a1">{{ currentCard.cardName }}</div>
                    </div>
                    <div class="g-item">
                        <div class="label">{{ t('apply-record-detail.p2') }}</div>
                        <div :class="statusClass(currentCard.kycStatus)">{{ statusMap[currentCard.kycStatus] }}</div>
                    </div>
                    <div class="g-item" v-if="currentCard.kycStatus == 2 && (currentCard.applyStatus === 0 || currentCard.applyStatus === 1)">
                        <div class="label">{{ t('apply-record-detail.p7') }}</div>
                        <div :class="statusClass1(currentCard.applyStatus)">{{ applyStatusMap[currentCard.applyStatus] }}</div>
                    </div>
                </div>
            </div>

            <div class="cwg-button cwg-btn">
                <van-button
                    type="primary"
                    block
                    v-if="currentCard.kycStatus === 2 && currentCard.applyStatus === null"
                    @click="handleApply(2, currentCard)"
                    >{{ t('cards.p6') }}</van-button
                >
                <van-button type="primary" block v-if="[null, -1, 1, 3].includes(currentCard.kycStatus)" @click="handleApply(3, currentCard)">{{
                    t('cards.p7')
                }}</van-button>
            </div>
        </template>
        <template v-if="currentCard.isOk">
            <div class="balance-wrap" v-if="balance.length > 0">
                <div class="balance-content">{{ t('cards.currency') }}</div>
            </div>
            <div class="balance-wrap">
                <div class="global-con-l" @click="setModelValue">
                    <img :src="imageSrc(currency)" alt="" srcset="" />
                    <div class="r">
                        <p>{{ currency }}</p>
                    </div>
                    <icon name="icon_dropdown" :size="24" />
                </div>
                <div class="balance">{{ amount }}</div>
            </div>
            <div class="trans-header">
                <div class="trans-title">{{ t('cards.transactions') }}</div>
                <i class="i-mdi-calendar-month-outline" @click="showDatePicker = true" />
                <van-calendar
                    v-model:show="showDatePicker"
                    :min-date="minDate"
                    :title="t('cards.selectDateRange')"
                    :subtitle="t('cards.selectDate')"
                    :max-date="maxDate"
                    :show-mark="false"
                    color="var(--main-yellow)"
                    type="range"
                    :show-confirm="false"
                    @cancel="showDatePicker = false"
                    :formatter="formatter"
                    @confirm="onConfirmStart"
                />
            </div>

            <div class="tab">
                <div class="item" :class="{ active: jiluIndex === 0 }" @click="jiluIndex = 0">{{ t('cards.rechargeB1') }}</div>
                <div class="item" :class="{ active: jiluIndex === 1 }" @click="jiluIndex = 1">{{ t('cards.transferB2') }}</div>
            </div>
            <template v-if="jiluIndex === 0">
                <div class="recharge" v-if="recharge.length > 0">
                    <div v-for="i in recharge" :key="i.id" class="transaction" @click="goToTransactionDetail1(i)">
                        <div class="trans-icon">
                            <div class="trans-icon-inner">$</div>
                        </div>
                        <div class="trans-left">
                            <div class="trans-type">{{ i.typeDesc }}</div>
                            <div class="trans-desc">{{ statusRechargeMap[i.status] }}</div>
                        </div>
                        <div class="trans-right">
                            <div class="trans-amount">{{ i.amount }} {{ i.currency }}</div>
                            <div class="trans-date">{{ i.time }}</div>
                        </div>
                    </div>
                </div>
                <div class="recharge" v-else>
                    <EmptyState :title="t('empty-state.t2')" :text="t('empty-state.c2')" />
                </div>
            </template>
            <template v-else>
                <div class="transactions" v-if="transactions.length > 0">
                    <div v-for="t in transactions" :key="t.id" class="transaction" @click="goToTransactionDetail(t)">
                        <div class="trans-icon">
                            <div class="trans-icon-inner">
                                <i class="i-mdi-cart-outline"></i>
                            </div>
                        </div>
                        <div class="trans-left">
                            <div class="trans-type">{{ t.tradeTypeStr }}</div>
                            <div class="trans-desc">{{ t.remark }}</div>
                        </div>
                        <div class="trans-right">
                            <div class="trans-amount">{{ t.amount }} {{ t.currencyTxn }}</div>
                            <div class="trans-date">{{ t.businessDate }}</div>
                        </div>
                    </div>
                </div>
                <EmptyState v-if="transactions.length == 0" :title="t('empty-state.t1')" :text="t('empty-state.c1')" />
            </template>
        </template>
        <CurrencySelect :showSearch="true" :options="balance" v-model="modelValue" @select="changeSelect" />
    </div>
</template>

<script setup lang="ts">
import EmptyState from '@/components/EmptyState.vue'
import { useI18n } from 'vue-i18n'
import { ucardApi } from '@/api/ucard'
import { useRouter } from 'vue-router'
import type { CardInfo, TransactionInfo } from '@/api/ucard'
import { showToast } from 'vant'
import dayjs from 'dayjs'
const router = useRouter()
import useUserStore from '@/stores/use-user-store'
const userStore = useUserStore()
const cardList = computed(() => userStore.userCard)
const userInfo = computed(() => userStore.userInfo)
const { t } = useI18n()
const currentCard = ref<CardInfo | null>({})
const balance = ref<{ amount: number; currency: string; value: string }[]>([
    {
        amount: 0,
        currency: 'USD',
        value: 'USD',
    },
])
const transactions = ref<TransactionInfo[]>([])
const showCardNo = ref<{ [key: string]: boolean }>({})
const isFlipping = ref<{ [key: string]: boolean }>({})
const currentIndex = ref(0)
const startX = ref(0)
const offsetX = ref(0)
const isDragging = ref(false)
const images = import.meta.glob('@/assets/images/currency/*.png', { eager: true })

const imageSrc = (currency: string) => {
    return images[`/src/assets/images/currency/${currency}.png`]?.default || fallbackImg
}
const jiluIndex = ref(0)

import copyIcon from '@/assets/images/success.png'
import errorIcon from '@/assets/images/error.png'
const cardCopy = (content, type) => {
    let message
    if (type == 'cardNo') {
        message = t('common.copy1')
    } else if (type == 'cvv') {
        message = t('common.copy2')
    }
    if (navigator.clipboard && window.isSecureContext) {
        navigator.clipboard
            .writeText(content)
            .then(() => {
                showToast({
                    message,
                    icon: copyIcon,
                    className: 'custom-toast',
                })
            })
            .catch((err) => {
                showToast({
                    message: t('common.copy3'),
                    icon: errorIcon,
                    className: 'custom-toast',
                })
            })
    } else {
        const textarea = document.createElement('textarea')
        textarea.value = content
        textarea.setAttribute('readonly', '')
        textarea.style.position = 'absolute'
        textarea.style.left = '-9999px'
        document.body.appendChild(textarea)
        textarea.select()
        try {
            document.execCommand('copy')
            showToast({
                message,
                icon: copyIcon,
                className: 'custom-toast',
            })
        } catch (err) {
            showToast({
                message: t('common.copy3'),
                icon: errorIcon,
                className: 'custom-toast',
            })
        }
        document.body.removeChild(textarea)
    }
}
const currency = ref('USD')
const amount = ref(0)
const modelValue = ref(false)
const setModelValue = () => {
    modelValue.value = true
}
const changeSelect = (e) => {
    amount.value = e.amount
    currency.value = e.currency
}
const showDatePicker = ref(false)
const dateRange = ref<[string, string] | undefined>(undefined)
dateRange.value = ['', '']
const minDate = new Date(new Date().getFullYear() - 10, 0, 1)
const maxDate = new Date(new Date().getFullYear() + 10, 0, 1)
const onConfirmStart = (value: [string, string]) => {
    dateRange.value = ['', '']
    if (value && value.length === 2) {
        dateRange.value = value
    }
    showDatePicker.value = false
    handleDateRangeChange()
}

const formatter = (day: any) => {
    if (day.type === 'start') {
        day.bottomInfo = t('cards.start')
    } else if (day.type === 'end') {
        day.bottomInfo = t('cards.end')
    } else {
        day.bottomInfo = ''
    }
    return day
}

const ucardActivate = async (id: string) => {
    router.push({
        path: '/card/activation',
        query: {
            id,
        },
    })
}

const recharge = ref<Transaction[]>([])

// 获取充值记录
async function getRechargeList() {
    try {
        recharge.value = []
        if (!currentCard.value?.cardNo) return
        const res = await ucardApi.rechargeList({
            cardNo: currentCard.value?.cardNo,
            page: { current: 1, row: 4 },
        })
        if (res.code === 200 && res.data) {
            recharge.value = res.data
        }
    } catch (error) {
        recharge.value = []
        showToast(error as string)
    }
}
const statusRechargeMap = {
    '1': t('card-recharge.rechargeSuccess'),
    '2': t('card-recharge.rechargeFailed'),
    '3': t('card-recharge.rechargePending'),
}

const goToTransactionDetail1 = (i: TransactionInfo) => {
    router.push({
        path: '/recharge/record/detail',
        query: {
            orderNo: i.orderNo,
        },
    })
}

// 获取交易记录
const getTransactions = async () => {
    try {
        transactions.value = []
        if (!currentCard.value?.cardNo) return
        const res = await ucardApi.transactionsList({
            beginDate: dateRange.value?.[0] ? dayjs(dateRange.value?.[0]).format('YYYY-MM-DD') : undefined,
            endDate: dateRange.value?.[1] ? dayjs(dateRange.value?.[1]).format('YYYY-MM-DD') : undefined,
            cardNo: currentCard.value?.cardNo,
            page: {
                current: 1,
                row: 10,
            },
        })
        transactions.value = res.data && Array.isArray(res.data) ? res.data : []
    } catch (error: any) {
        showToast(error?.message || String(error))
        transactions.value = []
    }
}

const getBalance = async () => {
    try {
        balance.value = [
            {
                amount: 0,
                currency: 'USD',
                value: 'USD',
            },
        ]
        if (!currentCard.value?.cardNo) return
        const res = await ucardApi.ucardBalance({
            cardNo: currentCard.value?.cardNo,
            uniqueId: currentCard.value?.uniqueId,
        })
        res.data.map((item: any) => {
            item.value = item.currency
        })

        if (res.code == 200) {
            res.data.push({
                amount: 0,
                currency: 'EUR',
                value: 'EUR',
            })
            balance.value = res.data
            if (balance.value.length > 0) {
                currency.value = balance.value[0].currency
                amount.value = balance.value[0].amount
            } else {
                currency.value = 'USD'
                amount.value = 0
            }
        } else {
            balance.value = [
                {
                    amount: 0,
                    currency: 'USD',
                    value: 'USD',
                },
            ]
        }
    } catch (error: any) {
        showToast(error?.message || String(error))
        balance.value = [
            {
                amount: 0,
                currency: 'USD',
                value: 'USD',
            },
        ]
    }
}

const handleDateRangeChange = () => {
    if (currentCard.value) {
        getTransactions()
    }
}

const statusMap: Record<string, string> = {
    null: t('kyc.statusDesc'),
    '-1': t('kyc.statusDesc'),
    '1': t('kyc.statusDesc2'),
    '2': t('kyc.statusDesc3'),
    '3': t('kyc.statusDesc4'),
}
const applyStatusMap: Record<string, string> = {
    '0': t('apply-record-detail.p8'),
    '1': t('apply-record-detail.p6'),
}
function statusClass(status: number) {
    switch (status) {
        case 2:
            return 'status-default status-success'
        case 3:
            return 'status-default status-error'
        default:
            return 'status-default'
    }
}
function statusClass1(status: number) {
    switch (status) {
        case 1:
            return 'status-default status-success'
        default:
            return 'status-default'
    }
}
const handleApply = (type: number, item: any) => {
    if (type == 1) {
        router.push({
            path: '/apply/record/detail',
            query: {
                cardTypeId: item.cardTypeId,
            },
        })
    } else if (type == 2) {
        ucardApply(item)
    } else if (type == 3) {
        router.push({
            path: '/kyc',
            query: {
                cardTypeId: item.cardTypeId,
                type: 3,
            },
        })
    }
}

const ucardApply = async (item: any) => {
    const res = await ucardApi.ucardApply({
        cardTypeId: item.cardTypeId,
        uniqueId: userInfo.value.customInfo.uniqueId,
    })
    if (res.code === 200) {
        showToast(t('kyc.kycSuccess2'))
    }
}

watch(
    currentIndex,
    (newIndex) => {
        if (cardList.value[newIndex]) {
            currentCard.value = cardList.value[newIndex]
            if (cardList.value[newIndex].isOk) {
                getTransactions()
                getRechargeList()
                getBalance()
            }
        }
    },
    { immediate: true },
)
watch(
    jiluIndex,
    (newIndex) => {
        console.log('jiluIndex changed:', newIndex)
        if (newIndex === 0) {
            getRechargeList()
        } else {
            getTransactions()
        }
    },
    // { immediate: true },
)

const toggleCardNo = (cardId: string, event: MouseEvent) => {
    if (!cardId) {
        return
    }
    event.stopPropagation()
    isFlipping.value[cardId] = !isFlipping.value[cardId]
    showCardNo.value[cardId] = !showCardNo.value[cardId]
}

const handleTouchStart = (e: TouchEvent) => {
    startX.value = e.touches[0].clientX
    isDragging.value = true
}

const handleTouchMove = (e: TouchEvent) => {
    if (!isDragging.value) return
    const currentX = e.touches[0].clientX
    const diff = currentX - startX.value
    const containerWidth = document.querySelector('.swiper-container')?.clientWidth || 0
    if (currentIndex.value === 0 && diff > 0) {
        offsetX.value = (diff / containerWidth) * 30
    } else if (currentIndex.value === cardList.value.length - 1 && diff < 0) {
        offsetX.value = (diff / containerWidth) * 30
    } else {
        offsetX.value = (diff / containerWidth) * 100
    }
}

const handleTouchEnd = () => {
    isDragging.value = false
    if (Math.abs(offsetX.value) > 0.2) {
        if (offsetX.value > 0 && currentIndex.value > 0) {
            currentIndex.value--
        } else if (offsetX.value < 0 && currentIndex.value < cardList.value.length - 1) {
            currentIndex.value++
        }
        cardList.value.forEach((card) => {
            showCardNo.value[card.id] = false
        })
    }
    offsetX.value = 0
}

function goToCardRecharge() {
    if (currentCard.value?.status != 1) {
        showToast('请先激活银行卡')
        return
    }
    router.push({
        path: '/card/recharge',
        query: {
            id: currentCard.value?.id,
        },
    })
}

function goToFindPassword() {
    if (currentCard.value?.status != 1) {
        showToast('请先激活银行卡')
        return
    }
    router.push({
        path: '/find/password',
        query: {
            cardNo: currentCard.value?.cardNo,
            cardTypeId: currentCard.value?.cardTypeId,
        },
    })
}
// 冻结卡片/解冻卡片
async function goToFreezeCard() {
    if (currentCard.value?.status != 1) {
        showToast('请先激活银行卡')
        return
    }
    try {
        switch (currentCard.value?.freezeStatus) {
            case 1:
                let res = await ucardApi.ucardFreeze({ cardNo: currentCard.value?.cardNo, uniqueId: currentCard.value?.uniqueId })
                if (res.code === 200) {
                    currentCard.value.freezeStatus = 2
                    showToast('冻结成功')
                } else {
                    showToast(res.msg)
                }
                break
            case 2:
                let res1 = await ucardApi.ucardUnfreeze({ cardNo: currentCard.value?.cardNo, uniqueId: currentCard.value?.uniqueId })
                if (res1.code === 200) {
                    currentCard.value.freezeStatus = 1
                    showToast('解冻成功')
                } else {
                    showToast(res1.msg)
                }
                break
        }
    } catch (error) {
        showToast(t('common.error'))
    }
}

function goToTransactionDetail(transaction: TransactionInfo) {
    router.push({
        path: '/card/transaction/detail',
        query: {
            id: transaction.id,
        },
    })
}
onMounted(async () => {
    cardList.value.forEach((card) => {
        showCardNo.value[card.id] = false
        isFlipping.value[card.id] = false
    })
})
</script>

<style scoped lang="scss">
.page {
    padding: 0 16px 70px 16px;
}
.card-wrapper {
    position: absolute;
    width: 100%;
    height: 100%;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}

.card-info {
    background: url(/src/assets/images/visa1.png) no-repeat center center;
    background-size: cover;
    border-radius: 16px;
    padding: 16px;
    color: var(--main-yellow);
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: baseline;
    flex-wrap: wrap;
    /* transform-style: preserve-3d;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); */
    /* flex-direction: column; */

    .logo {
        width: 120px;
        height: auto;
        margin-bottom: 16px;
    }
    .card-type {
        width: 74px;
        height: 39px;
        position: absolute;
        bottom: 16px;
        right: 16px;
        z-index: 1;
    }
    .card-name {
        position: absolute;
        top: 16px;
        right: 16px;
        font-size: var(--font-size-14);
        font-weight: 500;
        color: #fff;
        font-family: Rubik;
    }

    &.flipping {
        transform: rotateX(360deg);
    }
    .zw {
        position: absolute;
        left: 16px;
        bottom: 16px;
        color: #fff;
        font-family: Rubik;
        font-size: 12px;
        font-style: normal;
        font-weight: 700;
        display: flex;
        align-items: center;
    }

    .card-b {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 16px;
        span {
            display: block;
        }
        .valid {
            font-size: var(--font-size-14);
            font-weight: 500;
            color: var(--black);
            gap: 8px;
            line-height: 20px;
        }
        .lable {
            font-size: var(--font-size-10);
            font-weight: 400;
        }
        .cvv {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: var(--font-size-14);
            font-weight: 500;
            color: var(--black);
            .copy,
            .icon {
                display: flex;
            }
        }
    }

    .copy {
        width: 18px;
        height: 18px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.6);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        color: #000;
    }
}

.card-front,
.card-back {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 24px 20px 16px 20px;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.card-back {
    transform: rotateY(180deg);
}

.owner {
    font-size: var(--font-size-14);
    line-height: 2;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;

    i {
        font-size: var(--font-size-18);
        color: var(--main-yellow);
    }
}

.number {
    color: var(--black);
    font-size: var(--font-size-18);
    font-weight: 500;
    line-height: 3;
    letter-spacing: 2px;
    margin: 20px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.actions {
    display: flex;
    justify-content: space-between;
    margin: 20px 0 16px 0;
}

.action-btn {
    color: var(--white);
    border: none;
    border-radius: 12px;
    padding: 0 12px;
    font-size: var(--font-size-14);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    transition: all 0.3s ease;
    text-align: center;
    color: #1a1a1a;
    width: 100px;
    height: 100px;
    flex-shrink: 0;
    border-radius: 15px;
    box-shadow: 0px 5px 30px 0px rgba(5, 0, 1, 0.05);
    .icon {
        margin: 16px 0 4px 0;
    }
    span {
        line-height: 20px;
    }
}

.balance-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 24px 0;
    font-size: var(--font-size-14);
}

.balance-content {
    font-size: var(--font-size-20);
    color: var(--white);
    font-weight: bold;
}

.balance-title {
    font-size: var(--font-size-12);
    color: var(--white);
}

.currency {
    display: flex;
    align-items: center;
    font-size: var(--font-size-14);
    margin-right: 12px;
    color: var(--white);
}

.flag {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    margin-right: 6px;
}

.balance {
    font-size: var(--font-size-14);
    font-weight: bold;
    color: var(--white);
}

.transactions {
    border-radius: 16px;
    margin-bottom: 16px;
    padding-bottom: 16px;
}
.tab {
    display: flex;
    width: 380px;
    align-items: center;
    gap: 16px;
    .item {
        display: flex;
        height: 36px;
        padding: 8px 16px;
        justify-content: center;
        align-items: center;
        gap: 10px;
        border-radius: 50px;
        border: 1px solid #beb6b6;
        background: #fff;
        color: #1a1a1a;
        font-family: Roboto;
        font-size: 16px;
        font-style: normal;
        font-weight: 600;
        line-height: 24px;
    }
    .active {
        background: #ff4766;
        color: #fff;
        border: none;
    }
}
.trans-icon {
    width: 48px;
    height: 48px;
    display: flex;
    background: var(--main-bg);
    box-shadow: 0 4px 12px rgba(214, 255, 0, 0.1);
    border-radius: 8px;
    margin-right: 12px;
    align-items: center;
    justify-content: center;
    .trans-icon-inner {
        width: 48px;
        height: 48px;
        background: rgba(212, 206, 206, 0.24);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    i {
        color: #000;
        width: 24px;
        height: 24px;
        border-radius: 50%;
    }
}

.trans-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 32px 0;
    color: var(--white);
    i {
        font-size: var(--font-size-20);
        cursor: pointer;
    }
}
::v-deep .van-calendar {
    background: var(--action-bg);
}
::v-deep .van-calendar__month-mark {
    display: none;
}
::v-deep .van-calendar__header-subtitle {
    color: var(--white);
}
::v-deep .van-calendar__header-title {
    color: var(--white);
}
::v-deep .van-calendar__month-title {
    color: var(--main-yellow);
}

.trans-title {
    font-size: var(--font-size-20);
    color: var(--white);
    font-weight: bold;
}

.date-field {
    width: 200px;

    :deep(.van-field__control) {
        color: var(--white);
    }

    :deep(.van-field__placeholder) {
        color: var(--gray);
    }
}

:deep(.van-popup) {
    background: var(--action-bg);
}

:deep(.van-picker__toolbar) {
    background: var(--action-bg);
    border-bottom: 1px solid var(--border);
}

:deep(.van-picker__title) {
    color: var(--white);
}

:deep(.van-picker__confirm) {
    color: var(--main-yellow);
}

:deep(.van-picker__cancel) {
    color: var(--gray);
}

:deep(.van-picker-column) {
    color: var(--white);
}

:deep(.van-picker-column__item) {
    color: var(--white);
}

:deep(.van-picker-column__item--selected) {
    color: var(--main-yellow);
}

.transaction {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    /* border-bottom: 1px solid var(--border); */
    font-size: var(--font-size-16);
}

.transaction:last-child {
    border-bottom: none;
}

.trans-left {
    width: 200px;
}

.trans-right {
    width: 100px;

    div {
        text-align: right;
    }
}

.trans-type {
    color: var(--white);
    font-size: var(--font-size-16);
    font-weight: 600;
    line-height: 2;
}

.trans-desc {
    font-size: var(--font-size-12);
    color: var(--gray);
}

.trans-amount {
    font-size: var(--font-size-16);
    font-weight: 600;
    color: var(--white);
    line-height: 2;
}

.trans-date {
    color: var(--gray);
    font-size: var(--font-size-12);
}

.card-swiper {
    width: 90%;
    margin: 20px 5% 0 5%;
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    padding-bottom: 5px;
}

.swiper-container {
    position: relative;
    width: 100%;
    height: 219px;
    touch-action: pan-y pinch-zoom;
    user-select: none;
}

.card-info {
    position: absolute;
    width: 100%;
    height: 100%;
    transition: transform 0.3s ease;
    will-change: transform;
}

.swiper-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 12px;
    gap: 16px;
}

.swiper-btn {
    background: var(--action-bg);
    border: none;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--main-yellow);

    &:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }

    i {
        font-size: var(--font-size-20);
    }
}

.swiper-dots {
    display: flex;
    gap: 8px;
}

.dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--action-bg);
    cursor: pointer;
    transition: all 0.3s ease;

    &.active {
        background: var(--main-yellow);
        transform: scale(1.2);
    }
}

.swiper-indicators {
    display: flex;
    justify-content: center;
    margin-top: 16px;
    gap: 8px;
}

.indicator-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--action-bg);
    cursor: pointer;
    transition: all 0.3s ease;

    &.active {
        background: var(--main-yellow);
        transform: scale(1.2);
    }
}
.flags {
    width: 20px;
    height: 20px;
    cursor: pointer;
    position: absolute;
    top: 10px;
    right: 10px;
}

.balance-content1 {
    margin-bottom: 20px;
    font-size: var(--font-size-20);
    color: var(--white);
    font-weight: bold;
}
.cwg-btn {
    margin-top: 36px;
}
.global-con-l {
    display: flex;
    width: 164px;
    padding: 12px 16px;
    align-items: center;
    gap: 12px;
    border-radius: 12px;
    box-shadow: 0px 5px 30px 0px rgba(5, 0, 1, 0.05);
    color: var(--white);
    p {
        color: #000;
        font-family: Roboto;
        font-size: 16px;
        font-style: normal;
        font-weight: 600;
        line-height: 24px;
    }
    img {
        width: 36px;
        height: 36px;
        border: 1px solid #f4f4f4;
        border-radius: 50%;
    }
}
.custom-toast {
    background: rgba(0, 0, 0, 0) !important;
    color: #fff;
    font-size: 14px;
    padding: 10px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 8px;

    .van-icon {
        width: 24px;
        height: 24px;
    }
    .van-icon--copy {
        color: #fff;
    }
}
</style>
