
const resolveCssVarColor = (varName, fallback) => {
  try {
    if (typeof window === 'undefined' || typeof document === 'undefined') return fallback
    const value = window.getComputedStyle(document.documentElement).getPropertyValue(varName)
    const trimmed = value ? value.trim() : ''
    return trimmed || fallback
  } catch (e) {
    return fallback
  }
}

const getBoxPlotChcart = (data, unit, labelConfig = {}) => {
  const primary2 = resolveCssVarColor('--color-primary-2', '#F6FAFF')

  const labels = {
    max: labelConfig.max || '最大耗时',
    q3: labelConfig.q3 || '平均耗时大',
    median: labelConfig.median || '耗时中位数',
    q1: labelConfig.q1 || '平均耗时小',
    min: labelConfig.min || '最小耗时',
    current: labelConfig.current || '该法案耗时'
  };

  let option = {
    // title: [
    //   {
    //     text: 'Michelson-Morley Experiment',
    //     left: 'center'
    //   }
    // ],
    graphic: [
      {
        type: 'text',
        // 左上角只标注一次单位（y轴刻度不再逐行带单位）
        left: '5%',
        top: '0%',
        style: {
          text: unit,
          fill: 'rgba(95, 101, 108, 1)',
          font: '14px Microsoft YaHei'
        }
      }
    ],
    tooltip: {
      trigger: 'item',
      axisPointer: {
        type: 'shadow'
      },
      formatter: function (params) {
        if (params.seriesType === 'scatter') {
            return `${params.name}<br/>${labels.current}: ${params.data[1]} ${unit}`;
        }
        const { name, data } = params;
        let tip = `${name}<br/>`;
        tip += `${labels.max}: ${data[5]} ${unit}<br/>`;
        tip += `${labels.q3}: ${data[4]} ${unit}<br/>`;
        tip += `${labels.median}: ${data[3]} ${unit}<br/>`;
        tip += `${labels.q1}: ${data[2]} ${unit}<br/>`;
        tip += `${labels.min}: ${data[1]} ${unit}<br/>`;
        if (data[6] !== undefined && data[6] !== null) {
          tip += `${labels.current}: ${data[6]} ${unit}`;
        }
        return tip;
      }
    },
    grid: {
      left: '8%',
      right: '5%',
      top: '10%',
      bottom: '12%'
    },
    xAxis: {
      type: 'category',
      boundaryGap: true,
      nameGap: 30,
      splitArea: {
        show: false
      },
      splitLine: {
        show: false
      },
      // data: ['众议院通过', '参议院通过', '两院协商', '总统签署']
      data: data.dataX
    },
    yAxis: {
      type: 'value',
      name: '',
      axisLabel: {
        formatter: (value) => `${value}`
      },
      splitArea: {
        show: true,
        // ECharts绘制到canvas，不能直接识别CSS变量字符串；这里取到真实颜色值后再配置交替背景
        areaStyle: {
          color: [primary2, '#ffffff']
        }
      }
    },
    series: [
      {
        name: 'boxplot',
        type: 'boxplot',
        data: data.dataY,
      },
      {
        name: labels.current,
        type: 'scatter',
        data: data.dataY.map((item, index) => [index, item[5]]),
        itemStyle: {
          color: '#ff5722'
        },
        tooltip: {
          formatter: function (params) {
            return `${params.name}<br/>${labels.current}: ${params.data[1]} ${unit}`;
          }
        }
      }
    ]
  }
  return option
}

export default getBoxPlotChcart