<template>
  <div class="conversation-list">
      <div v-for="chatting in chattingList" :key="chatting.user?.userId" class="account-card"
        :style="{ backgroundColor: selectedUserId === chatting.user?.userId ? 'white' : 'transparent'}"
        @click="selectChatting(chatting.user)"
      >
        <div>
          <a-badge :dot="chatting.unread">
            <a-avatar :src="chatting.user?.photo" :size="40" style="border-radius: 5px"/>
          </a-badge>
        </div>
        <div style="margin-left: 10px; height: 40px">
          <div style="font-size: 14px; color: black; overflow: hidden;" class="text-ellipsis">
            <span v-if="chatting.user.roleCode > 3" 
            :class="{
                'account-type': true,
                ['account-type-' + chatting.user.roleCode]: true
              }">
              {{ 
                  chatting.user.roleCode === 4 ? '群' : 
                  (chatting.user.roleCode === 5 ? '机器人' : 
                   (chatting.user.roleCode === 6 ? '公众号' : 
                   (chatting.user.roleCode === 0 ? 'AI' : '服务号')))
              }}
            </span>
            {{ chatting.user.userName }}
          </div>
          <div class="last-message" style="font-size: 11px; color: gray">{{ chatting.lastOfflineMessage }}</div>
        </div>
      </div>
  </div>
</template>

  <script>
  import axios from 'axios';
  import { defineEmits, defineComponent, ref, onMounted, onUnmounted, watch } from 'vue';
  export default defineComponent ({
    props: {
      parentSetUser: Object,
      chattingList: Array,
      autoSelectedChatting: Boolean
    },
    setup(props, { emit }) {
      // 定义触发的事件
      const selectedUserId = ref('');
      const selectChatting = (selectUser) => {
        selectedUserId.value = selectUser.userId;
        emit('select-chat-user', selectUser);
        // 查找对应的 chatting 对象
        const targetChatting = props.chattingList.find(chatting => chatting.user?.userId === selectUser.userId);
        if (targetChatting) {
          // 将 unread 属性设置为 false
          targetChatting.unread = false;
        }
      }

      watch(() => props.chattingList, (newChattingList) => {
        if (props.autoSelectedChatting) {
          if(newChattingList.length > 1) {
            selectChatting(newChattingList[1].user);
          } else if (newChattingList.length === 1) {
            selectChatting(newChattingList[0].user);
          }
        }
      });

      watch(() => props.parentSetUser, (newValue) => {
        if (newValue?.userId) {
          selectChatting(newValue);
        }
      }, { deep: true, immediate: true });

      onMounted(() => {
        
      });
      onUnmounted(() => {
       
      });
      return {
        selectedUserId,
        selectChatting
      };
    }
  });
  </script>
  
  <style scoped>
  .conversation-item {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
  }
  .conversation-info {
    margin-left: 10px;
  }
  .conversation-name {
    font-weight: bold;
  }
  .conversation-preview {
    color: #666;
  }
  .account-card {
    position: relative;
    display: flex; 
    align-items: center;
    padding: 10px;
  }
  .account-card:hover {
    cursor: pointer;
  }
  .last-message {
    font-size: 11px;
    color: gray;
    width: 170px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 3px;
  }
  .account-type {
    font-size: 10px;
    margin-right: 2px;
    color: black;
    padding: 1px 2px;
    border: 1px solid rgb(198, 198, 198);
    border-radius: 3px;
  }
  .text-ellipsis {  
    white-space: nowrap; /* 确保文本不会换行 */  
    overflow: hidden; /* 隐藏超出容器的文本 */  
    text-overflow: ellipsis; /* 当文本超出容器时显示省略号 */  
    width: 200px; /* 设置一个宽度，你可以根据需要调整 */  
  }
  /deep/ .ant-badge-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
  }
  </style>