import { fileURLToPath, URL } from 'node:url';

import { defineConfig, loadEnv } from 'vite';
import vueSFC from '@vitejs/plugin-vue2';
import vueJsx from '@vitejs/plugin-vue2-jsx'
// import basicSsl from '@vitejs/plugin-basic-ssl';
/*
  自动引入插件，即在Vue 组件内，不需要再引入 ref reactive 等内置组件了
  https://github.com/antfu/unplugin-auto-import
*/
import AutoImport from 'unplugin-auto-import/vite';
/*
  https://github.com/antfu/unplugin-vue-components
  On-demand components auto importing for Vue.(自动将组件引入到Vue中，不用明确代码引入了)
*/
import Components from 'unplugin-vue-components/vite';
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers';

/*
  https://www.npmjs.com/package/vite-plugin-pages
  根据目录来自动创建 路由地址，不需要手动添加 router 的路由地址了
*/
import Pages from 'vite-plugin-pages';
//import Unocss from 'unocss/vite';

// config
export default defineConfig(function (options) {
  // console.log(arguments) // 只有一个参数值
  // console.log(options) //{ mode: 'development', command: 'serve', ssrBuild: false }
  const { mode, command, ssrBuild } = options;
  // const env = loadEnv(mode, process.cwd(), '');

  // process.env = { ...process.env, ...loadEnv(mode, process.cwd()) };
  // const publicPath = process.env.VITE_BASE_URL;

  return {
    /**
     * 在生产中服务时的基本公共路径。
     * @default '/'
     */
    base: './', // 这样保证资源引入，全部是相对路径了
    // base: '/huangbiao/', // 默认是 '/'
    // publicDir: 'public', // 作为静态资源服务的文件夹。该目录中的文件在开发期间在 / 处提供，并在构建期间复制到 outDir 的根目录，并且始终按原样提供或复制而无需进行转换。
    // cacheDir: 'node_modules/.vite',
    // envDir: 'root', // 用于加载 .env 文件的目录。可以是一个绝对路径，也可以是相对于项目根的路径。
    // envPrefix: 'VITE_', // 以 envPrefix 开头的环境变量会通过 import.meta.env 暴露在你的客户端源码中
    resolve: {
      /* 路径使用别名 */
      alias: {
        '@': fileURLToPath(new URL('./src', import.meta.url)),
        '@openlayer': fileURLToPath(new URL('./openlayer', import.meta.url)),
        '@hmap': fileURLToPath(new URL('./hmap', import.meta.url)),
        '@hik': fileURLToPath(new URL('./hik', import.meta.url)),
      },
      /*
      引入文件的后缀名称，可以省略
      如果出现同名，按照数组加载的优先顺序
      */
      extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue'],
    },
    // css 处理
    css: {
      // preprocessorOptions: {
      //   scss: {
      //     /* .scss全局预定义变量，引入多个文件 以;(分号分割)*/
      //     additionalData: `@import "./src/assets/css/global.css";`,
      //   },
      // },
      // 可以查看 CSS 的源码
      devSourcemap: true,
    },
    plugins: [
      vueSFC(),
      vueJsx({
        // options are passed on to @vue/babel-preset-jsx
      }),
      // basicSsl(), // 是否使用HTTPS
      // Pages({
      //   extensions: ['vue', 'md'],
      //   dirs: [
      //     // basic
      //     { dir: 'src/pages/**', baseRoute: '.' },
      //     // // features dir for pages
      //     // { dir: 'src/features/**/pages', baseRoute: 'features' },
      //     // // with custom file pattern
      //     // { dir: 'src/admin/pages', baseRoute: 'admin', filePattern: '**/*.page.*' },
      //   ],
      // }),
      // Pages({
      //   extensions: ['vue', 'md'],
      // }),

      // https://github.com/JohnCampionJr/vite-plugin-vue-layouts
      Pages({
        dirs: 'src/pages',
        exclude: ['**/comp/*.vue'],
        extensions: ['vue'], // ['vue', 'ts', 'js'],
        extendRoute(route, parent) {
          // console.log('route, parent', route, parent);
          /*
          打印的内容如下
          route, parent {
            name: 'Welcome',
            path: '/welcome',
            component: '/src/pages/Welcome.vue',
            customBlock: undefined,
            props: true
          }
          */
          if (route.path === '/') {
            //给默认路由加一个redirect，默认为index.vue
            return {
              ...route,
              redirect: 'page1',
              meta: {
                auth: true,
              },
            };
          } else {
            return route;
          }
        },
      }),
      //Unocss({
      //  // mode: 'shadow-dom',
      //  shortcuts: [ // 自定义组合样式，即 样式 cool-blue 代表`bg-blue-500 text-white` 的组合
      //    { 'cool-blue': 'bg-blue-500 text-white' },
      //    { 'cool-green': 'bg-green-500 text-black' }
      //  ],
      //}),
      AutoImport({
        imports: [
          // 需要自动导入的插件，自定义导入的API
          'vue',
          'vue-router',
          'pinia',
        ],
        // dts: 'src/types/auto-import.d.ts', // 指明 .d.ts 文件的位置和文件名
        dts: 'auto-imports.d.ts', // 指明 .d.ts 文件的位置和文件名
        resolvers: [ElementPlusResolver()],
      }),
      Components({
        resolvers: [ElementPlusResolver()],
      }),
      /*
      // Set default values for tags.
      CustomProps({
        tags: {
          "h1" : {
            style: "font-size: 2rem;"
          },
          "el-button" : {
            type: "success",
            plain: true,
          },
        }
      })

      <template>
        <h1>change style</h1>
        <el-button>no type</el-button>
        <el-button type="primary">type primay</el-button>
      </template>
      转为
      <template>
        <h1 style="font-size: 2rem;">change style</h1>
        <el-button type="success" plain>no type</el-button>
        <el-button type="primary" plain>type primay</el-button>
      </template>
      */
    ],
    build: {
      outDir: './dist', // 指定输出目录为 "./dist"
      assetsDir: './assets', // 指定静态文件引入路径为 "./assets"
      sourcemap: false, // 不生成 sourceMap 文件
      minify: 'terser', // 使用 terser 进行代码压缩
      chunkSizeWarningLimit: 2000, // 设置 chunk 大小警告的限制为 2000 KiB
      chunkSizeLimit: 5000, // 设置 chunk 大小的限制为 5000 KiB
      // 10kb以下，转Base64
      // assetsInlineLimit: 1024 * 10,// 10kb以下，转Base64
      emptyOutDir: true, // 在构建之前清空输出目录
      // sourcemap: false,
      terserOptions: {
        /**
         * command 用来判断环境
         */
        compress: {
          // drop_console: command !== 'serve',
          drop_console: false,
          // 默认是true
          drop_debugger: command !== 'serve'
        }
      },
      rollupOptions: {
        output: {
          // 在这里修改静态资源路径
          chunkFileNames: 'assets/js/[name]-[hash].js',
          entryFileNames: 'assets/js/[name]-[hash].js',
          assetFileNames: 'assets/[ext]/[name]-[hash].[ext]',
          manualChunks(id) {
            // Vue 及其相关库的 chunk
            if (id.includes('vue') || id.includes('core-js') || id.includes('@babel/runtime')) {
              return 'vendor';
            }
            // 其他库的 chunk
            if (id.includes('node_modules')) {
              return 'dependencies';
            }
            // 默认情况下将模块放入一个单独的 chunk
            return 'common';
          }
        }
      }
    },
    // 服务配置
    server: {
      host: '0.0.0.0',
      port: 3333, // 端口号
      open: true, // 自动在浏览器打开
      // https: true,// 是否开启 https
      // http2: true,// 建议使用 http2, 是否开启 https
      fs: {
        // 可以为项目根目录的上一级提供服务
        allow: ['..'],
      },
      proxy: {
        // http://10.192.207.114:8080/test/xyValue
        '^/test': {
          // target: 'http://10.192.207.114:8080/',
          target: 'http://10.192.207.114:8080',
          changeOrigin: true,
        },
        '^/mockapi': {
          target: 'http://10.32.38.100:3000/',
          changeOrigin: true,
        },
        '^/ctm05zjaefs/': {
          target: 'http://localhost:39696',
          changeOrigin: true,
        },
        // 带选项写法：http://localhost:5173/api/bar -> http://jsonplaceholder.typicode.com/bar
        '/api': {
          target: 'http://jsonplaceholder.typicode.com',
          changeOrigin: true,
          rewrite: (path) => path.replace(/^\/api/, ''),
        },
      },
    },
  };
});