<template>
    <!-- Header Start -->
    <header class="header">
        <div class="logo-wrap">
            <i class="icon-arrow-left-bold-box icli" @click="$router.back()"></i>
            <h1 class="title-color font-md">推薦會員</h1>
        </div>
    </header>
    <!-- Header End -->

    <!-- Main Start -->
    <main class="main-wrap about-us-page mb-xxl">
        <!-- 會員列表 Section Start -->
        <div class="recommand-section">
            <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
                <van-list
                    v-model:loading="loading"
                    :finished="finished"
                    finished-text="沒有更多了"
                    @load="onLoad"
                >
                    <!-- <van-cell v-for="item in list" :key="item" :title="item">
                aaa bbb
                </van-cell> -->
                    <div class="recommand-cell">
                        <div class="userid">會員編號</div>
                        <div class="name">會員名稱</div>
                        <div class="status">會員狀態</div>
                    </div>
                    <div class="recommand-cell" v-for="item in list" :key="item">
                        <div class="userid">{{ item.sso_user_id }}</div>
                        <div class="name">{{ item.real_name }}</div>
                        <div class="status">{{ item.is_validated }}</div>
                    </div>
                </van-list>
            </van-pull-refresh>
        </div>
        <!-- 分潤獎金 Section End -->
    </main>
    <!-- Main End -->
</template>

<script setup>
import { ref, onMounted } from "vue";

import { getRecommandList } from "@/services/user";

const list = ref([]);
const loading = ref(false);
const finished = ref(false);
const refreshing = ref(false);
const page = ref(1);

onMounted(async () => {
    // let res = await getRecommandList();
    // if(res.code === 200){
    //     list.value = res.data;
    // }
});

const onLoad = async () => {
    if (refreshing.value) {
        page.value = 1;
        list.value = [];
        refreshing.value = false;
    }

    let res = await getRecommandList(page.value);

    if (res.code === 200) {
        //將返回的res.data添加到list array中
        list.value.push(...res.data.data);

        // list.value.push(res.data);
        page.value += 1;
    }

    loading.value = false;

    if (list.value.length == res.data.total) {
        finished.value = true;
    }
};

const onRefresh = async () =>{
    finished.value = false;
    loading.value = true;
    onLoad();
}

</script>

<style lang="less" scoped>
.recommand-cell {
    display: flex;
    justify-content: start;
    height: 44px;
    .userid {
        width: 33%;
        // text-align: center;
    }
    .name {
        width: 33%;
        text-align: center;
    }
    .status {
        width: 33%;
        text-align: center;
    }
}
</style>
