import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import zhCn from 'element-plus/es/locale/lang/zh-cn'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'

import App from './App.vue'
import router from './router'
import { setupStore, useAppStore } from './store'
import { setupI18n } from './locales'
import { setupDirectives } from './directives'
import Icon from '@/components/Icon/src/Icon.vue'
import DictTag from '@/components/DictTag/src/DictTag.vue'

import 'element-plus/dist/index.css'
import 'virtual:uno.css'
import '@/styles/index.scss'

// 路由守卫（必须在 store 安装之后引入）
import './permission'

const app = createApp(App)

setupStore(app)
setupI18n(app)
setupDirectives(app)

app.use(router)
// 全量注册 Element Plus：P0 优先保证「不因按需引入漏样式」而出现视觉问题。
// ⚠️ 只调用一次 app.use(ElementPlus, ...) —— 重复调用会用新 options 覆盖掉 locale。
const appStore = useAppStore()
app.use(ElementPlus, { locale: zhCn, size: appStore.size })

// 全量注册官方图标组件（模板里可直接 <el-icon><HomeFilled /></el-icon>）
Object.entries(ElementPlusIconsVue).forEach(([key, component]) => {
  app.component(key, component)
})

// 全局通用图标组件：<Icon icon="ep:home-filled" />（把后端下发的图标名渲染成图标）
app.component('Icon', Icon)

// 全局字典标签组件：<DictTag dict-type="system_common_status" :value="row.status" />
// 多个系统管理页面的状态/类型列都要用，逐个 import 容易漏
app.component('DictTag', DictTag)

app.mount('#app')

// 移除首屏 loading
document.getElementById('app-loading')?.remove()