<template>
  <div class="h-screen max-w-3xl mx-auto relative">
    <!-- 聊天记录区域 -->
    <div class="overflow-y-auto pb-24 pt-4 px-4">
      <!-- 用户提问消息（靠右） -->
      <div class="flex justify-end mb-4">
        <div class="quesiton-container">
          <p>你是谁</p>
        </div>
      </div>

      <!-- 大模型回复消息（靠左） -->
      <div class="flex mb-4">
        <!-- 头像 -->
        <div class="flex-shrink-0 mr-3">
          <div class="w-8 h-8 rounded-full flex items-center justify-center border border-gray-200">
            <SvgIcon name="deepseek-logo" customCss="w-5 h-5"></SvgIcon>
          </div>
        </div>
        <!-- 回复的内容 -->
        <div class="p-1 max-w-[80%] mb-2 grow">
          <p>我是DeepSeek Chat，由深度求索公司开发的智能AI助手！✨ 我可以帮你解答各种问题，无论是学习、工作，还是日常生活中的小困惑，都可以找我聊聊。有什么我可以帮你的吗？😊</p>
        </div>
      </div>
    </div>
    <!-- 提问输入框 -->
    <div class="absolute bottom-0 left-0 w-full mb-5">
      <div class="bg-gray-100 rounded-3xl px-4 py-3 mx-4 border border-gray-200 flex flex-col">
        <textarea v-model="message" placeholder="给小维 AI 机器人发送消息"
          class="bg-transparent border-none outline-none w-full text-sm resize-none min-h-[24px]" rows="2"
          @input="autoResize" ref="textareaRef">
        </textarea>

        <!-- 发送按钮 -->
        <div class="flex justify-end">
          <button
            class="flex items-center justify-center bg-[#4d6bfe] rounded-full w-8 h-8 border border-[#4d6bfe] hover:bg-[#3b5bef] transition-colors">
            <SvgIcon name="up-arrow" customCss="w-5 h-5 text-white"></SvgIcon>
          </button>
        </div>
      </div>
      <!-- 提示文字 -->
      <div class="flex items-center justify-center text-xs text-gray-400 mt-2">内容由 AI 生成，请仔细甄别</div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
// 输入的消息
const message = ref('')

// textarea引用
const textareaRef = ref<HTMLElement | null>(null);

// 自动调整文本域高度
const autoResize = () => {
  const textarea = textareaRef.value;
  if (textarea) { // 若文本域存在
    textarea.style.height = 'auto'; // 1. 先将高度重置为 'auto'
    textarea.style.height = textarea.scrollHeight + 'px'; // 2. 再设置为内容的实际高度
  }
};
</script>

<style scoped>
.quesiton-container {
  font-size: 16px;
  line-height: 28px;
  color: #262626;
  padding: calc((44px - 28px) / 2) 20px;
  box-sizing: border-box;
  white-space: pre-wrap;
  word-break: break-word;
  background-color: #eff6ff;
  border-radius: 14px;
  max-width: calc(100% - 48px);
  position: relative;
}
</style>
