import colors from './colors';
import { formatter } from './tooltip';
import { colorRgb } from '../tools/other';

const getBase = () => ({
  chart: {
    marginRight: 15,
    marginTop: 80,
    backgroundColor: 'transparent',
    thousandsSep: ',',
  },
  title: {
    text: null,
  },
  exporting: {
    enabled: false,
  },
  credits: {
    enabled: false,
  },
  legend: {
    align: 'center',
    verticalAlign: 'top',
    itemMarginBottom: 20,
    squareSymbol: false,
    symbolHeight: 12,
    symbolWidth: 26,
    symbolRadius: 6,
    itemStyle: { "color": "#333333", "cursor": "pointer", "fontSize": "14px", "fontWeight": "normal" }
  },
  colors,
  tooltip: {
    zIndex: 100,
    shared: true,
    crosshairs: true,
    backgroundColor: null,
    borderWidth: 0,
    borderColor: 'rgba(31,41,71,.75)',
    borderRadius: 8,
    shadow: true,
    useHTML: true,
    style: {
      color: '#666',
      fontSize: '12px',
    },
    formatter
  },
  xAxis: {
    lineWidth: 1,
    lineColor: '#EDF0F1',
    tickWidth: 0,
    // endOnTick: true,
    labels: {
      style: {
        color: '#666',
        fontSize: '12px',
        fontWeight: 400,
      },
      formatter: function (this: any) {
        let value = this.value;
        if (typeof value !== 'string') return value;
        if ((value || '').indexOf('~') > -1) {
          value = value.split('~')[1];
        }
        value = value.replace(/-/g, '/').replace(/^20/g, '');
        return value;
      },
      useHTML: true,
      // step: 2,
    },
    title: {
      style: {
        color: '#666',
        fontSize: '12px',
        fontWeight: 400,
      },
      align: 'high',
      y: -18,
      x: 30,
    },
  },
  yAxis: {
    allowDecimals: false,
    useHTML: true,
    labels: {
      useHTML: true,
      style: {
        color: '#666',
        fontSize: '12px',
        fontWeight: 400,
      },
    },
    title: {
      text: null,
      style: {
        color: '#666',
        fontSize: '12px',
        fontWeight: 400,
      },
      align: 'high',
      rotation: 0,
      offset: -10,
      y: -20,
    },
    lineWidth: 0,
    gridLineDashStyle: 'dash',
    gridLineWidth: 1,
    gridLineColor: 'rgba(170, 185, 208, 0.2)',
  },
  plotOptions: {
    spline: {
      marker: {
        radius: 4,
        fillColor: '#fff',
        lineColor: null,
        lineWidth: 2
      },
    },
    areaspline: {
      marker: {
        symbol: 'self_circle',
        radius: 4,
        fillColor: '#fff',
        lineColor: null,
        lineWidth: 2
      },
      lineWidth: 2,
      states: {
      },
      threshold: null
    },
    boxplot: {
      borderWidth: 0,
      borderRadius: 5,
      maxPointWidth: 12,
      minPointWidth: 12,
      // allowPointSelect:true,
      // '#15D8E4',
      fillColor: null,
      lineColor: null,
      lineWidth: 0,
      // negativeColor:'red',
      medianColor: '#fff', // 中位线颜色
      medianWidth: 1, // 中位线宽度
      stemColor: null, // 竖线颜色
      stemDashStyle: 'sloid', // 竖线类型（实虚）
      stemWidth: 1, // 竖线宽度
      whiskerColor: null, // max,min颜色
      // whiskerLength: '2',//max,min长度
      whiskerWidth: 1,
    },
    column: {
      borderWidth: 0,
      borderRadius: 5,
      maxPointWidth: 12,
      minPointWidth: 12,
    },
    series: {
      marker: {
        enabled: false,
        symbol: 'circle',
      },
      states: {
        inactive: false
      },
      point: {}
    },
  },
  series: []
});

const getGradientColor = (data: any[], n: number = 0) => {
  return data.map((value: {}, i) => (
    {
      fillColor: {
        linearGradient: {
          x1: 0,
          y1: 0,
          x2: 0,
          y2: 1
        },
        stops: [
          [0, colorRgb(colors[n || i], 0.1)],
          [1, colorRgb(colors[n || i], 0)]
        ]
      },
      ...value,
    }
  ));
}

export { getBase, getGradientColor };