import { fileURLToPath, URL } from 'node:url'
import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import Icons from "unplugin-icons/vite"
import { ElementPlusResolver, VueUseComponentsResolver, VueUseDirectiveResolver } from 'unplugin-vue-components/resolvers'
import IconsResolver from "unplugin-icons/resolver"
import { FileSystemIconLoader } from "unplugin-icons/loaders"
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
import path from 'path'
// https://vitejs.dev/config/
export default defineConfig(({ mode }) => {
  const viteEnv = loadEnv(mode, './')
  return {
    base: viteEnv.VITE_BASE,
    server: {
      host: '0.0.0.0',
      port: '8080',
      open: true,
      strictPort: true,   
      cors: true, 
      proxy: {
        [viteEnv.VITE_BASE_URL]: {
          target: viteEnv.VITE_BASE_SERVER_URL,
          changeOrigin: true,
          rewrite: path => path.replace(viteEnv.VITE_BASE_URL, '/')
        },
        // '/api': {
        //   target: "http://qdport.gateway.10.236.3.36.nip.io",
        //   changeOrigin: true,
        //   rewrite: path => path.replace('/api', '/')
        // }
      }
    },
    build: {
      outDir: 'dist',
      assetsDir: 'static/assets',
      chunkSizeWarningLimit: 2000, 
      rollupOptions: { 
        output: {
          chunkFileNames: 'static/js/[name]-[hash].js',
          entryFileNames: 'static/js/[name]-[hash].js',
          assetFileNames: 'static/[ext]/[name]-[hash].[ext]'
        }
      }
    },
    resolve: {
      alias: {
        '~': path.resolve(__dirname, './'),
        '@': path.resolve(__dirname, './src')
      },
    },
    css: {
      preprocessorOptions: {
        scss: {
          additionalData: '@import "@/assets/style/variable.scss";'
        }
      }
    },
    plugins: [
      vue({
        template: {
          compilerOptions: {
            isCustomElement: tag => /^micro-app/.test(tag)
          }
        }
      }),
      AutoImport({
        include: [
          /\.[tj]sx?$/,
          /\.vue$/,
          /\.vue\?vue/, 
          /\.md$/ // 
        ],
        imports: ['vue', 'pinia', 'vue-router', '@vueuse/core'],
        eslintrc: {
          enabled: true,
          filepath: './.eslintrc-auto-import.json',
          globalsPropValue: true
        },
        resolvers: [
          ElementPlusResolver(),
          IconsResolver({ componentPrefix: "tjm-icon", enabledCollections: ["ep", "home", "user"], })
        ],
      }),
      Components({
        dirs: ['src/components/', 'src/view/'],
        include: [/\.vue$/, /\.vue\?vue/, /\.md$/],
        resolvers: [
          ElementPlusResolver(),
          VueUseComponentsResolver(),
          VueUseDirectiveResolver(),
          IconsResolver({
            prefix: "tjm-icon",
            customCollections: ["ep", "home", "user"],
          }),
        ],
      }),
      // 静态Icon 插件配置 https://icones.js.org/ https://icones.netlify.app/  vscode插件Iconify IntelliSense
      Icons({
        compiler: "vue3",
        customCollections: {
          home: FileSystemIconLoader("src/assets/svg/home", (svg) =>
            svg.replace(/^<svg /, '<svg fill="currentColor" ')
          ),
          user: FileSystemIconLoader("src/assets/svg/user", (svg) =>
            svg.replace(/^<svg /, '<svg fill="currentColor" ')
          ),
        },
        autoInstall: true,
      }),
      createSvgIconsPlugin({
        iconDirs: [path.resolve(process.cwd(), 'src/assets/svg')],
        symbolId: 'icon-[dir]-[name]',
        svgoOptions: true
      })
    ],
    
  }
}

)