<template>
    <!-- 底部弹出 -->
    <van-popup v-model:show="show" position="bottom" round style="height: 60%">
        <!-- 搜索栏 -->
        <div class="p-3">
            <van-search
                v-model="keyword"
                placeholder="搜索用户"
                show-action
                @cancel="close"
            />
        </div>

        <!-- 用户列表 -->
        <van-list>
            <van-cell
                v-for="user in filteredUsers"
                :key="user.id"
                :title="user.nickname"
                clickable
                @click="selectUser(user)"
            >
                <template #icon>
                    <van-image
                        round
                        width="32px"
                        height="32px"
                        :src="IM_PATH + user.avatar"
                    />
                </template>
            </van-cell>
        </van-list>
    </van-popup>
</template>

<script setup>
import { useWebSocketStore } from '@/stores/modules/webSocketStore.js';
import { useWalletStore } from "@/stores/modules/walletStore.js";
const wsStore = useWebSocketStore();
const walletStore = useWalletStore();
const IM_PATH = import.meta.env.VITE_IM_PATH_FIlE;
const emit = defineEmits(['select']);

const show = ref(false);
const keyword = ref('');
const users = ref([]);

// 关键字过滤
const filteredUsers = computed(() => {
    if (!keyword.value) return users.value;
    return users.value.filter(u => u.nickname.includes(keyword.value));
});
// 选中用户
const selectUser = user => {
    console.log('选择用户：', user);
    emit('select', user); // ✅ 通知父组件
    close();
};

// 关闭弹窗
const close = () => {
    show.value = false;
};

// 供父组件调用打开
const open = () => {
    show.value = true;
};
onMounted(async () => {
  // 获取群成员信息
  if(wsStore.toUserInfo.type == 'group'){
    let members = await wsStore.fetchGroupMembers()
    users.value = members?.filter(member => member.uuid !== walletStore.account)
  }
})
defineExpose({ open });
</script>
<style scoped lang="less">
:deep(.van-cell){
    align-items: center;
    
}
:deep(.van-cell__title){
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    font-size: 15px;
    color: #000000;
    margin-left: 12px;
}
</style>
