<template>
  <view class="page-container">
    <view class="test-section">
      <view class="test-title">字体缩放测试页面</view>
      <view class="test-info">
        <text class="info-item">当前缩放比例: {{ scale }}</text>
        <text class="info-item">根字体大小: {{ rootFontSize }}</text>
      </view>
      
      <view class="test-group">
        <view class="group-title">使用 class 的字体大小</view>
        <view class="test-item">
          <text class="text-xs">超小字体 (xs: 10px)</text>
        </view>
        <view class="test-item">
          <text class="text-sm">小字体 (sm: 11px)</text>
        </view>
        <view class="test-item">
          <text class="text-base">基础字体 (base: 13px)</text>
        </view>
        <view class="test-item">
          <text class="text-md">中等字体 (md: 14px)</text>
        </view>
        <view class="test-item">
          <text class="text-lg">大字体 (lg: 16px)</text>
        </view>
        <view class="test-item">
          <text class="text-xl">超大字体 (xl: 20px)</text>
        </view>
        <view class="test-item">
          <text class="text-xxl">特大字体 (xxl: 24px)</text>
        </view>
      </view>
      
      <view class="test-group">
        <view class="group-title">对比测试（固定 px  vs  rem）</view>
        <view class="test-item">
          <text class="fixed-size">固定大小 (14px，不应缩放)</text>
        </view>
        <view class="test-item">
          <text class="rem-size">rem 大小 (0.875rem，应该缩放)</text>
        </view>
      </view>
      
      <view class="test-actions">
        <button class="btn btn-primary" @click="goToSettings">去设置页面调整字体</button>
        <button class="btn btn-outline" @click="refreshTest">刷新测试</button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      scale: 1.0,
      rootFontSize: '16px'
    }
  },
  onShow() {
    this.refreshTest()
  },
  methods: {
    refreshTest() {
      // 从 Vuex 读取当前缩放比例
      this.scale = this.$store.state.font.fontScale || 1.0
      
      // 读取根字体大小
      try {
        if (typeof document !== 'undefined' && document.documentElement) {
          this.rootFontSize = getComputedStyle(document.documentElement).fontSize
        }
      } catch (e) {
        this.rootFontSize = '无法获取'
      }
    },
    
    goToSettings() {
      uni.navigateTo({
        url: '/pages/settings/index'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/styles/variables.scss';

.page-container {
  padding: $spacing-md;
}

.test-section {
  background: $bg-card;
  border-radius: $border-radius-md;
  padding: $spacing-md;
}

.test-title {
  font-size: $font-size-xl;
  font-weight: 600;
  color: $text-primary;
  margin-bottom: $spacing-md;
  text-align: center;
}

.test-info {
  background: $bg-primary;
  padding: $spacing-sm;
  border-radius: $border-radius-sm;
  margin-bottom: $spacing-md;
  
  .info-item {
    display: block;
    font-size: $font-size-sm;
    color: $text-secondary;
    margin-bottom: $spacing-xs;
  }
}

.test-group {
  margin-bottom: $spacing-lg;
  
  .group-title {
    font-size: $font-size-md;
    font-weight: 600;
    color: $text-primary;
    margin-bottom: $spacing-sm;
    padding-bottom: $spacing-xs;
    border-bottom: 1px solid $border-color;
  }
}

.test-item {
  padding: $spacing-sm;
  margin-bottom: $spacing-sm;
  background: #f9f9f9;
  border-radius: $border-radius-sm;
  border-left: 3px solid $primary-color;
}

/* 字体大小 class */
.text-xs { font-size: $font-size-xs; }
.text-sm { font-size: $font-size-sm; }
.text-base { font-size: $font-size-base; }
.text-md { font-size: $font-size-md; }
.text-lg { font-size: $font-size-lg; }
.text-xl { font-size: $font-size-xl; }
.text-xxl { font-size: $font-size-xxl; }

/* 对比测试 */
.fixed-size { font-size: 14px; }
.rem-size { font-size: 0.875rem; }

.test-actions {
  margin-top: $spacing-lg;
  
  .btn {
    margin-bottom: $spacing-sm;
  }
}
</style>
