<template>
  <view class="page-container">
    <scroll-view class="page-body" scroll-y>
      <view class="settings-section">
        <!-- 字体大小调整 -->
        <view class="setting-card">
          <view class="card-header">
            <uni-icons type="font" size="20" color="#722ed1"></uni-icons>
            <text class="card-title">字体大小</text>
          </view>
          
          <view class="font-preview">
            <text class="preview-text" :style="{ fontSize: previewFontSize + 'px' }">预览文字大小</text>
          </view>
          
          <view class="slider-section">
            <view class="slider-labels">
              <text class="label-small">小</text>
              <text class="label-current">{{ currentFontLabel }}</text>
              <text class="label-large">大</text>
            </view>
            
            <slider
              class="font-slider"
              :value="sliderValue"
              :min="0"
              :max="3"
              :step="1"
              :activeColor="sliderColor"
              :backgroundColor="'#e8e8e8'"
              block-size="24"
              @change="onSliderChange"
              @changing="onSliderChanging"
              show-value
            />
            
            <view class="slider-values">
              <text class="value-text">100%</text>
              <text class="value-text">125%</text>
              <text class="value-text">150%</text>
              <text class="value-text">200%</text>
            </view>
          </view>
          
          <view class="font-actions">
            <button class="btn-reset" @click="resetToDefault">恢复默认</button>
          </view>
        </view>
        
        <!-- 提示信息 -->
        <view class="tip-card">
          <uni-icons type="info" size="16" color="#fa8c16"></uni-icons>
          <text class="tip-text">调整后会立即生效，所有页面的文字大小都会同步变化</text>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
import { mapState, mapGetters } from 'vuex'

export default {
  data() {
    return {
      // 字体大小选项
      fontSizeOptions: [
        { label: '默认', value: 1.0, desc: '标准字体', sliderIndex: 0 },
        { label: '大', value: 1.25, desc: '放大 25%', sliderIndex: 1 },
        { label: '较大', value: 1.5, desc: '放大 50%', sliderIndex: 2 },
        { label: '最大', value: 2.0, desc: '放大 100%', sliderIndex: 3 }
      ],
      previewFontSize: 16
    }
  },
  computed: {
    // 从 Vuex 读取字体状态
    ...mapState('font', ['fontScale']),
    ...mapGetters('font', ['fontScaleLabel']),
    
    // 当前滑块值
    sliderValue: {
      get() {
        const option = this.fontSizeOptions.find(opt => opt.value === this.fontScale)
        return option ? option.sliderIndex : 0
      },
      set(value) {
        // 滑块值改变时应用到 Vuex
        this.applyFontSetting(value)
      }
    },
    
    // 当前字体标签
    currentFontLabel() {
      return this.fontScaleLabel
    },
    
    // 滑块颜色
    sliderColor() {
      const colors = ['#52c41a', '#1890ff', '#fa8c16', '#f5222d']
      return colors[this.sliderValue] || '#1890ff'
    }
  },
  onLoad() {
    // 初始化时应用当前字体设置到预览
    this.updatePreview()
  },
  methods: {
    /**
     * 滑块值改变（拖动结束）
     */
    onSliderChange(e) {
      const index = e.detail.value
      this.applyFontSetting(index)
    },
    
    /**
     * 滑块值改变（拖动中）
     */
    onSliderChanging(e) {
      const index = e.detail.value
      const option = this.fontSizeOptions[index]
      if (option) {
        // 拖动中只更新预览，不实际应用
        this.previewFontSize = 16 * option.value
      }
    },
    
    /**
     * 应用字体设置到 Vuex
     */
    applyFontSetting(sliderIndex) {
      const option = this.fontSizeOptions[sliderIndex]
      if (!option) return
      
      // 通过 Vuex action 设置字体
      this.$store.dispatch('font/setFontScale', {
        scale: option.value,
        label: option.label
      })
      
      // 提示用户
      uni.showToast({
        title: `已设置为${option.label}`,
        icon: 'success',
        duration: 1500
      })
      
      this.updatePreview()
    },
    
    /**
     * 更新预览字体大小
     */
    updatePreview() {
      // 基准字体大小 16px，根据缩放比例计算预览大小
      this.previewFontSize = 16 * this.fontScale
    },
    
    /**
     * 恢复默认设置
     */
    resetToDefault() {
      uni.showModal({
        title: '提示',
        content: '确定要恢复默认字体大小吗？',
        success: (res) => {
          if (res.confirm) {
            // 通过 Vuex action 重置字体
            this.$store.dispatch('font/resetFontScale')
            
            uni.showToast({
              title: '已恢复默认',
              icon: 'success'
            })
            
            this.updatePreview()
          }
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.settings-section {
  padding: $spacing-md;
}

.setting-card {
  background: #ffffff;
  border-radius: $border-radius-md;
  padding: $spacing-lg;
  margin-bottom: $spacing-base;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.card-header {
  display: flex;
  align-items: center;
  gap: $spacing-sm;
  margin-bottom: $spacing-lg;
  
  .card-title {
    font-size: $font-size-md;
    color: $text-primary;
    font-weight: 600;
  }
}

.font-preview {
  background: #f9f9f9;
  border-radius: $border-radius-sm;
  padding: $spacing-lg;
  text-align: center;
  margin-bottom: $spacing-lg;
  
  .preview-text {
    color: $text-primary;
    font-weight: 500;
  }
}

.slider-section {
  margin-bottom: $spacing-lg;
  
  .slider-labels {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: $spacing-sm;
    
    .label-small,
    .label-large {
      font-size: $font-size-sm;
      color: $text-placeholder;
    }
    
    .label-current {
      font-size: $font-size-md;
      color: $primary-color;
      font-weight: 600;
    }
  }
  
  .font-slider {
    margin: $spacing-sm 0;
  }
  
  .slider-values {
    display: flex;
    justify-content: space-between;
    padding: 0 $spacing-xs;
    
    .value-text {
      font-size: $font-size-xs;
      color: $text-placeholder;
    }
  }
}

.font-actions {
  display: flex;
  justify-content: center;
  
  .btn-reset {
    background: #fff;
    color: $text-secondary;
    border: 1px solid $border-light;
    border-radius: $border-radius-sm;
    padding: $spacing-sm $spacing-lg;
    font-size: $font-size-sm;
    line-height: 1.5;
    
    &::after {
      border: none;
    }
  }
}

.tip-card {
  background: #fff7e6;
  border-radius: $border-radius-sm;
  padding: $spacing-md;
  display: flex;
  align-items: flex-start;
  gap: $spacing-sm;
  
  .tip-text {
    font-size: $font-size-sm;
    color: #d48806;
    line-height: 1.6;
    flex: 1;
  }
}
</style>
