<template>
  <view class="container">
    <!-- 消息列表 -->
    <scroll-view class="message-list">
      <view v-for="(msg, index) in messages" :key="index" class="message-item">
        <text class="message-text">{{ msg.content }}</text>
      </view>
    </scroll-view>
    
    <!-- 输入区域 -->
    <view class="input-area">
      <input 
        class="input-box" 
        v-model="inputText" 
        placeholder="请输入消息"
        @confirm="sendMessage"
      />
      <button class="send-button" @click="sendMessage">发送</button>
    </view>
  </view>
</template>

<script setup lang="uts">
  import { ref } from 'vue'
  
  const inputText = ref('')
  const messages = ref<Array<{role: string, content: string}>>([])
  
  type ChatResponse = {
    choices: Array<{
      message: {
        role: string
        content: string
      }
    }>
  }
  
  function sendMessage() {
    if (!inputText.value.trim()) return
    
    // 添加用户消息
    messages.value.push({
      role: 'user',
      content: inputText.value
    })
    
    const userMessage = inputText.value
    inputText.value = ''
    
    // 调用API
    uni.request<ChatResponse>({
      url: 'https://maas-cn-southwest-2.modelarts-maas.com/v1/infers/8a062fd4-7367-4ab4-a936-5eeb8fb821c4/v1/chat/completions',
      method: 'POST',
      header: {
        'Content-Type': 'application/json',
        'Authorization': 'Bearer HGZrEhZx6uQcUQQFOeNWUON_2mEjNeRYWnjUHfhT72ORyMvV9jPCaGyjqiaabB9ZpT3P8h58i1UqL9lCzHvoRg'
      },
      data: {
        model: 'DeepSeek-R1',
        messages: [
          {"role": "system", "content": "You are a helpful assistant."},
          ...messages.value
        ],
        temperature: 0.6
      },
      success: (res) => {
        const reply = res.data?.choices[0]?.message?.content
        if (reply) {
          messages.value.push({
            role: 'assistant',
            content: reply
          })
        }
      },
      fail: () => {
        messages.value.push({
          role: 'assistant',
          content: '网络请求失败，请重试'
        })
      }
    })
  }
</script>

<style lang="scss">
  .container {
    flex: 1;
    flex-direction: column;
    padding: 20rpx;
  }
  
  .message-list {
    flex: 1;
    margin-bottom: 20rpx;
  }
  
  .message-item {
    margin-bottom: 20rpx;
    padding: 15rpx;
    border-radius: 10rpx;
    background-color: #f5f5f5;
  }
  
  .input-area {
    flex-direction: row;
    align-items: center;
  }
  
  .input-box {
    flex: 1;
    height: 80rpx;
    padding: 0 20rpx;
    border: 1rpx solid #ddd;
    border-radius: 40rpx;
    margin-right: 20rpx;
  }
  
  .send-button {
    width: 150rpx;
    height: 80rpx;
    background-color: #007aff;
    color: white;
    border-radius: 40rpx;
  }
</style>