<template>
  <div class="api-test-container">
    <a-card title="API连接测试" style="margin-bottom: 20px;">
      <div class="test-buttons">
        <a-button @click="testHealth" :loading="healthLoading" type="primary">
          测试服务器健康状态
        </a-button>
        <a-button @click="testMapData" :loading="mapLoading">
          测试地图数据
        </a-button>
        <a-button @click="testLogin" :loading="loginLoading">
          测试登录功能
        </a-button>
      </div>
      
      <div class="test-results">
        <h4>测试结果：</h4>
        <pre class="result-output">{{ testResults }}</pre>
      </div>
    </a-card>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { message } from 'ant-design-vue';
import { systemAPI, dashboardAPI, authAPI } from '../services/api.js';

const healthLoading = ref(false);
const mapLoading = ref(false);
const loginLoading = ref(false);
const testResults = ref('等待测试...');

// 测试服务器健康状态
const testHealth = async () => {
  healthLoading.value = true;
  try {
    const response = await systemAPI.getHealth();
    testResults.value = JSON.stringify(response, null, 2);
    message.success('健康检查成功');
  } catch (error) {
    testResults.value = `健康检查失败: ${error.message}`;
    message.error('健康检查失败');
  } finally {
    healthLoading.value = false;
  }
};

// 测试地图数据
const testMapData = async () => {
  mapLoading.value = true;
  try {
    const response = await dashboardAPI.getMapRegions();
    testResults.value = JSON.stringify(response, null, 2);
    message.success('地图数据获取成功');
  } catch (error) {
    testResults.value = `地图数据获取失败: ${error.message}`;
    message.error('地图数据获取失败');
  } finally {
    mapLoading.value = false;
  }
};

// 测试登录功能
const testLogin = async () => {
  loginLoading.value = true;
  try {
    const response = await authAPI.login({
      username: 'admin',
      password: '123456'
    });
    testResults.value = JSON.stringify(response, null, 2);
    message.success('登录测试成功');
  } catch (error) {
    testResults.value = `登录测试失败: ${error.message}`;
    message.error('登录测试失败');
  } finally {
    loginLoading.value = false;
  }
};
</script>

<style scoped>
.api-test-container {
  padding: 20px;
}

.test-buttons {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.test-results {
  margin-top: 20px;
}

.test-results h4 {
  margin-bottom: 10px;
  color: #333;
}

.result-output {
  background: #f5f5f5;
  border: 1px solid #ddd;
  padding: 15px;
  border-radius: 4px;
  max-height: 400px;
  overflow-y: auto;
  font-family: 'Courier New', monospace;
  font-size: 12px;
  white-space: pre-wrap;
  word-break: break-all;
}
</style>