<template>
    <div class="container">
      <!-- 引用 HeaderBar.vue 组件 -->
      <HeaderBar />
  
      <!-- 主容器 -->
      <div class="main-container">
        <!-- 侧边栏 -->
        <aside class="sidebar">
          <h2 class="sidebar-title">历史对话</h2>
          <ul class="history-list">
            <li class="history-item" v-for="(item, index) in historyItems" :key="index">
              <span class="history-text">{{ item.text }}</span>
              <div class="history-actions">
                <!-- 编辑按钮 -->
                <button class="action-btn" title="编辑" @click.stop="editItem(item)">
                  <img src="@/assets/images/edit.png" alt="编辑" />
                </button>
                <!-- 删除按钮 -->
                <button class="action-btn" title="删除" @click.stop="deleteItem(item)">
                  <img src="@/assets/images/delete.png" alt="删除" />
                </button>
              </div>
            </li>
          </ul>
        </aside>
  
        <!-- 聊天区域 -->
        <main class="chat-area">
          <div class="chat-content">
            <div class="welcome-message">
              <!-- 机器人头像 -->
              <div class="bot-avatar">
                <img src="@/assets/images/aiRobot.png" alt="机器人头像" />
              </div>
              <div class="welcome-text">我可以回答各种问题，欢迎提问</div>
            </div>
          </div>
  
          <!-- 输入区域 -->
          <div class="input-area">
            <div class="input-container">
              <textarea class="message-input" placeholder="请输入您的问题..." v-model="message"></textarea>
              <button class="send-button" @click="sendMessage">发送</button>
            </div>
          </div>
        </main>
      </div>
    </div>
  </template>
  
  <script setup lang="ts">
  import { ref } from 'vue';
  import HeaderBar from '@/components/HeaderBar.vue';
  
  // 定义 HistoryItem 接口
  interface HistoryItem {
    text: string;
  }
  
  const message = ref('');
  const historyItems = ref<HistoryItem[]>([
    { text: '这是一个历史对话' },
    { text: '这是一个历史对话' },
  ]);
  
  const sendMessage = () => {
    const msg = message.value.trim();
    if (msg) {
      console.log('发送消息:', msg);
      // 这里可以添加实际的发送逻辑
      message.value = '';
    }
  };
  
  const editItem = (item: HistoryItem) => {
    console.log('编辑历史对话:', item.text);
    // 这里可以添加编辑逻辑
  };
  
  const deleteItem = (item: HistoryItem) => {
    console.log('删除历史对话:', item.text);
    // 这里可以添加删除逻辑
  };
  </script>
  
  <style scoped>
  /* 重置默认样式 */
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  body {
    font-family: 'Microsoft YaHei', Arial, sans-serif;
    background: linear-gradient(135deg, #f5f1ff 0%, #e8ddff 100%);
    min-height: 100vh;
  }
  

  /* 主容器 */
  .main-container {
  display: flex;
  height: 100%; /* 确保主容器的高度是100% */
}

  .container {
    position: absolute;
    background-color: transparent;
    left: 100px;
    top: 2%;
    width: 94%;
    height: 100%;
  }
  
  /* 侧边栏 */
  .sidebar {
    width: 300px;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    border-right: 1px solid rgba(200, 180, 255, 0.3);
    padding: 20px;
    overflow-y: auto;
  }
  
  .sidebar-title {
    font-size: 18px;
    font-weight: bold;
    color: #333;
    margin-bottom: 20px;
    text-align: center;
  }
  
  .history-list {
    list-style: none;
  }
  
  .history-item {
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(200, 180, 255, 0.3);
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    transition: all 0.3s;
  }
  
  .history-item:hover {
    background: rgba(156, 136, 255, 0.1);
    border-color: #9c88ff;
  }
  
  .history-text {
    font-size: 14px;
    color: #666;
    flex: 1;
  }
  
  .history-actions {
    display: flex;
    gap: 8px;
  }
  
  .action-btn {
    width: 24px;
    height: 24px;
    background: none;
    border: none;
    cursor: pointer;
    border-radius: 4px;
    transition: color 0.3s;
  }
  
  .action-btn:hover {
    color: #9c88ff;
  }
  
  /* 聊天区域 */
  .chat-area {
    display: flex;
    flex-direction: column;
    background: rgba(255, 255, 255, 0.5);
    margin-top: 5%;
    margin-left: 7%;
    width: 60%;
    height: 80%;
    border-radius: 10px;
  }
  
  .chat-content {
    flex: 1;
    padding: 20px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* 垂直方向上靠上 */
  align-items: flex-start; /* 水平方向上靠左 */
  }
  
  .welcome-message {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(200, 180, 255, 0.3);
    border-radius: 20px;
    padding: 16px 24px;
    box-shadow: 0 4px 20px rgba(156, 136, 255, 0.1);
  }
  
  .bot-avatar {
    width: 40px;
    height: 40px;
    background: transparent;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: white;
  }
  
  .bot-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  .welcome-text {
    font-size: 16px;
    color: #333;
  }
  
  /* 输入区域 */
  .input-area {
    padding: 20px;
    border-top: 1px solid rgba(200, 180, 255, 0.3);
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
  }
  
  .input-container {
    display: flex;
    gap: 12px;
    align-items: flex-end;
  }
  
  .message-input {
    flex: 1;
    min-height: 100px;
    max-height: 200px;
    padding: 16px;
    border: 1px solid rgba(200, 180, 255, 0.5);
    border-radius: 12px;
    resize: none;
    font-size: 14px;
    font-family: inherit;
    outline: none;
    background: rgba(255, 255, 255, 0.9);
    transition: border-color 0.3s;
  }
  
  .message-input:focus {
    border-color: #9c88ff;
  }
  
  .send-button {
    padding: 12px 24px;
    background: linear-gradient(45deg, #9c88ff, #ff6b9d);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    white-space: nowrap;
  }
  
  .send-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(156, 136, 255, 0.3);
  }
  
  .send-button:active {
    transform: translateY(0);
  }
  
  /* 响应式设计 */
  @media (max-width: 768px) {
    .sidebar {
      width: 250px;
    }
    
    .search-bar {
      max-width: 200px;
    }
    
    .nav-icons {
      gap: 12px;
    }
  }
  
  @media (max-width: 640px) {
    .main-container {
      flex-direction: column;
    }
    
    .sidebar {
      width: 100%;
      height: 150px;
      border-right: none;
      border-bottom: 1px solid rgba(200, 180, 255, 0.3);
    }
    
    .chat-area {
      height: calc(100vh - 220px);
      margin-top: 150px; /* 调整为150px以适应HeaderBar和侧边栏的高度 */
    }
    
    .search-bar {
      display: none;
    }
  }
  
  /* 滚动条样式 */
  ::-webkit-scrollbar {
    width: 6px;
  }
  
  ::-webkit-scrollbar-track {
    background: rgba(200, 180, 255, 0.1);
    border-radius: 3px;
  }
  
  ::-webkit-scrollbar-thumb {
    background: rgba(156, 136, 255, 0.3);
    border-radius: 3px;
  }
  
  ::-webkit-scrollbar-thumb:hover {
    background: rgba(156, 136, 255, 0.5);
  }
  </style>
  