
import * as echarts from 'echarts';

const BAR_WIDTH = '20px';
const myChart: any = {};
let chartDom: any;
let winId = '';
const observeObj: any = {};

export const setOption = (key:string, option:any) => {
  myChart[key]?.setOption(option);
};

export const disposeAllEcharts = () => {
  for (const key in myChart) {
    myChart[key]?.dispose();
  }
};
export const disposeEchartsByKey = (key:any) => {
  myChart[key]?.dispose();
};
export const initEcharts = (id: string, win: string, type: string, param: any) => {
  chartDom = document.getElementById(id) as HTMLElement;
  myChart[id] = echarts.init(chartDom);

  if (type === 'barChart') {
    barChart(id, param);
  }
  if (type === 'pieChart') {
    pieChart(id, param);
  }
  if (type === 'lineChart') {
    lineChart(id, param);
  }
  if (win) {
    winId = win;
    observeObj[winId] = new ResizeObserver(() => {
      onResize(myChart[id]);
    });
    observeObj[winId].observe(document.getElementById(winId) as HTMLElement);
  }
};
const onResize = (chart: any) => {
  if (chart) {
    chart.resize();
  }
};
export const unObserve = () => {
  if (observeObj[winId]) {
    const el = document.getElementById(winId) as HTMLElement;
    if (el) {
      observeObj[winId].unobserve(el);
    }
    delete observeObj[winId];
  }
};
const barChart = (id: string, { series, yAxis, xAxis, grid, title, legend, tooltip, dataZoom, color }: any) => {
  const option: any = {
    title: {},
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow',
      },
    },
    legend: {
      left: '250',
      top: '25',
      show: true,
      data: [],
    },
    grid: {
      top: '10%',
      bottom: '10%',
      left: '10%',
      right: '10%',
    },
    xAxis: [
      {
        type: 'category',
        axisTick: { show: false },
        data: [],
        axisLabel: {
          show: true,
          interval: 0,
        },
      },
    ],
    yAxis: [
      {
        type: 'value',
        // minInterval: 1,
      },
    ],
    series: [],
    dataZoom: [],
  };
  if (yAxis) {
    for (const key in yAxis) {
      option.yAxis[0][key] = yAxis[key];
    }
  }
  if (xAxis) {
    if (xAxis instanceof Array) {
      for (let index = 0; index < xAxis.length; index++) {
        for (const key in xAxis[index]) {
          option.xAxis[index][key] = xAxis[index][key];
        }
      }
    } else {
      for (const key in xAxis) {
        option.xAxis[0][key] = xAxis[key];
      }
    }
  }
  if (grid) {
    for (const key in grid) {
      option.grid[key] = grid[key];
    }
  }
  if (title) {
    for (const key in title) {
      option.title[key] = title[key];
    }
  }

  if (legend) {
    for (const key in legend) {
      option.legend[key] = legend[key];
    }
  }

  if (color) {
    option.color = color;
  }

  if (tooltip) {
    for (const key in tooltip) {
      option.tooltip[key] = tooltip[key];
    }
  }
  if (dataZoom) {
    option.dataZoom = dataZoom.map((item: any) => {
      return item;
    });
  }

  option.series =
    series.map((item: any) => {
      if (!Reflect.has(item, 'type')) {
        item.type = 'bar';
      }
      if (!Reflect.has(item, 'barMaxWidth')) {
        item.barMaxWidth = BAR_WIDTH;
      }
      return item;
    }) ?? [];
  if (option) {
    myChart[id].setOption(option);
  }

  myChart[id].on('click', (data: any) => {
    const param = {
      value: data.value,
      unit: data.seriesName,
      name: data.name,
    };

    sessionStorage.setItem('clickBarChart', JSON.stringify(param));
  });
};
const pieChart = (id: string, { series, color, title, tooltip, legend, grid }: any) => {
  const option: any = {
    tooltip: {
      trigger: 'item',
    },
    title: {},
    grid: {},
    legend: {
      top: '5%',
      left: 'center',
    },
    series: [
      {
        name: '',
        type: 'pie',
        radius: ['40%', '70%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: '#fff',
          borderWidth: 2,
        },
        label: {
          show: false,
          position: 'center',
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 40,
            fontWeight: 'bold',
          },
        },
        labelLine: {
          show: false,
        },
        data: [],
      },
    ],
  };
  if (color) {
    option.color = color;
  }

  if (title) {
    for (const key in title) {
      option.title[key] = title[key];
    }
  }
  if (grid) {
    for (const key in grid) {
      option.grid[key] = grid[key];
    }
  }

  if (tooltip) {
    for (const key in tooltip) {
      option.tooltip[key] = tooltip[key];
    }
  }

  if (legend) {
    for (const key in legend) {
      option.legend[key] = legend[key];
    }
  }

  option.series =
    series.map((item: any) => {
      const seriesObj = {
        name: item.name,
        type: 'pie',
        radius: item.radius || ['40%', '70%'],
        center: item.center ? item.center : ['50%', '60%'],
        avoidLabelOverlap: false,
        itemStyle: item.itemStyle || {
          borderRadius: 5,
          borderColor: '#fff',
          borderWidth: 2,
        },
        label: item.label || {
          show: false,
          position: 'center',
        },
        emphasis: item.emphasis || {
          label: {
            show: true,
            fontSize: 40,
            fontWeight: 'bold',
          },
        },
        labelLine: item.labelLine || {
          show: false,
        },
        data: item.data,
      };
      if (!Reflect.has(item, 'type')) {
        seriesObj.type = 'pie';
      }

      return seriesObj;
    }) ?? [];
  if (option) {
    myChart[id].setOption(option);
  }
};
const lineChart = (id: string, { title, tooltip, legend, grid, xAxis, yAxis, series, color, dataZoom }: any) => {
  const option: any = {
    title: {},
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow',
      },
    },
    legend: {
      top: '5%',
      left: 'center',
    },
    grid: {
      top: '10%',
      bottom: '10%',
      left: '10%',
      right: '10%',
    },
    xAxis: [
      {
        type: 'category',
        boundaryGap: false,
        data: [],
        axisLabel: {
          show: true,
          interval: 0,
        },
      },
    ],
    yAxis: [
      {
        type: 'value',
        minInterval: 1,
      },
    ],
    series: [],
  };
  if (title) {
    for (const key in title) {
      option.title[key] = title[key];
    }
  }
  if (tooltip) {
    for (const key in title) {
      option.tooltip[key] = tooltip[key];
    }
  }
  if (legend) {
    option.legend = legend;
  }
  if (grid) {
    for (const key in grid) {
      option.grid[key] = grid[key];
    }
  }
  if (xAxis) {
    option.xAxis = xAxis;
  }
  if (yAxis) {
    option.yAxis = yAxis;
  }
  if (color) {
    option.color = color;
  }

  if (dataZoom) {
    option.dataZoom = dataZoom.map((item: any) => {
      return item;
    });
  }
  option.series =
    series.map((item: any) => {
      if (!Reflect.has(item, 'type')) {
        item.type = 'line';
      }
      return item;
    }) ?? [];
  if (option) {
    myChart[id].setOption(option);
  }
};

export enum EColor {
  YELLOW = '#ffc72c',
  RED = '#f5878b',
  GRAY = '#888b9c',
}
