<template>
  <div class="test-projects">
    <h1>项目接口测试页面</h1>
    
    <div class="test-section">
      <h2>1. 登录测试</h2>
      <a-button @click="testLogin" :loading="loginLoading">
        测试登录
      </a-button>
      <div v-if="loginResult" class="result">
        <pre>{{ loginResult }}</pre>
      </div>
    </div>

    <div class="test-section">
      <h2>2. 项目接口测试</h2>
      <a-button @click="testProjects" :loading="projectsLoading" :disabled="!token">
        测试项目接口
      </a-button>
      <div v-if="projectsResult" class="result">
        <pre>{{ projectsResult }}</pre>
      </div>
    </div>

    <div class="test-section">
      <h2>3. 项目数据展示</h2>
      <div v-if="projects.length > 0">
        <p>共 {{ projects.length }} 个项目</p>
        <div v-for="project in projects" :key="project.id" class="project-item">
          <h3>{{ project.name }}</h3>
          <p>状态: {{ project.status }}</p>
          <p>养殖场: {{ project.farmName }}</p>
          <p>监管对象: {{ project.supervisionObject }}</p>
          <p>监管数量: {{ project.supervisionQuantity }}</p>
          <p>监管金额: {{ project.supervisionAmount }} 元</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { message } from 'ant-design-vue'
import { api } from '@/utils/api'

const loginLoading = ref(false)
const projectsLoading = ref(false)
const loginResult = ref('')
const projectsResult = ref('')
const token = ref('')
const projects = ref([])

const testLogin = async () => {
  try {
    loginLoading.value = true
    loginResult.value = '正在登录...'
    
    const response = await api.auth.login('admin', 'Admin123456')
    
    if (response.success) {
      token.value = response.data.token
      loginResult.value = `登录成功！\nToken: ${token.value.substring(0, 50)}...\n用户: ${response.data.user.username}`
      message.success('登录成功')
    } else {
      loginResult.value = `登录失败: ${response.message}`
      message.error('登录失败')
    }
  } catch (error) {
    loginResult.value = `登录错误: ${error.message}`
    message.error('登录错误')
  } finally {
    loginLoading.value = false
  }
}

const testProjects = async () => {
  try {
    projectsLoading.value = true
    projectsResult.value = '正在获取项目列表...'
    
    const response = await api.projects.getList({
      page: 1,
      limit: 12,
      search: '',
      status: ''
    })
    
    if (response.success) {
      projects.value = response.data.projects || []
      projectsResult.value = `获取成功！\n项目数量: ${projects.value.length}\n总数量: ${response.data.pagination.total}`
      message.success('获取项目列表成功')
    } else {
      projectsResult.value = `获取失败: ${response.message}`
      message.error('获取项目列表失败')
    }
  } catch (error) {
    projectsResult.value = `获取错误: ${error.message}`
    message.error('获取项目列表错误')
  } finally {
    projectsLoading.value = false
  }
}
</script>

<style scoped>
.test-projects {
  padding: 24px;
  max-width: 1200px;
  margin: 0 auto;
}

.test-section {
  margin-bottom: 32px;
  padding: 16px;
  border: 1px solid #d9d9d9;
  border-radius: 8px;
}

.result {
  margin-top: 16px;
  padding: 12px;
  background-color: #f5f5f5;
  border-radius: 4px;
  white-space: pre-wrap;
  font-family: monospace;
  font-size: 12px;
}

.project-item {
  margin-bottom: 16px;
  padding: 12px;
  border: 1px solid #e8e8e8;
  border-radius: 4px;
  background-color: #fafafa;
}

.project-item h3 {
  margin: 0 0 8px 0;
  color: #1890ff;
}

.project-item p {
  margin: 4px 0;
  color: #666;
}
</style>
