import { computed, reactive } from 'vue';

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

import { getDataInterfaceRes } from '#/api/systemData/dataInterface';
import { $t } from '#/locales';
import { useBaseStore } from '#/store';

interface State {
  searchSchemas: any[];
}

export const useReport = (formApi: any = {}) => {
  const baseStore = useBaseStore();
  const state = reactive<State>({
    searchSchemas: [],
  });

  const searchSchemas = computed(() => state.searchSchemas);

  // 更新图表数据
  function getRealEchart(echarts, chartData) {
    if (!echarts) return null;
    Object.keys(echarts).forEach((key) => {
      const chart = echarts[key];
      const option = chart.option;
      const styleType = option.styleType;
      const colorList = option.color?.list || [];
      let barTypeList = [];
      if (chart.echartType === 'bar') barTypeList = option.bar.barTypeList;
      const dataList = chartData.filter((o) => o.drawingId === key);
      let data: any = {};
      if (option.title.textI18nCode) option.title.text = $t(option.title.textI18nCode, option.title.text);
      if (option.title.subtextI18nCode) option.title.subtext = $t(option.title.subtextI18nCode, option.title.subtext);
      if (dataList.length) data = dataList[0].field;
      const { classifyNameField = [], seriesDataField = [], seriesNameField = [], maxField = [] } = data;
      // 柱状图和线性图
      if (['bar', 'line'].includes(chart.echartType)) {
        const series = seriesDataField?.map((o, index) => {
          return {
            name: seriesNameField[index],
            data: o,
            type: chart.echartType == 'bar' && styleType == 7 ? getEchartType(barTypeList, classifyNameField[index]) : chart.echartType,
            itemStyle: { color: getColor(colorList, index) },
            ...(chart.echartType === 'line'
              ? {
                  smooth: styleType == 2,
                  step: styleType == 3,
                  stack: styleType == 4 ? 'total' : '',
                  lineStyle: { width: chart.line?.width },
                  symbolSize: chart.line?.symbolSize,
                }
              : {}),
            ...(chart.echartType === 'line' && option.areaStyle ? { areaStyle: option.areaStyle } : {}),
            ...(chart.echartType === 'bar'
              ? {
                  showBackground: styleType == 4,
                  stack: styleType == 5 || styleType == 7 ? seriesNameField[index] : styleType == 2 || styleType == 6 ? 'total' : '',
                }
              : ''),
          };
        });
        chart.option.series = series;
        chart.option.legend.data = seriesNameField;
        chart.option.xAxis.data = classifyNameField;
      }
      // 饼图
      if (chart.echartType === 'pie') {
        const series = seriesDataField?.map((o, index) => {
          const data = o?.map((item, sIndex) => {
            return {
              value: item,
              name: classifyNameField?.[sIndex],
            };
          });
          return {
            name: seriesNameField[index],
            type: 'pie',
            radius: styleType == 2 ? ['30%', '60%'] : '50%',
            center: [`${option.seriesCenter.seriesCenterLeft}%`, `${option.seriesCenter.seriesCenterTop}%`],
            roseType: option.pie.roseType ? 'area' : '',
            label: getLabel(option),
            color: getPieColor(colorList),
            data: getPieData(option.pie, data),
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)',
              },
            },
          };
        });
        chart.option.series = series;
      }
      // 雷达图
      if (chart.echartType === 'radar') {
        let series: any = [];
        const data: any = [];
        const newMaxField: any = [];
        for (const [index, element] of seriesDataField.entries()) {
          if (!maxField.length) element.length && newMaxField.push(Math.max(...element));
          const item = {
            value: element,
            name: seriesNameField?.[index],
            areaStyle: { color: getColor(colorList, index), opacity: option.seriesAreaStyleOpacity },
          };
          data.push(item);
        }
        series = [
          {
            type: chart.echartType,
            data,
          },
        ];
        if (!maxField.length) maxField.push(...newMaxField);
        const indicator = maxField?.map((o, sIndex) => {
          return {
            max: o,
            name: classifyNameField?.[sIndex],
          };
        });
        const radarObj = {
          axisName: option.radar.axisName,
          indicator,
          shape: styleType == 1 ? 'polygon' : 'circle',
          center: [`${option.seriesCenter.seriesCenterLeft}%`, `${option.seriesCenter.seriesCenterTop}%`],
        };
        chart.option.series = series;
        chart.option.radar = radarObj;
      }
    });
    return echarts;
  }
  // 获取搜索内容
  function getSearchSchema(queryList, sheetId?) {
    if (!queryList.length) return (state.searchSchemas = []);
    let item: any = [];
    item = sheetId ? queryList.find((o) => o.sheet === sheetId) : queryList[0];
    if (!item) return (state.searchSchemas = []);
    const list = item.queryList || [];
    const schemas = list.map((option: any) => {
      const { label, type, vModel, config, searchMultiple } = option;
      const field = vModel?.replace('.', '-');
      const newType = getType(type);
      if (type === 'select') {
        config.fieldNames = { value: config.propsValue, label: config.propsLabel };
      }
      if (searchMultiple) config.multiple = true;
      return {
        field,
        label,
        component: newType,
        componentProps: config,
      };
    });
    // 异步更新 select 类型字段的 schema
    for (const cur of schemas) {
      const config = cur?.componentProps || {};
      if (cur?.component === 'Select') {
        if (config.dataType === 'dictionary' && config.dictionaryType) {
          baseStore.getDicDataSelector(config.dictionaryType).then((res) => {
            formApi.updateSchema([{ field: cur.field, componentProps: { options: res } }]);
          });
        } else if (config.dataType === 'dynamic' && config.propsUrl) {
          const query = { paramList: config.templateJson || [] };
          getDataInterfaceRes(config.propsUrl, query).then((res) => {
            const data = Array.isArray(res.data) ? res.data : [];
            formApi.updateSchema([{ field: cur.field, componentProps: { options: data } }]);
          });
        }
      }
    }
    state.searchSchemas = schemas;
  }
  function clearSearchSchema() {
    state.searchSchemas = [];
  }
  function getType(type) {
    if (type == 'date') return 'DateRange';
    if (type == 'time') return 'TimeRange';
    if (type == 'inputNumber') return 'NumberRange';
    return upperFirst(type);
  }
  function getColor(colorList, index) {
    const barColor = 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 getLabel(option) {
    const label: any = {};
    label.show = option.label.show;
    label.position = option.seriesLabelPosition;
    const seriesLabelShowInfo = option.seriesLabelShowInfo;
    if (seriesLabelShowInfo && seriesLabelShowInfo.length) {
      if (seriesLabelShowInfo.includes('count') && seriesLabelShowInfo.includes('percent')) {
        label.formatter = '{b}: {c} ({d}%)';
      } else if (seriesLabelShowInfo.includes('count')) {
        label.formatter = '{b}: {c} ';
      } else if (seriesLabelShowInfo.includes('percent')) {
        label.formatter = '{b}: ({d}%) ';
      }
    }
    return label;
  }
  function getPieData(option, list) {
    if (option.showZero) list = list.filter((item) => item.value != 0);
    if (option.sortable) {
      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;
          }
        }
      }
    }
    return list;
  }
  function getPieColor(colorList) {
    let colors: any = [];
    if (colorList && colorList.length) {
      const list: any[] = [];
      colorList.map((item, index) => {
        const color = getColor(colorList, index) || '#71B6F5';
        list.push(color);
        return item;
      });
      colors = list;
    }
    return colors;
  }
  function getEchartType(list, title) {
    const arr = list.find((ele) => title == ele.id);
    if (arr && arr.type) return arr.type;
  }

  return {
    getRealEchart,
    getSearchSchema,
    searchSchemas,
    clearSearchSchema,
  };
};