<template>
  <view class="simple-loading-demo">
    <view class="demo-section">
      <text class="section-title">简化Loading使用示例</text>
      <text class="description">现在所有API调用都会自动显示loading，无需手动管理</text>
      
      <button @click="testAutoLoading" class="demo-btn">测试自动Loading</button>
      <button @click="testNoLoading" class="demo-btn">测试无Loading</button>
      <button @click="testMultipleRequests" class="demo-btn">测试多个请求</button>
    </view>
    
    <view class="result-section">
      <text class="section-title">测试结果</text>
      <text class="result-text">{{ testResult }}</text>
    </view>
  </view>
</template>

<script>
import { get } from '@/utils/request.js'

export default {
  data() {
    return {
      testResult: ''
    }
  },
  methods: {
    // 测试自动loading（默认行为）
    async testAutoLoading() {
      try {
        this.testResult = '正在测试自动loading...'
        // 这个请求会自动显示loading
        const result = await get('/app/monk/listMonk', { pageNum: 1, pageSize: 5 })
        this.testResult = `自动loading测试成功:\n${JSON.stringify(result, null, 2)}`
      } catch (error) {
        this.testResult = `自动loading测试失败: ${error.message}`
      }
    },
    
    // 测试无loading
    async testNoLoading() {
      try {
        this.testResult = '正在测试无loading...'
        // 这个请求不会显示loading
        const result = await get('/app/monk/listMonk', { pageNum: 1, pageSize: 5 }, {
          showLoading: false
        })
        this.testResult = `无loading测试成功:\n${JSON.stringify(result, null, 2)}`
      } catch (error) {
        this.testResult = `无loading测试失败: ${error.message}`
      }
    },
    
    // 测试多个并发请求
    async testMultipleRequests() {
      try {
        this.testResult = '正在测试多个并发请求...'
        
        // 同时发起多个请求，loading会智能管理
        const promises = [
          get('/app/monk/listMonk', { pageNum: 1, pageSize: 3 }),
          get('/app/formed/listFormed', { pageNum: 1, pageSize: 3 }),
          get('/app/donor/listDonor', { formedId: '1', pageNum: 1, pageSize: 3 })
        ]
        
        const results = await Promise.all(promises)
        this.testResult = `多个请求测试成功:\n${JSON.stringify(results, null, 2)}`
      } catch (error) {
        this.testResult = `多个请求测试失败: ${error.message}`
      }
    }
  }
}
</script>

<style lang="scss">
.simple-loading-demo {
  padding: 40rpx;
}

.demo-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;
}

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