<template>
    <BasePage :title="title ? $substring(title, 0, 8) + '的好友' : '我的好友'">
        <div class="team">
            <div class="count">
                <div class="top">
                    <div class="left box-align-center">
                        <b>
                            我的好友
                        </b>
                        <span>
                            {{ total.TotalTreeQty }}
                        </span>
                    </div>
                    <div class="right_btn r" @click="$navigate('/Invite')">
                        <img src="/img/team-i1.png" alt="">
                        <span>
                            邀请好友
                        </span>
                    </div>
                </div>

                <div class="count_box">
                    <!-- <div class="item">
                        <div>
                            <img src="/img/team_i1.png" alt="">
                            <span>
                                直推好友
                            </span>
                        </div>
                        <div>
                            <b>{{ total.TotalCount }}</b>
                        </div>
                    </div>
                    <div class="item">
                        <div>
                            <img src="/img/team_i2.png" alt="">
                            <span>
                                团队好友
                            </span>
                        </div>
                        <div>
                            <b>{{ total.TotalTreeQty }}</b>
                        </div>
                    </div> -->
                    <div class="item">
                        <div>
                            <span>
                                全部好友
                            </span>
                        </div>
                        <div>
                            <b>{{ total.allfriendcount }}</b>
                        </div>
                    </div>
                    <hr>
                    <div class="item">
                        <div>
                            <span>
                                网体会员
                            </span>
                        </div>
                        <div>
                            <b>{{ total.allfriendcount }}</b>
                        </div>
                    </div>
                </div>
            </div>

            <div class="list_title">
                <!-- 直推好友列表({{ total.TotalCount }}) -->
                <van-tabs v-model:active="active" background="transparent" color="#177142">
                    <van-tab :title="'直推好友(' + total.friendcount + ')'"></van-tab>
                    <van-tab :title="'网体好友(' + total.allfriendcount + ')'"></van-tab>
                </van-tabs>


            </div>

            <BaseList ref="baseList"
                :url="active === 0 ? '/v1/client/DUsersClient/friend' : '/v1/client/DUsersClient/allfriend'"
                :list="data" class="list_box">
                <template #default="{ item }">
                    <div class="list" :key="item.id">
                        <div class="user_box">
                            <img class="icon" :src="$file(item.userimg)" alt="">
                            <div class="info">
                                <div>
                                    <b>{{ item.username }}</b>
                                    <span class="vip">{{ item.userlevelname }}</span>
                                </div>
                                <div>
                                    <p>账号:{{ item.cellphone ? item.cellphone.substring(0, 3) + '****' +
                                        item.cellphone.substring(7) : '' }}</p>
                                </div>
                                <!-- <div>
                                    <p>ID {{ item.UserID }}</p>
                                    <img src="/img/copy.png" @click="$copyText(item.UserID); $showSuccessToast('复制ID成功')"
                                        alt="">
                                </div> -->
                                <span>{{ $formatGMT(item.addtime, 'yyyy-MM-dd HH:mm:ss') }}</span>
                            </div>
                        </div>
                    </div>
                </template>
            </BaseList>

        </div>
    </BasePage>
</template>

<script>
export default {
    name: 'Team',
    // watch: {
    //     title(val, old) {
    //         document.title = this.$substring(val, 0, 8) + '的好友';
    //     },
    // },
    mounted() {
        this.init()
    },
    data() {
        return {
            active: 0,
            data: [
                {
                    UserID: '10001',
                    NickName: '张三',
                    Avatar: '/img/mall_i1.png',
                    LevelName: 'VIP会员',
                    Phone: '13812345678',
                    CTime: '2026-04-15 10:30:00',
                },
                {
                    UserID: '10002',
                    NickName: '李四',
                    Avatar: '/img/mall_i2.png',
                    LevelName: '银卡会员',
                    Phone: '13987654321',
                    CTime: '2026-04-10 14:20:00',
                },
                {
                    UserID: '10003',
                    NickName: '王五',
                    Avatar: '/img/mall_i3.png',
                    LevelName: '普通会员',
                    Phone: '13611112222',
                    CTime: '2026-04-05 09:15:00',
                },
            ],
            total: {
                TotalTreeQty: 3,
                TotalTreeSeed: 12,
                TotalTreeFruit: 580,
                TotalCount: 3,
                friendcount: 0,
                allfriendcount: 0,
            },
            title: this.$route.query.title || null,
        };
    },
    methods: {
        init() {
            this.$get('/v1/client/DUsersClient/friendstatistics').then(data => {
                this.total = data.data;
            })
        },
        updateList() {
            this.$refs.baseList.refresh()
        }
    },
};
</script>

<style scoped>
.d-bg {
    background: #f5f5f5;
}

.f14 {
    font-size: 14px;
}

.p10 {
    padding: 10px;
}

.r10 {
    border-radius: 10px;
}
</style>
