import { dataZoom, grid, legend, series, title, tooltip, visualMap, xAxis, yAxis } from './options.js';

import $common from './common.js';
const echartsOption = {
  setLineEcharts(item) {
    const options = {
      title: { ...title },
      tooltip: getTooltip(item),
      legend: {
        ...legend,
        data: item.legend.data,
        show: item.legend.show,
      },
      grid: {
        ...grid,
        left: item.xAxis.left || grid.left,
        right: item.xAxis.right || grid.right,
        top: !item.legend.show ? '30' : grid.top,
        bottom: item.dataZoom ? grid.bottom : '10',
      },
      dataZoom: item.dataZoom ? dataZoom : { show: false },
      xAxis: {
        ...xAxis,
        name: item.xAxis.name || undefined,
        data: item.xAxis.data,
      },
      yAxis: getYAxis(item),
      series: getSeries(item),
    };
    return options;
  },
  // 双x轴线echarts图
  setMultipleLineEcharts(item) {
    const options = {
      title: { ...title },
      tooltip: getMultipleTooltip(item),
      legend: {
        ...legend,
        data: item.legend.data,
        show: item.legend.show,
      },
      grid: [
        {
          height: '35%',
          top: '15%',
          left: '3%',
          right: '4%',
          containLabel: true,
        },
        {
          height: '35%',
          top: '52%',
          left: '3%',
          right: '4%',
          containLabel: true,
        },
      ],
      axisPointer: {
        link: [
          {
            xAxisIndex: 'all',
          },
        ],
      },
      dataZoom: [
        {
          show: true,
          realtime: true,
          backgroundColor: 'rgba(240, 242, 245, 1)',
          handleSize: '80%',
          handleIcon:
            'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAHpSURBVHgBtVXLbcJAFFybv4TAiAa4cgsVhA6gA0QF0EGgAzpISoAKEm7c4MYfuQAQhgN/cGYcHJHEthxsRrLXfl7P7O57OysJB3S7XSUej1d0Xc/jyiCUuX7SJEnqoW2ez+dWNptV7Tgkq2C/388EAoFXkOSTyaSIxWIiEomIUChkfD8ej8a1Xq/FZrMREHnDVXcS+sZoNKpMJpPlfD7X8ZPuBuw7HA6Xg8Gg6kg+Ho9fZrOZfjgc9P+C/0ynU50ctiO/l/y3yJ+ZcM05RS/ktyJcYnKSWzZuslxLp9OKmUQvIIcCsEgMbiohWIKA7U+dTsdVzEQqlRKsQJZ5EA9FlqETdrudq5gJrIhgeZ9Opyqe5UIikRB+g4PGMj3LyMtTOBwWfoMbE9wZJlkJBoPCb1wLxhB4KCigIhnCb9CrAE1GFalOFXEvOGjkoCfD0Nrb7Vb4jdVqxaYlR6PRBl8ul4ttZ/RxFbsFbRwzaBovMLp3Wq5fIBcM78sqeMMylTXgmhhPIMdisdCgU//xgRb7MLs2AeOreT1wyOE4RarzbHCbEx6r7MszwGrktoc+mhr8pETTojNy65uWwhrf7/dGpbACIfIBrbLVoW8pcCsERyyghIvYkE8IKYyDTEWjom1jkzZyuZxmx/EJrZz2vp5XBP8AAAAASUVORK5CYII=',

          xAxisIndex: [0, 1],
        },
        {
          type: 'inside',
          realtime: true,
          bottom: '0',
          height: '24',
          backgroundColor: 'rgba(240, 242, 245, 1)',
          handleSize: '80%',
          handleIcon:
            'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAHpSURBVHgBtVXLbcJAFFybv4TAiAa4cgsVhA6gA0QF0EGgAzpISoAKEm7c4MYfuQAQhgN/cGYcHJHEthxsRrLXfl7P7O57OysJB3S7XSUej1d0Xc/jyiCUuX7SJEnqoW2ez+dWNptV7Tgkq2C/388EAoFXkOSTyaSIxWIiEomIUChkfD8ej8a1Xq/FZrMREHnDVXcS+sZoNKpMJpPlfD7X8ZPuBuw7HA6Xg8Gg6kg+Ho9fZrOZfjgc9P+C/0ynU50ctiO/l/y3yJ+ZcM05RS/ktyJcYnKSWzZuslxLp9OKmUQvIIcCsEgMbiohWIKA7U+dTsdVzEQqlRKsQJZ5EA9FlqETdrudq5gJrIhgeZ9Opyqe5UIikRB+g4PGMj3LyMtTOBwWfoMbE9wZJlkJBoPCb1wLxhB4KCigIhnCb9CrAE1GFalOFXEvOGjkoCfD0Nrb7Vb4jdVqxaYlR6PRBl8ul4ttZ/RxFbsFbRwzaBovMLp3Wq5fIBcM78sqeMMylTXgmhhPIMdisdCgU//xgRb7MLs2AeOreT1wyOE4RarzbHCbEx6r7MszwGrktoc+mhr8pETTojNy65uWwhrf7/dGpbACIfIBrbLVoW8pcCsERyyghIvYkE8IKYyDTEWjom1jkzZyuZxmx/EJrZz2vp5XBP8AAAAASUVORK5CYII=',

          xAxisIndex: [0, 1],
        },
      ],
      xAxis: getMultiplexAxis(item),
      yAxis: getMultipleYAxis(item),
      series: getMultipleSeries(item),
    };
    return options;
  },
  setHeatsEcharts(item) {
    const options = {
      title: { ...title },
      tooltip: getHeatTooltip(item),
      legend: {
        ...legend,
        data: item.legend.data,
        show: item.legend.show,
      },
      grid: {
        ...grid,
        right: item.xAxis.right || grid.right,
        top: !item.legend.show ? '30' : grid.top,
        bottom: item.dataZoom ? grid.bottom : '10',
      },
      dataZoom: item.dataZoom ? dataZoom : { show: false },
      xAxis: {
        ...xAxis,
        name: item.xAxis.name || undefined,
        data: item.xAxis.data,
        boundaryGap: true,
      },
      yAxis: {
        ...yAxis,
        type: 'category',
        name: item.yAxis.name,
        data: item.yAxis.data,
      },
      visualMap: {
        ...visualMap,
        min: item.visualMap.min,
        max: item.visualMap.max,
        inRange: { color: item.visualMap.color, symbol: 'circle' },
      },
      series: item.series,
    };
    return options;
  },
  setBarEcharts(item) {
    const options = {
      title: { ...title },
      tooltip: getTooltip(item),
      legend: {
        ...legend,
        data: item.legend.data,
        show: item.legend.show,
      },
      grid: {
        ...grid,
        right: item.xAxis.right || grid.right,
        top: !item.legend.show ? '30' : grid.top,
        bottom: item.dataZoom ? grid.bottom : '10',
      },
      dataZoom: item.dataZoom ? dataZoom : { show: false },
      xAxis: {
        ...xAxis,
        name: item.xAxis.name || undefined,
        data: item.xAxis.data,
        boundaryGap: true,
      },
      yAxis: getYAxis(item),
      series: getSeries(item),
    };
    return options;
  },
  setPieEcharts(item) {
    const options = {
      title: { ...title },
      tooltip: getPieTooltip(item),
      legend: {
        data: item.legend.data,
        show: item.legend.show,
        bottom: 0,
      },
      series: item.series,
    };
    return options;
  },
};
// 处理line tooltip
const getTooltip = (item) => {
  const toolTip = {
    ...tooltip,
    axis: item.isConfidence ? 'axis' : tooltip.trigger,
  };
  toolTip.formatter = (params) => {
    if (params.length < 1) {
      return false;
    }
    const dataIndex = params[0].dataIndex;
    const otherData = item.otherData;

    let formatterHtml = "<div class='echart--mouse'>";
    if (!item.tooltopSmall) {
      formatterHtml += "<div class='echart--default-w-small'>";
    } else {
      formatterHtml += "<div class='echart--default-w'>";
    }
    formatterHtml += `<li>${params[0].axisValue}</li>`;
    if (item.otherDataFlex && item.otherDataFlex == 'start') {
      if (otherData && otherData.length && otherData.length > 0) {
        otherData.forEach((el) => {
          formatterHtml += "<li class='echart-span-bg'>";
          formatterHtml += `<span class='a fl' style='background:${el.color}'></span>`;
          formatterHtml += `<font class='fl'> ${el.name}</font>`;
          formatterHtml += `<font class='fr'> ${$common.checkValFormat(el.data[dataIndex])}</font>`;
          formatterHtml += '</li>';
        });
      } else {
        if (otherData && otherData.data.length > 0) {
          formatterHtml += "<li class='echart-span-bg'>";
          formatterHtml += `<span class='a fl' style='background:${otherData.color}'></span>`;
          formatterHtml += `<font class='fl'> ${otherData.name}</font>`;
          formatterHtml += `<font class='fr'> ${$common.checkValFormat(otherData.data[dataIndex])}</font>`;
          formatterHtml += '</li>';
        }
      }
    }
    for (let i = 0; i < params.length; i++) {
      if (params[i].seriesName != 'L' && params[i].seriesName != 'U') {
        if (item.showTooltip?.length) {
          if (item.showTooltip[params[i].dataIndex].includes(params[i].seriesName)) {
            continue;
          }
        }
        formatterHtml += "<li class='echart-span-bg'>";
        formatterHtml += `<span class='a fl' style='background:${params[i].color}'></span>`;
        formatterHtml += `<font class='fl'>${params[i].seriesName}</font>`;
        formatterHtml += `<font class='fr'>${$common.checkValFormat(params[i].value)}</font>`;
        formatterHtml += '</li>';
      }
    }
    if (!item.otherDataFlex) {
      if (otherData && otherData.length && otherData.length > 0) {
        otherData.forEach((el) => {
          formatterHtml += "<li class='echart-span-bg'>";
          formatterHtml += `<span class='a fl' style='background:${el.color}'></span>`;
          formatterHtml += `<font class='fl'> ${el.name}</font>`;
          formatterHtml += `<font class='fr'> ${$common.checkValFormat(el.data[dataIndex])}</font>`;
          formatterHtml += '</li>';
        });
      } else {
        if (otherData && otherData.data.length > 0) {
          formatterHtml += "<li class='echart-span-bg'>";
          formatterHtml += `<span class='a fl' style='background:${otherData.color}'></span>`;
          formatterHtml += `<font class='fl'> ${otherData.name}</font>`;
          formatterHtml += `<font class='fr'> ${$common.checkValFormat(otherData.data[dataIndex])}</font>`;
          formatterHtml += '</li>';
        }
      }
    }

    formatterHtml += '</div>';
    formatterHtml += '</div>';

    return formatterHtml;
  };
  return toolTip;
};
// 处理series
const getSeries = (item) => {
  const seriesData = [];
  const seriesOldData = item.series || [];
  seriesOldData.forEach((element) => {
    console.log(element);
    const obj = {
      ...series,
      name: element.name,
      type: element.lineType || 'line',
      data: element.data,
      itemStyle: { color: element.color },
      markPoint: {},
    };
    obj.lineStyle = {
      opacity: element.isConfidence ? 0 : 1,
      type: element.type || 'solid',
      color: element.lineColor ? element.lineColor : element.color,
    };
    obj.emphasis = {
      lineStyle: { color: element.lineColor || element.color },
    };
    if (element.isConfidence) {
      if (element.name == 'U') {
        obj.areaStyle = { color: element.color };
      }
      obj.stack = 'confidence-band';
      obj.symbol = 'none';
      obj.lineStyle.opacity = 0;
    }
    if (element.markPoint) {
      obj.markPoint.data = element.markPoint;
    }
    if (element.markLine) {
      obj.markLine = element.markLine;
    }
    if (element.markArea) {
      obj.markArea = element.markArea;
    }
    if (element.yAxisIndex) {
      obj.yAxisIndex = element.yAxisIndex;
    }
    if (element.barGap) {
      obj.barGap = 0;
    }
    if (element.stack) {
      obj.stack = element.stack;
    }
    if (element.step) {
      obj.step = element.step;
    }
    if (element.areaStyle) {
      obj.areaStyle = element.areaStyle;
    }
    if (element.barWidth) {
      obj.barWidth = element.barWidth;
    }
    if (element.label) {
      obj.label = element.label;
    }
    if (element.barCategoryGap) {
      obj.barCategoryGap = element.barCategoryGap;
    }
    if (element.barGap) {
      obj.barGap = element.barGap;
    }
    seriesData.push(obj);
  });
  return seriesData;
};
// 处理yAxis双轴
const getYAxis = (item) => {
  const yAxisArr = [];
  if (item.yAxis.isMore) {
    const leftW = item.yAxis.name[0].length;
    const rightW = item.yAxis.name[1] ? item.yAxis.name[1].length : 0;
    const nameLeftTextStyle = {
      padding: [0, 0, 0, leftW > 4 ? -10 : -20], // index > 0 ? [0, 0, 0, -20] : [0, -20, 0, 0],
      fontSize: 12,
      align: 'left', // index > 0 ? "right" : "left",
    };
    const nameRightTextStyle = {
      padding: [0, rightW > 4 ? -10 : -20, 0, 0], // index > 0 ? [0, 0, 0, -20] : [0, -20, 0, 0],
      fontSize: 12,
      align: 'right', // index > 0 ? "right" : "left",
    };
    yAxisArr.push({
      axisLabel: yAxis.axisLabel,
      splitNumber: 3,
      type: 'value',
      name: item.yAxis.name[0] || '',
      min: item.yAxis.min ? item.yAxis.min[0] : null,
      max: item.yAxis.max ? item.yAxis.max[0] : null,
      nameTextStyle: nameLeftTextStyle,
    });
    yAxisArr.push({
      ...yAxis,
      name: item.yAxis.name[1] || '',
      min: item.yAxis.min ? item.yAxis.min[0] : null,
      max: item.yAxis.max ? item.yAxis.max[0] : null,
      nameTextStyle: nameRightTextStyle,
      alignTicks: true,
      minInterval: 1,
    });
    console.log(yAxisArr);
  } else {
    const leftW = item.yAxis.name.length;
    const nameLeftTextStyle = {
      padding: [0, 0, 0, leftW > 4 ? -10 : -10], // index > 0 ? [0, 0, 0, -20] : [0, -20, 0, 0],
      fontSize: 12,
      align: 'left', // index > 0 ? "right" : "left",
    };
    yAxisArr.push({
      ...yAxis,
      axisLabel: {
        ...yAxis.axisLabel,
        show: item.yAxis.show === false ? false : true,
      },
      name: item.yAxis.name || undefined,
      min: item.yAxis.min || null,
      max: item.yAxis.max || null,
      nameTextStyle: nameLeftTextStyle,
    });
  }
  return yAxisArr;
};

// 处理热力图的tips
const getHeatTooltip = (item) => {
  const toolTip = { ...tooltip, trigger: 'item' };
  toolTip.formatter = (params) => {
    if (params.length < 1) {
      return false;
    }
    console.log(params);
    let formatterHtml = "<div class='echart--mouse fl'>";
    formatterHtml += "<div class='fl echart--default-w'>";
    // formatterHtml += `<li>${params[0].axisValue}</li>`;
    formatterHtml += "<li class='echart-span-bg'>";
    formatterHtml += "<span class='a fl'></span>";
    formatterHtml += "<font class='fl'>起始SOC(%)</font>";
    formatterHtml += `<font class='fr'>${$common.checkValFormat(params.value[0])}</font>`;
    formatterHtml += '</li>';
    formatterHtml += "<li class='echart-span-bg'>";
    formatterHtml += "<span class='a fl'></span>";
    formatterHtml += "<font class='fl'>截止SOC(%)</font>";
    formatterHtml += `<font class='fr'>${$common.checkValFormat(params.value[1])}</font>`;
    formatterHtml += '</li>';
    formatterHtml += "<li class='echart-span-bg'>";
    formatterHtml += "<span class='a fl'></span>";
    formatterHtml += `<font class='fl'>${item.series[0].name}</font>`;
    formatterHtml += `<font class='fr'>${$common.checkValFormat(params.value[2])}</font>`;
    formatterHtml += '</li>';

    formatterHtml += '</div>';
    formatterHtml += '</div>';

    return formatterHtml;
  };
  return toolTip;
};
// 处理饼图的tips
const getPieTooltip = (item) => {
  const toolTip = { ...tooltip, trigger: 'item' };
  if (item?.toolTip?.show === false) {
    toolTip.show = false;
  }
  toolTip.formatter = (params) => {
    console.log(params, item);
    if (params.length < 1) {
      return false;
    }

    let formatterHtml = "<div class='echart--mouse fl'>";
    formatterHtml += "<div class='fl echart--default-w-pie'>";
    // formatterHtml += `<li>${params[0].axisValue}</li>`;
    formatterHtml += "<li class='echart-span-bg'>";
    formatterHtml += `<span class='a fl' style='background:${params.color}'></span>`;
    formatterHtml += `<font class='fl'>${params.name}</font>`;
    formatterHtml += `<font class='fr'>${$common.checkValFormat(params.value)}%</font>`;
    formatterHtml += '</li>';

    formatterHtml += '</div>';
    formatterHtml += '</div>';

    return formatterHtml;
  };
  return toolTip;
};

// 处理MultipleLine  x双轴
const getMultiplexAxis = (item) => {
  const xAxisArr = [];
  xAxisArr.push({
    type: 'category',
    boundaryGap: item.type === 'line' ? false : true,
    axisLine: { onZero: true },
    data: item.xAxis.data[0],
  });
  xAxisArr.push({
    gridIndex: 1,
    type: 'category',
    boundaryGap: item.type === 'line' ? false : true,
    axisLine: { onZero: true },
    position: 'top',
    data: item.xAxis.data[1],
  });
  return xAxisArr;
};
const getMultipleYAxis = (item) => {
  const yAxisArr = [];
  const multipleLength = item.legend.data.length;
  if (multipleLength > 2) {
    for (let i = 0; i < multipleLength; i++) {
      const obj = {
        ...yAxis,
        type: 'value',
        splitNumber: '3',
        inverse: i > 0,
        name: item.yAxis.name[i] || undefined,
        min: item.yAxis.min[i] || null,
        max: item.yAxis.max[i] || null,
        nameTextStyle: {
          fontSize: 12,
        },
      };
      if (i == 0) {
        obj.inverse = false;
        obj.nameTextStyle.padding = [0, 0, 0, -10];
        obj.nameTextStyle.align = 'left';
      }
      if (i == 1) {
        obj.inverse = false;
        obj.nameTextStyle.padding = [0, -10, 0, 0];
        obj.nameTextStyle.align = 'right';
        // obj.nameLocation = 'start';
      }
      if (i == 2) {
        obj.inverse = true;
        obj.nameTextStyle.padding = [0, 0, 0, -10];
        obj.nameTextStyle.align = 'left';
        obj.gridIndex = 1;
      }
      if (i == 3) {
        obj.inverse = true;
        obj.nameTextStyle.padding = [0, -10, 0, 0];
        obj.nameTextStyle.align = 'right';
        obj.gridIndex = 1;
      }
      yAxisArr.push(obj);
    }
  } else {
    for (let i = 0; i < multipleLength; i++) {
      const obj = {
        ...yAxis,
        type: 'value',
        splitNumber: '3',
        inverse: i > 0,
        name: item.yAxis.name[i] || undefined,
        min: item.yAxis.min[i] || null,
        max: item.yAxis.max[i] || null,
        nameTextStyle: {
          fontSize: 12,
        },
      };
      if (i == 0) {
        obj.nameTextStyle.padding = [0, 0, 0, -20];
        obj.nameTextStyle.align = 'left';
      }
      if (i == 1) {
        obj.nameTextStyle.padding = [0, 0, 0, -20];
        obj.nameTextStyle.align = 'left';
        obj.gridIndex = 1;
      }
      yAxisArr.push(obj);
    }
  }

  return yAxisArr;
};

// 处理series
const getMultipleSeries = (item) => {
  const seriesData = [];
  const seriesOldData = item.series || [];
  seriesOldData.forEach((element) => {
    console.log(element);
    const obj = {
      ...series,
      name: element.name,
      type: element.lineType || 'line',
      data: element.data,
      itemStyle: { color: element.color },
    };
    obj.lineStyle = {
      opacity: element.isConfidence ? 0 : 1,
      type: element.type || 'solid',
      color: element.lineColor ? element.lineColor : element.color,
    };
    obj.emphasis = {
      lineStyle: { color: element.lineColor || element.color },
    };
    if (element.yAxisIndex) {
      obj.yAxisIndex = element.yAxisIndex;
    }
    if (element.xAxisIndex) {
      obj.xAxisIndex = element.xAxisIndex;
    }
    seriesData.push(obj);
  });
  return seriesData;
};
// 处理line Multiple
const getMultipleTooltip = (item) => {
  const toolTipArr = { ...tooltip, axis: 'axis' };
  toolTipArr.formatter = (params) => {
    console.log(params);
    if (params.length < 1) {
      return false;
    }
    let formatterHtml = "<div class='echart--mouse fl'>";
    for (let i = 0; i < 2; i++) {
      formatterHtml += `<div class='fl echart--default-w'>
                                  <li>${item.xAxis.data[i][params[0].dataIndex]}</li>`;
      for (let j = 0; j < params.length; j++) {
        if (params[j].axisIndex == i) {
          formatterHtml += `<li class='echart-span-bg'>
                                    <span class='a fl' style='background:${params[j].color}'></span>
                                    <font class='fl'>${params[j].seriesName}</font>
                                    <font class='fr'>${$common.checkValFormat(params[j].value)}</font>
                                  </li>`;
        }
      }

      formatterHtml += '</div>';
    }
    formatterHtml += '</div>';

    return formatterHtml;
  };
  return toolTipArr;
};

export default echartsOption;
