<template>
    <div class="container">
        <div class="content">
            <div class="list-ul">
                <div class="list-li" @click="router.push('invitation')">
                    <svg-icon class="li-img" name="yq" />
                    <div class="li-cont">新邀请<span v-if="wsStore.unread" class="red-dot"></span></div>
                </div>
                <div class="list-li" @click="goToGroup">
                    <svg-icon class="li-img" name="ql" />
                    <div class="li-cont no-border">群聊</div>
                </div>
                <!-- <div class="list-li">
                    <svg-icon class="li-img" name="tz" />
                    <div class="li-cont no-border">系统通知</div>
                </div> -->
            </div>
            <van-loading class="load-box" size="24px" v-if="loading">加载中...</van-loading>
            <template v-else>
                <van-index-bar>
                    <template v-for="(group, groupIndex) in memberGroups" :key="group.index">
                        <van-index-anchor :index="group.index" />
                        <van-cell-group inset>
                            <van-cell v-for="(item, index) in group.members" @click="goToPage(item.uuid)">
                                <template #title>
                                    <div class="cell-item">
                                        <van-image
                                            class="cell-img"
                                            round
                                            :src="item.avatar"
                                        />
                                        <div>{{ item.nickname }}</div>
                                    </div>
                                </template>
                            </van-cell>
                        </van-cell-group>
                    </template>
                </van-index-bar>
                <div class="total">{{memberGroups.length}}个朋友</div>
            </template>
        </div>
    </div>
</template>

<script setup>
import { userFriendList } from "@/api/path/im.api";
import {getFirstLetter} from "@/utils/utils";
import { useWalletStore } from "@/stores/modules/walletStore";
import { useWebSocketStore } from "@/stores/modules/webSocketStore.js";
const IM_PATH = import.meta.env.VITE_IM_PATH_FIlE;
const router = useRouter();
const walletStore = useWalletStore();
const wsStore = useWebSocketStore();

const memberGroups = ref([]);
const loading = ref(false);

const getuserList = async () => {
  loading.value = true;
  try {
    const res = await userFriendList({ uuid: walletStore.account });
    const groupedMap = {};
    res.data?.forEach(user => {
        const name = user.nickname || '';
        user.avatar = user.avatar ? IM_PATH + user.avatar : user.avatar
        const firstLetter = getFirstLetter(name); // 获取首字母

        if (!groupedMap[firstLetter]) {
        groupedMap[firstLetter] = [];
        }

        groupedMap[firstLetter].push({...user});
        // 转为数组并按 index 排序
        const groupedList = Object.keys(groupedMap)
            .sort()
            .map(letter => ({
            index: letter,
            members: groupedMap[letter]
            }));

        memberGroups.value = groupedList;
    });
  } catch (error) {
    console.error(error);
  } finally {
    loading.value = false;
  }
};

// 跳转群聊
const goToGroup = () => {
    router.push({
        path: 'group'
    })
}

// 页面跳转
const goToPage = (uuid) => {
  router.push({
    path: 'personal',
    query:{
      uuid,
      type:2
    }
  })
}

onMounted(() => {
    wsStore.funInitfriend(walletStore.account);
    getuserList();
});
</script>

<style lang="less" scoped>
.load-box{
  text-align: center !important;
  margin-top: 50px !important;
}
.container{
    height: 100%;
    display: flex;
    flex-direction: column;
    
    .content{
        padding: 16px;
        overflow: auto;
        .list-ul{
            background: #fff;
            border-radius: 12px;
            padding: 12px 16px;
            .list-li{
                display: flex;
                align-items: center;
                .li-img{
                    width: 32px;
                    height: 32px;
                    flex-shrink: 0;
                    margin-right: 12px;
                }
                .li-cont{
                    position: relative;
                    flex: 1;
                    border-bottom: 1px solid #F2F2F2;
                    padding-top:10px;
                    padding-bottom: 10px;
                    font-family: PingFang SC, PingFang SC;
                    font-weight: 500;
                    font-size: 15px;
                    color: #000000;
                }
                .no-border {
                    border-bottom: none;
                }
            }
        }
        :deep(.van-cell-group--inset){
            border-radius:12px !important;
            margin: 0 !important;
        }
        :deep(.van-cell){
            padding: 12px 16px !important;
        }
        :deep(.van-cell:after){
        left: 60px;
        }
        :deep(.van-index-anchor--sticky){
            background: #F7F8FA !important;
            color: #4765DD !important;
        }
        :deep(.van-index-bar__index){
            font-weight: 400 !important;
            font-size: 10px !important;
            color: #1D2129 !important;
            margin-bottom: 8px !important;
        }
        :deep(.van-index-bar__index--active){
            color: #4765DD !important;
        }
        .cell-item{
            display: flex;
            align-items: center;
            font-family: PingFang SC, PingFang SC;
            font-weight: 500;
            font-size: 15px;
            color: #000000;
            .cell-img{
                width: 32px;
                height: 32px;
                flex-shrink: 0;
                margin-right: 12px;
            }
        }
        .total{
            text-align: center;
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            font-size: 12px;
            color: #8D8D8D;
            margin-top: 22px;
        }
    }
    .content::-webkit-scrollbar{
        width: 0;
    }
}
.red-dot {
    position: absolute;
    // top: 0px;
    // right: -4px;
    width: 6px;
    height: 6px;
    background: #FF6C6C;
    border-radius: 50%;
    display: inline-block;
  }

</style>