<template>
    <section class="max-w-xl m-auto">
        <van-nav-bar :border="false" :title="t('channelSelect.title')">
            <template #left>
                <SvgIconVue name="allow-left" class="w-7 h-7" @click="$router.back"/>
            </template>
        </van-nav-bar>
        <div>
            <div class="flex flex-row items-center justify-center mt-8">
                <span class="text-[#999999FF] text-md">{{ t('channelSelect.balance') }}: </span>
                <span class="text-[#000000FF] text-md font-bold ml-2">{{ balance }}</span>
            </div>
            
            <div class="text-[#CCCCCCFF] text-center pt-2">{{ t('channelSelect.t_1') }}</div>
        </div>
    </section>
    <section class="bg-[#F4F6F7FF] min-h-[calc(100vh-140px)] max-w-xl m-auto pt-4 ">
        <div class="mx-3 bg-white h-16 p-[15px] flex flex-row items-center justify-between mb-4 rounded-xl" 
        v-for="item in channelList" :key="item.id" @click="toNext(item)">
            <div class="flex flex-row items-center">
                <img :src="item.iconLink" alt="" class="h-8 w-8">
                <span class="ml-4 text-center" >{{ item.channelName }}</span>
            </div>
            <div class="mr-4 flex items-center justify-center">
                <van-icon name="arrow" />
            </div>
        </div>
    </section>
</template>

<script setup  lang="ts">
import { ref, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import SvgIconVue from '@/components/SvgIcon.vue';
import { getBalanceAccount } from '@/api/balance'
import { listRechargeChannel, listWithdrawalChannel } from '@/api/channelConfig'

import { useI18n } from 'vue-i18n'
const { t } = useI18n()

const router = useRouter()
const route = useRoute()

const balance = ref(0)
const channelList = ref([])

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


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

const params = ref({
    scenario: 1
})

const initParams = async () => {
    if (route.params.scenario) {
        params.value.scenario = route.params.scenario as any
    }

}

const initChannelList = async () => {
    if (params.value.scenario == 2) {
        channelList.value = await listWithdrawalChannel()
    } else {
        channelList.value = await listRechargeChannel()
    }
}

const toNext = (item:any) => {
    const configId = item.id
    if (params.value.scenario == 2) {
        router.push({name: 'withdrawal', params: {configId}})
    } else {
        router.push({name: 'recharge', params: {configId}})
    }
}



// 挂载时加载
onMounted(async () => {
    await initParams()
    await initChannelList()
    await getBalance()

})
</script>

<style></style>