<template>
    <div class="friend-list">    
        <a-menu
            style="width: 100%; border-right: none"
            mode="inline"
            :openKeys="openKeys"
            v-model:selectedKeys="selectedKeys"
            @openChange="onOpenChange"
            >
            <a-sub-menu key="sub1">
                <template #title>群聊 
                    <span>({{friendsData.groups?.count}})</span>
                </template>
                <div v-for="group in friendsData.groups?.accounts" :key="group.userId" class="account-card" @dblclick="onFriendDblClick(group)">
                    <div class="menu-item-container">
                        <a-avatar
                        :src="group.photo"
                        :size="30"
                        class="menu-item-avatar"
                    />
                    <div class="menu-item-name">
                        {{ group.userName }}
                    </div>
                    </div>
                </div>
            </a-sub-menu>
            <a-sub-menu key="sub2">
                <template #title>公众号
                    <span>({{friendsData.officials?.count}})</span>
                </template>
                <div v-for="official in friendsData.officials?.accounts" :key="official.userId" class="account-card" @dblclick="onFriendDblClick(official)">
                    <div class="menu-item-container">
                        <a-avatar
                        :src="official.photo"
                        :size="30"
                        class="menu-item-avatar"
                    />
                    <div class="menu-item-name">
                        {{ official.userName }}
                    </div>
                    </div>
                </div>
            </a-sub-menu>
            <a-sub-menu key="sub3">
                <template #title>机器人
                    <span>({{friendsData.robots?.count}})</span>
                </template>
                <div v-for="robot in friendsData.robots?.accounts" :key="robot.userId" class="account-card" @dblclick="onFriendDblClick(robot)">
                    <div class="menu-item-container">
                        <a-avatar
                        :src="robot.photo"
                        :size="30"
                        class="menu-item-avatar"
                    />
                    <div class="menu-item-name">
                        {{ robot.userName }}
                    </div>
                    </div>
                </div>
            </a-sub-menu>
            <a-sub-menu key="sub4">
                <template #title>联系人
                    <span>({{friendsData.users?.count}})</span>
                </template>
                <div v-for="user in friendsData.users?.accounts" :key="user.userId" class="account-card" @dblclick="onFriendDblClick(user)">
                    <div class="menu-item-container">
                        <a-avatar
                        :src="user.photo"
                        :size="30"
                        class="menu-item-avatar"
                    />
                    <div class="menu-item-name">
                        {{ user.userName }}
                    </div>
                    </div>
                </div>
            </a-sub-menu>
            </a-menu>
        </div>
  </template>
  
  <script>
  export default {
    props: {
      friendsData: {
        type: Object,
        default: () => ({}), // 默认值为空对象
      }
    },
    data() {
        const onFriendDblClick = (user) => {
          // 通知父组件切换到对话列表，并传递选中的用户信息
          this.$emit('dblclick-user', user);
        }
        return {
            openKeys: ['sub4'],
            onFriendDblClick,
        };
    },
    setup(props) {
      console.log('friendsData:', props.friendsData); // 打印 props
    },
  };
  
  </script>


  <style scoped>
  .friend-list {
    display: flex;
    flex-direction: column;
    height: calc(100% - 100px);
  }
  .friend-item {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
  }
  .friend-info {
    margin-left: 10px;
  }
  .friend-name {
    font-weight: bold;
  }
  .friend-status {
    color: #666;
  }
  .ant-menu {
    width: 100%;
    background-color: transparent;
  }
  .menu-item-container {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 6px 25px;
  }

.menu-item-avatar {
  border: 1px solid white;
  border-radius: 5px;
  margin-right: 10px;
}
.menu-item-name {
  font-size: 14px;
  color: black;
}
  </style>