<template>
  <view class="container">
    <view class="header">
      <text class="title">字典获取优化演示</text>
      <text class="subtitle">对比原方式和批量获取的性能差异</text>
    </view>

    <!-- 性能对比 -->
    <view class="performance-section">
      <view class="section-title">性能对比</view>
      
      <!-- 原有方式 -->
      <view class="test-item">
        <view class="test-header">
          <text class="test-name">原方式（单个获取）</text>
          <button 
            class="test-btn old-style" 
            @click="testOldMethod"
            :disabled="oldTesting">
            {{ oldTesting ? '测试中...' : '开始测试' }}
          </button>
        </view>
        <view class="test-result" v-if="oldResult">
          <text class="result-text">耗时: {{ oldResult.time }}ms</text>
          <text class="result-text">请求次数: {{ oldResult.requests }}次</text>
          <text class="result-text">获取数据: {{ oldResult.count }}个字典</text>
        </view>
      </view>

      <!-- 新方式 -->
      <view class="test-item">
        <view class="test-header">
          <text class="test-name">新方式（批量获取）</text>
          <button 
            class="test-btn new-style" 
            @click="testNewMethod"
            :disabled="newTesting">
            {{ newTesting ? '测试中...' : '开始测试' }}
          </button>
        </view>
        <view class="test-result" v-if="newResult">
          <text class="result-text">耗时: {{ newResult.time }}ms</text>
          <text class="result-text">请求次数: {{ newResult.requests }}次</text>
          <text class="result-text">获取数据: {{ newResult.count }}个字典</text>
          <text class="improvement">
            性能提升: {{ newResult.improvement }}
          </text>
        </view>
      </view>
    </view>

    <!-- 缓存演示 -->
    <view class="cache-section">
      <view class="section-title">缓存机制演示</view>
      
      <view class="cache-controls">
        <button class="cache-btn" @click="testCache">测试缓存效果</button>
        <button class="cache-btn clear" @click="clearCache">清除缓存</button>
      </view>
      
      <view class="cache-result" v-if="cacheResult">
        <text class="cache-text">第一次获取: {{ cacheResult.firstTime }}ms</text>
        <text class="cache-text">缓存获取: {{ cacheResult.cacheTime }}ms</text>
        <text class="cache-text">性能提升: {{ cacheResult.improvement }}</text>
      </view>
    </view>

    <!-- 字典数据展示 -->
    <view class="data-section">
      <view class="section-title">字典数据展示</view>
      
      <view class="dict-tabs">
        <view 
          class="tab-item" 
          :class="{ active: activeTab === key }"
          v-for="(data, key) in dictData" 
          :key="key"
          @click="activeTab = key">
          {{ getDictDisplayName(key) }}
        </view>
      </view>
      
      <scroll-view class="dict-content" scroll-y>
        <view class="dict-items" v-if="dictData[activeTab]">
          <view 
            class="dict-item" 
            v-for="(item, index) in dictData[activeTab]" 
            :key="index">
            <text class="item-name">{{ item.name || item.text || '-' }}</text>
            <text class="item-value">{{ item.value || '-' }}</text>
          </view>
        </view>
        <view class="empty-state" v-else>
          <text>暂无数据</text>
        </view>
      </scroll-view>
    </view>

    <!-- 使用说明 -->
    <view class="usage-section">
      <view class="section-title">使用说明</view>
      <view class="usage-content">
        <text class="usage-text">1. 使用 dictUtil.getBatchDict() 批量获取字典</text>
        <text class="usage-text">2. 支持自动缓存，30分钟有效期</text>
        <text class="usage-text">3. 支持业务场景批量获取</text>
        <text class="usage-text">4. 向后兼容原有 util.getDict() 方法</text>
      </view>
    </view>
  </view>
</template>

<script>
import dictUtil from '@/common/dictUtil.js'
import util from '@/common/util.js'

export default {
  data() {
    return {
      // 测试状态
      oldTesting: false,
      newTesting: false,
      
      // 测试结果
      oldResult: null,
      newResult: null,
      cacheResult: null,
      
      // 字典数据
      dictData: {},
      activeTab: '',
      
      // 测试用的字典keys
      testKeys: [
        'SourceChannel',
        'source', 
        'customer_purchasing_power',
        'preliminarycustomerintention',
        'cognitive_concept',
        'kh_status',
        'decision_maker',
        'distance'
      ]
    }
  },
  onLoad() {
    // 初始化时获取一次字典数据用于展示
    this.loadInitialData()
  },
  methods: {
    // 加载初始数据
    async loadInitialData() {
      try {
        const data = await dictUtil.getBatchDict(this.testKeys)
        this.dictData = data
        this.activeTab = Object.keys(data)[0] || ''
      } catch (error) {
        console.error('加载初始数据失败:', error)
      }
    },

    // 测试原有方式（单个获取）
    async testOldMethod() {
      this.oldTesting = true
      this.oldResult = null
      
      try {
        const startTime = Date.now()
        let successCount = 0
        
        // 模拟原有的单个获取方式
        for (const key of this.testKeys) {
          try {
            await this.getOldDict(key)
            successCount++
          } catch (error) {
            console.warn(`获取字典 ${key} 失败:`, error)
          }
        }
        
        const endTime = Date.now()
        const totalTime = endTime - startTime
        
        this.oldResult = {
          time: totalTime,
          requests: this.testKeys.length,
          count: successCount
        }
        
        uni.showToast({
          title: `原方式完成，耗时 ${totalTime}ms`,
          icon: 'none'
        })
        
      } catch (error) {
        console.error('测试原方式失败:', error)
        uni.showToast({
          title: '测试失败',
          icon: 'none'
        })
      } finally {
        this.oldTesting = false
      }
    },

    // 测试新方式（批量获取）
    async testNewMethod() {
      this.newTesting = true
      this.newResult = null
      
      try {
        const startTime = Date.now()
        
        // 使用新的批量获取方式
        const data = await dictUtil.getBatchDict(this.testKeys, false) // 不使用缓存进行公平测试
        
        const endTime = Date.now()
        const totalTime = endTime - startTime
        const successCount = Object.keys(data).length
        
        this.newResult = {
          time: totalTime,
          requests: 1, // 批量获取只需要1次请求
          count: successCount
        }
        
        // 计算性能提升
        if (this.oldResult) {
          const improvement = Math.round(((this.oldResult.time - totalTime) / this.oldResult.time) * 100)
          this.newResult.improvement = `${improvement}%`
        }
        
        // 更新展示数据
        this.dictData = data
        
        uni.showToast({
          title: `新方式完成，耗时 ${totalTime}ms`,
          icon: 'none'
        })
        
      } catch (error) {
        console.error('测试新方式失败:', error)
        uni.showToast({
          title: '测试失败',
          icon: 'none'
        })
      } finally {
        this.newTesting = false
      }
    },

    // 模拟原有的单个字典获取
    async getOldDict(key) {
      return new Promise((resolve, reject) => {
        // 模拟单个接口请求的延迟
        setTimeout(async () => {
          try {
            // 这里可以调用原有的获取方法，或者模拟
            const result = await dictUtil.getDict(key, false)
            resolve(result)
          } catch (error) {
            reject(error)
          }
        }, Math.random() * 200 + 100) // 模拟 100-300ms 的网络延迟
      })
    },

    // 测试缓存效果
    async testCache() {
      try {
        // 清除缓存确保公平测试
        dictUtil.clearCache()
        
        // 第一次获取（无缓存）
        const startTime1 = Date.now()
        await dictUtil.getBatchDict(this.testKeys.slice(0, 3), true)
        const firstTime = Date.now() - startTime1
        
        // 第二次获取（有缓存）
        const startTime2 = Date.now()
        await dictUtil.getBatchDict(this.testKeys.slice(0, 3), true)
        const cacheTime = Date.now() - startTime2
        
        const improvement = Math.round(((firstTime - cacheTime) / firstTime) * 100)
        
        this.cacheResult = {
          firstTime,
          cacheTime,
          improvement: `${improvement}%`
        }
        
        uni.showToast({
          title: '缓存测试完成',
          icon: 'success'
        })
        
      } catch (error) {
        console.error('缓存测试失败:', error)
        uni.showToast({
          title: '缓存测试失败',
          icon: 'none'
        })
      }
    },

    // 清除缓存
    clearCache() {
      dictUtil.clearCache()
      this.cacheResult = null
      uni.showToast({
        title: '缓存已清除',
        icon: 'success'
      })
    },

    // 获取字典显示名称
    getDictDisplayName(key) {
      const nameMap = {
        'SourceChannel': '来源渠道',
        'source': '来源',
        'customer_purchasing_power': '购买力',
        'preliminarycustomerintention': '意向度',
        'cognitive_concept': '认知理念',
        'kh_status': '客户状态',
        'decision_maker': '决策人',
        'distance': '距离'
      }
      return nameMap[key] || key
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  padding: 20rpx;
  background: #f5f5f5;
  min-height: 100vh;
}

.header {
  background: #fff;
  padding: 30rpx;
  border-radius: 12rpx;
  margin-bottom: 20rpx;
  text-align: center;
  
  .title {
    font-size: 36rpx;
    font-weight: 600;
    color: #333;
    display: block;
    margin-bottom: 10rpx;
  }
  
  .subtitle {
    font-size: 26rpx;
    color: #666;
    display: block;
  }
}

.performance-section, .cache-section, .data-section, .usage-section {
  background: #fff;
  border-radius: 12rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #333;
  margin-bottom: 20rpx;
  border-left: 4rpx solid #29d3b4;
  padding-left: 16rpx;
}

.test-item {
  margin-bottom: 30rpx;
  padding: 20rpx;
  background: #f8f9fa;
  border-radius: 8rpx;
  
  &:last-child {
    margin-bottom: 0;
  }
}

.test-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15rpx;
  
  .test-name {
    font-size: 28rpx;
    font-weight: 500;
    color: #333;
  }
  
  .test-btn {
    padding: 12rpx 24rpx;
    border-radius: 6rpx;
    border: none;
    font-size: 24rpx;
    color: #fff;
    
    &.old-style {
      background: #ff6b6b;
    }
    
    &.new-style {
      background: #29d3b4;
    }
    
    &:disabled {
      opacity: 0.6;
    }
  }
}

.test-result {
  display: flex;
  flex-direction: column;
  gap: 8rpx;
  
  .result-text {
    font-size: 24rpx;
    color: #666;
  }
  
  .improvement {
    font-size: 26rpx;
    color: #29d3b4;
    font-weight: 600;
  }
}

.cache-controls {
  display: flex;
  gap: 20rpx;
  margin-bottom: 20rpx;
  
  .cache-btn {
    flex: 1;
    padding: 16rpx;
    border-radius: 8rpx;
    border: none;
    font-size: 26rpx;
    color: #fff;
    background: #29d3b4;
    
    &.clear {
      background: #ff6b6b;
    }
  }
}

.cache-result {
  display: flex;
  flex-direction: column;
  gap: 8rpx;
  
  .cache-text {
    font-size: 24rpx;
    color: #666;
  }
}

.dict-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10rpx;
  margin-bottom: 20rpx;
  
  .tab-item {
    padding: 12rpx 20rpx;
    background: #f0f0f0;
    border-radius: 20rpx;
    font-size: 24rpx;
    color: #666;
    
    &.active {
      background: #29d3b4;
      color: #fff;
    }
  }
}

.dict-content {
  height: 400rpx;
  border: 1rpx solid #eee;
  border-radius: 8rpx;
}

.dict-items {
  padding: 20rpx;
}

.dict-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16rpx 0;
  border-bottom: 1rpx solid #f0f0f0;
  
  &:last-child {
    border-bottom: none;
  }
  
  .item-name {
    font-size: 26rpx;
    color: #333;
    flex: 1;
  }
  
  .item-value {
    font-size: 24rpx;
    color: #666;
    margin-left: 20rpx;
  }
}

.empty-state {
  padding: 60rpx;
  text-align: center;
  color: #999;
  font-size: 26rpx;
}

.usage-content {
  display: flex;
  flex-direction: column;
  gap: 12rpx;
  
  .usage-text {
    font-size: 26rpx;
    color: #666;
    line-height: 1.6;
  }
}
</style>