<template>
    <div class="page">
        <div class="wallet-header">
            <span>{{ t('wallet.title') }}</span>
        </div>
        <div class="wallet-banner">
            <div class="banner-title">{{ t('wallet.p1') }}</div>
            <div class="balance">
                <div class="balance-item">
                    <div class="r l" @click="setModelValue1">
                        <img :src="imageSrc(balance)" alt="" srcset="" />
                        <span>{{ balance }} {{ t('wallet.p2') }}</span>
                        <icon name="icon_dropdown" :size="24" />
                    </div>
                    <div class="r">
                        <span>$ {{ currencyList[0]?.amount }}</span>
                        <span class="decimal">{{ currencyList[0]?.decimal }}</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="wallet-page">
            <div class="global-title">{{ t('wallet.p3') }}</div>
            <div class="global-con">
                <div class="global-con-l">
                    <img src="@/assets/images/currency/USD.png" alt="" srcset="" />
                    <div class="r">
                        <p>USD</p>
                    </div>
                </div>
                <icon name="icon_transfer" :size="23" color="#1a1a1a" />
                <div class="global-con-r" @click="setModelValue">
                    <img :src="imageSrc(currency)" alt="" srcset="" />
                    <div class="r">
                        <p>{{ currency }}</p>
                    </div>
                    <icon name="icon_dropdown" :size="24" />
                </div>
            </div>

            <div class="cwg-button">
                <van-button type="primary" block @click="goToGlobalRemit">{{ t('eur.globalRemit') }}</van-button>
            </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 :title="t('empty-state.t1')" :text="t('empty-state.c1')" />
            </div>
        </div>
        <CurrencySelect :showSearch="true" :options="bankConfigList" v-model="modelValue" @select="changeSelect" />
        <CurrencySelect :showSearch="true" :options="bankConfigList" v-model="modelValue1" @select="changeSelect1" />
    </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'
import { useI18n } from 'vue-i18n'
import { userApi } from '@/api/user'
import { ucardApi } from '@/api/ucard'
const { t } = useI18n()
const router = useRouter()
const currency = ref('EUR')
const balance = ref('USD')
const modelValue = ref(false)
const modelValue1 = ref(false)
const currencyList = ref([])
const allAmount = ref(0)
const bankConfigList = ref([])
const getBalance = async () => {
    try {
        const res = await userApi.walletBalance()
        const { amount, decimal } = splitNumber(res.data)

        allAmount.value = res.data
        currencyList.value.push({
            name: 'USD',
            amount,
            decimal,
        })
    } catch (error) {}
}
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 splitNumber = (n) => {
    if (
        n === undefined ||
        n === null ||
        n === 0 ||
        (typeof n !== 'number' && typeof n !== 'string') ||
        (typeof n === 'string' && !/^\d+(\.\d+)?$/.test(n))
    ) {
        return { amount: 0, decimal: '' }
    }
    const str = n.toString()
    if (!str.includes('.')) {
        return { amount: str, decimal: '' }
    }
    const [int, dec] = str.split('.')
    return {
        amount: int + '.',
        decimal: dec || '',
    }
}

const setModelValue = () => {
    modelValue.value = true
}
const setModelValue1 = () => {
    return
    modelValue1.value = true
}
const goToGlobalRemit = () => {
    if (allAmount.value >= 100) {
        router.push('/eur/remit?currency=' + currency.value + '&allAmount=' + allAmount.value+ '&currentStep=1')
        return
    } else {
        showToast(t('eur.p9', { max: 100 }))
    }
}
const changeSelect = (e) => {
    currency.value = e.value
}
const changeSelect1 = (e) => {
    balance.value = e.value
}

const loadBankConfigList = async () => {
    try {
        const res = await ucardApi.ucardBanks({})
        if (res && (res.code === 0 || res.code === 200) && Array.isArray(res.data)) {
            bankConfigList.value = res.data.map((i) => {
                return { currency: i.currency, text: i.countryName, value: i.currency }
            })
        }
    } catch (error) {
        bankConfigList.value = []
    }
}
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(() => {
    loadBankConfigList()
    getTransferList()
    getBalance()
})
</script>

<style scoped lang="scss">
.page {
    padding: 0 0 120px 0;
    box-sizing: border-box;
    min-height: 100vh;
    background: var(--main-bg);
}
.wallet-page {
    padding: 0 16px;
    box-sizing: border-box;
}
.wallet-header {
    height: 60px;
    width: 100%;
    background: linear-gradient(90deg, #ea002a 0%, #eb4e6b 100%);
    position: fixed;
    top: 0;
    left: 0;
    text-align: left;
    font-size: var(--font-size-22);
    color: var(--black);
    font-weight: 700;
    padding: 10px 0 10px 16px;
    display: flex;
    align-items: center;
}
.banner-title {
    color: #fff;
    font-family: Roboto;
    font-size: 22px;
    font-style: normal;
    font-weight: 600;
    line-height: 28px;
    padding: 12px 0 16px 0;
}
.wallet-banner {
    background: linear-gradient(90deg, #ea002a 0%, #eb4e6b 100%);
    margin-bottom: 20px;
    padding: 0 16px 32px 16px;
    color: #fff;
    .balance {
        display: flex;
        width: 100%;
        justify-content: space-between;
        align-items: center;
    }
    .balance-item {
        width: 100%;
        display: flex;
        padding: 0.426667rem 0.853333rem;
        justify-content: center;
        align-items: center;
        gap: 16px;
        border-radius: 0.32rem;
        border: 1px solid var(--Netural-color-content-color-stoke, #f4f4f4);
        background: #fff;
        color: var(--white);
        flex-direction: column;
        .r {
            display: flex;
            justify-content: center;
            align-items: flex-end;
        }
        span {
            color: #000;
            font-family: Roboto;
            font-size: 24px;
            font-style: normal;
            font-weight: 600;

            text-align: left;
        }
        .decimal {
            color: #1a1a1a;
            font-family: Roboto;
            font-size: 14px;
            font-style: normal;
            font-weight: 600;
            letter-spacing: 0.07px;
        }
        .l {
            span {
                color: #474747;
                font-size: 16px;
                line-height: 24px;
            }
        }
        img {
            width: 28px;
            height: 28px;
            margin-right: 12px;
            display: inline-block;
        }
    }
}

.global-title {
    margin: 32px 0 24px 0;
    color: #000;
    font-family: Roboto;
    font-size: 22px;
    font-style: normal;
    font-weight: 600;
    line-height: 28px;
}
.global-con {
    display: flex;
    width: 100%;
    margin: 24px 0;
    align-items: center;
    justify-content: space-around;
    gap: 24px;
    color: #1a1a1a;
    .global-con-l,
    .global-con-r {
        display: flex;
        width: 164px;
        padding: 16px;
        height: 84px;
        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: 48px;
            height: 48px;
            border: 1px solid #f4f4f4;
            border-radius: 50%;
        }
    }
}
.record-title {
    margin: 32px 0 24px 0;
    color: #000;
    font-family: Roboto;
    font-size: 22px;
    font-style: normal;
    font-weight: 600;
    line-height: 28px;
}
.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: 24px;
            margin-right: 10px;
            color: #1a1a1a;
        }
        span {
            margin-right: 12px;
            color: #1a1a1a;
            font-size: 16px;
        }
        .record-amount {
            color: #1a1a1a;
            font-weight: 600;
            font-size: 16px;
            margin-bottom: 15px;
        }
        .record-time {
            color: #474747;
            font-size: var(--font-size-14);
        }
        .record-amount-time {
            flex: 1;
            div {
                text-align: right;
            }
        }
    }
}
</style>
