<template>
    <section class="max-w-xl m-auto">
        <van-nav-bar :title="t('balanceRecord.title')">
            <template #left>
                <SvgIcon name="allow-left" class="w-7 h-7" @click="router.back" />
            </template></van-nav-bar>

        <div class="min-h-[calc(100vh-46px)] bg-[#F7F8FA] pt-2">
            <van-pull-refresh v-model="loading" @refresh="onRefresh" pulling-text="Pull Refresh" :loosing-text="t('common.loosing')"
                loading-text="loading">
                <van-list v-model:loading="loading" :finished="finished" finished-text="no more data" loading-text="t('common.loading')"
                    :offset="10" @load="onLoad" error-text="loading error">
                    <div class="mx-4 my-4 bg-white h-[86px] p-4 flex flex-row rounded-lg justify-between"
                        v-for="item in list" :key="item.id">
                        <div class="flex flex-col">
                            <span class="text-md text-[#FF4900] font-bold">{{ item.amount }}</span>
                            <span class="text-[#9CADBFFF] text-st">{{ types[item.type] }}</span>
                        </div>
                        <div class="text-[#9CADBFFF] flex items-center justify-center">
                            <span class="text-st">{{ formatDate(item.createTime) }}</span>
                        </div>
                    </div>
                </van-list>
            </van-pull-refresh>
        </div>
    </section>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'
import { pageBalanceRecord } from '@/api/balance'
import { ref } from 'vue'
import { formatDate } from '@/utils/formatTime'
import { useI18n } from 'vue-i18n'

const { t } = useI18n()

const router = useRouter()
const loading = ref(false)
const finished = ref(false)
const params = ref({
    pageNo: 0,
    pageSize: 10,
    executeStatus: undefined
})
const list = ref([])
const listBalanceRecord = async () => {
    finished.value = false
    loading.value = true
    params.value.pageNo += 1
    const res = await pageBalanceRecord(params.value)
    const listData = res.list;
    if (!listData || listData.length <= 0) {
        finished.value = true;
    }
    loading.value = false;
    return res
}

const onRefresh = async () => {
    list.value = []
    finished.value = false
    params.value.pageNo = 0
    await onLoad()
}

const onLoad = async () => {
    if (finished.value) {
        loading.value = false;
        return
    }
    loading.value = true
    const res = await listBalanceRecord()
    const listData = res.list;
    if (!listData || listData.length <= 0) {
        finished.value = true;
        loading.value = false;
        return
    }
    list.value = list.value.concat(listData)
    loading.value = false
    finished.value = list.value.length >= res.total
}

const types = {
    "1": 'Recharge',
    "3": "Withdrawal",
    "4": "Withdrawal Back",
    "5": "Completed Order",
    "6": "Commission",
    "8": "Invite Bonus",
    "9": "Keep Order",
    "10": "System Bonus",
    "11": "Registration Bonus"
}
</script>