<template>
  <div class="chat-interface">
    <!-- 消息列表 -->
    <div class="messages-container" ref="messagesContainer">
      <div 
        class="message" 
        v-for="message in messages" 
        :key="message.id"
        :class="message.role"
      >
        <div class="message-avatar">
          <img :src="getAvatar(message.role)" :alt="message.role" />
        </div>
        <div class="message-content">
          <div class="message-text" v-html="message.content"></div>
          <div class="message-time">{{ message.timestamp }}</div>
        </div>
      </div>
      
      <!-- 加载中动画 -->
      <div class="message assistant" v-if="isLoading">
        <div class="message-avatar">
          <img src="@/assets/imgs/ai-avatar.svg" alt="AI" />
        </div>
        <div class="message-content">
          <div class="typing-indicator">
            <span></span>
            <span></span>
            <span></span>
          </div>
        </div>
      </div>
    </div>

    <!-- 输入框 -->
    <div class="input-container">
      <el-input
        v-model="inputMessage"
        type="textarea"
        :rows="3"
        placeholder="输入您的问题..."
        @keydown.enter.prevent="handleSend"
        :disabled="isLoading"
      />
      <el-button 
        type="primary" 
        @click="handleSend"
        :loading="isLoading"
        :disabled="!inputMessage.trim()"
      >
        发送
      </el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, nextTick, onMounted } from 'vue';
import { ElInput, ElButton } from 'element-plus';

const messagesContainer = ref<HTMLElement | null>(null);
const inputMessage = ref('');
const isLoading = ref(false);

const messages = ref<any[]>([
  {
    id: 1,
    role: 'assistant',
    content: '您好！我是AI思政助手，请问有什么可以帮助您的吗？',
    timestamp: new Date().toLocaleTimeString()
  }
]);

onMounted(() => {
  // TODO: 加载历史消息
});

async function handleSend() {
  if (!inputMessage.value.trim() || isLoading.value) return;
  
  const userMessage = {
    id: Date.now(),
    role: 'user',
    content: inputMessage.value,
    timestamp: new Date().toLocaleTimeString()
  };
  
  messages.value.push(userMessage);
  const question = inputMessage.value;
  inputMessage.value = '';
  
  await nextTick();
  scrollToBottom();
  
  // 模拟AI回复
  isLoading.value = true;
  
  // TODO: 调用AI API
  setTimeout(() => {
    const aiMessage = {
      id: Date.now(),
      role: 'assistant',
      content: `关于"${question}"，我来为您解答...`,
      timestamp: new Date().toLocaleTimeString()
    };
    
    messages.value.push(aiMessage);
    isLoading.value = false;
    
    nextTick(() => {
      scrollToBottom();
    });
  }, 1500);
}

function getAvatar(role: string) {
  return role === 'user' 
    ? '@/assets/imgs/user-avatar.svg' 
    : '@/assets/imgs/ai-avatar.svg';
}

function scrollToBottom() {
  if (messagesContainer.value) {
    messagesContainer.value.scrollTop = messagesContainer.value.scrollHeight;
  }
}
</script>

<style lang="scss" scoped>
.chat-interface {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.messages-container {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.message {
  display: flex;
  gap: 12px;
  
  &.user {
    flex-direction: row-reverse;
    
    .message-content {
      align-items: flex-end;
    }
    
    .message-text {
      background: #C62828;
      color: white;
    }
  }
  
  &.assistant {
    .message-text {
      background: #f5f5f5;
      color: #333;
    }
  }
}

.message-avatar {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 50%;
  overflow: hidden;
  
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

.message-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.message-text {
  padding: 12px 16px;
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.6;
  max-width: 80%;
  word-wrap: break-word;
}

.message-time {
  font-size: 12px;
  color: #999;
  padding: 0 4px;
}

.typing-indicator {
  display: flex;
  gap: 4px;
  padding: 12px 16px;
  background: #f5f5f5;
  border-radius: 12px;
  
  span {
    width: 8px;
    height: 8px;
    background: #999;
    border-radius: 50%;
    animation: typing 1.4s infinite;
    
    &:nth-child(2) {
      animation-delay: 0.2s;
    }
    
    &:nth-child(3) {
      animation-delay: 0.4s;
    }
  }
}

@keyframes typing {
  0%, 60%, 100% {
    transform: translateY(0);
  }
  30% {
    transform: translateY(-10px);
  }
}

.input-container {
  padding: 16px;
  border-top: 1px solid #e0e0e0;
  display: flex;
  gap: 12px;
  
  :deep(.el-textarea) {
    flex: 1;
  }
}
</style>

