<template>
  <view class="data-structure-test-page">
    <view class="test-section">
      <text class="section-title">数据结构测试</text>
      <button @click="testStandardStructure" class="test-btn">测试标准结构</button>
      <button @click="testAlternativeStructure" class="test-btn">测试备用结构</button>
      <button @click="testInvalidStructure" class="test-btn">测试无效结构</button>
    </view>
    
    <view class="result-section">
      <text class="section-title">测试结果</text>
      <text class="result-text">{{ testResult }}</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      testResult: ''
    }
  },
  methods: {
    // 模拟标准数据结构：response.data.list.rows
    testStandardStructure() {
      const mockResponse = {
        code: 200,
        msg: "操作成功",
        data: {
          donorCount: 3,
          proProfile: "简介",
          list: {
            total: 2,
            rows: [
              {
                id: "13",
                formedId: "5",
                realName: "吴键辉",
                amount: 100.10,
                donationDate: "2025-07-23 00:00:00"
              },
              {
                id: "14",
                formedId: "5",
                realName: "张三",
                amount: 200.50,
                donationDate: "2025-07-24 00:00:00"
              }
            ]
          }
        }
      }
      
      this.parseDataStructure(mockResponse, '标准结构测试')
    },
    
    // 模拟备用数据结构：response.data 直接是数组
    testAlternativeStructure() {
      const mockResponse = {
        code: 200,
        msg: "操作成功",
        data: [
          {
            id: "13",
            formedId: "5",
            realName: "李四",
            amount: 150.00,
            donationDate: "2025-07-25 00:00:00"
          }
        ]
      }
      
      this.parseDataStructure(mockResponse, '备用结构测试')
    },
    
    // 模拟无效数据结构
    testInvalidStructure() {
      const mockResponse = {
        code: 200,
        msg: "操作成功",
        data: {
          someOtherField: "不是数组"
        }
      }
      
      this.parseDataStructure(mockResponse, '无效结构测试')
    },
    
    // 解析数据结构的通用方法
    parseDataStructure(response, testName) {
      this.testResult = `${testName}开始...\n`
      this.testResult += `原始响应: ${JSON.stringify(response, null, 2)}\n\n`
      
      if (response.code === 200) {
        let dataArray = []
        
        const structureInfo = {
          hasData: !!response.data,
          hasDataList: !!(response.data && response.data.list),
          hasDataListRows: !!(response.data && response.data.list && response.data.list.rows),
          dataIsArray: Array.isArray(response.data),
          hasRows: !!response.rows,
          rowsIsArray: Array.isArray(response.rows)
        }
        
        this.testResult += `数据结构分析: ${JSON.stringify(structureInfo, null, 2)}\n\n`
        
        if (response.data && response.data.list && response.data.list.rows) {
          dataArray = response.data.list.rows
          this.testResult += '✅ 使用标准结构: response.data.list.rows\n'
        } else if (response.data && Array.isArray(response.data)) {
          dataArray = response.data
          this.testResult += '✅ 使用备用结构: response.data\n'
        } else if (response.rows && Array.isArray(response.rows)) {
          dataArray = response.rows
          this.testResult += '✅ 使用备用结构: response.rows\n'
        } else {
          this.testResult += '❌ 无法找到数据数组\n'
          return
        }
        
        this.testResult += `✅ 成功解析数据，共 ${dataArray.length} 条记录\n`
        this.testResult += `数据内容: ${JSON.stringify(dataArray, null, 2)}\n`
      } else {
        this.testResult += `❌ API响应失败: ${response.msg}\n`
      }
    }
  }
}
</script>

<style lang="scss">
.data-structure-test-page {
  padding: 40rpx;
}

.test-section {
  margin-bottom: 40rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
  display: block;
}

.test-btn {
  margin: 20rpx 0;
  padding: 20rpx;
  background-color: #007aff;
  color: white;
  border-radius: 10rpx;
}

.result-section {
  margin-top: 40rpx;
}

.result-text {
  font-size: 24rpx;
  color: #666;
  word-break: break-all;
  white-space: pre-wrap;
}
</style> 