/**
 * @author  daya
 * @createDate  2021/10/29 15:45
 * 备注: 折线图表设置
 **/

// 按需引入,charts很多东西的
// eslint-disable-next-line no-unused-vars,no-redeclare
import {defaultColor, defaultFontSize, formatToMillion, linearGradientStyle, labelStyle, tooltipStyle, horizontalDataZoom, verticalDataZoom} from '../../charts'
/**
 * 提示语(tooltip)
 * 图例(legend)
 * 颜色(color)
 * x轴 (xAxis)
 * y轴 (xAxis)
 * 主体样式 (series)
 * **/
// 引入图标各组件的预设情况
import chart from '../../chart-perset'
let grid = chart.lineGrid
let tooltip = chart.tooltip
let legend = chart.legend
let color = chart.lineColor
let xAxis = chart.lineXAxis
let yAxis = chart.lineYAxis
let series = chart.lineSeries
// line
/**
 * line公共部分开始
 * **/
// eslint-disable-next-line no-unused-vars
const axisStyle = {
  splitLine: false,
  axisLine: false,
  axisTick: false,
  axisLabel: {
    color: defaultColor,
    fontSize: defaultFontSize,
    formatter: formatToMillion
  }
}

/** line公共部分结束 **/

/**
 * *图表预设样式
 * opt
 **/
// 因为使用驼峰式，所有拼接变量的时候将style1的第一个字母转换成大写
// TODO: optionStyle应该还是可以再抽成一个js的
// 样式1
export const optionStyle1 = {
  tooltip: {
    ...tooltip.tooltipStyle
  },
  grid: {
    ...grid.gridStyle8
  },
  xAxis: [
    xAxis.xAxisStyle1
  ],
  yAxis: [
    yAxis.yAxisStyle1
  ],
  color: color.colorStyle8,
  dataZoom: [...horizontalDataZoom],
  series: [
    series.seriesStyle8
  ]
}

// 样式2
export const optionStyle2 = {
  legend: {
    ...legend.legendStyle2
  },
  tooltip: {
    ...tooltip.tooltipStyle
  },
  grid: {
    ...grid.gridStyle9
  },
  dataZoom: [...horizontalDataZoom],
  xAxis: [
    xAxis.xAxisStyle2
  ],
  yAxis: [
    yAxis.yAxisStyle2
  ],
  color: color.colorStyle13,
  series: series.seriesStyle9
}

export const optionStyle3 = {
  ...optionStyle1,
  color: color.colorStyle15,
  series: [
    series.seriesStyle1
  ]
}

export const optionStyle4 = {
  ...optionStyle1,
  series: [
    series.seriesStyle4
  ],
  tooltip: {
    trigger: 'axis'
    // axisPointer: {            // 坐标轴指示器，坐标轴触发有效
    //   type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
    // }
  },
  color: color.colorStyle16
}

export const optionStyle5 = {
  ...optionStyle1,
  series: [
    series.seriesStyle5
  ],
  tooltip: {
    trigger: 'axis'
  },
  color: color.colorStyle12
}
export const optionStyle6 = {
  ...optionStyle1,
  series: [
    series.seriesStyle6,
    series.seriesStyle6
  ],
  tooltip: {
    trigger: 'axis'
    // axisPointer: {            // 坐标轴指示器，坐标轴触发有效
    //   type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
    // }
  },
  color: color.colorStyle14
}

export const optionStyle7 = {
  ...optionStyle1,
  series: [
    series.seriesStyle7,
    series.seriesStyle7
  ],
  tooltip: {
    trigger: 'axis'
    // axisPointer: {            // 坐标轴指示器，坐标轴触发有效
    //   type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
    // }
  },
  color: color.colorStyle13
}

export const optionStyle8 = {
  ...optionStyle1,
  series: series.seriesStyle10,
  tooltip: {
    trigger: 'axis'
  },
  color: color.colorStyle24
}
const optionStyle31 = {
  title: {
    text: '单位：%',
    right: 0,
    show: true,
    textStyle: {
      fontSize: 18,
      color: '#fff',
      fontWeight: 500
    }},
  grid: {
    ...grid.gridStyle31
  },
  tooltip: {
    trigger: 'axis'
  },
  xAxis: [
    xAxis.xAxisStyle31
  ],
  yAxis: [
    yAxis.yAxisStyle31
  ],
  dataZoom: [...horizontalDataZoom],
  color: color.colorStyle31,
  series: [
    series.seriesStyle31
  ]
}
const optionStyle32 = {
  title: {
    text: '单位：%',
    right: 0,
    show: true,
    textStyle: {
      fontSize: 18,
      color: '#fff',
      fontWeight: 500
    }},

  grid: {
    ...grid.gridStyle31
  },
  tooltip: {
    trigger: 'axis'
  },
  xAxis: [
    xAxis.xAxisStyle31
  ],
  yAxis: [
    yAxis.yAxisStyle31
  ],
  dataZoom: [...horizontalDataZoom],
  color: color.colorStyle31,
  series: [
    series.seriesStyle32
  ]
}
const optionStyle33 = {
  title: {
    text: '单位：件',
    left: 0,
    show: true,
    textStyle: {
      fontSize: 16,
      color: '#fff',
      fontWeight: 500

    }},

  grid: {
    ...grid.gridStyle33
  },
  tooltip: {
    trigger: 'axis'
  },
  xAxis: [
    xAxis.xAxisStyle41
  ],
  yAxis: [
    yAxis.yAxisStyle41
  ],
  dataZoom: [...horizontalDataZoom],
  color: color.colorStyle41,
  series: [
    series.seriesStyle41,
    xAxis.xAxisStyle31
  ]
}
const optionStyle34 = {
  legend: {
    ...legend.legendStyle38
  },
  grid: {
    ...grid.gridStyle39
  },
  tooltip: {
    trigger: 'axis'
  },
  xAxis: [
    xAxis.xAxisStyle37
  ],
  yAxis: [
    yAxis.yAxisStyle36
  ],
  dataZoom: [...horizontalDataZoom],
  color: color.colorStyle36,
  series: [
    series.seriesStyle33
  ]
}
const optionStyle35 = {
  legend: {
    ...legend.legendStyle37
  },
  grid: {
    ...grid.gridStyle131
  },
  tooltip: {
    trigger: 'axis'
  },
  xAxis: [
    xAxis.xAxisStyle39
  ],
  yAxis: [
    yAxis.yAxisStyle36
  ],
  dataZoom: [...horizontalDataZoom],
  color: color.colorStyle36,
  series: [
    series.seriesStyle33
  ]
}

const optionStyle41 = {
  title: {
    text: '单位：件',
    right: 0,
    // top:20
    show: true,
    textStyle: {
      fontSize: 16,
      color: '#fff'
    }},
  grid: {
    ...grid.gridStyle42
  },
  tooltip: {
    trigger: 'axis'
  },
  xAxis: [
    xAxis.xAxisStyle41
  ],
  yAxis: [
    yAxis.yAxisStyle41
  ],
  dataZoom: [...horizontalDataZoom],
  color: color.colorStyle41,
  series: [
    series.seriesStyle41
  ]
}
const optionStyle42 = {
  title: {
    right: 0,
    show: true,
    textStyle: {
      fontSize: 18,
      color: '#fff',
      fontWeight: 500
    }},
  grid: {
    ...grid.gridStyle43
  },
  tooltip: {
    trigger: 'axis'
  },
  xAxis: [
    xAxis.xAxisStyle42
  ],
  yAxis: [
    yAxis.yAxisStyle42
  ],
  dataZoom: [...horizontalDataZoom],
  color: color.colorStyle42,
  series: [
    series.seriesStyle42
  ]
}
export const opt = {
  optionStyle1,
  optionStyle2,
  optionStyle3,
  optionStyle4,
  optionStyle5,
  optionStyle6,
  optionStyle7,
  optionStyle8,
  optionStyle31,
  optionStyle32,
  optionStyle33,
  optionStyle41,
  optionStyle34,
  optionStyle42,
  optionStyle35
}

// commonConfig 导出的预设样式
export const commonConfig = {
  ...tooltip,
  ...legend,
  ...xAxis,
  ...yAxis,
  ...color,
  ...series
}
/**
 * 折线图颜色设置
 * lineColor
 **/
export const lineColor = {
  ...color
}
/**
 * *折线图放入宽度设置(series)
 * lineSeries
 **/
export const lineSeries = {
  ...series
}
