import { observer } from 'mobx-react';
import { Line } from '@ant-design/plots';
import { merge, isEmpty, groupBy, sortBy } from '../utils/commons';
import { dataFieldAlias } from '../libs/ht';

export default observer((props) => {
  const { dataSource, ...config } = props;
  const kpiKey = dataFieldAlias[config.yField]?.nestkey?.v;
  const seriesData = groupBy(dataSource, ele => ele[config.seriesField]);
  const splitData = dataSource.reduce((r, v) => {
    r.push(v);
    if ( ! isEmpty(v[kpiKey])) { // 有设目标才多显示一条虚线, 颜色和数据线一致
      r.push({...v, [config.yField]: v[kpiKey], [config.seriesField]: `${v[config.seriesField]} ${dataFieldAlias[kpiKey].label}`, extraLine: true,});
    }
    return r;
  }, []).sort(sortBy(config.xField));
  const dataColors = [
    "#5B8FF9","#5AD8A6","#5D7092","#F6BD16","#6F5EF9","#6DC8EC","#945FB9","#FF9845","#1E9493",
    "#FF99C3","#FF6B3B","#626681","#FFC100","#9FB40F","#76523B","#DAD5B5","#0E8E89","#E19348",
    "#F383A2","#247FEA",
  ];
  const colorSets = Object.keys(seriesData).sort().reduce((obj, k, i) => ({...obj, [k]: dataColors[i]}), {});
  const mergeLineConfig = merge({
    color: (item) => {
      const thisSeries = item[config.seriesField]?.split(' ')?.[0];
      return colorSets[thisSeries];
      // return thisSeries.includes('目标') ? '#F4664A' : colorSets[thisSeries];
    },
    lineStyle: (data) => {
      if (data[config.seriesField].includes('目标')) {
        return {
          lineDash: [4, 8],
          opacity: 0.7,
        };
      }

      return {
        opacity: 1,
      };
    },
    legend: {
      custom: true,
      items: Object.keys(seriesData).map((ele) => ({ id: ele, name: ele, value: ele, marker: { symbol: 'circle', style: { fill: colorSets[ele], color: colorSets[ele] } } })),
    },
  }, config);
  return <Line {...mergeLineConfig} data={splitData} />;
});