<template>
    <div class="page">
        <div class="success-icon-wrap">
            <img src="@/assets/images/vector.png" alt="" />
        </div>
        <div class="amount">{{ transactionInfo?.amount || 0 }} {{ transactionInfo?.receivedCurrency || 'USD' }}</div>
        <div class="detail-card">
            <div class="detail-row one">
                <span class="label">{{ t('recharge-record-detail.p1') }}</span>
                <span :class="['value', transactionInfo?.status == '1' ? 'success' : 'processing']">{{ t('recharge-record-detail.p2') }}</span>
            </div>
            <div class="detail-row">
                <span class="label">{{ t('recharge-record-detail.p5') }}</span>
                <span class="value">{{ t('recharge-record-detail.p6') }}</span>
            </div>
            <div class="detail-row">
                <span class="label">{{ t('recharge-record-detail.p7') }}</span>
                <span class="value">{{ transactionInfo?.orderNo || '000072355723' }}</span>
            </div>
            <div class="detail-row">
                <span class="label">{{ t('recharge-record-detail.p8') }}</span>
                <span class="value">{{ transactionInfo?.cardNo || '3221 5845 5656 7549' }}</span>
            </div>
            <div class="detail-row">
                <span class="label">{{ t('recharge-record-detail.p9') }}</span>
                <span class="value">{{ transactionInfo?.receivedCurrency || 'USD' }}</span>
            </div>
            <div class="detail-row">
                <span class="label">{{ t('recharge-record-detail.p10') }}</span>
                <span class="value">{{ t('recharge-record-detail.p11') }}</span>
            </div>
            <div class="detail-row">
                <span class="label">{{ t('recharge-record-detail.p12') }}</span>
                <span class="value">{{ transactionInfo?.time || 'June 25, 2025, 15:20:23' }}</span>
            </div>
        </div>
        <div class="fixed-btn">
            <div class="cwg-button">
                <van-button
                    type="primary"
                    block
                    @click="
                        () => {
                            router.back()
                        }
                    "
                    >{{ t('recharge-record-detail.b1') }}</van-button
                >
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { useI18n } from 'vue-i18n'
import { useRoute } from 'vue-router'
import { ucardApi } from '@/api/ucard'
const router = useRouter()
const { t } = useI18n()
const route = useRoute()
const { orderNo } = route.query as { orderNo: string }
const transactionInfo = ref<TransactionInfo | null>(null)
const getTransactionInfo = async () => {
    const res = await ucardApi.ucardRechargeOrder({ orderNo })
    transactionInfo.value = res.data
}
onMounted(() => {
    getTransactionInfo()
})
</script>

<style scoped lang="scss">
.success-icon-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
}
.success-icon {
    display: block;
}
.detail-card {
    border-radius: 12px;
    background: #fff;
    box-shadow: 0px 4px 30px 0px rgba(0, 0, 0, 0.07);
    display: flex;
    padding: 24px 16px 28px 16px;
    flex-direction: column;
}
.detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0;
    font-size: 16px;
}
.detail-row:last-child {
    border-bottom: none;
}
.label {
    color: #8e8a8a;
    font-family: Roboto;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 20px;
    letter-spacing: 0.07px;
}
.value {
    color: #000;

    text-align: right;
    /* Title2 */
    font-family: Roboto;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 20px;
    letter-spacing: 0.07px;
}
.value.success {
    padding: 4px 8px;
    border-radius: 15px;
    background: rgba(76, 175, 80, 0.20);
    color: #4CAF50;
    font-family: Roboto;
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: 16px;
    letter-spacing: 0.06px;
}
.value.processing {
    padding: 4px 8px;
    border-radius: 15px;
    background: rgba(0, 157, 235, 0.2);
    color: #009deb;
    font-family: Roboto;
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: 16px;
    letter-spacing: 0.06px;
}
.amount {
    color: #1a1a1a;
    text-align: center;
    font-family: Roboto;
    font-size: 22px;
    font-style: normal;
    font-weight: 600;
    line-height: 28px;
    margin: 12px 0 32px 0;
}
.one {
    border-bottom: 1px dashed #beb6b6;
}
</style>
