const path = require('path');
const merge = require('webpack-merge');
const tsImportPluginFactory = require('ts-import-plugin');
const defaultSettings = {
  title: '足球数据',
  /**
   * @type {boolean} true | false
   * @description Whether show the settings right-panel
   */
  showSettings: true,

  /**
   * @type {boolean} true | false
   * @description Whether need tagsView
   */
  tagsView: true,

  /**
   * @type {boolean} true | false
   * @description Whether fix the header
   */
  fixedHeader: false,

  /**
   * @type {boolean} true | false
   * @description Whether show the logo in sidebar
   */
  sidebarLogo: false,

  /**
   * @type {string | array} 'production' | ['production', 'development']
   * @description Need show err logs component.
   * The default is only used in the production env
   * If you want to also use it in dev, you can pass ['production', 'development']
   */
  errorLog: 'production'
};

function resolve (dir) {
  return path.join(__dirname, dir);
}

const name = defaultSettings.title || '足球数据'; // page title

// If your port is set to 80,
// use administrator privileges to execute the command line.
// For example, Mac: sudo npm run
// You can change the port by the following method:
// port = 8080 npm run dev OR npm run dev --port = 8080
const port = process.env.port || process.env.npm_config_port || 8080; // dev port

// All configuration item explanations can be find in https://cli.vuejs.org/config/
module.exports = {
  /**
   * You will need to set publicPath if you plan to deploy your site under a sub path,
   * for example GitHub Pages. If you plan to deploy your site to https://foo.github.io/bar/,
   * then publicPath should be set to "/bar/".
   * In most cases please use '/' !!!
   * Detail: https://cli.vuejs.org/config/#publicpath
   */
  publicPath: '/',
  outputDir: 'dist',
  // output: {
  //   filename: 'js/[name].[contenthash].js',
  //   path: path.resolve(__dirname, 'dist'),
  //   publicPath: '/dist/',  // 确保 publicPath 设置正确
  // },
  // assetsDir: 'live_static',
  lintOnSave: process.env.NODE_ENV === 'development',
  productionSourceMap: false,
  // css: {
  //   loaderOptions: {
  //     postcss: {
  //       plugins: [
  //         require('postcss-pxtorem')({
  //           rootValue: 16, // 1rem = 16px, adjust according to your design
  //           propList: ['*'],
  //         }),
  //       ],
  //     },
  //   },
  // },
  devServer: {
    port: port,
    open: true,
    overlay: {
      warnings: false,
      errors: true
    },
    proxy: {
      '/graphql': {
        // 请求接口中要替换的标识
        // target: 'http://localhost:3000/graphql',
        target: 'https://m.ydn.com/graphql', // 代理地址
        ChangeOrigin: true, // 是否允许跨域
        secure: true,
        pathRewrite: {
          '^/graphql': '' // 这里理解成用‘/graphql’代替target里面的地址，后面组件中我们掉接口时直接用api代替 比如我要调用'http://40.00.100.100:3002/user/add'，直接写‘/api/user/add’即可
        }
      },
      '/public': {
        // 请求接口中要替换的标识
        target: 'https://m.ydn.com/public', // 代理地址
        ChangeOrigin: true, // 是否允许跨域
        secure: true,
        pathRewrite: {
          '^/public': '' // 这里理解成用‘/public’代替target里面的地址，后面组件中我们掉接口时直接用api代替 比如我要调用'http://40.00.100.100:3002/user/add'，直接写‘/api/user/add’即可
        }
      },
      '/user': {
        // 请求接口中要替换的标识
        target: 'https://m.ydn.com/user', // 代理地址
        ChangeOrigin: true, // 是否允许跨域
        secure: true,
        pathRewrite: {
          '^/user': '' // 这里理解成用‘/user’代替target里面的地址，后面组件中我们掉接口时直接用api代替 比如我要调用'http://40.00.100.100:3002/user/add'，直接写‘/api/user/add’即可
        }
      },
      '/index': {
        // 请求接口中要替换的标识
        target: 'https://m.ydn.com/index', // 代理地址
        ChangeOrigin: true, // 是否允许跨域
        secure: true,
        pathRewrite: {
          '^/index': '' // 这里理解成用‘/user’代替target里面的地址，后面组件中我们掉接口时直接用api代替 比如我要调用'http://40.00.100.100:3002/user/add'，直接写‘/api/user/add’即可
        }
      },
      '/news': {
        // 请求接口中要替换的标识
        target: 'https://m.ydn.com/news', // 代理地址
        ChangeOrigin: true, // 是否允许跨域
        secure: true,
        pathRewrite: {
          '^/news': '' // 这里理解成用‘/user’代替target里面的地址，后面组件中我们掉接口时直接用api代替 比如我要调用'http://40.00.100.100:3002/user/add'，直接写‘/api/user/add’即可
        }
      },
      '/model': {
        // 请求接口中要替换的标识
        target: 'https://m.ydn.com/model', // 代理地址
        ChangeOrigin: true, // 是否允许跨域
        secure: true,
        pathRewrite: {
          '^/model': '' // 这里理解成用‘/user’代替target里面的地址，后面组件中我们掉接口时直接用api代替 比如我要调用'http://40.00.100.100:3002/user/add'，直接写‘/api/user/add’即可
        }
      },
      '/login': {
        // 请求接口中要替换的标识
        target: 'https://m.ydn.com/login', // 代理地址
        ChangeOrigin: true, // 是否允许跨域
        secure: true,
        pathRewrite: {
          '^/login': '' // 这里理解成用‘/login’代替target里面的地址，后面组件中我们掉接口时直接用api代替 比如我要调用'http://40.00.100.100:3002/user/add'，直接写‘/api/user/add’即可
        }
      },
      '/help': {
        // 请求接口中要替换的标识
        target: 'https://m.ydn.com/help', // 代理地址
        ChangeOrigin: true, // 是否允许跨域
        secure: true,
        pathRewrite: {
          '^/help': '' // 这里理解成用‘/api’代替target里面的地址，后面组件中我们掉接口时直接用api代替 比如我要调用'http://40.00.100.100:3002/user/add'，直接写‘/api/user/add’即可
        }
      },
      '/experts/': {
        // 请求接口中要替换的标识
        target: 'https://m.ydn.com/experts', // 代理地址
        ChangeOrigin: true, // 是否允许跨域
        secure: true,
        pathRewrite: {
          '^/experts/': ''
        }
      },
      '/jczq/': {
        // 请求接口中要替换的标识
        target: 'https://m.ydn.com/jczq', // 代理地址
        ChangeOrigin: true, // 是否允许跨域
        secure: true,
        pathRewrite: {
          '^/jczq/': ''
        }
      }
    }
    // before: require('./dist/dev-server.js')
  },
  chainWebpack: (config) => {
    config.plugin('define').tap((definitions) => {
      Object.assign(definitions[0], {
        __VUE_OPTIONS_API__: 'true',
        __VUE_PROD_DEVTOOLS__: 'false',
        __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: 'false'
      });
      return definitions;
    });
    config.module
      .rule('ts')
      .use('ts-loader')
      .tap((options) => {
        options = merge(options, {
          transpileOnly: true,
          getCustomTransformers: () => ({
            before: [
              tsImportPluginFactory({
                libraryName: 'vant',
                libraryDirectory: 'es',
                style: true
              })
            ]
          }),
          compilerOptions: {
            module: 'es2015'
          }
        });
        return options;
      });

    // 移除默认的svg处理规则
    config.module.rule('svg').exclude.add(resolve('src/assets/icons/svg')).end();

    // 添加svg-sprite-loader规则
    config.module
      .rule('icons')
      .test(/\.svg$/)
      .include.add(resolve('src/assets/icons/svg')) // 指定svg图标目录
      .end()
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .options({
        symbolId: '[name]' // 自定义symbol的id
      });
  },
  // // 配置postcss
  // css:{
  //   loaderOptions: {
  //     postcss: {
  //       plugins: [
  //         require('postcss-pxtorem-exclude')({
  //            rootValue: 37.5, //表示根元素字体大小
  //            unitPrecision: 3, //小数点后保留位数
  //            propList: ['font','font-size','line-height','height','letter-spacing','padding','margin','width','border-radius','background','background-size'],//需要转换的属性列表
  //            selectorBlackList: [],//忽略不需要转换的选择器
  //            replace: true,//是否直接更换属性值，而不添加备用属性
  //            mediaQuery: false,//是否在媒体查询的css代码中也进行转换，默认为false
  //            minPixelValue:2,//设置最小的转换数值，如果为1的话，代表只有大于1的值会被转换
  //            exclude: /(node_module)/,//设置忽略文件的正则，例如：node_module
  //           })
  //       ]
  //     }
  //   }
  // }
};