<template>
  <el-config-provider :locale="appStore.locale" :size="appStore.size">
    <router-view ref="wrapRef" />
  </el-config-provider>
</template>

<script setup lang="ts">
import { useSettingsStore } from '@/store/modules/settings';
import { handleThemeStyle } from '@/utils/theme';
import { useAppStore } from '@/store/modules/app';

const appStore = useAppStore();

onMounted(() => {
  nextTick(() => {
    // 初始化主题样式
    handleThemeStyle(useSettingsStore().theme);
  });
});

const scale = ref(1);
// 设计稿宽度（你是多少就写多少，一般 1920）
const DESIGN_WIDTH = 1920;

// 计算缩放
const setScale = () => {
  const clientWidth = document.documentElement.clientWidth;
  let ratio = clientWidth / DESIGN_WIDTH;
  // 最小缩到 0.7（防止太小看不清）
  if (ratio < 0.7) ratio = 0.7;
  // 最大不超过 1
  if (ratio > 1) ratio = 1;
  scale.value = ratio;
};

// 监听窗口变化
const resizeListener = () => {
  setScale();
};

onMounted(() => {
  setScale();
  window.addEventListener('resize', resizeListener);
});

onUnmounted(() => {
  window.removeEventListener('resize', resizeListener);
});
</script>
