<template>
    <div class="page">
        <div class="success-icon-wrap">
            <img v-if="detail?.status == 'B3'" src="@/assets/images/vector.png" alt="" />
            <img v-else src="@/assets/images/vector1.png" alt="" />
        </div>
        <StepList :current-step="currentStep" :options="stepOptions" />
        <div class="amount-title">{{ getStatus(detail?.status, true) }}</div>
        <div class="amount">{{ detail?.amount || 0 }} {{ detail?.currency || 'USD' }}</div>
        <div class="detail-card">
            <div class="detail-row one">
                <span class="label">{{ t('transfer-detail.status') }}</span>
                <span :class="['value', detail?.status == 'B3' ? 'success' : 'processing']">{{ getStatus(detail?.status, true) }}</span>
            </div>
            <div class="detail-row">
                <span class="label">{{ t('transfer-detail.orderNo') }}</span>
                <span class="value">{{ detail?.orderNo }}</span>
            </div>
            <div class="detail-row">
                <span class="label">{{ t('transfer-detail.amount') }}</span>
                <span class="value">{{ detail?.amount }}</span>
            </div>
            <div class="detail-row">
                <span class="label">{{ t('transfer-detail.currency') }}</span>
                <span class="value">{{ detail?.currency || '--' }}</span>
            </div>
            <div class="detail-row">
                <span class="label">{{ t('transfer-detail.relationship') }}</span>
                <span class="value">{{ relationshipOptions.find((item) => item.value === detail?.relationship)?.text || '--' }}</span>
            </div>
            <div class="detail-row">
                <span class="label">{{ t('transfer-detail.sourceFunds') }}</span>
                <span class="value">{{ sourceFundsOptions.find((item) => item.value === detail?.sourceFunds)?.text || '--' }}</span>
            </div>
            <div class="detail-row">
                <span class="label">{{ t('transfer-detail.mobile') }}</span>
                <span class="value">{{ detail?.mobile || '--' }}</span>
            </div>
            <div class="detail-row">
                <span class="label">{{ t('transfer-detail.email') }}</span>
                <span class="value">{{ detail?.email || '--' }}</span>
            </div>
            <div class="detail-row">
                <span class="label">{{ t('transfer-detail.country') }}</span>
                <span class="value">{{ detail?.country || '--' }}</span>
            </div>

            <div class="detail-row">
                <span class="label">{{ t('transfer-detail.addTime') }}</span>
                <span class="value">{{ detail?.addTime || '--' }}</span>
            </div>
            <div class="detail-row">
                <span class="label">{{ t('transfer-detail.payPurpose') }}</span>
                <span class="value">{{ payPurposeOptions.find((item) => item.value === detail?.payPurpose)?.text || '--' }}</span>
            </div>
            <div class="detail-row">
                <span class="label">{{ t('transfer-detail.postscript') }}</span>
                <span class="value">{{ detail?.postscript || '--' }}</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'
const router = useRouter()
import { ucardApi, TransferInfo } from '@/api/ucard'
const { t } = useI18n()
const route = useRoute()
const { id } = route.query as { id: string }
const detail = ref<TransferInfo | null>(null)
const step = ref(3)
const currentStep = ref(1)
const stepOptions = ref(['Transfer Apply', 'Processing', 'Success'])
const payPurposeOptions = ref([
    { text: t('eur-remit.item42'), value: 'PURCHASE_OF_GOODS_OR_SERVICES' },
    { text: t('eur-remit.item43'), value: 'FREIGHT_AND_TRANSPORTATION_COSTS' },
    { text: t('eur-remit.item44'), value: 'EDUCATION_EXPENSES' },
    { text: t('eur-remit.item45'), value: 'IMMIGRATION_INVESTMENT' },
    { text: t('eur-remit.item46'), value: 'CHARITABLE_DONATIONS' },
    { text: t('eur-remit.item47'), value: 'FAMILY_SUPPORT' },
    { text: t('eur-remit.item48'), value: 'DIVIDEND_OR_INTEREST_PAYMENTS' },
    { text: t('eur-remit.item49'), value: 'INTERNATIONAL_TRADE' },
])
const getTransferDetail = async () => {
    const res = await ucardApi.ucardTransferSingle({ id })
    res.data.currency = 'EUR'
    switch (res.data.status) {
        case 'B1':
            step.value = 1
            currentStep.value = 1
            break
        case 'B2':
            step.value = 2
            currentStep.value = 2
            break
        case 'B3':
            step.value = 3
            currentStep.value = 4
            break
        case 'B4':
            step.value = 3
            currentStep.value = 3
            break
        case 'B6':
            step.value = 3
            currentStep.value = 3
            break
        case 'B11':
            step.value = 6
            break
        case 'B12':
            step.value = 7
            break
        case 'B13':
            step.value = 8
            break
        case 'B15':
            step.value = 9
            break
    }
    detail.value = res.data
    stepOptions.value[1] = getStatus(res.data.status, true)
}
const getStatus = (status: string, isShowStep: boolean = false) => {
    console.log(status, 111)

    if (isShowStep) {
        return t('transfer-detail.' + status)
    }
    if (step.value >= 3) {
        switch (status) {
            case 'B1':
                return t('transfer-detail.B1')
            case 'B2':
                return t('transfer-detail.B2')
            case 'B3':
                return t('transfer-detail.B3')
            case 'B4':
                return t('transfer-detail.B4')
            case 'B6':
                return t('transfer-detail.B6')
            case 'B11':
                return t('transfer-detail.B11')
            case 'B12':
                return t('transfer-detail.B12')
            case 'B13':
                return t('transfer-detail.B13')
            case 'B15':
                return t('transfer-detail.B15')
            default:
                return '--'
        }
    } else {
        return t('transfer-detail.step3')
    }
}
const sourceFundsOptions = ref([
    { text: t('eur-remit.item34'), value: 'SAVINGS' },
    { text: t('eur-remit.item35'), value: 'SALARY' },
    { text: t('eur-remit.item36'), value: 'INVESTMENT' },
    { text: t('eur-remit.item37'), value: 'OTHER' },
])
const relationshipOptions = ref([
    { text: t('eur-remit.item26'), value: 'SELF' },
    { text: t('eur-remit.item21'), value: 'HUSBAND' },
    { text: t('eur-remit.item31'), value: 'WIFE' },
    { text: t('eur-remit.item16'), value: 'FATHER' },
    { text: t('eur-remit.item22'), value: 'MOTHER' },
    { text: t('eur-remit.item29'), value: 'SON' },
    { text: t('eur-remit.item15'), value: 'DAUGHTER' },
    { text: t('eur-remit.item27'), value: 'SISTER' },
    { text: t('eur-remit.item12'), value: 'BROTHER' },
    { text: t('eur-remit.item17'), value: 'FATHER_IN_LAW' },
    { text: t('eur-remit.item23'), value: 'MOTHER_IN_LAW' },
    { text: t('eur-remit.item28'), value: 'SISTER_IN_LAW' },
    { text: t('eur-remit.item13'), value: 'BROTHER_IN_LAW' },
    { text: t('eur-remit.item19'), value: 'GRAND_FATHER' },
    { text: t('eur-remit.item20'), value: 'GRAND_MOTHER' },
    { text: t('eur-remit.item24'), value: 'NEPHEW' },
    { text: t('eur-remit.item25'), value: 'NIECE' },
    { text: t('eur-remit.item30'), value: 'UNCLE' },
    { text: t('eur-remit.item14'), value: 'COUSIN' },
    { text: t('eur-remit.item18'), value: 'FRIEND' },
    { text: t('eur-remit.item32'), value: 'OTHER' },
])
onMounted(() => {
    getTransferDetail()
})
</script>

<style scoped lang="scss">
.page {
    padding-top: 0;
}
.success-icon-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    img {
        width: 100%;
        height: auto;
    }
}
.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;
    margin-bottom: 32px;
    flex-direction: column;
}
.detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 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;
}
.amount-title {
    margin-top: 32px;
    color: #474747;
    text-align: center;
    font-family: Roboto;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: 0.08px;
}
.one {
    border-bottom: 1px dashed #beb6b6;
}
.step {
    padding-top: 24px;
}
</style>
