import { createApp, createVNode } from 'vue'
import App from './App.vue'
import router from './router/index'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import resetForm from './utils/resetForm'
import objCoppy from './utils/objCoppy'
import myconfirm from './utils/myconfirm'
import locale from 'element-plus/lib/locale/lang/zh-cn'
//引入echarts
import * as echarts from 'echarts'
//引入图标
import * as Icons from '@element-plus/icons-vue'
// 引入vxe-table
import { useTable } from '@/utils/vxe-table';
//引入Pinia
import { createPinia } from 'pinia'
import { useDirectives } from '@/utils/vue-directive';
import { setupRouterGuard } from './router/guard'

async function bootstrap() {
    const pinia = createPinia()
    const app = createApp(App);
    app.use(router).use(pinia).use(useTable).use(ElementPlus, { locale }).mount('#app')
    //注册-自定义指令
    useDirectives(app)
    //挂载工具
    app.config.globalProperties.$resetForm = resetForm;
    app.config.globalProperties.$objCoppy = objCoppy;
    app.config.globalProperties.$myconfirm = myconfirm;
    app.config.globalProperties.$echarts = echarts;
    //方式一：
    // typeof 和 keyof
    const person = {
        name: '张三',
        age: 18
    }
    //typeof获取一个对象的类型
    type tp = typeof person;
    //keyof获取某种类型的所有键（key），返回的类型是一个联合类型
    type keys = keyof tp;
    //全局注册组件
    Object.keys(Icons).forEach((key) => {
        // console.log(key)
        app.component(key, Icons[key as keyof typeof Icons])
        // app.component(key,Icons[key])
    })
    // 方式二
    const Icon = (props: { icon: string }) => {
        const { icon } = props;
        return createVNode(Icons[icon as keyof typeof Icons]);
    };
    app.component('Icon', Icon);

    // 监听异常错误
    app.config.errorHandler = (error, vm, info) => {
        console.log(error, vm, info, ":error,vm,info");
    }
    // 路由配置信息
    setupRouterGuard(router)
}
bootstrap()