<template>
  <view class="import-test">
    <view class="test-section">
      <text class="section-title">导入修复测试</text>
      <text class="description">测试loading管理器的导入是否正常</text>
      
      <button @click="testImport" class="test-btn">测试导入</button>
      <button @click="testLoading" class="test-btn">测试Loading功能</button>
    </view>
    
    <view class="result-section">
      <text class="section-title">测试结果</text>
      <text class="result-text">{{ testResult }}</text>
    </view>
  </view>
</template>

<script>
import {
  showLoading, 
  hideLoading, 
  forceHideLoading,
  getLoadingStatus,
  getLoadingConfig,
  initGlobalLoadingManager,
  AutoLoadingManager
} from '@/utils/request.js'

export default {
  data() {
    return {
      testResult: ''
    }
  },
  methods: {
    // 测试导入
    testImport() {
      try {
        this.testResult = '正在测试导入...'
        
        // 测试所有导入的函数
        const functions = {
          showLoading: typeof showLoading,
          hideLoading: typeof hideLoading,
          forceHideLoading: typeof forceHideLoading,
          getLoadingStatus: typeof getLoadingStatus,
          getLoadingConfig: typeof getLoadingConfig,
          initGlobalLoadingManager: typeof initGlobalLoadingManager,
          AutoLoadingManager: typeof AutoLoadingManager
        }
        
        console.log('导入的函数类型:', functions)
        
        // 检查是否都是函数
        const allFunctions = Object.values(functions).every(type => type === 'function')
        
        if (allFunctions) {
          this.testResult = '✅ 所有导入成功！\n' + JSON.stringify(functions, null, 2)
        } else {
          this.testResult = '❌ 部分导入失败！\n' + JSON.stringify(functions, null, 2)
        }
      } catch (error) {
        this.testResult = '❌ 导入测试失败: ' + error.message
      }
    },
    
    // 测试Loading功能
    testLoading() {
      try {
        this.testResult = '正在测试Loading功能...'
        
        // 测试基础功能
        showLoading('测试Loading...')
        
        setTimeout(() => {
          hideLoading()
          
          // 检查状态
          const status = getLoadingStatus()
          const config = getLoadingConfig()
          
          this.testResult = '✅ Loading功能测试成功！\n' + 
            '状态: ' + JSON.stringify(status, null, 2) + '\n' +
            '配置: ' + JSON.stringify(config, null, 2)
        }, 2000)
        
      } catch (error) {
        this.testResult = '❌ Loading功能测试失败: ' + error.message
      }
    }
  }
}
</script>

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

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

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

.description {
  font-size: 28rpx;
  color: #666;
  margin-bottom: 30rpx;
  display: block;
  line-height: 1.5;
}

.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> 