<template>
  <div class="asistant-container flex flex-column">
    <div class="header">
      <HeaderTitle light hasSetting />
    </div>
    <div class="loading-container" v-if="isLoading">
      <ChatLoading />
    </div>
    <template v-else>
      <div class="content flex-1" v-if="!isLoading">
        <NoticeList ref="noticeListRef" :list="messageList" @send-message="handleSendMessage" />
      </div>
      <div class="footer" v-if="!isLoading">
        <InputArea @send-message="handleSendMessage" />
        <div class="continue">
          <button class="btn" @click="handleContinue">Continue</button>
        </div>
      </div>
    </template>
  </div>
</template>
<script setup lang="ts">
import HeaderTitle from '@/components/HeaderTitle.vue'
import NoticeList from './components/NoticeList.vue'
import InputArea from './components/InputArea.vue'
import ChatLoading from './components/ChatLoading.vue'
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()

// 定义NoticeList组件引用类型
interface NoticeListRef {
  simulateSendMessage: () => void
}
// 定义消息类型
interface ChatMessage {
  id: string
  content: string
  userId: string
  time: string
  thumb: string
}

const isLoading = ref<boolean>(false)
const noticeListRef = ref<NoticeListRef | null>(null)
const messageList = 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'
  }
])

onMounted(() => {
  // handleSendMessage('123')
})

let loadingTimer: any = null
const handleSendMessage = (message: string): void => {
  console.log('收到消息:', message)
  messageList.value.push({
    id: '1',
    content: message,
    userId: '1',
    time: new Date().toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit' }),
    thumb: ''
  })
  //

  // 模拟请求延迟
  // setTimeout(() => {
  //   // 调用NoticeList的方法添加新消息
  //   if (noticeListRef.value) {
  //     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'
  //       }
  //       messageList.value.push(newMessage)
  //       isLoading.value = false
  //     }, 3000)
  //   }
  // }, 10000) // 3秒后完成
}

const handleContinue = () => {
  // router.push('/workshop/selectStyle')
  // 模拟接口之后再跳转
  isLoading.value = true
  setTimeout(() => {
    router.push('/workshop/selectStyle')
    // isLoading.value = false
  }, 1000)
}
</script>
<style lang="less" scoped>
.asistant-container {
  height: 100vh;
  overflow: hidden;
}

.header {
  flex-shrink: 0;
}

.content {
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.footer {
  flex-shrink: 0;

  .continue {
    font-family: 'satoshiRegular';
    font-size: 3.6rem;
    color: #fff;
    text-align: right;
    padding: 2.6rem 4.5rem;
    .btn {
      border-radius: 7px;
      background-color: #000;
      width: 24.6rem;
      height: 5.9rem;
    }
  }
}

.loading-container {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
}
</style>
