<template>
  <view class="chat-container">
    <view class="chat_container_linear_gradient"> </view>
    <view class="chat_messages_body" v-if="userLoginStatus">
        <view :class="showOpeningRemarks?'hide-opening-remarks':''">
          <MyHeaderPrologue @handleQuickFast="handleQuickFast" />
      </view>
      <view class="chat-messages chat-messages-chat">
        <view
          v-for="(message, index) in messages"
          :key="index"
          :id="`msg-${index}`"
          class="message-item"
          :class="message.role === 'user' ? 'user-message' : 'ai-message'"
        >
          <view v-if="message.role === 'ai'" class="message-avatar">
            <image
              src="https://pay-prod-1369486729.cos.ap-guangzhou.myqcloud.com/uploads/cs-test/01KN43RH4M09FAFBD8D9TQPM2B.png"
              mode="aspectFit"
            />
          </view>
          <view class="message-content-wrapper">
            <view class="message-content">
              <!-- 图片展示 - 支持多张图片显示 -->
              <view v-if="message.image_url && message.image_url.length > 0" class="message-images">
                <view
                  v-for="(image, imgIndex) in message.image_url"
                  :key="imgIndex"
                  class="message-image-item"
                  :class="{ 'single-image': message.image_url.length === 1 }"
                >
                  <image
                    :src="image"
                    :mode="message.image_url.length === 1 ? 'widthFix' : 'aspectFill'"
                    class="message-image"
                    @click="method?.previewImage(image, message.image_url!)"
                  />
                </view>
              </view>

              <!-- 兼容旧的images字段 -->
              <view v-else-if="message.images && message.images.length > 0" class="message-images">
                <view
                  v-for="(image, imgIndex) in message.images"
                  :key="imgIndex"
                  class="message-image-item"
                  :class="{ 'single-image': message.images.length === 1 }"
                >
                  <image
                    :src="image"
                    :mode="message.images.length === 1 ? 'widthFix' : 'aspectFill'"
                    class="message-image"
                    @click="method?.previewImage(image, message.images!)"
                  />
                </view>
              </view>

              <!-- 兼容metadata.image_url字段 -->
              <view
                v-else-if="
                  message.metadata &&
                  message.metadata.image_url &&
                  message.metadata.image_url.length > 0
                "
                class="message-images"
              >
                <view
                  v-for="(image, imgIndex) in message.metadata.image_url"
                  :key="imgIndex"
                  class="message-image-item"
                  :class="{ 'single-image': message.metadata.image_url.length === 1 }"
                >
                  <image
                    :src="image"
                    :mode="message.metadata.image_url.length === 1 ? 'widthFix' : 'aspectFill'"
                    class="message-image"
                    @click="method?.previewImage(image, message.metadata.image_url!)"
                  />
                </view>
              </view>

              <!-- 文本内容 -->
              <view
                v-if="message.content && message.content.trim()"
                v-for="(line, lineIndex) in method?.formatMessageContent(message.content)"
                :key="'text-' + lineIndex"
                class="message-text-line"
              >
                <text>{{ line }}</text>
              </view>
              <!-- 去缴费等按钮 -->
              <view class="quick-questions-actions" v-if="message.actions && message.actions.length > 0">
                <view v-for="(i, aIndex) in  message.actions" :key="`items_${aIndex}`" class="question-btn query-go-to-btn" @click="method?.GoToPage(i?.url)">
                  <text>{{ i?.label }}</text>
                </view>
              </view>
 <!-- 确认按钮 -->
            <view v-if="message.needConfirmation" class="confirmation-buttons">
              <view
                class="confirmation-btn"
                :class="{
                  selected: message.selectedConfirmation === '是',
                  disabled: message.selectedConfirmation !== undefined
                }"
                @click="handleConfirmation(message, '是')"
              >
                <text>是</text>
              </view>
              <view
                class="confirmation-btn"
                :class="{
                  selected: message.selectedConfirmation === '否',
                  disabled: message.selectedConfirmation !== undefined
                }"
                @click="handleConfirmation(message, '否')"
              >
                <text>否</text>
              </view>
            </view>

            </view>
           
            
    
            <view
              v-if="!message.actions && message.quickQuestions && message.quickQuestions.length > 0"
              class="quick-questions"
            >
              <view
                v-for="(question, qIndex) in message.quickQuestions"
                :key="qIndex"
                class="question-btn"
                @click="handleQuickQuestion(question)"
              >
                <text>{{ question }}</text>
              </view>
            </view>

           

            <view v-if="message.created_at && !message.quickQuestions" class="message-meta">
              <view
                v-if="message.role === 'ai'"
                class="copy-button"
                @click="method?.copyMessage(message.content)"
              >
                <image src="/static/svg/copy.svg" mode="aspectFit" class="copy-icon" />
              </view>
              <text class="message-time">{{ method?.formatTime(message.created_at) }}</text>
              <view
                v-if="message.role === 'user'"
                class="copy-button"
                @click="method?.copyMessage(message.content)"
              >
                <image src="/static/svg/copy.svg" mode="aspectFit" class="copy-icon" />
              </view>
            </view>
          </view>
        </view>
        <hs-empty v-if="!messages?.length" height="20vh" />
        <view v-if="loading" class="message-item ai-message">
          <view class="message-avatar">
            <image
              src="https://pay-prod-1369486729.cos.ap-guangzhou.myqcloud.com/uploads/cs-test/01KN43RH4M09FAFBD8D9TQPM2B.png"
              mode="aspectFit"
            />
          </view>
          <view class="message-content loading">
            <text>{{ loadingText }}</text>
          </view>
        </view>
      </view>

      <view class="chat-input-area chat-input-area-chat">
        <!-- 图片预览区域 -->
        <view v-if="useModel?.selectedImages?.value?.length > 0" class="image-preview-area">
          <view class="image-preview-list">
            <view
              v-for="(image, index) in useModel?.selectedImages?.value"
              :key="index"
              class="image-preview-item"
            >
              <image :src="image" mode="aspectFill" class="preview-image" />
              <view class="remove-image" @click="method?.removeImage(index)">
                <uni-icons type="closeempty" size="14" color="#fff" />
              </view>
            </view>

            <!-- 添加更多图片按钮 -->
            <view
              v-if="useModel?.selectedImages?.value?.length < 9"
              class="image-preview-item add-more-button"
              @click="method?.chooseImage()"
            >
              <uni-icons type="plus" size="30" color="#999" />
              <text class="add-more-text">添加图片</text>
            </view>
          </view>
        </view>

        <!-- 快捷按钮栏 -->
        <!-- <view class="quick-actions-bar">
          <view
            v-for="(action, index) in quickActions"
            :key="index"
            class="quick-action-btn"
            @click="handleQuickAction(action)"
          >
            <text>{{ action.label }}</text>
          </view>
        </view> -->

        <view class="input-container">
          <input
            v-model="inputMessage"
            class="message-input"
            placeholder="请输入您的问题..."
            adjust-position
            :confirm-type="'send'"
            :cursor-spacing="15"
            @focus="isInputFocused = true"
            @blur="isInputFocused = false"
            @confirm="handleSendMessage"
          />

          <!-- 相机按钮（当没有输入内容且输入框未聚焦时显示） -->
          <view
            v-if="
              !inputMessage.trim() &&
              !isInputFocused &&
              useModel?.selectedImages?.value?.length === 0
            "
            class="upload-button"
            @click="method?.chooseImage()"
          >
            <uni-icons type="camera" size="24" color="#666" />
          </view>

          <!-- 发送按钮（当有输入内容或输入框聚焦或选择了图片时显示） -->
          <view
            v-if="
              (inputMessage.trim() ||
                isInputFocused ||
                useModel?.selectedImages?.value?.length > 0) &&
              !loading
            "
            class="send-button"
            @click="handleSendMessage"
          >
            <uni-icons type="paperplane-filled" size="20" color="#fff" />
          </view>

          <!-- 加载中状态 -->
          <view v-if="loading" class="send-button disabled">
            <uni-icons type="spinner-cycle" size="20" color="#ccc" />
          </view>
        </view>
      </view>
    </view>
    <view class="chat_messages_body" v-else>
      <hs-empty height="20vh" :baseStyle="{ paddingTop: '35%' }" text="登录体验更多功能" />
      <view class="login_btn">
        <hs-button label="去登录" size="md" type="primary" @click="goToPageLogin" />
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, nextTick, onUnmounted, getCurrentInstance } from 'vue'
import { useWeAppAuthStore } from '@/common'
import { onPullDownRefresh, onLoad, onPageScroll, onShow, onHide } from '@dcloudio/uni-app'
import method from './method'
import dayjs from 'dayjs'
import relativeTime from 'dayjs/plugin/relativeTime'
import 'dayjs/locale/zh-cn'
import useModel from './model'
import { QuickAction } from '@/common/libraries/public'
import getLoginStatus from '@/common/libraries/userUserLogin'
import MyHeaderPrologue from './components/HeaderPrologue.vue'

// 配置dayjs
dayjs.extend(relativeTime)
dayjs.locale('zh-cn')

interface Message {
  role: 'user' | 'ai'
  content: string
  created_at?: string
  quickQuestions?: string[]
  needConfirmation?: boolean
  confirmationType?: string | null
  selectedConfirmation?: string
  images?: string[] // 新增图片字段
  message_type?: 'text' | 'image' | 'mixed' // 消息类型
  image_url?: string[] // 图片URL数组
  actions?: {
    label: string
    url: string
  }[]
  metadata?: {
    image_url?: string[] // metadata字段下的图片URL数组
    [key: string]: any // 其他metadata字段
  }
}

const auth = useWeAppAuthStore()
const userLoginStatus = ref(false)
const inputMessage = ref('')
const isInputFocused = ref(false) // 输入框是否聚焦
const messages = ref<Message[]>([])
const loading = ref(false)
const loadingText = ref('正在输入中...')
let socketTask: any = null
let isConnected = ref(false)
// 控制开场白显示状态
const showOpeningRemarks = ref(false)

// 历史记录相关
const currentPage = ref(1)
const pageSize = ref(10)
const hasMore = ref(true)
const isLoadingHistory = ref(false)
const conversationId = ref<string>('') // 会话ID
const currentOffset = ref(0) // 当前偏移量
const quickQuestionsData = ref<any>({}) // 存储开场白数据
const lastMessageContent = ref('') // 用于防止重复显示相同的消息

const goToPageLogin = () => {
  uni.navigateTo({
    url: '/pages/login'
  })
}

// 时间格式化函数

const scrollToBottom = () => {
  nextTick(() => {
    // 使用页面滚动
    uni.pageScrollTo({
      scrollTop: 999999,
      duration: 300
    })
  })
}

// 获取历史记录
const getHistoryMessages = async (page: number = 1) => {
  const userPhone = auth.data?.user?.phone
  const projectId = auth.data?.selected_house?.asset_projects_id

  if (!userPhone) {
    console.log('用户未登录，无法获取历史记录')
    return
  }

  if (!projectId) {
    console.log('请绑定房屋')
    return
  }

  if (isLoadingHistory.value) {
    return
  }

  try {
    isLoadingHistory.value = true

    // 计算offset，从0开始
    const offset = (page - 1) * pageSize.value
    currentOffset.value = offset

    const response = await method?.customRequest('public/customer/init', {
      platform: 'property',
      platform_user_id: userPhone, //userPhone
      limit: pageSize.value,
      offset: offset,
      tenant_project_id: projectId
    })

    if (response.statusCode === 200) {
      const result = response.data as any
      let historyMessages: Message[] = []

      // 获取会话ID
      if (result.conversation && result.conversation.id) {
        conversationId.value = result.conversation.id
        console.log('获取到会话ID:', conversationId.value)
      } else if (result.conversation_id) {
        conversationId.value = result.conversation_id
        console.log('获取到会话ID:', conversationId.value)
      } else if (result.conversations && result.conversations.id) {
        conversationId.value = result.conversations.id
        console.log('获取到会话ID:', conversationId.value)
      }

      // 优先处理messages字段
      if (result.messages && Array.isArray(result.messages)) {
        historyMessages = result.messages.map((item: any) => {
          const message: Message = {
            role: item.sender_type === 'customer' ? 'user' : 'ai',
            content: item.message || item.content || '',
            actions: item.actions || [],
            created_at: item.created_at || item.timestamp || new Date().toISOString()
          }

          // 添加消息类型和图片字段支持
          if (item.message_type) {
            message.message_type = item.message_type
          }

          // 处理图片URL，支持多种数据结构
          let imageUrlData: string[] | null = null

          if (item.image_url && Array.isArray(item.image_url)) {
            imageUrlData = item.image_url
          } else if (item.images && Array.isArray(item.images)) {
            imageUrlData = item.images
          } else if (
            item.metadata &&
            item.metadata.image_url &&
            Array.isArray(item.metadata.image_url)
          ) {
            imageUrlData = item.metadata.image_url
          }

          if (imageUrlData) {
            message.image_url = imageUrlData
            message.images = imageUrlData // 兼容旧字段
          }

          // 保存metadata数据
          if (item.metadata) {
            message.metadata = item.metadata
          }

          return message
        })
        console.log('从messages字段获取到历史记录:', historyMessages.length)
      }
      // 兼容data字段
      else if (result.data && Array.isArray(result.data)) {
        historyMessages = result.data.map((item: any) => {
          const message: Message = {
            role: item.sender_type === 'customer' ? 'user' : 'ai',
            content: item.message || item.content || '',
             actions: item.actions || [],
            created_at: item.created_at || item.timestamp || new Date().toISOString()
          }

          // 添加消息类型和图片字段支持
          if (item.message_type) {
            message.message_type = item.message_type
          }

          // 处理图片URL，支持多种数据结构
          let imageUrlData: string[] | null = null

          if (item.image_url && Array.isArray(item.image_url)) {
            imageUrlData = item.image_url
          } else if (item.images && Array.isArray(item.images)) {
            imageUrlData = item.images
          } else if (
            item.metadata &&
            item.metadata.image_url &&
            Array.isArray(item.metadata.image_url)
          ) {
            imageUrlData = item.metadata.image_url
          }

          if (imageUrlData) {
            message.image_url = imageUrlData
            message.images = imageUrlData // 兼容旧字段
          }

          // 保存metadata数据
          if (item.metadata) {
            message.metadata = item.metadata
          }

          return message
        })
        console.log('从data字段获取到历史记录:', historyMessages.length)
      }
      // 兼容list字段
      else if (result.list && Array.isArray(result.list)) {
        historyMessages = result.list.map((item: any) => {
          const message: Message = {
            role: item.sender_type === 'customer' ? 'user' : 'ai',
            content: item.message || item.content || '',
            actions: item.actions || [],
            created_at: item.created_at || item.timestamp || new Date().toISOString()
          }

          // 添加消息类型和图片字段支持
          if (item.message_type) {
            message.message_type = item.message_type
          }

          // 处理图片URL，支持多种数据结构
          let imageUrlData: string[] | null = null

          if (item.image_url && Array.isArray(item.image_url)) {
            imageUrlData = item.image_url
          } else if (item.images && Array.isArray(item.images)) {
            imageUrlData = item.images
          } else if (
            item.metadata &&
            item.metadata.image_url &&
            Array.isArray(item.metadata.image_url)
          ) {
            imageUrlData = item.metadata.image_url
          }

          if (imageUrlData) {
            message.image_url = imageUrlData
            message.images = imageUrlData // 兼容旧字段
          }

          // 保存metadata数据
          if (item.metadata) {
            message.metadata = item.metadata
          }

          return message
        })
        console.log('从list字段获取到历史记录:', historyMessages.length)
      }

      if (page === 1) {
        // 第一页直接替换消息
        if (historyMessages.length > 0) {
          messages.value = historyMessages
          console.log('第一页历史记录已加载，总共', historyMessages.length, '条消息')
        } else {
          // 如果没有历史记录，清空消息列表
          console.log('没有历史记录')
          messages.value = []
        }

        // 获取历史记录成功后，不管有没有历史数据，都在历史记录后面push一条新开场白信息
        // nextTick(() => {
        //   if (quickQuestionsData.value.length > 0) {
        //     const welcomeMessage: Message = {
        //       role: 'ai',
        //       content: '您好！我是物业客服，有什么可以帮助您的吗？',
        //       quickQuestions: quickQuestionsData.value,
        //       created_at: new Date().toISOString()
        //     }
        //     messages.value.push(welcomeMessage)
        //     console.log('[Customer] 获取历史记录成功后，在历史记录后面push新开场白消息')
        //     scrollToBottom()
        //   }
        // })
      } else {
        // 加载更多，使用unshift插入到前面
        if (historyMessages.length > 0) {
          // 延迟渲染数据，使过渡更流畅
          setTimeout(() => {
            // 使用unshift方法将新数据插入到数组前面
            messages.value.unshift(...historyMessages)
            console.log(
              '加载更多历史记录，新增',
              historyMessages.length,
              '条消息，总共',
              messages.value.length,
              '条'
            )
          }, 300)
        }
      }

      // 判断是否还有更多数据
      const totalItems = result.total || result.count || result.total_count || 0
      hasMore.value = totalItems > messages.value.length
      currentPage.value = page

      // 如果是第一页，滚动到底部
      if (page === 1) {
        setTimeout(() => {
          scrollToBottom()
        }, 100)

        // 第一页加载完成后，初始化WebSocket连接
        console.log('[Customer] 历史记录加载完成，开始建立WebSocket连接')
        initWebSocket()
      }
    } else {
      console.error('获取历史记录失败，状态码:', response.statusCode)
    }
  } catch (error) {
    console.error('获取历史记录异常:', error)
  } finally {
    isLoadingHistory.value = false
  }
}

// 下拉分页加载更多历史记录
onPullDownRefresh(async () => {
  if (isLoadingHistory.value || !hasMore.value) {
    console.log('正在加载或没有更多数据')
    uni.stopPullDownRefresh()
    return
  }

  console.log('触发下拉分页，加载更多历史记录')
  const nextPage = currentPage.value + 1

  try {
    // 先等待数据加载完成
    await getHistoryMessages(nextPage)

    // 再等待一下让数据渲染完成
    await new Promise(resolve => setTimeout(resolve, 500))
  } catch (error) {
    console.error('加载历史记录失败:', error)
  } finally {
    // 确保停止下拉刷新动画
    uni.stopPullDownRefresh()
  }
})

const initWebSocket = () => {
  if (socketTask) {
    return
  }

  try {
    // Socket.IO兼容的WebSocket连接，使用/customer命名空间
    const wsUrl = `${useModel?.WS_BASE_URL}/ws/socket.io/?EIO=4&transport=websocket`

    socketTask = uni.connectSocket({
      url: wsUrl,
      header: {
        'content-type': 'application/json'
      }
    })
    // 监听Socket.IO连接打开事件
    uni.onSocketOpen((res: any) => {
      isConnected.value = true
      // 发送Socket.IO连接包到/customer命名空间
      const connectPacket = '40/customer,{"jwt":""}'
      uni.sendSocketMessage({
        data: connectPacket,
        success: () => {
          // 加入会话房间
          if (conversationId.value) {
            setTimeout(() => {
              const joinMessage = `42/customer,["join_conversation",{"conversation_id":"${conversationId.value}"}]`
              console.log('[Customer] 加入会话房间:', joinMessage)
              uni.sendSocketMessage({
                data: joinMessage,
                success: () => {
                  console.log('[Customer] 成功加入会话房间')
                },
                fail: (error: any) => {
                  console.error('[Customer] 加入会话房间失败:', error)
                }
              })
            }, 200)
          }
        },
        fail: (error: any) => {
          console.error('[Customer] Socket.IO连接包发送失败:', error)
        }
      })
    })

    // 监听Socket.IO错误事件
    uni.onSocketError((error: any) => {
      console.error('[Customer] WebSocket error:', error)
      isConnected.value = false
      socketTask = null
    })

    // 监听Socket.IO关闭事件
    uni.onSocketClose((res: any) => {
      console.log('[Customer] WebSocket disconnected', res)
      isConnected.value = false
      socketTask = null
    })

    // 监听Socket.IO消息事件
    uni.onSocketMessage((res: any) => {
      // 处理WebSocket消息
      const data = res.data

      // 处理字符串类型的消息
      if (typeof data === 'string') {
        // 处理Socket.IO协议数据包
        if (data.startsWith('42/customer,')) {
          // Socket.IO事件数据包
          const payload = data.substring('42/customer,'.length)
          try {
            const parsedData = JSON.parse(payload)
            console.log('解析Socket.IO事件:', parsedData)
            handleSocketEvent(parsedData)
          } catch (e) {
            console.error('解析Socket.IO数据失败:', e, '原始数据:', payload)
          }
        } else if (data.startsWith('40/customer')) {
          console.log('Socket.IO连接确认')
        } else if (data.startsWith('2')) {
          // Ping包，回复Pong
          uni.sendSocketMessage({
            data: '3'
          })
        } else if (data.startsWith('0')) {
          console.log('Socket.IO握手成功')
        } else {
          // 尝试直接解析JSON消息
          try {
            const jsonData = JSON.parse(data)
            console.log('解析JSON消息:', jsonData)
            handleJsonMessage(jsonData)
          } catch (e) {
            console.log('非JSON格式的字符串消息:', data)
          }
        }
      }
      // 处理对象类型的消息
      else if (typeof data === 'object') {
        console.log('收到对象类型消息:', data)
        handleObjectMessage(data)
      }
      // 处理二进制数据或其他类型
      else {
        console.log('收到其他类型消息，类型:', typeof data)
      }
    })
  } catch (error) {
    console.error('初始化Socket.IO异常:', error)
    isConnected.value = false
    socketTask = null
  }
}

// 处理Socket.IO事件消息
const handleSocketEvent = (parsedData: any) => {
  if (Array.isArray(parsedData) && parsedData.length >= 2) {
    const eventType = parsedData[0]
    const eventData = parsedData[1]
    console.log('[Customer] Socket.IO事件类型:', eventType, '事件数据:', eventData)

    if (eventType === 'new_message') {
      processMessage(eventData)
    } else if (eventType === 'join_conversation_response') {
      console.log('[Customer] Joined room:', eventData)
    } else if (eventType === 'message') {
      processMessage(eventData)
    } else if (eventType === 'typing') {
      processTypingIndicator(eventData)
    } else {
      console.log('[Customer] 未处理的Socket.IO事件类型:', eventType)
    }
  }
}

// 处理JSON格式消息
const handleJsonMessage = (jsonData: any) => {
  console.log('[Customer] 处理JSON消息:', jsonData)

  // 处理各种可能的消息结构
  if (jsonData.type === 'message' || jsonData.event === 'new_message') {
    processMessage(jsonData.data || jsonData)
  } else if (jsonData.type === 'typing' || jsonData.event === 'typing') {
    processTypingIndicator(jsonData.data || jsonData)
  } else if (jsonData.message || jsonData.content) {
    processMessage(jsonData)
  } else {
    console.log('[Customer] 未识别的JSON消息结构:', jsonData)
  }
}

// 处理对象类型消息
const handleObjectMessage = (objData: any) => {
  console.log('[Customer] 处理对象消息:', objData)

  // 直接处理消息对象
  if (objData.message || objData.content || objData.text) {
    processMessage(objData)
  } else if (objData.is_typing !== undefined) {
    processTypingIndicator(objData)
  } else {
    console.log('[Customer] 未识别的对象消息结构:', objData)
  }
}

// 处理typing指示器
const processTypingIndicator = (typingData: any) => {
  // 检查是否是客服正在输入
  if (typingData.is_typing && typingData.user_type === 'staff') {
    loading.value = true
    loadingText.value = '客服正在输入...'
  } else {
    loading.value = false
  }
}

// 处理消息内容的统一函数
const processMessage = (messageData: any) => {
  // 不显示自己发的消息（已经通过HTTP显示了）
  if (messageData.sender_type === 'customer' || messageData.role === 'user') {
    return
  }

  // 提取消息内容 - 客户端统一显示"客服"，不区分AI/人工
  let messageContent = ''
  if (typeof messageData === 'string') {
    messageContent = messageData
  } else {
    messageContent =
      messageData.message ||
      messageData.content ||
      messageData.text ||
      messageData.body ||
      '收到回复'
  }

  // 处理消息内容中的换行符
  if (typeof messageContent === 'string') {
    messageContent = messageContent.replace(/↵/g, '\n').replace(/\\n/g, '\n')
  }

  console.log('[Customer] 收到新消息内容:', messageContent)

  // 检查是否与上一条HTTP返回的消息相同，避免重复显示
  if (messageContent === lastMessageContent.value) {
    console.log('[Customer] 消息与HTTP返回的消息相同，跳过显示')
    lastMessageContent.value = '' // 清除缓存，准备下一次检查
    return
  }

  // 隐藏typing指示器
  loading.value = false

  // 添加到消息列表，统一显示为"客服"
  const newMessage: Message = {
    role: 'ai',
    content: messageContent,
    created_at:
      messageData.created_at ||
      messageData.timestamp ||
      messageData.time ||
      new Date().toISOString()
  }

  // 处理建议问题
  if (
    messageData.suggested_questions &&
    Array.isArray(messageData.suggested_questions) &&
    messageData.suggested_questions.length > 0
  ) {
    newMessage.quickQuestions = messageData.suggested_questions
  } else if (
    messageData.quickQuestions &&
    Array.isArray(messageData.quickQuestions) &&
    messageData.quickQuestions.length > 0
  ) {
    newMessage.quickQuestions = messageData.quickQuestions
  }

  // 处理确认信息
  if (messageData.need_confirmation !== undefined) {
    newMessage.needConfirmation = messageData.need_confirmation
  }
  if (messageData.confirmation_type !== undefined) {
    newMessage.confirmationType = messageData.confirmation_type
  }

  messages.value.push(newMessage)
  scrollToBottom()
}

const handleQuickQuestion = (question: string) => {
  inputMessage.value = question
  handleSendMessage()
}

const handleQuickFast = (name: string) => {
  handleQuickAction({ message: name })
}

// 处理快捷按钮点击
const handleQuickAction = (action: any) => {
  inputMessage.value = action.message
  handleSendMessage()
}

const handleConfirmation = (message: Message, confirmation: string) => {
  // 如果已经选择过，不再处理
  if (message.selectedConfirmation !== undefined) {
    return
  }

  // 设置选中状态
  message.selectedConfirmation = confirmation

  // 延迟发送消息，让用户看到选中效果
  setTimeout(() => {
    inputMessage.value = confirmation
    handleSendMessage()
  }, 300)
}

const handleSendMessage = async () => {
  const message = inputMessage.value.trim()
  const hasImages = useModel?.selectedImages?.value?.length > 0

  if ((!message && !hasImages) || loading.value) return
  const userPhone = auth.data?.user?.phone
  const projectId = auth.data?.selected_house?.asset_projects_id
  const projectName = auth.data?.selected_house?.full_name
  if (!userPhone) {
    uni.showToast({
      title: '请先登录！',
      icon: 'none'
    })
    return
  }

  if (!projectId) {
    uni.showToast({
      title: '请绑定房屋！',
      icon: 'none'
    })
    return
  }

  // 如果WebSocket未连接，先建立连接
  if (!isConnected.value) {
    initWebSocket()
    // 等待连接建立
    await new Promise(resolve => setTimeout(resolve, 1000))
  }

  // 图片已经在上传时就存储了OSS链接，直接使用
  const uploadedImages = useModel?.selectedImages?.value || []

  // 确定消息类型
  let messageType: 'text' | 'image' | 'mixed' = 'text'
  if (hasImages && message) {
    messageType = 'mixed'
  } else if (hasImages && !message) {
    messageType = 'image'
  }

  // 构建用户消息对象
  const userMessage: Message = {
    role: 'user',
    content: message || '', // 纯图片时传空字符串
    created_at: new Date().toISOString(),
    message_type: messageType,
    image_url: uploadedImages.length > 0 ? uploadedImages : undefined,
    images: uploadedImages.length > 0 ? uploadedImages : undefined
  }

  messages.value.push(userMessage)

  inputMessage.value = ''
  useModel.selectedImages.value = []
  scrollToBottom()

    // 发送消息时隐藏开场白
  console.log('发送消息时隐藏开场白3',showOpeningRemarks.value)
  if (!showOpeningRemarks.value) {
    showOpeningRemarks.value = true
  }

  // 判断消息中是否包含"查询"关键词，设置相应的loading文案
  if (message && message.includes('查询')) {
    loadingText.value = '正在查询中请稍后...'
  } else {
    loadingText.value = '正在输入中...'
  }

  loading.value = true

  try {
    // 使用HTTP接口发送消息
    const response = await method?.customRequest('public/chat', {
      platform: 'property',
      message: message || '', // 纯图片时传空字符串
      tenant_project_id: projectId,
      message_type: messageType,
      tenant_project_name: projectName || '',
      conversation_id: conversationId.value,
      image_url: uploadedImages.length > 0 ? uploadedImages : undefined
    })

    if (response.statusCode === 200) {
      const result = response.data as any
      console.log('[Customer] HTTP接口响应数据:', result)

      // 处理HTTP接口返回的回答消息
      let httpReplyMessage = null
      let suggestedQuestions = []
      let needConfirmation = false
      let confirmationType = null

      // 处理新的数据结构：{reply: "...", suggested_questions: [...], success: true, confirmation_type: "...", ...}
      if (result.reply && typeof result.reply === 'string') {
        httpReplyMessage = result.reply
        suggestedQuestions = result.suggested_questions || []
        needConfirmation = result.need_confirmation || false
        confirmationType = result.confirmation_type || null
      }
      // 兼容其他可能的数据结构
      else if (result.reply && result.reply.message) {
        httpReplyMessage = result.reply.message
        suggestedQuestions = result.reply.suggested_questions || result.suggested_questions || []
        needConfirmation = result.reply.need_confirmation || result.need_confirmation || false
        confirmationType = result.reply.confirmation_type || result.confirmation_type || null
      } else if (result.reply && result.reply.content) {
        httpReplyMessage = result.reply.content
        suggestedQuestions = result.reply.suggested_questions || result.suggested_questions || []
        needConfirmation = result.reply.need_confirmation || result.need_confirmation || false
        confirmationType = result.reply.confirmation_type || result.confirmation_type || null
      } else if (result.message) {
        httpReplyMessage = result.message
        suggestedQuestions = result.suggested_questions || []
        needConfirmation = result.need_confirmation || false
        confirmationType = result.confirmation_type || null
      } else if (result.content) {
        httpReplyMessage = result.content
        suggestedQuestions = result.suggested_questions || []
        needConfirmation = result.need_confirmation || false
        confirmationType = result.confirmation_type || null
      } else if (result.answer) {
        httpReplyMessage = result.answer
        suggestedQuestions = result.suggested_questions || []
        needConfirmation = result.need_confirmation || false
        confirmationType = result.confirmation_type || null
      } else if (result.response) {
        httpReplyMessage = result.response
        suggestedQuestions = result.suggested_questions || []
        needConfirmation = result.need_confirmation || false
        confirmationType = result.confirmation_type || null
      } else if (typeof result === 'string') {
        httpReplyMessage = result
      }

      // 如果HTTP接口返回了回答消息，直接展示
      if (httpReplyMessage) {
        console.log('[Customer] HTTP接口返回回答消息:', httpReplyMessage)
        console.log('[Customer] 建议问题:', suggestedQuestions)
        console.log('[Customer] 需要确认:', needConfirmation, '确认类型:', confirmationType)

        // 处理消息内容中的换行符
        let formattedMessage = httpReplyMessage
        if (typeof formattedMessage === 'string') {
          // 将 ↵ 替换为换行符，将 \n 替换为换行符
          formattedMessage = formattedMessage.replace(/↵/g, '\n').replace(/\\n/g, '\n')
        }

        // 记录消息内容，用于防止WebSocket重复显示
        lastMessageContent.value = formattedMessage

        // 隐藏loading指示器
        loading.value = false

        // 添加AI回答到消息列表，包含建议问题和确认信息
        messages.value.push({
          role: 'ai',
          content: formattedMessage,
          created_at: new Date().toISOString(),
          quickQuestions: suggestedQuestions.length > 0 ? suggestedQuestions : undefined,
          needConfirmation: needConfirmation,
          confirmationType: confirmationType,
          ...result
        })
        scrollToBottom()
      } else {
        // 如果HTTP接口没有返回回答消息，等待WebSocket接收AI的回复
        console.log('[Customer] 消息发送成功，等待WebSocket回复')
      }
    } else {
      throw new Error('请求失败')
    }
  } catch (error) {
    console.error('发送消息失败:', error)
    uni.showToast({
      title: '发送失败，请稍后重试',
      icon: 'none'
    })
    // 发送失败时才添加错误消息
    messages.value.push({
      role: 'ai',
      content: '抱歉，网络连接出现问题，请稍后再试。'
    })
    loading.value = false
    scrollToBottom()
  }
  // 发送成功时不设置loading为false，等待WebSocket回复后再设置
}

// 页面卸载时关闭WebSocket连接
onUnmounted(() => {
  if (socketTask || isConnected.value) {
    uni.closeSocket()
    socketTask = null
    isConnected.value = false
    console.log('页面卸载，WebSocket连接已关闭')
  }
})


// // 监听页面滚动
// onPageScroll((e) => {
//   if( e.scrollTop > useModel.scrollTopNumber.value){
//     useModel.scrollTopNumber.value = e.scrollTop
//     return
//   }
//   if ( useModel.scrollTopNumber.value - e.scrollTop > 60 && !showOpeningRemarks.value) {
//     showOpeningRemarks.value = true
//   }
// })

onShow(() =>{
  showOpeningRemarks.value = false
  useModel.scrollTopNumber.value = 0
})

onLoad(async op => {
  await getCurrentInstance()?.appContext.config.globalProperties.$onLaunched
  if (getLoginStatus?.getLoginStatus()) {
    userLoginStatus.value = true
    useModel.quickQuestionsData.value = await method?.getQuickQuestions()
    // 获取历史记录（如果有历史记录，会在接口返回成功后自动在最前方插入开场白）
    getHistoryMessages(1)
    if (op?.message) {
      handleQuickAction(op as QuickAction)
    }
  } else {
    userLoginStatus.value = false
    messages.value = []
  }
})
</script>
<style lang="scss">
@import './style.scss';
</style>
