<template>
  <view class="safe-area-top flex flex-col box-border from-blue-100 to-white bg-gradient-to-b pt-4 flex-1 pb-4">
    <!-- 角色切换部分 -->
    <view class="flex border-blue-300 mx-4 p-1 bg-white rounded-xl">
      <view class="flex items-center flex-1 p-2 box-border rounded-xl cursor-pointer"
        :class="selectedRole === 'legal' ? 'bg-blue-300 text-white' : ''" @click="selectRole('legal')">
        <image src="/static/image/ai_picture.webp" class="w-10 h-10 rounded-xl mr-2" alt="AI律师" />
        法律咨询
      </view>
      <view class="flex items-center flex-1 p-2 box-border rounded-xl cursor-pointer"
        :class="selectedRole === 'emotional' ? 'bg-blue-300 text-white' : ''" @click="selectRole('emotional')">
        <image src="/static/image/ai_qinggan.png" class="w-10 h-10 rounded-xl mr-2" alt="AI心理咨询师" />
        情感咨询
      </view>
    </view>

    <!-- 聊天窗口 -->
    <view class="mx-4 flex flex-col flex-1 rounded-xl shadow-lg">
      <view class="flex flex-col flex-1 p-4">
        <view class="flex-1 overflow-y-auto">
          <view v-for="(message, index) in currentMessages" :key="index" class="mb-4">
            <view v-if="message.sender === 'ai'" class="flex justify-start items-start">
              <!-- 根据角色显示不同的AI形象 -->
              <image :src="selectedRole === 'legal' ? '/static/image/ai_picture.webp' : '/static/image/ai_qinggan.png'"
                class=" flex-shrink-0 w-10 h-10 rounded-xl mr-2" :alt="selectedRole === 'legal' ? 'AI律师' : 'AI心理咨询师'" />
              <view class="inline-block max-w-max rounded-xl bg-white p-2 text-left"
                :class="selectedRole === 'legal' ? 'text-green-600' : 'text-purple-600'">
                <!-- 如果是AI消息，显示加载中或文本 -->
                <view v-if="message.loading" class="flex justify-center items-center">
                  <view class="loader"></view> <!-- 加载动画 -->
                </view>
                <view v-else>
                  {{ message.text }}
                </view>
              </view>
            </view>
            <view v-else class="flex justify-end">
              <view class="ml-auto inline-block max-w-max rounded-xl from-sky-300 via-sky-300 to-sky-300
                bg-gradient-to-r p-2 text-right text-white font-medium shadow-md">
                {{ message.text }}
              </view>
            </view>
          </view>
        </view>
        <!-- 输入区域 -->
        <view class="p-2 w-full input-area flex items-center gap-2">
          <input v-model="userMessage" :placeholder="selectedRole === 'legal' ? '请输入您的法律问题...' : '请输入您的情感问题...'"
            class="flex-1 p-2 border rounded-lg" type="text" @confirm="sendMessage" />
          <button class="shadow p-2 bg-blue-500 text-white rounded-lg" @click="sendMessage">
            发送
          </button>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onBeforeUnmount, computed } from 'vue'
import chatEncrypt from "@/utils/chatEncrypt"

// 当前选中的角色，默认是法律咨询
const selectedRole = ref('legal')

// 用户输入的消息
const userMessage = ref('')

// 存储每个角色的消息记录
const messages = ref({
  legal: [
    { sender: 'ai', text: '欢迎！请问有什么法律问题需要帮助？' },
  ],
  emotional: [
    { sender: 'ai', text: '欢迎！请问有什么情感问题需要帮助？' },
  ]
})

// 存储每个角色的 sessionID
const sessionID = ref({
  legal: "",
  emotional: ""
})

let reader = {
  legal: null,
  emotional: null
}

// 计算当前选中的角色的消息
const currentMessages = computed(() => messages.value[selectedRole.value])

// 选择角色
function selectRole(role) {
  if (selectedRole.value !== role) {
    selectedRole.value = role
    // 如果该角色还没有消息记录，初始化欢迎消息
    if (!messages.value[role]) {
      messages.value[role] = [
        { sender: 'ai', text: role === 'legal' ? '欢迎！请问有什么法律问题需要帮助？' : '欢迎！请问有什么情感问题需要帮助？' },
      ]
      sessionID.value[role] = ""
    }
  }
}

async function sendMessage() {
  if (userMessage.value.trim() === '') return;

  // 获取当前角色
  const role = selectedRole.value

  // 用户消息推入对应角色的消息列表
  messages.value[role].push({ sender: 'user', text: userMessage.value })

  const t = Date.now()
  const x = chatEncrypt(String(t))

  // 在消息列表中添加一个 AI 消息并标记为加载状态
  const aiMessage = { sender: 'ai', text: '', loading: true }
  messages.value[role].push(aiMessage)
  console.log("import.meta.env.VITE_APP_BASE_URL", import.meta.env.VITE_APP_BASE_URL)
  // 发起请求
  try {
    const response = await uni.request({
      url: import.meta.env.VITE_APP_BASE_URL + '/api/v1/chat/send',
      method: 'POST',
      header: {
        'Content-Type': 'application/json',
        'x': x,
        't': t,
      },
      data: {
        prompt: userMessage.value,
        platform_id: 2,
        // roleid: role === 'legal' ? 1 : 2, // 根据角色选择不同的 roleid
        role_id: 1, // 根据角色选择不同的 roleid
        openid: 'openid' + uni.getStorageSync("token"),
        userid: 'userid' + uni.getStorageSync("token"),
        sessionid: sessionID.value[role]  // 使用对应角色的 sessionID
      },
      responseType: 'text',
      enableChunked: true, // 启用分块传输
      enableStream: true,  // 启用流式传输
      success: (streamRes) => {
        if (streamRes.statusCode === 200) {
          aiMessage.loading = false;

          // 处理流式响应
          const chunks = streamRes.data.split('\n');
          for (const chunk of chunks) {
            if (chunk.trim()) {
              let message = chunk;
              if (message.startsWith('data:')) {
                message = message.replace('data:', '').trim();
              }
              console.log("message", message);
              try {
                const parsedMessage = JSON.parse(message);
                console.log("parsedMessage", parsedMessage);

                if (parsedMessage?.output?.session_id) {
                  // 存储 session_id
                  sessionID.value[role] = parsedMessage?.output?.session_id;
                }

                // 获取 AI 回复的文本
                const aiText = parsedMessage.output.text || '';

                // 模拟打字机效果（逐字添加文本）
                const addTextWithTypingEffect = (text) => {
                  if (!text) return;

                  // 直接添加到消息中（实时更新）
                  aiMessage.text += text;
                  // 强制更新视图
                  messages.value[role] = [...messages.value[role]];
                };

                // 执行打字机效果
                addTextWithTypingEffect(aiText);
              } catch (e) {
                console.error('Failed to parse message:', e);
              }
            }
          }
        }
      },
      fail: (err) => {
        console.error('Request failed:', err);
        aiMessage.loading = false;
        aiMessage.text = '抱歉，请求失败，请重试';
        messages.value[role] = [...messages.value[role]];
      }
    });
  } catch (error) {
    console.error('Request error:', error);
  }

  userMessage.value = ''; // 清空输入框
}

onBeforeUnmount(() => {
  // 在UniApp中，不需要特别取消流读取，UniApp会自动处理
})
</script>

<style scoped>
input {
  padding: 0.5rem;
  border: 1px solid #ddd;
  border-radius: 0.5rem;
}

button {
  padding: 0.5rem 1rem;
  background-color: #007bff;
  border: none;
  border-radius: 0.5rem;
  color: white;
}

button:hover {
  background-color: #0056b3;
}

.loader {
  border: 4px solid #f3f3f3;
  /* Light gray */
  border-top: 4px solid #3498db;
  /* Blue */
  border-radius: 50%;
  width: 24px;
  height: 24px;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/* Tab Styles */
.flex.border-blue-300>view {
  transition: all 0.3s;
}
</style>
<route lang="json">{
  "layout": "home"
}</route>
