<template>
  <div class="procurement-test">
    <a-card title="设备采购模块测试" :bordered="false">
      <template #extra>
        <a-space>
          <a-button type="primary" @click="testApi">
            测试API
          </a-button>
          <a-button @click="testSearch">
            测试搜索
          </a-button>
          <a-button @click="testAdd">
            测试新增
          </a-button>
        </a-space>
      </template>

      <a-divider />

      <div class="test-results">
        <h3>测试结果</h3>
        <a-textarea
          v-model="testResults"
          :rows="10"
          placeholder="测试结果将显示在这里..."
          readonly
        />
      </div>

      <a-divider />

      <div class="test-params">
        <h3>测试参数</h3>
        <a-form layout="vertical">
          <a-row :gutter="16">
            <a-col :span="8">
              <a-form-item label="设备名称">
                <a-input v-model="testParams.equipmentName" placeholder="测试设备" />
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item label="设备型号">
                <a-input v-model="testParams.equipmentModel" placeholder="测试型号" />
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item label="供应商">
                <a-input v-model="testParams.supplierName" placeholder="测试供应商" />
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </div>
    </a-card>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { Message } from '@arco-design/web-vue'
import { equipmentProcurementApi } from '@/apis/equipment/procurement'

defineOptions({ name: 'ProcurementTest' })

const testResults = ref('')
const testParams = reactive({
  equipmentName: '测试设备',
  equipmentModel: '测试型号',
  supplierName: '测试供应商',
})

// 添加测试结果
const addTestResult = (message: string) => {
  const timestamp = new Date().toLocaleString()
  testResults.value += `[${timestamp}] ${message}\n`
}

// 测试API
const testApi = async () => {
  try {
    addTestResult('开始测试API...')
    
    const params = {
      page: 1,
      pageSize: 10,
      equipmentName: testParams.equipmentName,
      equipmentModel: testParams.equipmentModel,
      supplierName: testParams.supplierName,
    }
    
    addTestResult(`请求参数: ${JSON.stringify(params, null, 2)}`)
    
    const response = await equipmentProcurementApi.page(params)
    
    addTestResult(`API响应: ${JSON.stringify(response, null, 2)}`)
    Message.success('API测试成功')
  } catch (error: any) {
    addTestResult(`API测试失败: ${error.message}`)
    Message.error('API测试失败')
  }
}

// 测试搜索
const testSearch = () => {
  addTestResult('测试搜索功能...')
  addTestResult(`搜索参数: ${JSON.stringify(testParams, null, 2)}`)
  Message.info('搜索测试完成')
}

// 测试新增
const testAdd = () => {
  addTestResult('测试新增功能...')
  addTestResult(`新增参数: ${JSON.stringify(testParams, null, 2)}`)
  Message.info('新增测试完成')
}
</script>

<style scoped lang="scss">
.procurement-test {
  .test-results {
    margin-bottom: 24px;
    
    h3 {
      margin-bottom: 16px;
      color: var(--color-text-1);
    }
  }
  
  .test-params {
    h3 {
      margin-bottom: 16px;
      color: var(--color-text-1);
    }
  }
}
</style> 