<template>
  <div class="test-api-container">
    <h1>API 测试页面</h1>
    <div class="test-section">
      <h2>测试获取聊天模式</h2>
      <el-button @click="testGetChatModes" type="primary">获取聊天模式</el-button>
      <div class="response-area">
        <h3>响应结果：</h3>
        <pre>{{ chatModesResponse }}</pre>
      </div>
    </div>
    <div class="test-section">
      <h2>测试获取用户列表</h2>
      <el-button @click="testGetUsers" type="primary">获取用户列表</el-button>
      <div class="response-area">
        <h3>用户列表响应：</h3>
        <pre>{{ usersResponse }}</pre>
      </div>
    </div>
  </div>
</template>

<script>
import { getChatModes } from '@/api/chat'
import { getUsers } from '@/api/user'

export default {
  name: 'TestApi',
  data() {
    return {
      message: '',
      sendMessageResponse: '',
      chatModesResponse: '',
      usersResponse: '',
      token: '' // 这里需要填入实际的 token
    }
  },
  methods: {
    async testSendMessage() {
      try {
        const response = await sendMessage({
          message: this.message
        }, this.token)
        this.sendMessageResponse = JSON.stringify(response, null, 2)
      } catch (error) {
        this.sendMessageResponse = `错误：${error.message}`
      }
    },
    async testGetChatModes() {
      try {
        const response = await getChatModes()
        this.chatModesResponse = JSON.stringify(response, null, 2)
      } catch (error) {
        this.chatModesResponse = `错误：${error.message}`
      }
    },
    async testGetUsers() {
      try {
        const response = await getUsers()
        this.usersResponse = JSON.stringify(response, null, 2)
      } catch (error) {
        this.usersResponse = `错误：${error.message}`
      }
    }
  }
}
</script>

<style scoped>
.test-api-container {
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
}

.test-section {
  margin-bottom: 30px;
  padding: 20px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
}

.response-area {
  margin-top: 20px;
  padding: 10px;
  background-color: #f5f7fa;
  border-radius: 4px;
}

pre {
  white-space: pre-wrap;
  word-wrap: break-word;
}
</style>
