import { createApp } 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 ConfigTable from '@/components/ConfigTable/index.vue';
import Pagination from '@/components/Pagination/index.vue';
import SvgIcon from '@/components/SvgIcon/index.vue';
import CustomInput from '@/components/Input/index.vue';
import vHasPerm from '@/directive/index';
import ThrottleDirective from '@/directive/clickThrottle';
import DebounceDirective from '@/directive/clickDebounce';
// 引入svg注册脚本
import 'virtual:svg-icons-register';

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

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

const app = createApp(App);

// 导入所有图标并进行全局注册
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}

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

import { ElLoading, ElScrollbar, ElMessage } from 'element-plus'
const plugins = [ElLoading]
const components = [ElScrollbar]
plugins.forEach((plugin) => {
  app.use(plugin)
})
components.forEach((component) => {
  app.component(component.name, component)
})
const ElMessageCfg = { duration: 2000, customClass: 'globalElMessageStyle' }
app.config.globalProperties.$ElMessage = (msg: any) => {
  return ElMessage({ message: msg, ...ElMessageCfg })
}
app.config.globalProperties.$ElMessage.success = (msg: any) => {
  return ElMessage.success({ message: msg, ...ElMessageCfg })
}
app.config.globalProperties.$ElMessage.warning = (msg: any) => {
  return ElMessage.warning({ message: msg, ...ElMessageCfg })
}
app.config.globalProperties.$ElMessage.info = (msg: any) => {
  return ElMessage.info({ message: msg, ...ElMessageCfg })
}
app.config.globalProperties.$ElMessage.error = (msg: any) => {
  return ElMessage.error({ message: msg, ...ElMessageCfg })
}


// 注册全局组件
app
  .directive('hasPerm', vHasPerm)
  .directive('clickThrottle', ThrottleDirective)
  .directive('clickDebounce', DebounceDirective)
  .component('pagination', Pagination)
  .component('ConfigTable', ConfigTable)
  .component('svg-icon', SvgIcon)
  .component('CustomInput', CustomInput)
  .use(createPinia())
  .use(router)
  .use(ElementPlus, { size: 'small', zIndex: 3000 })
  .use(i18n)
  .mount('#app');
// app.directive('hasPerm',directive['hasPerm'])