<template>
    <div class="mx-4 mt-4">
        <!-- new members -->
        <div>
            <div class="relative flex w-36">
                <span class="font-semibold text-black text-sm">New Members</span>
                <img src="@/assets/imgs/sub-title-bg.png" alt="" class="absolute right-0 h-full">
            </div>
        </div>
        <div class="mt-4 bg-white rounded-xl h-96 flex flex-col overflow-hidden">
            <Vue3SeamlessScroll :list="memberList" :step="0.2" :delay="40" @onComplete="listMembers">
                <div v-for="(item, i) of memberList" :key="i"
                    class="flex flex-row items-center justify-between mx-4 mb-3 box-width st:w-[520px] sm:w-[500px] h-12">
                    <div class="flex flex-row">
                        <img class="w-10 h-10 rounded-full" :src="item.avatar" alt="Rounded avatar">
                        <div class="flex flex-col ml-5 ">
                            <span class="text-sm font-medium text-[#1E1E1E]">{{ item.username }}</span>
                            <span class="text-[#AEAEB2] font-normal text-sm mt-1">{{ item.joinDate }}</span>
                        </div>
                    </div>
                    <div class="flex flex-row ml-4 items-center justify-around w-24">
                        <SvgIcon name="dollar" class="w-6 h-6 mr-2" />
                        <div class="text-[#FF3B30] w-16">${{ item.earnAmount }}</div>

                    </div>
                </div>
            </Vue3SeamlessScroll>
        </div>
    </div>
</template>

<script setup lang="ts" >
import { onMounted, ref } from 'vue';
import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
import {listMembers} from '@/api/home'
import SvgIcon from '@/components/SvgIcon.vue';

const memberList = ref([])
const initList = async () => {
    const res = await listMembers()
    memberList.value = res
    memberList.value.forEach(item => {
        // 生成1-100的随机整数
        const random = Math.floor(Math.random() * 170) + 1
        const domain = window.location.origin + '/app-api/infra/file/12/get/avatars/' + random + ".jpg"
        item.avatar = domain
    })
}
onMounted(async () => {
    initList()
})
</script>

<style>
:root {
    --swiper-wrapper-transition-timing-function: linear;
}
</style>