<template>
    <div class="px-5 py-3">
        <div
            class="info flex items-center py-4 bg-gray-100 px-3 rounded-[8px] dark:bg-[#20223C]"
            v-for="(item, index) in list"
            :key="index"
        >
            <img class="w-[36px]" src="https://cdn.raex.vip/image/2023-04-14-16-53-17zrXKWdyk.png" alt="" />

            <div class="flex-1 px-[12px]">
                <div class="text-sm">{{ item['name'] }}</div>
                <!-- <div class="text-xs text-[#797A8A] mt-[2px]">加入时间：{{ formatTime(item.createdAt) }}</div> -->
            </div>

            <div class="text-xs flex flex-col items-end">
                <div>+{{ item['amount'] }}</div>
                <div class="mt-[2px]">总收益</div>
            </div>
        </div>

        <div class="empty py-6" v-if="!loading && list.length === 0">
            <img class="w-3/5 block mx-[auto]" :src="isDark ? emptyDarkImg : emptyImg" alt="" />
            <div class="text-sm text-[#939599] text-center py-3">暂无信息</div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { fetchCommissionRecords } from '@/api'
import { format } from 'date-fns'
import emptyImg from '@/assets/empty.png'
import emptyDarkImg from '@/assets/empty-dark.png'
import { useTheme } from '@/hooks/useTheme'

const { isDark } = useTheme()

const list = ref([])
const loading = ref(true)
fetchCommissionRecords().then((res: any) => {
    list.value = res
    loading.value = false
})

function formatTime(str: any) {
    return format(new Date(str), 'yyyy-MM-dd HH:mm')
}
</script>

<style lang="less" scoped>
.info + .info {
    margin-top: 16px;
}
</style>
