<template>
  <view class="api-test-page">
    <view class="test-section">
      <text class="section-title">API测试</text>
      <button @click="testInstitutionalAPI" class="test-btn">测试建制API</button>
      <button @click="testMonkAPI" class="test-btn">测试高僧API</button>
      <button @click="testNetworkStatus" class="test-btn">测试网络状态</button>
    </view>

    <view class="result-section">
      <text class="section-title">测试结果</text>
      <text class="result-text">{{ testResult }}</text>
    </view>
  </view>
</template>

<script>
  import { getInstitutionalList } from '@/api/institutionalStructure/institutionalStructure.js'
  import { getMonkList } from '@/api/monk/monk.js'
  import { getRequestConfig } from '@/utils/request.js'

  export default {
    data() {
      return {
        testResult: '',
      }
    },
    methods: {
      async testInstitutionalAPI() {
        try {
          this.testResult = '正在测试建制API...'
          const result = await getInstitutionalList({ pageNum: 1, pageSize: 5 })
          this.testResult = `建制API测试成功: ${JSON.stringify(result, null, 2)}`
        } catch (error) {
          this.testResult = `建制API测试失败: ${error.message}`
        }
      },

      async testMonkAPI() {
        try {
          this.testResult = '正在测试高僧API...'
          const result = await getMonkList({ name: '' })
          this.testResult = `高僧API测试成功: ${JSON.stringify(result, null, 2)}`
        } catch (error) {
          this.testResult = `高僧API测试失败: ${error.message}`
        }
      },

      testNetworkStatus() {
        try {
          const config = getRequestConfig()
          this.testResult = `网络配置: ${JSON.stringify(config, null, 2)}`
        } catch (error) {
          this.testResult = `获取网络配置失败: ${error.message}`
        }
      },
    },
  }
</script>

<style lang="scss">
  .api-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>
