import { createApp, Directive } from 'vue';
import App from './App.vue';
import router from '@/router';

import { createPinia } from 'pinia';

import ElementPlus from 'element-plus';
import 'element-plus/theme-chalk/index.css';
import Pagination from '@/components/Pagination/index.vue';
import '@/permission';

// 引入svg注册脚本
import 'virtual:svg-icons-register';

// 国际化
import i18n from '@/lang/index';

// 自定义样式
import '@/styles/index.scss';

// 根据字典编码获取字典列表全局方法
import { getDictItemsByTypeCode } from '@/api/system/dict';

// 主题颜色混合工具
import { mix } from '@/utils';

// 根据环境变量初始化主题颜色
const initTheme = () => {
  const node = document.documentElement;
  const envTheme = import.meta.env.VITE_APP_THEME;
  const localStorageTheme = localStorage.getItem('theme');
  
  // 优先使用环境变量，其次使用 localStorage
  const themeColor = envTheme || localStorageTheme;
  
  if (themeColor) {
    // 设置主主题色
    node.style.setProperty('--el-color-primary', themeColor);
    
    // 设置渐变色
    const mixWhite = '#ffffff';
    const mixBlack = '#000000';
    
    for (let i = 1; i < 10; i += 1) {
      node.style.setProperty(
        `--el-color-primary-light-${i}`,
        mix(themeColor, mixWhite, i * 0.1)
      );
    }
    node.style.setProperty('--el-color-primary-dark', mix(themeColor, mixBlack, 0.1));
    
    localStorage.setItem('theme', themeColor);
  }
};

// 初始化主题颜色
initTheme();

const app = createApp(App);

// 自定义指令
import * as directive from '@/directive';

Object.keys(directive).forEach((key) => {
  app.directive(key, (directive as { [key: string]: Directive })[key]);
});

// 全局方法
app.config.globalProperties.$getDictItemsByTypeCode = getDictItemsByTypeCode;

// 注册全局组件
app
  .component('Pagination', Pagination)
  .use(createPinia())
  .use(router)
  .use(ElementPlus)
  .use(i18n)
  .mount('#app');