<script setup>
  import { ref } from 'vue'
  import { useUserStore } from '../../../stores/user'
  import { useAuthUser } from '../../../composables/useAuthUser'

  const { fontSizeData } = useAuthUser()
  const { updateFontSize } = useUserStore()

  const size = ref(fontSizeData.value)
  const sliderChange = ({ detail }) => {
    const data = {
      1: '20',
      2: '26',
      3: '36',
      4: '42',
      5: '50',
      6: '56'
    }[detail.value]

    size.value = data
    updateFontSize(data)
  }
</script>

<template>
  <view class="font-settings">
    <view class="top-text">
      <text :style="{ 'font-size': `${size}rpx` }">预览字体大小</text>
    </view>
    <slider
      :max="6"
      :min="1"
      :value="
        { '20': 1, '26': 2, '36': 3, '42': 4, '50': 5, '56': 6 }[
          fontSizeData
        ]
      "
      @change="sliderChange"
    />
  </view>
</template>

<style lang="scss" scoped>
  // 背景色
  page {
    background: #f9f9f9;
  }

  .font-settings {
    padding: 20rpx 32rpx;

    .top-text {
      padding: 24rpx 20rpx;
      background: #ffffff;
      border-radius: 16rpx;
      margin-bottom: 100rpx;
      text {
        color: #333333;
      }
    }
  }
</style>
