<template>
    <van-nav-bar :title="t('recharge.title')">
        <template #left>
            <SvgIcon name="allow-left" class="w-7 h-7" @click="$router.back" />
        </template>
    </van-nav-bar>
    <section class="max-w-xl m-auto">
        <div class="assets">
            <div class="count">
                <div class="countName">my assets</div>
                <div class="">
                    <span class="text-[32px] text-white font-bold">{{ balance.toFixed(2) }}</span>
                    <span class="ml-2 text-white">USDT</span>
                </div>
            </div>
            <img src="@/assets/imgs/recharge/line.png" class="assets-img">
        </div>
        <div class="grid grid-cols-3 gap-4 mx-4 mt-4 place-items-center">
            <div class="w-[105px] h-16  flex flex-row items-center justify-center rounded-xl border"
                v-for="(item, index) in amountList" @click="onActive(item, index)"
                :class="[active === index ? 'border-[#F96825] text-[#F96825]' : 'border-[#E5E5EA]']">
                <span class="font-semibold" :class="[active === index ? 'text-[#F96825]' : 'text-[#1D1F24D9]']">USDT {{ item
                }}</span>
            </div>
        </div>
        <!-- input -->
        <div class="mx-4 mt-7">
            <div class="relative mt-2 rounded-md shadow-sm">
                <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3 font-semibold">
                    USDT
                </div>
                <input type="number" name="amount" id="amount" class="block w-full rounded-md border-0 py-1.5 pl-20 
                    ring-1 ring-inset ring-gray-300 placeholder:text-gray-400  placeholder:text-md
                    focus:ring-2 focus:ring-inset focus:ring-[#F96825] sm:text-sm sm:leading-6 font-semibold
                    h-14 text-[#F96825]" v-model="inputAmount" :placeholder="t('recharge.amount_placeholder')" />
            </div>
        </div>
        <div class="mt-8 mx-4">
            <van-button block color="linear-gradient(90deg, #F70 0%, #FF4900 100%)" class="font-semibold btn"
                @click="handleSubmit" :disabled="disabled">Confirm</van-button>
        </div>
        <Dialog ref="dialogRef" @Confirm="checkDetails" />
    </section>
</template>

<script setup lang="ts">
import { getBalanceAccount, getQuickRechargeAmount } from '@/api/balance'
import { onMounted, ref } from 'vue';
import SvgIcon from '@/components/SvgIcon.vue';
import { useRoute } from 'vue-router';
import { createPayOrder } from '@/api/payOrder'
import router from '@/router';
import { useI18n } from 'vue-i18n';
const { t } = useI18n()

const route = useRoute()
const active = ref()
const amountList = ref([])
const inputAmount = ref()
const disabled = ref(false)
const dialogRef = ref()
const balance = ref(0)
const getAmountList = async () => {
    const res = await getQuickRechargeAmount()
    amountList.value = res
}

const onActive = (item: any, index: number) => {
    active.value = index
    inputAmount.value = item
}

const getBalance = async () => {
    const res = await getBalanceAccount()
    balance.value = res.balance
}

setInterval (() => {
    getBalance()
}, 2000);


// 组件加载时调用
onMounted(async () => {
    await getAmountList()
    await getBalance()
})

const orderId = ref('')

const handleSubmit = async () => {
    if (!inputAmount.value) {
        dialogRef.value.open({
            type: 'warning',
            title: '',
            content: 'Please input or select amount',
            showConfirmButton: true,
            showCancelButton: false,
            confirmText: 'Confirm',
        })
        return
    }
    disabled.value = true
    const channelConfigId = route.params.configId
    const data = {
        channelConfigId: channelConfigId,
        amount: inputAmount.value,
        type: 1
    }
    try {
        const res = await createPayOrder(data) as any
        if (res.code === 1004140002) {
            orderId.value = res.msg
            dialogRef.value.open({
                type: 'warning',
                title: '',
                content: 'you have unpaid order',
                showConfirmButton: true,
                showCancelButton: false,
                confirmText: 'Check Details',
            })
        }
        if (res.code === 0) {
            router.push({ name: 'orderDetails', params: { orderId: res.data } })
        }
    } finally {
        disabled.value = false
    }
}

const checkDetails = () => {
    router.push({ name: 'orderDetails', params: { orderId: orderId.value } })
}

</script>

<style scoped>
.assets {

    height: 115px;
    margin-top: 20px;
    border-radius: 20px;
    background: linear-gradient(100deg, #F97125 0%, #F97E25 101.49%);
    border-radius: 20px;
    padding: 24px 0 24px 20px;
    position: relative;
    @apply mx-4
}

.assets-img {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
}
.countName {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.60);
}
.count {
    @apply text-base
}
</style>