import { inject, nextTick, reactive, toRefs, watch } from 'vue';

import { useGo } from '@jnpf/hooks';
import { encryptByBase64 } from '@jnpf/utils';

import { useEcharts } from '@vben/plugins/echarts';

import * as echarts from 'echarts';
import { cloneDeep } from 'lodash-es';

import { getDataInterfaceRes } from '#/api/systemData/dataInterface';
import { getParamList } from '#/utils/jnpf';

import CardHeader from '../../Portal/CardHeader/index.vue';
import { chartData as defaultChartData } from '../helper/dataMap';

export function useEChart(activeData, chartRef) {
  interface State {
    currOption: any;
    chartData: any[];
  }
  const state = reactive<State>({
    currOption: {},
    chartData: [],
  });
  const { chartData, currOption } = toRefs(state);
  const { renderEcharts, resize } = useEcharts(chartRef, handleClick);
  const emitter: any = inject('emitter');
  const go = useGo();

  watch(
    () => activeData.option,
    () => {
      initChartData();
    },
    { deep: true },
  );
  watch(
    () => activeData.dataType,
    (val) => {
      activeData.option.defaultValue = [];
      state.chartData = [];
      if (val == 'static') initStaticData(activeData.option.styleType);
      initBarType();
    },
    { deep: true },
  );
  watch(
    () => activeData.option.styleType,
    (val) => {
      if (activeData.dataType == 'static') initStaticData(val);
      initBarType();
    },
  );
  watch(
    () => activeData.option.defaultValue,
    (val) => {
      if (activeData.dataType !== 'static') return;
      setTimeout(() => {
        state.chartData = val;
        initChartData();
        initBarType();
      }, 0);
    },
  );
  watch(
    () => activeData.propsApi,
    (val) => {
      if (activeData.dataType === 'static' || !val) return;
      const query = { paramList: getParamList(activeData.templateJson) };
      getDataInterfaceRes(val, query).then((res) => {
        state.chartData = res.data;
        initChartData();
        initBarType();
      });
    },
  );
  watch(
    () => activeData.mappingConfig,
    () => {
      initChartData();
    },
    { deep: true },
  );

  function init() {
    if (activeData.dataType === 'dynamic') {
      if (!activeData.propsApi) return (state.chartData = []);
      const query = { paramList: getParamList(activeData.templateJson) };
      getDataInterfaceRes(activeData.propsApi, query).then((res) => {
        state.chartData = res.data;
        initChartData();
      });
    } else {
      setTimeout(() => {
        state.chartData = activeData.option.defaultValue;
        initChartData();
      }, 0);
    }
    emitter.on(`eChart${activeData.i}`, () => {
      nextTick(() => resize());
    });
  }
  function mappingConfig() {
    const optionData = cloneDeep(state.chartData) || [];
    if (!activeData.mappingConfig || activeData.dataType === 'static') return optionData;
    if (['barChart', 'lineChart', 'pieChart'].includes(activeData.jnpfKey))
      return optionData.map((o) => ({
        type: o[activeData.mappingConfig[0].value ? activeData.mappingConfig[0].value : 'type'],
        name: o[activeData.mappingConfig[1].value ? activeData.mappingConfig[1].value : 'name'],
        value: o[activeData.mappingConfig[2].value ? activeData.mappingConfig[2].value : 'value'],
      }));
    if (activeData.jnpfKey == 'radarChart')
      return optionData.map((o) => ({
        type: o[activeData.mappingConfig[0].value ? activeData.mappingConfig[0].value : 'type'],
        name: o[activeData.mappingConfig[1].value ? activeData.mappingConfig[1].value : 'name'],
        value: o[activeData.mappingConfig[2].value ? activeData.mappingConfig[2].value : 'value'],
        max: o[activeData.mappingConfig[3].value ? activeData.mappingConfig[3].value : 'max'],
      }));
  }
  function initChartData() {
    const jnpfKey = activeData.jnpfKey;
    const styleType = activeData.option.styleType;
    const option = activeData.option;
    const optionData = mappingConfig();
    const typeArr = [...new Set(optionData.map((item) => item.type))];
    const axisData = [...new Set(optionData.map((item) => item.name))];
    const seriesData: any[] = [];
    typeArr.forEach((title, index) => {
      const type = getType(title);
      const obj: any = {
        name: title,
        type,
        stack: styleType == 5 || styleType == 6 || styleType == 7 || (styleType != 4 && jnpfKey == 'lineChart') ? title : 'total',
      };
      const chartArr = optionData.filter((item) => title === item.type);
      if (jnpfKey == 'pieChart') {
        obj.data = chartArr.map((item) => {
          return {
            value: item.value,
            name: item.name,
          };
        });
        if (option.sortable) getPieData(obj.data);
        if (option.showZero) obj.data = obj.data.filter((item) => item.value != 0);
      } else if (jnpfKey == 'radarChart') {
        const typeList = chartArr.map((item) => item.type);
        const element = {
          value: chartArr.map((item) => item.value),
          name: typeList && typeList.length ? typeList[0] : '',
          areaStyle: {
            color: getColor(index),
            opacity: option.seriesAreaStyleOpacity,
          },
        };
        obj.data = [element];
        obj.colorBy = 'series';
      } else {
        obj.data = chartArr.map((item) => item.value);
      }
      seriesData.push(obj);
    });
    const xAxis: any = {
      type: option.category == 'category' ? 'category' : 'value',
      show: option.xAxisShow,
      inverse: option.xAxisInverse,
      data: axisData,
      name: option.xAxisName,
      nameTextStyle: {
        color: option.xAxisNameTextStyleColor,
        fontSize: option.xAxisNameTextStyleFontSize,
        fontWeight: option.xAxisNameTextStyleFontWeight ? 'bolder' : '',
      },
      splitLine: {
        show: option.xAxisSplitLineShow,
        lineStyle: {
          color: option.xAxisSplitLineLineStyleColor,
        },
      },
      axisLabel: {
        rotate: option.xAxisAxisLabelRotate,
        color: option.AxisTextStyleColor ? option.AxisTextStyleColor : option.xAxisAxisLabelTextStyleColor,
        fontSize: option.xAxisAxisLabelTextStyleFontSize,
        fontWeight: option.xAxisAxisLabelTextFontWeight ? 'bolder' : '',
      },
      axisLine: {
        show: option.xAxisShow,
        lineStyle: {
          color: option.AxisLineStyleColor ? option.AxisLineStyleColor : option.xAxisAxisLineLineStyleColor,
        },
      },
    };
    const yAxis = [
      {
        type: option.category == 'category' ? 'value' : 'category',
        show: option.yAxisShow,
        inverse: option.yAxisInverse,
        data: axisData,
        name: option.yAxisName,
        nameTextStyle: {
          color: option.yAxisNameTextStyleColor,
          fontSize: option.yAxisNameTextStyleFontSize,
          fontWeight: option.yAxisNameTextStyleFontWeight ? 'bolder' : '',
        },
        splitLine: {
          show: option.yAxisSplitLineShow,
          lineStyle: {
            color: option.yAxisSplitLineLineStyleColor,
          },
        },
        axisLabel: {
          interval: option.yAxisAxisLabelInterval,
          rotate: option.yAxisAxisLabelRotate,
          color: option.AxisTextStyleColor ? option.AxisTextStyleColor : option.yAxisAxisLabelTextStyleColor,
          fontSize: option.yAxisAxisLabelTextStyleFontSize,
          fontWeight: option.yAxisAxisLabelTextFontWeight ? 'bolder' : '',
        },
        axisLine: {
          show: option.yAxisShow,
          lineStyle: {
            color: option.AxisLineStyleColor ? option.AxisLineStyleColor : option.yAxisAxisLineLineStyleColor,
          },
        },
      },
    ];
    const newOption: any = {
      // 标题
      title: {
        show: option.titleText || option.titleSubtext,
        text: option.titleText,
        textStyle: {
          color: option.titleTextStyleColor,
          fontSize: option.titleTextStyleFontSize,
          fontWeight: option.titleTextStyleFontWeight ? 'bolder' : '',
        },
        subtext: option.titleSubtext,
        subtextStyle: {
          color: option.titleSubtextStyleColor,
          fontSize: option.titleSubtextStyleFontSize,
          fontWeight: option.titleSubtextStyleFontWeight ? 'bolder' : '',
        },
        left: option.titleLeft,
        backgroundColor: option.titleText || option.titleSubtext ? option.titleBgColor || '#fff' : '#fff',
      },
      // 提示
      tooltip: {
        show: option.tooltipShow,
        backgroundColor: option.tooltipBgColor,
        textStyle: {
          color: option.tooltipTextStyleColor,
          fontSize: option.tooltipTextStyleFontSize,
          fontWeight: option.tooltipTextStyleFontWeight ? 'bolder' : '',
        },
      },
      // 网格
      grid: {
        left: option.gridLeft,
        top: option.gridTop,
        right: option.gridRight,
        bottom: option.gridBottom,
        containLabel: true,
      },
      // 图例
      legend: {
        show: option.legendShow,
        orient: option.legendOrient,
        textStyle: {
          fontSize: option.legendTextStyleFontSize || 12,
        },
        top: `${option.legendTop}%`,
        right: `${option.legendLeft}%`,
      },
      series: (() => {
        const list: any[] = (seriesData || []).map((ele: any, index) => {
          const label: any = {
            show: option.seriesLabelShow,
            position: jnpfKey == 'pieChart' ? option.seriesLabelPosition : 'top',
            fontSize: option.seriesLabelFontSize,
            fontWeight: option.seriesLabelFontWeight ? 'bolder' : 'normal',
            color: option.seriesLabelColor,
            backgroundColor: option.seriesLabelBgColor,
          };
          const itemStyle: any = {
            borderRadius: option.seriesItemStyleBarBorderRadius,
          };
          if (jnpfKey == 'barChart' || jnpfKey == 'lineChart' || jnpfKey == 'radarChart') itemStyle.color = getColor(index);
          if (jnpfKey == 'lineChart') {
            ele.smooth = styleType == 2;
            ele.step = styleType == 3;
            ele.lineStyle = {
              width: option.seriesLineStyleWidth,
            };
            ele.symbolSize = option.seriesSymbolRotate;
            if (option.areaStyle) ele.areaStyle = {};
          }
          if (jnpfKey == 'pieChart') {
            if (styleType == 1) ele.radius = '60%';
            if (styleType == 2) ele.radius = ['30%', '60%'];
            if (option.roseType) ele.roseType = 'area';
            if (option.seriesLabelShowInfo && option.seriesLabelShowInfo.length) {
              if (option.seriesLabelShowInfo.includes('count') && option.seriesLabelShowInfo.includes('percent')) {
                label.formatter = '{b}: {c} ({d}%)';
              } else if (option.seriesLabelShowInfo.includes('count')) {
                label.formatter = '{b}: {c} ';
              } else if (option.seriesLabelShowInfo.includes('percent')) {
                label.formatter = '{b}: ({d}%) ';
              }
            }
            if (option.colorList && option.colorList.length) {
              const colorList: any[] = [];
              option.colorList.map((_item, index) => {
                const color = getColor(index) || '#71B6F5';
                colorList.push(color);
                return _item;
              });
              ele.color = colorList;
            }
            ele.center = [`${option.seriesCenterLeft}%`, `${option.seriesCenterTop}%`];
          }
          return Object.assign(ele, {
            name: ele.name,
            type: ele.type,
            data: ele.data,
            stack: ele.stack,
            showBackground: styleType == 4,
            barWidth: option.seriesBarWidth,
            itemStyle,
            label,
          });
        });
        return list;
      })(),
    };
    if (jnpfKey == 'barChart' || jnpfKey == 'lineChart') {
      if (jnpfKey == 'lineChart' && option.areaStyle) xAxis.boundaryGap = false;
      newOption.xAxis = xAxis;
      newOption.yAxis = yAxis;
    } else if (jnpfKey == 'radarChart') {
      newOption.radar = [];
      typeArr.map((item) => {
        const indicator = axisData.map((items) => {
          const maxObj = optionData.find((element) => {
            return element.type == item && element.name == items;
          });
          return {
            name: items,
            max: maxObj ? maxObj.max : '',
          };
        });
        const radarObj = {
          indicator,
          shape: option.styleType == 1 ? 'polygon' : 'circle',
          axisName: {
            fontSize: option.radarAxisNameFontSize,
            fontWeight: option.radarAxisNameFontWeight ? 'bolder' : 'normal',
            color: option.radarAxisNameColor,
          },
          center: [`${option.radarCenterLeft}%`, `${option.radarCenterTop}%`],
        };
        newOption.radar.push(radarObj);
        return item;
      });
    } else if (jnpfKey == 'pieChart') {
      if (option.seriesLabelShowInfo.includes('count') && option.seriesLabelShowInfo.includes('percent')) {
        newOption.tooltip.formatter = '{b}: {c} ({d}%)';
      } else if (option.seriesLabelShowInfo.includes('count')) {
        newOption.tooltip.formatter = '{b}: {c}';
      } else if (option.seriesLabelShowInfo.includes('percent')) {
        newOption.tooltip.formatter = '{b}: {d}%';
      } else {
        newOption.tooltip.formatter = '{b}';
      }
    }
    state.currOption = newOption;
    renderEcharts(newOption, true);
  }
  function getType(title) {
    const jnpfKey = activeData.jnpfKey;
    const option = activeData.option;
    if (jnpfKey == 'barChart') {
      if (option.styleType == 7) {
        const arr = option.barType.find((ele) => title == ele.title);
        if (arr && arr.type) return arr.type;
      }
      return 'bar';
    } else if (jnpfKey == 'lineChart') {
      return 'line';
    } else if (jnpfKey == 'pieChart') {
      return 'pie';
    } else if (jnpfKey == 'radarChart') {
      return 'radar';
    }
  }
  function getColor(index) {
    const option = activeData.option;
    const barColor = option.colorList || [];
    if (barColor[index]) {
      const color1 = barColor[index].color1;
      const color2 = barColor[index].color2;
      if (color2 && color1)
        return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: color1 },
          { offset: 1, color: color2 },
        ]);
      return color1;
    }
  }
  function getPieData(list) {
    for (let i = 0; i < list.length - 1; i++) {
      for (let j = 0; j < list.length - 1; j++) {
        if (list[j].value > list[j + 1].value) {
          const t = list[j];
          list[j] = list[j + 1];
          list[j + 1] = t;
        }
      }
    }
  }
  function initStaticData(val) {
    const jnpfKey = activeData.jnpfKey;
    activeData.option.defaultValue = [];
    if (jnpfKey == 'barChart') {
      if (val == 1 || val == 4) activeData.option.defaultValue = defaultChartData.baseBarData;
      if (val == 2 || val == 5) activeData.option.defaultValue = defaultChartData.mulBarData;
      if (val == 6) activeData.option.defaultValue = defaultChartData.plusMinusBarData;
      if (val == 7) {
        activeData.option.defaultValue = defaultChartData.brokenColumnBarData;
        initBarType();
      }
    } else if (jnpfKey == 'lineChart') {
      if (val == 1 || val == 2 || val == 3) activeData.option.defaultValue = defaultChartData.baseBarData;
      if (val == 4) activeData.option.defaultValue = defaultChartData.mulBarData;
    } else if (jnpfKey == 'pieChart') {
      activeData.option.defaultValue = defaultChartData.baseBarData;
    } else if (jnpfKey == 'radarChart') {
      activeData.option.defaultValue = defaultChartData.radarData;
    }
  }
  function initBarType() {
    const option = activeData.option;
    if (option.styleType !== 7) return;
    const optionData = state.chartData || [];
    if (!Array.isArray(optionData)) return;
    option.barType = [];
    const typeArr = [...new Set(optionData.map((item) => item.type))];
    typeArr.map((item, index) => {
      if (item) {
        option.barType.push({
          title: item,
          type: index == 1 ? 'line' : 'bar',
        });
      }
      return item;
    });
  }
  function handleClick(item) {
    if (!activeData.option?.urlAddress) return;
    let urlAddress = cloneDeep(activeData.option.urlAddress);
    const regex = /\$\{[^{}]+\}/g;
    urlAddress = urlAddress.replaceAll(regex, (match) => {
      const key = match.slice(2, -1);
      let value = '';
      if (key === 'type') value = item.seriesName;
      if (key === 'name') value = item.name;
      if (key === 'value') value = item.value;
      return value || match;
    });
    if (activeData.option.target == '_self') {
      go(`/externalLink?href=${encodeURIComponent(encryptByBase64(urlAddress))}`);
    } else {
      window.open(urlAddress, activeData.option.target);
    }
  }

  return {
    CardHeader,
    chartData,
    currOption,
    init,
  };
}