<route lang="jsonc" type="page">
    {
        "needLogin": true,
        "layout": "default",
        "style": {
            "navigationBarBackgroundColor": "#FFF",
            "navigationBarTitleText": "下级用户"
        }
    }
</route>

<template>
    <view>
        <!-- 展示人员信息 -->
        <wd-overlay :show="showProfilePopup" @click="showProfilePopup = false">
			<view class="h-full relative pb-62rpx">
				<view class="absolute-center bg-white rounded-30rpx w-660rpx px-88rpx py-48rpx">
                    <view>
                        <view class="text-center">
                            <wd-img width="100rpx" height="100rpx" :src="`${OSS}icon/icon_avatar.png`" mode="aspectFill" round />
                        </view>
                        <view class="font-bold text-28rpx leading-40rpx text-#303133 mt-16rpx text-center">用户昵称</view>
                        <view class="mt-10rpx text-center">13525626532</view>
                        <view class="flex items-center justify-between mt-62rpx">
                            <view class="text-center">
                                <view class="font-bold text-36rpx leading-50rpx text-#303133">1200</view>
                                <view class="font-400 text-26rpx leading-36rpx text-#606266 mt-20rpx">本月下级佣金</view>
                            </view>
                            <view class="text-center">
                                <view class="font-bold text-36rpx leading-50rpx text-#303133">1200</view>
                                <view class="font-400 text-26rpx leading-36rpx text-#606266 mt-20rpx">本月下级佣金</view>
                            </view>
                        </view>

                        <view class="mt-46rpx">
                            <text class="font-400 text-26rpx leading-36rpx text-#303133">加入时间：</text>
                            <text class="text-26rpx leading-36rpx text-#909399">2025-03-08 11:20</text>
                        </view>
                    </view>
				</view>
			</view>
		</wd-overlay>

        <view class="mt-24rpx pb-60rpx">
            <view class="mt-20rpx">
                <mescroll-body @init="mescrollInit" @down="downCallback" @up="Sub.upCallback">
                    <view class="mx-30rpx border-b border-b-solid mb-26rpx pb-10rpx flex" v-for="(item, index) in 10" :key="index">
                        <view class="mr-20rpx" @click="Sub.handleShowProfilePopup">
                            <wd-img width="100rpx" height="100rpx" :src="`${OSS}icon/icon_avatar.png`" mode="aspectFill" round />
                        </view>
                        <view class="flex-1 flex justify-between items-center">
                            <view @click="Sub.handleToSubPorfile(item)">
                                <view class="font-bold text-28rpx leading-40rpx text-#303133">用户昵称</view>
                                <view class="font-400 text-26rpx leading-36rpx text-#303133 mt-12rpx">13525626532</view>
                                <view class="text-24rpx leading-34rpx text-#909399 mt-10rpx">2025-03-08 11:20</view>
                            </view>
                            <view @click="Sub.handleCallMobile">
                                <wd-img width="64rpx" height="64rpx" :src="`${OSS}icon/icon_phone.png`" mode="aspectFill" round />
                            </view>
                        </view>
                    </view>
                </mescroll-body>
            </view>
        </view>

        <tabbar tab="sub"></tabbar>
    </view>
</template>

<script lang="ts" setup>
    import Tabbar from '@/bundle/parten/components/Tabbar.vue'
	import { onPageScroll, onReachBottom } from '@dcloudio/uni-app'
    import useMescroll from "@/uni_modules/mescroll-uni/hooks/useMescroll.js"

    const OSS = inject('OSS')

    // mescroll
    const { mescrollInit, downCallback, getMescroll } = useMescroll(onPageScroll, onReachBottom) 

    // 展示人员信息
    const showProfilePopup = ref<boolean>(false)

    // tab 切换
    const tab = ref<Array<{ id: number, name: string }>>([
        { id: 1, name: '全部' },
        { id: 2, name: '收入' },
        { id: 3, name: '支出' },
    ])
    const currentTab = ref<number>(0)

    const Sub = {
        upCallback: (mescroll) => {
			// 需要留一下数据为空的时候显示的空数据图标内容
            // list({
            //     page: mescroll.num,
            //     size: mescroll.size
            // }).then((res: { list: Array<any>, totalPages: Number }) => {
            //     const curPageData = res.list || [] // 当前页数据
            //     if(mescroll.num == 1) goods.value = []; // 第一页需手动制空列表
			// 	goods.value = goods.value.concat(curPageData); //追加新数据

            //     console.log("🚀 ~ goods:", goods)

            //     mescroll.endByPage(curPageData.length, res.totalPages); //必传参数(当前页的数据个数, 总页数)

            // }).catch(() => {
            //     mescroll.endErr(); // 请求失败, 结束加载
            // })
			// apiGoods(mescroll.num, mescroll.size).then(res=>{
			// 	const curPageData = res.list || [] // 当前页数据
			// 	if(mescroll.num == 1) goods.value = []; // 第一页需手动制空列表
			// 	goods.value = goods.value.concat(curPageData); //追加新数据
			// 	//联网成功的回调,隐藏下拉刷新和上拉加载的状态;
			// 	//mescroll会根据传的参数,自动判断列表如果无任何数据,则提示空;列表无下一页数据,则提示无更多数据;

			// 	//方法一(推荐): 后台接口有返回列表的总页数 totalPage
			// 	//mescroll.endByPage(curPageData.length, totalPage); //必传参数(当前页的数据个数, 总页数)

			// 	//方法二(推荐): 后台接口有返回列表的总数据量 totalSize
			// 	//mescroll.endBySize(curPageData.length, totalSize); //必传参数(当前页的数据个数, 总数据量)

			// 	//方法三(推荐): 您有其他方式知道是否有下一页 hasNext
			// 	//mescroll.endSuccess(curPageData.length, hasNext); //必传参数(当前页的数据个数, 是否有下一页true/false)

			// 	//方法四 (不推荐),会存在一个小问题:比如列表共有20条数据,每页加载10条,共2页.如果只根据当前页的数据个数判断,则需翻到第三页才会知道无更多数据.
			// 	mescroll.endSuccess(curPageData.length); // 请求成功, 结束加载
			// }).catch(()=>{
			mescroll.endErr(); // 请求失败, 结束加载
			// })
		},

        // 打电话
        handleCallMobile: (mobile: number) => {
            uni.makePhoneCall({
                phoneNumber: '13525626532'
            })
        },

        // 展示人员信息
        handleShowProfilePopup: () => {
            showProfilePopup.value = true
        },

        // 去下级用户详情
        handleToSubPorfile: (item: any) => {
            uni.navigateTo({
                url: '/bundle/parten/pages/sub/profile'
            })
        }
    }

</script>


<style lang="scss" scoped>
    page {
        background: #FFF;
    }
</style>