import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
import requireTransform from 'vite-plugin-require-transform'
import postCssPxToRem from 'postcss-pxtorem'
import { createStyleImportPlugin, AndDesignVueResolve } from 'vite-plugin-style-import'
import { resolve } from 'path'
import path from 'path'
import type { ConfigEnv } from 'vite'

export default ({ mode }: ConfigEnv) => {
  const root = process.cwd()
  const ENV = loadEnv(mode, root)
  const publicBase = process.env.VITE_APP_PUBLIC_BASE || ENV.VITE_APP_PUBLIC_BASE || '/'
  const buildOutDir = process.env.VITE_BUILD_OUT_DIR || path.join('./.oss-build', process.env.BUILD_TIMESTAMP || 'latest')

  console.log(`当前环境信息：`, mode)
  console.log(`ENV:`, ENV)

  return defineConfig({
    base: mode === 'development' ? '/' : publicBase,
    server: {
      host: '0.0.0.0',
     // https: false,
      cors: true,
      open: true,
      port: 9990,
      proxy: {
        '/dev-api': {
          // target: 'http://8.153.108.90:9991/',
          target: ENV.VITE_API_BASE || 'http://localhost:9991',
          changeOrigin: true,
          rewrite: (path) => path.replace(/^\/dev-api/, '')
        }
      }
    },
    define: {
      'process.env': {
        mode: mode,
        BASE_URL: ENV.VITE_BASE_URL,
        API_BASE: ENV.VITE_API_BASE
      },
      buildTime: new Date()
    },
    resolve: {
      alias: {
        '@': '/src'
      },
      extensions: ['.js', '.ts', '.jsx', '.tsx', '.json']
    },
    optimizeDeps: {
      include: ['kml-geojson']
    },
    json: {
      namedExports: true,
      stringify: false
    },
    css: {
      preprocessorOptions: {
        less: {
          javascriptEnabled: true
        },
        scss: {
          additionalData: `@import "@/assets/style/mixin.scss";`
        }
      },
      postcss: {
        plugins: [
          // postCssPxToRem({
          //   rootValue: 80,
          //   unitPrecision: 5,
          //   selectorBlackList: ['ignore'],
          //   propList: ['*'],
          //   additionalPropList: ['*'],
          //   replace: true,
          //   mediaQuery: false,
          //   minPixelValue: 1
          // })
        ]
      }
    },
    build: {
      outDir: buildOutDir,
      assetsInlineLimit: 4096,
      cssCodeSplit: true,
      sourcemap: false,
      commonjsOptions: {},
      rollupOptions: {
        input: {
          index: path.resolve(__dirname, 'index.html')
        }
      },
      manifest: false,
      minify: 'terser',
      terserOptions: {},
      write: true,
      emptyOutDir: true
    },
    plugins: [
      vue(),
      requireTransform({
        fileRegex: /.ts$|.tsx$|.vue$/
      }),
      createStyleImportPlugin({
        resolves: [AndDesignVueResolve()],
        libs: [
          {
            libraryName: 'ant-design-vue',
            esModule: true,
            resolveStyle: (name) => {
              return `ant-design-vue/es/${name}/style/index`
            }
          }
        ]
      })
    ]
  })
}