<template>
    <div class="page">
        <div class="success-icon-wrap">
            <img src="@/assets/images/vector.png" alt="" />
        </div>
        <div class="detail-card">
            <div class="detail-row one">
                <span class="label">{{ t('card-transaction-detail.status') }}</span>
                <span class="value success">{{ transactionInfo?.tradeStatusStr }}</span>
            </div>
            <div class="detail-row">
                <span class="label">{{ t('card-transaction-detail.currency') }}</span>
                <span class="value">{{ transactionInfo?.currency }}</span>
            </div>
            <div class="detail-row">
                <span class="label">{{ t('card-transaction-detail.amount') }}</span>
                <span class="value">{{ transactionInfo?.amount }}</span>
            </div>
            <div class="detail-row">
                <span class="label">{{ t('card-transaction-detail.type') }}</span>
                <span class="value">{{ transactionInfo?.tradeTypeStr }}</span>
            </div>
            <div class="detail-row">
                <span class="label">{{ t('card-transaction-detail.desc') }}</span>
                <span class="value">{{ transactionInfo?.remark }}</span>
            </div>
            <div class="detail-row">
                <span class="label">{{ t('card-transaction-detail.time') }}</span>
                <span class="value">{{ transactionInfo?.businessDate }}</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 { id } = route.query as { id: string }
const transactionInfo = ref<TransactionInfo | null>(null)
const getTransactionInfo = async () => {
    const res = await ucardApi.cardTransacSingle({ id })
    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 {
    color: #1ed47f;
}
.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>
