<script setup lang="ts">
import { computed, onMounted } from 'vue'
import { useAppStore } from '@/stores/app'
import zhCn from 'element-plus/es/locale/lang/zh-cn'
import en from 'element-plus/es/locale/lang/en'
import systemConfig from 'virtual:system-config'

const app = useAppStore()
const locale = computed(() => app.lang === 'zh-CN' ? zhCn : en)

onMounted(() => {
  // 设置页面标题
  document.title = systemConfig.theme.title
  
  // 设置主题色
  const el = document.documentElement
  el.style.setProperty('--el-color-primary', systemConfig.theme.primaryColor)
})
</script>

<template>
  <el-config-provider :locale="locale">
    <router-view />
    <!-- 全屏退出角标 -->
    <div v-if="app.pageFullscreen" class="fs-exit" @click="app.togglePageFullscreen()">
      <el-icon :size="18"><Close /></el-icon>
    </div>
  </el-config-provider>
</template>

<style>
:root { --el-bg-color-page: #f5f6fa; }
html.dark { --el-bg-color-page: #111; color-scheme: dark; }
html.dark body { background: #111; color: #e5e7eb; }

.fullscreen-main {
  position: fixed !important; inset: 0 !important; z-index: 100 !important;
  background: #f5f6fa !important; padding: 20px !important; overflow: auto !important;
}
html.dark .fullscreen-main { background: #111 !important; }

.fs-exit {
  position: fixed; top: 16px; right: 16px; z-index: 200;
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(0,0,0,0.4); color: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all 0.2s;
}
.fs-exit:hover { background: rgba(0,0,0,0.6); }

/* ======================== rui-dialog 全局样式规则 ======================== */
/**
 * 所有使用 el-dialog 的组件必须添加 class="rui-dialog"
 * 规则说明：
 * 1. 内容区域最大高度 60vh，超出滚动
 * 2. 底部 footer 固定不参与滚动
 * 3. 用法：<el-dialog class="rui-dialog" ...>
 */
.rui-dialog .el-dialog__body {
  max-height: 60vh;
  overflow-y: auto;
  padding: 20px;
}
.rui-dialog .el-dialog__footer {
  border-top: 1px solid var(--el-border-color-lighter);
  padding: 12px 20px;
  background: var(--el-bg-color);
}
</style>
