import { defaultOptions } from '@/pages/editor/chart/constant';
import _ from 'lodash';

const handleLegend = (metrics: any[]) => {
  const data: string[] = [];
  metrics.forEach((item) => {
    data.push(item.field?.fieldComment);
  });
  return data;
};

const handleSeries = (
  data: any[],
  metrics: any[],
  displayWidget: string,
  styleJson: any,
) => {
  // console.log(metrics, '-----metrics');
  const {
    lineGraph,
    pieGraph,
    showDataLabel,
    dataLabelPosition,
    dataLabelSuffix,
    decimalPlaces,
    dataLabelWeight,
  } = styleJson || {};
  const result: any[] = [];
  if (!data) return result;
  const metricsField: string[] = [];
  (Array.isArray(metrics) ? metrics : [metrics]).forEach((item: any, index) => {
    const _item: any = {};
    _item.name = item?.field?.fieldComment || '';
    _item.type = displayWidget.toLowerCase();
    _item.data = [];
    if (_item.type === 'bar') {
      _item.barMaxWidth = '20';
    }
    // 数据标签处理，显示 位置 后缀 量级 小数位数
    _item.itemStyle = {
      normal: {
        label: {
          show: showDataLabel,
          position:
            _item.type === 'bar' && showDataLabel ? dataLabelPosition : 'top',
          formatter: (value: any) => {
            const { unit, data } = handleUnit(dataLabelWeight, value.data);
            return showDataLabel
              ? data.toFixed(decimalPlaces) +
                  (!!unit ? unit : '') +
                  (!!dataLabelSuffix ? dataLabelSuffix : '')
              : data;
          },
        },
      },
    };
    if (_item.type === 'line') {
      _item['emphasis'] = { focus: 'series' }; // 高亮
      if (lineGraph === 'borkenLine') {
      } else if (lineGraph === 'smoothLine') {
        _item['smooth'] = true;
      } else if (lineGraph === 'areaLine') {
        _item['areaStyle'] = {};
      }
    }
    if (_item.type === 'pie') {
      _item.radius = pieGraph === 'circular' ? ['30%', '55%'] : '55%';
    }

    result[index] = _item;
    metricsField.push(item?.field?.fieldKey || item.value);
  });
  Array.isArray(data) &&
    data.forEach((item: any) => {
      metricsField.forEach((fieldKey: string, index) => {
        if (item[fieldKey] || item[fieldKey] === 0) {
          result[index].data.push(item[fieldKey]);
        } else {
          result[index].data.push(null);
        }
      });
    });
  return result;
};

export function transferEchartsJson(data: any[], card: any, groupsData?: any) {
  // console.log('1---------', data, '==data');
  // console.log('1---------', groupsData, '==groups');
  // console.log('1---------', card, '==card');

  if (!data) return {};
  const { styleJson, queryJson, displayWidget, widget } = card.card;
  const {
    direction,
    dimensionAxis = {},
    metricsAxis = {},
    chartType,
    enableTotal,
    total,
  } = styleJson || {};

  let metrics: any;
  let groups: any;
  if (queryJson) {
    metrics = queryJson.metrics;
    groups = metrics && metrics.length < 2 ? queryJson.groups : [];
  } else {
    metrics = card.card.metrics;
  }
  const initOptions = _.cloneDeep(defaultOptions[displayWidget || widget]);
  // 维度轴标签
  const dimensionData: string[] = [];
  // const key = dimension?.field?.fieldKey + '_info_'
  const key = '_dimension__info_';
  Array.isArray(data) &&
    data.forEach((item: any) => {
      if (item.hasOwnProperty(key)) {
        dimensionData.push(
          item[key].name ? item[key].name : item[key].data_title,
        );
      } else {
        // dimensionData.push(item[dimension?.field?.fieldKey || dimension.value])
        dimensionData.push(item._dimension_);
      }
    });
  if (Array.isArray(metrics)) {
    initOptions.legend.data = handleLegend(metrics);
  } else {
    delete initOptions.legend.data;
    initOptions.tooltip = {};
    // initOptions.yAxis.splitLine = false
    initOptions.grid.left = 5;
    initOptions.grid.right = 5;
    initOptions.grid.bottom = 10;
    initOptions.grid.top = 50;
  }
  initOptions.series = handleSeries(
    data,
    metrics,
    displayWidget || widget,
    styleJson,
  );
  if (Array.isArray(groups) && groups.length > 0) {
    const { series_new_, legend_data } = handleWidthGroup(
      groups,
      displayWidget || widget,
      styleJson,
      initOptions.series,
      data,
      groupsData,
    );
    initOptions.series = series_new_;
    initOptions.legend.data = legend_data;
  }

  // 计算总计
  if (enableTotal) total.result = computeTotal(card.card, data);

  if (direction === 'column') {
    initOptions.yAxis = [
      {
        type: 'category',
        data: dimensionData,
        name: dimensionAxis.title,
        nameLocation: 'center',
        nameGap: dimensionAxis?.rotate ? 50 : 30,
      },
    ];
    initOptions.xAxis = [
      {
        type: 'value',
        show: !widget,
        name: metricsAxis.title,
        nameLocation: 'center',
        nameGap: widget ? 0 : 30,
        splitLine: { show: !widget },
        axisLine: { show: true }, // x y轴坐标线
      },
    ];
  } else {
    initOptions.xAxis = [
      {
        type: 'category',
        data: dimensionData,
        name: dimensionAxis.title,
        nameLocation: 'center',
        nameGap: dimensionAxis?.rotate ? 50 : 30,
        ...(widget && {
          axisLabel: { show: false },
          axisLine: { show: false },
          axisTick: { show: false },
        }),
      },
    ];
    initOptions.yAxis = [
      {
        type: 'value',
        show: !widget,
        name: metricsAxis.title,
        nameLocation: 'center',
        nameGap: widget ? 0 : 30,
        splitLine: { show: !widget },
        axisLine: { show: true },
      },
    ];
  }

  // 柱状图、折线图 处理类别标签
  const {
    xAxis: xAxisData,
    yAxis: yAxisData,
    dataZoom: dataZoomData,
  } = lineAndBarAxis(direction, initOptions, styleJson);
  initOptions.xAxis = xAxisData;
  initOptions.yAxis = yAxisData;
  initOptions.dataZoom = dataZoomData;

  const { legend: legendData, grid: gridData } = legendStyle(
    initOptions.legend,
    initOptions.grid,
    styleJson,
  );
  initOptions.legend = legendData;
  initOptions.grid = gridData;
  return initOptions;
}

// 初始化，更新都会调用
const lineAndBarAxis = (direct: string, options: any, styleJson: any) => {
  let { xAxis, yAxis } = options;
  const { dimensionAxis, enableScale, metricsScale } = styleJson || {};
  let dataZoom;
  if (direct === 'row') {
    xAxis[0].axisLabel = {
      opacity: dimensionAxis?.label ? 1 : 0, // 显示类别标签
      rotate: dimensionAxis?.rotate ? -40 : 0, // 类别标签倾斜
      interval: 0,
      formatter: function (value: any) {
        if (dimensionAxis?.rotate && value.length > 6)
          return `${value.slice(0, 6)}...`;
        return value;
      },
    };
    yAxis[0].axisLabel = {
      opacity: enableScale ? 1 : 0, // 显示刻度
    };
    yAxis[0].min =
      metricsScale?.min && metricsScale.min >= 0 ? metricsScale.min : null; // y轴刻度范围，最小值和最大值
    yAxis[0].max =
      metricsScale?.max && metricsScale.max >= 0 ? metricsScale.max : null;

    if (dimensionAxis?.filter && dimensionAxis.filter > 0) {
      // 横轴数据过滤
      const seriesLength = xAxis[0].data.length;
      const filterNum = dimensionAxis.filter;
      dataZoom = [
        {
          xAxisIndex: [0],
          type: 'inside',
          startValue: 0,
          endValue:
            seriesLength >= filterNum ? filterNum - 1 : seriesLength - 1,
          filterMode: 'filter',
        },
      ];
    }
  } else {
    yAxis[0].axisLabel = {
      opacity: dimensionAxis?.label ? 1 : 0, // 显示类别标签
      rotate: dimensionAxis?.rotate ? -40 : 0, // 类别标签倾斜
      interval: 0,
      formatter: function (value: any) {
        if (dimensionAxis?.rotate && value.length > 6)
          return `${value.slice(0, 6)}...`;
        return value;
      },
    };
    xAxis[0].axisLabel = {
      opacity: enableScale ? 1 : 0, // 显示刻度
    };
    xAxis[0].min =
      metricsScale?.min && metricsScale.min >= 0 ? metricsScale.min : null; // 刻度范围
    xAxis[0].max =
      metricsScale?.max && metricsScale.max >= 0 ? metricsScale.max : null;

    if (dimensionAxis?.filter && dimensionAxis.filter > 0) {
      // 竖轴数据过滤
      const seriesLength = yAxis[0].data.length;
      const filterNum = dimensionAxis.filter;
      dataZoom = [
        {
          yAxisIndex: [0],
          type: 'inside',
          startValue: 0,
          endValue:
            seriesLength >= filterNum ? filterNum - 1 : seriesLength - 1,
          filterMode: 'filter',
        },
      ];
    }
  }
  return { xAxis, yAxis, dataZoom };
};
const legendStyle = (legend: any, grid: any, styleJson: any) => {
  const { showLegend, legendPosition } = styleJson || {};
  legend.show = showLegend;
  if (showLegend) {
    if (legendPosition === 'top') {
      legend.top = 10;
      delete legend.bottom;
      legend.left = 'center';
      legend.orient = 'horizontal';
      grid = { top: 80, left: 70, right: 30, bottom: 70 };
    } else if (legendPosition === 'bottom') {
      delete legend.top;
      legend.bottom = 10;
      legend.left = 'center';
      legend.orient = 'horizontal';
      grid = { top: 50, left: 70, right: 30, bottom: '22%' };
    } else if (legendPosition === 'left') {
      legend.top = 'middle';
      legend.left = 10;
      delete legend.right;
      legend.orient = 'vertical';
      grid = { top: 50, bottom: 70, left: '30%' };
    } else if (legendPosition === 'right') {
      legend.top = 'middle';
      delete legend.left;
      legend.right = 10;
      legend.orient = 'vertical';
      grid = { top: 50, bottom: 70, right: '30%', left: 70 };
    }
  } else {
    grid = { top: 80, left: 70, right: 30, bottom: 70 };
  }
  return { legend, grid };
};
// 数据标签量级
const handleUnit = (dataLabelWeight: any, value: any) => {
  let unit = '';
  let data = value;
  if (dataLabelWeight === 1) {
    if (value >= 1000) {
      unit = '千';
      data = value / 1000;
    } else if (value >= 10000) {
      unit = '万';
      data = value / 10000;
    } else if (value >= 1000000) {
      unit = '百万';
      data = value / 1000000;
    } else if (value >= 10000000) {
      unit = '千万';
      data = value / 10000000;
    } else if (value >= 100000000) {
      unit = '亿';
      data = value / 100000000;
    }
  } else if (dataLabelWeight === 2) {
    unit = '';
    data = value;
  } else if (dataLabelWeight === 1000) {
    unit = '千';
    data = value / 1000;
  } else if (dataLabelWeight === 10000) {
    unit = '万';
    data = value / 10000;
  } else if (dataLabelWeight === 1000000) {
    unit = '百万';
    data = value / 1000000;
  } else if (dataLabelWeight === 10000000) {
    unit = '千万';
    data = value / 10000000;
  } else if (dataLabelWeight === 100000000) {
    unit = '亿';
    data = value / 100000000;
  }
  return { unit, data };
};

// 计算总计
const computeTotal = (card: any, data?: any[]) => {
  const DATA = data || [];
  const { styleJson } = card;
  const { enableTotal, total = { name: '' }, fields = {} } = styleJson || {};
  const { field = '', fieldMethod = '' } = fields; // 选择的字段和方法

  const fieldData: any[] = [];
  let result: any = '';
  if (field !== '') {
    if (Array.isArray(field.split(','))) {
      field.split(',').map((F: any) => {
        Array.isArray(DATA) &&
          DATA.map((item: any) => {
            if (item.hasOwnProperty(F)) fieldData.push(item[F]);
            if (!item.hasOwnProperty(F)) {
              // 分组情况下
              for (let num = 1; num < Object.keys(item).length; num++) {
                if (item.hasOwnProperty(`_group_${num}`))
                  fieldData.push(item[`_group_${num}`]);
              }
            }
          });
      });
    }
    // @ts-ignore
    if (!!fieldMethod) result = window[fieldMethod](fieldData);
  }
  return result;
};

const handleWidthGroup = (
  groups: any[],
  displayWidget: string,
  styleJson: any,
  series: any,
  data?: any[],
  groupsData?: any,
) => {
  // groups 配置的分组[]， data groupsData 接口返回的数据和分组{}
  const DATA = data || [];
  const GROUP = groupsData || {};

  let GROUP_DATA: any = {};
  for (let num = 1; num <= Object.keys(GROUP).length; num++) {
    if (GROUP.hasOwnProperty(`_group_${num}`)) {
      GROUP_DATA[`_group_${num}`] = GROUP[`_group_${num}`];
    }
  }

  let groupsField: any[] = [];
  groups.map((item: any) => {
    groupsField.push(item.field.fieldKey);
  });

  let data_new: any[] = [];
  Array.isArray(DATA) &&
    DATA.map((item: any) => {
      for (let i in GROUP_DATA) {
        item[i] = item.hasOwnProperty(i)
          ? item[i]
          : displayWidget === 'BAR'
          ? null
          : 0;
      }
      data_new.push(item);
    });

  let series_new: any[] = [];
  let legend_data: any[] = [];
  groupsField.map((item: any) => {
    for (let i in GROUP_DATA) {
      if (GROUP_DATA[i].hasOwnProperty(item)) {
        const name = GROUP_DATA[i][item].hasOwnProperty('data_title')
          ? GROUP_DATA[i][item][`data_title`]
          : GROUP_DATA[i][item].hasOwnProperty('name')
          ? GROUP_DATA[i][item][`name`]
          : GROUP_DATA[i][item];
        legend_data.push(name);
        series_new.push({ ...series[0], name, data: [] });
      }
    }
  });

  const series_new_ = series_new.map((item: any, index) => {
    let series_data: any[] = [];
    data_new.map((item2: any) => {
      series_data.push(item2[`_group_${index + 1}`]);
    });
    item.data = series_data;
    return item;
  });
  return { series_new_, legend_data };
};

export function compare(key: string, oldVal: any, newVal: any) {
  let config: boolean = false;
  let style: boolean = false;
  if (key === 'queryJson') {
    config = true;
  } else {
    if (key === 'styleJson') {
      style = true;
    }
    if (
      oldVal.includeEmptyDimension !== newVal.includeEmptyDimension ||
      oldVal.includeEmptyRecord !== newVal.includeEmptyRecord
    ) {
      config = true;
    }
  }
  return {
    config,
    style,
  };
}

export function updateChartStyle(item: any, data: any[], groupsData: any) {
  const { card, options } = item;
  const { styleJson, displayWidget, queryJson } = card;
  const {
    chartType,
    direction,
    dimensionAxis,
    metricsAxis,
    lineGraph,
    pieGraph,
    showDataLabel,
    dataLabelPosition,
    dataLabelSuffix,
    decimalPlaces,
    dataLabelWeight,
    enableTotal,
    total,
  } = styleJson || {};
  const { xAxis, yAxis, series, legend } = options;
  const { groups } = queryJson;
  let currentDirection = '';
  if (xAxis && xAxis[0] && yAxis && yAxis[0]) {
    if (xAxis[0].type === 'category') {
      currentDirection = 'row';
      if (dimensionAxis.title) {
        xAxis[0].name = dimensionAxis.title;
        xAxis[0].nameLocation = 'center';
        xAxis[0].nameGap = dimensionAxis?.rotate ? 50 : 30;
      } else {
        xAxis[0].name = '';
      }
      if (metricsAxis.title) {
        yAxis[0].name = metricsAxis.title;
        yAxis[0].nameLocation = 'center';
        yAxis[0].nameGap = 30;
      } else {
        yAxis[0].name = '';
      }
    } else if (yAxis[0].type === 'category') {
      currentDirection = 'column';
      if (dimensionAxis.title) {
        yAxis[0].name = dimensionAxis.title;
        yAxis[0].nameLocation = 'center';
        yAxis[0].nameGap = dimensionAxis?.rotate ? 50 : 30;
      } else {
        yAxis[0].name = '';
      }
      if (metricsAxis.title) {
        xAxis[0].name = metricsAxis.title;
        xAxis[0].nameLocation = 'center';
        xAxis[0].nameGap = 30;
      } else {
        xAxis[0].name = '';
      }
    }
  }
  if (direction && direction !== currentDirection) {
    // [xAxis, yAxis] = [yAxis, xAxis]
    const temp = _.cloneDeep(options.xAxis);
    options.xAxis = options.yAxis;
    options.yAxis = temp;
  }

  if (Array.isArray(groups) && groups.length > 0) {
    const { series_new_, legend_data } = handleWidthGroup(
      groups,
      displayWidget,
      styleJson,
      options.series,
      data,
      groupsData,
    );
    options.series =
      series_new_.length > 0 ? _.cloneDeep(series_new_) : _.cloneDeep(series);
    options.legend.data =
      legend_data.length > 0
        ? _.cloneDeep(legend_data)
        : _.cloneDeep(legend.data);
  }
  // 计算总计
  if (enableTotal) total.result = computeTotal(card, data);

  const {
    xAxis: xAxisData,
    yAxis: yAxisData,
    dataZoom: dataZoomData,
  } = lineAndBarAxis(direction, options, styleJson);
  options.xAxis = xAxisData;
  options.yAxis = yAxisData;
  options.dataZoom = dataZoomData;

  const { legend: legendData, grid: gridData } = legendStyle(
    options.legend,
    options.grid,
    styleJson,
  );
  options.legend = legendData;
  options.grid = gridData;

  // 数据标签处理，显示 位置 后缀 量级 小数位数
  options['series'] = series.map((item: any) => {
    item.itemStyle = {
      normal: {
        label: {
          show: showDataLabel,
          position:
            displayWidget === 'BAR' && showDataLabel
              ? dataLabelPosition
              : 'top',
          formatter: (value: any) => {
            const { unit, data } = handleUnit(dataLabelWeight, value.data);
            return showDataLabel
              ? data.toFixed(decimalPlaces) +
                  (!!unit ? unit : '') +
                  (!!dataLabelSuffix ? dataLabelSuffix : '')
              : data;
          },
        },
      },
    };
    return item;
  });

  options['series'] = series.map((item: any) => {
    // 折线图形
    if (item.type === 'line') {
      if (lineGraph === 'borkenLine') {
        delete item.smooth;
        delete item.areaStyle;
      } else if (lineGraph === 'smoothLine') {
        item.smooth = true;
        delete item.areaStyle;
      } else if (lineGraph === 'areaLine') {
        delete item.smooth;
        item.areaStyle = {};
      }
    }
    // 饼状图形
    if (item.type === 'pie') {
      item.radius = pieGraph === 'circular' ? ['35%', '55%'] : '55%';
    }
    return item;
  });

  return options;
}