<template>
    <div class="page">
        <div class="eur-balance-card">
            <div class="balance-row">
                <img src="https://upload.wikimedia.org/wikipedia/commons/b/b7/Flag_of_Europe.svg" class="flag" />
                <span class="amount">0</span>
                <span class="unit">EUR</span>
            </div>
            <div class="eur-actions">
                <button class="action-btn" @click="goToGlobalRemit">{{ t('eur.globalRemit') }}</button>
            </div>
            <div class="balance-chart">
                <!-- <img src="../assets/img/remit.png" alt="chart" class="chart-img" /> -->
            </div>
        </div>
        <div class="record-title">{{ t('eur.transactionRecord') }}</div>
        <div class="record-list" v-if="transferList.length > 0">
            <div class="record-item" v-for="item in transferList" :key="item.id" @click="goToTransferDetail(item.id)">
                <i class="i-mdi-swap-horizontal"></i>
                <!-- <i class="i-mdi-reload"></i> -->
                <span>{{ t('eur.globalRemit') }}</span>
                <div>

                </div>
                <div class="record-amount-time">
                    <div class="record-amount">{{ item.amount }}</div>
                    <div class="record-time">{{ item.addTime }}</div>
                </div>

            </div>
        </div>
        <div class="record-list" v-else>
            <EmptyState icon="i-mdi-receipt-text-outline" text="暂无交易记录" />
        </div>
    </div>
</template>

<script setup lang="ts">
import { useI18n } from 'vue-i18n'
import { ucardApi } from '../api/ucard'
import EmptyState from '../components/EmptyState.vue'
import { TransferInfo } from '../api/ucard'
const { t } = useI18n()
const router = useRouter()
const goToGlobalRemit = () => {
    router.push('/eur/remit')
}
const transferList = ref<TransferInfo[]>([])
const getTransferList = async () => {
    try {
        const res = await ucardApi.transferList({ page: { current: 1, row: 100 } })
        if (res.code === 200) {
            transferList.value = res.data
        } else {
            transferList.value = []
        }
    } catch (error) {
        showToast(t('common.error'))
    }
}
const goToTransferDetail = (id: string) => {
    router.push(`/transfer/detail?id=${id}`)
}
onMounted(() => {
    getTransferList()
})
</script>

<style scoped lang="scss">
.eur-balance-card {
    position: relative;
    background: var(--action-bg);
    border-radius: 16px;
    padding: 45px 16px;
    margin-bottom: 24px;
    .balance-row {
        position: relative;
        z-index: 1;
        display: flex;
        align-items: center;
        .flag {
            width: 24px;
            height: 24px;
            border-radius: 50%;
        }
        .amount {
            font-size: var(--font-size-18);
            color: var(--white);
            margin-left: 16px;
        }
        .unit {
            margin-left: 4px;
            font-size: var(--font-size-10);
            color: var(--white);
        }
    }
    .eur-actions {
        position: relative;
        top: 24px;
        z-index: 1;
        margin-top: 16px;
        display: flex;
        gap: 12px;
        .action-btn {
            width: 100%;
            background: var(--main-yellow);
            color: #232323;
            border-radius: 16px;
            padding: 12px 24px;
            font-size: var(--font-size-14);
            font-weight: 600;
            cursor: pointer;
            border: none;
        }
    }
    .balance-chart {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: #222;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        .chart-img {
            width: 100%;
            height: 100%;
        }
    }
}
.record-title {
    font-size: var(--font-size-16);
    margin-bottom: 12px;
    color: var(--main-yellow);
}
.record-list {
    .record-item {
        display: flex;
        align-items: center;
        background: var(--action-bg);
        border-radius: 12px;
        padding: 12px 16px;
        margin-bottom: 10px;
        .i-mdi-reload,
        .i-mdi-swap-horizontal {
            font-size: 20px;
            margin-right: 10px;
            color: var(--main-yellow);
        }
        span {
            margin-right: 12px;
            font-size: var(--font-size-14);
        }
        .record-amount {
            color: var(--main-yellow);
            font-weight: 600;
            margin-bottom: 15px;
        }
        .record-time {
            color: #aaa;
            font-size: var(--font-size-12);
        }
        .record-amount-time {
            flex: 1;
            div {
                text-align: right;
            }
        }
    }
}
</style>
