<template>
  <view class="test-page">
    <view class="test-section">
      <text class="section-title">API测试</text>
      <button @click="testGetHomeConfig" class="test-btn">测试获取首页配置</button>
      <button @click="testWxLogin" class="test-btn">测试微信登录</button>
      <button @click="testEnvironment" 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 { getHomeConfig } from '@/api/index/index.js'
  import { wxLogin } from '@/api/auth/auth.js'
  import { getRequestConfig } from '@/utils/request.js'

  export default {
    data() {
      return {
        testResult: '',
      }
    },
    methods: {
      async testGetHomeConfig() {
        try {
          this.testResult = '正在测试获取首页配置...'
          const result = await getHomeConfig()
          this.testResult = `获取首页配置成功: ${JSON.stringify(result, null, 2)}`
        } catch (error) {
          this.testResult = `获取首页配置失败: ${error.message}`
        }
      },

      async testWxLogin() {
        try {
          this.testResult = '正在测试微信登录...'
          const mockData = {
            loginCode: 'test_code_123',
            appId: 1,
          }
          const result = await wxLogin(mockData)
          this.testResult = `微信登录测试成功: ${JSON.stringify(result, null, 2)}`
        } catch (error) {
          this.testResult = `微信登录测试失败: ${error.message}`
        }
      },

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

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