'use strict'
const path = require('path')
const config = require('../config')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const packageConfig = require('../package.json')

//处理样式路径
exports.assetsPath = function (_path) {
  const assetsSubDirectory = process.env.NODE_ENV === 'production'
    ? config.build.assetsSubDirectory
    : config.dev.assetsSubDirectory
  return path.posix.join(assetsSubDirectory, _path)
}

 //引入全局样式
let  resourcesConfig = [
  path.resolve(__dirname, '../src/assets/style/globle.scss'),
]

//处理样式编译
exports.cssLoaders = function (options) {
  options = options || {}
  const cssLoader = {
    loader: 'css-loader',
    options: {
      sourceMap: options.sourceMap//出错之后是否显示详细的位置信息
    }
  }

  const postcssLoader = {
    loader: 'postcss-loader',
    options: {
      sourceMap: options.sourceMap
    }
  }

  
  //加载对应的loader
  function generateLoaders (loader, loaderOptions) {
    const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]

    if (loader) {
      loaders.push({
        loader: loader + '-loader',
        options: Object.assign({}, loaderOptions, {
          sourceMap: options.sourceMap
        })
      })
    }

    //注意这个extract是自定义的属性，可以定义在options里面，主要作用就是当配置为true就把文件单独取，false表示不能提取
    if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        fallback: 'vue-style-loader'
      })
    } else {
      return ['vue-style-loader'].concat(loaders)
    }
  }

  return {
    css: generateLoaders(), // css对应 vue-style-loader 和 css-loader
    postcss: generateLoaders(), // postcss对应 vue-style-loader 和 css-loader
    less: generateLoaders('less'), // less对应 vue-style-loader 和 less-loader
    sass: generateLoaders('sass', { indentedSyntax: true }), // sass对应 vue-style-loader 和 sass-loader
    // scss: generateLoaders('sass').concat(
    //   {//引入单个样式文件
    //     loader:'sass-resources-loader',
    //     options:{
    //       resources:path.resolve(__dirname,'../src/assets/style/globle.scss')
    //     }
    //   }
    // ), // scss对应 vue-style-loader 和 sass-loader
    stylus: generateLoaders('stylus'), // stylus对应 vue-style-loader 和 stylus-loader
    styl: generateLoaders('stylus'), // styl对应 vue-style-loader 和 styl-loader
    //scss文件类型
    scss: generateLoaders('sass').concat({
      loader: 'sass-resources-loader',
      options: {
        resources: resourcesConfig//引入多个sass文件，以数组的形式
      }}),
     //less文件类型
    // less: generateLoaders('less').concat({
    //   loader: 'sass-resources-loader',
    //   options: {//引入多个less文件，以数组的形式
    //     resources: resourcesConfig
    //   }}),
  }
}

// Generate loaders for standalone style files (outside of .vue)
exports.styleLoaders = function (options) {
  const output = []
  const loaders = exports.cssLoaders(options)
  for (const extension in loaders) {
    const loader = loaders[extension]
    output.push({
      test: new RegExp('\\.' + extension + '$'),
      use: loader
    })
  }
  return output
}

exports.createNotifierCallback = () => {
  const notifier = require('node-notifier')
  return (severity, errors) => {
    if (severity !== 'error') return
    const error = errors[0]
    const filename = error.file && error.file.split('!').pop()

    notifier.notify({
      title: packageConfig.name,
      message: severity + ': ' + error.name,
      subtitle: filename || '',
      icon: path.join(__dirname, 'logo.png')
    })
  }
}