<template>
  <div class="chat-list">
    <div class="chat-message-item" v-for="message in chatMessages" :key="message.id">
      <NoticeItem :value="message" @send-message="handleSendMessage" />
    </div>
    <!-- Loading效果 -->
    <div v-if="isLoading" class="chat-message-item">
      <ChatLoading />
    </div>
  </div>
</template>

<script setup lang="ts">
import NoticeItem from './NoticeItem.vue'
import ChatLoading from './ChatLoading.vue'
import { ref, onMounted, onUnmounted } from 'vue'

// 定义消息类型
interface ChatMessage {
  id: string
  content: string
  userId: string
  time: string
  thumb: string
}

// 定义组件暴露的方法类型
interface NoticeListExpose {
  simulateSendMessage: () => void
}

const isLoading = ref<boolean>(false)
let loadingTimer: any = null

const chatMessages = ref<ChatMessage[]>([
  {
    id: '1',
    content: 'I want a chic outfit for dinner.',
    userId: '1',
    time: '14:30',
    thumb: ''
  },
  {
    id: '2',
    content:
      "Hey there! A chic dinner outfit, I love that! To give you the perfect recommendations, tell me: is this a romantic date, business dinner, or celebration with friends? And what's your go-to style vibe: classic elegance or something with more edge?",
    userId: '2',
    time: '14:31',
    thumb: 'https://files-dev.deercal.com/uploads/platforms/logo_code/669933e1b873e798.jpg'
  },
  {
    id: '3',
    content: "It's a romantic date, and I prefer classic elegance.",
    userId: '1',
    time: '14:32',
    thumb: ''
  },
  {
    id: '4',
    content:
      "Perfect! For a romantic dinner with classic elegance, I'd suggest a little black dress with delicate jewelry and elegant heels. Would you like me to show you some specific options?",
    userId: '2',
    time: '14:33',
    thumb: 'https://files-dev.deercal.com/uploads/platforms/logo_code/669933e1b873e798.jpg'
  }
])

const handleSendMessage = (message: string): void => {
  console.log('list发送消息:', message)
}

const simulateSendMessage = (): void => {
  isLoading.value = true

  loadingTimer = setTimeout(() => {
    const newMessage: ChatMessage = {
      id: Date.now().toString(),
      content:
        "Thanks for your message! I'm processing your request and will provide you with the best fashion advice.",
      userId: '2',
      time: new Date().toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit' }),
      thumb: 'https://files-dev.deercal.com/uploads/platforms/logo_code/669933e1b873e798.jpg'
    }

    chatMessages.value.push(newMessage)
    isLoading.value = false
  }, 3000)
}
</script>

<style lang="less" scoped>
.chat-list {
  padding: 16px;
  background-color: #fff;
  height: 100%;
  overflow-y: auto;
  flex: 1;
}

.chat-message-item {
  margin-bottom: 4.84rem;
}
</style>
