<template>
  <view class="loading-manager-test">
    <view class="test-section">
      <text class="section-title">Loading管理器测试</text>
      <text class="description">测试抽离后的Loading管理器功能</text>
      
      <button @click="testBasicLoading" class="test-btn">基础Loading测试</button>
      <button @click="testConcurrentLoading" class="test-btn">并发请求测试</button>
      <button @click="testCustomConfig" class="test-btn">自定义配置测试</button>
      <button @click="testStatusMonitoring" class="test-btn">状态监控测试</button>
      <button @click="testPageLoading" class="test-btn">页面Loading测试</button>
      <button @click="testErrorHandling" class="test-btn">错误处理测试</button>
      <button @click="testCompleteWorkflow" 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 { loadingExamples } from '@/utils/loading-example.js'

export default {
  data() {
    return {
      testResult: ''
    }
  },
  methods: {
    // 基础Loading测试
    testBasicLoading() {
      this.testResult = '正在测试基础Loading...'
      loadingExamples.basicLoadingExample()
      setTimeout(() => {
        this.testResult = '基础Loading测试完成，请查看控制台'
      }, 3000)
    },
    
    // 并发请求测试
    testConcurrentLoading() {
      this.testResult = '正在测试并发请求Loading...'
      loadingExamples.concurrentLoadingExample()
      setTimeout(() => {
        this.testResult = '并发请求测试完成，请查看控制台'
      }, 3000)
    },
    
    // 自定义配置测试
    testCustomConfig() {
      this.testResult = '正在测试自定义配置...'
      loadingExamples.customConfigExample()
      setTimeout(() => {
        this.testResult = '自定义配置测试完成，请查看控制台'
      }, 4000)
    },
    
    // 状态监控测试
    testStatusMonitoring() {
      this.testResult = '正在测试状态监控...'
      loadingExamples.statusMonitoringExample()
      setTimeout(() => {
        this.testResult = '状态监控测试完成，请查看控制台'
      }, 3000)
    },
    
    // 页面Loading测试
    testPageLoading() {
      this.testResult = '正在测试页面Loading...'
      loadingExamples.pageLoadingExample()
      setTimeout(() => {
        this.testResult = '页面Loading测试完成，请查看控制台'
      }, 4000)
    },
    
    // 错误处理测试
    testErrorHandling() {
      this.testResult = '正在测试错误处理...'
      loadingExamples.errorHandlingExample()
      setTimeout(() => {
        this.testResult = '错误处理测试完成，请查看控制台'
      }, 2000)
    },
    
    // 完整流程测试
    testCompleteWorkflow() {
      this.testResult = '正在测试完整流程...'
      loadingExamples.completeWorkflowExample()
      setTimeout(() => {
        this.testResult = '完整流程测试完成，请查看控制台'
      }, 4000)
    }
  }
}
</script>

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