import EmptyWithConditions from '@/components/EmptyWithConditions';
import BaseCard from '@/pages/GlobalModalServices/components/BaseCard';
import dayjs from 'dayjs';
import EChartsReact from 'echarts-for-react';
import { cloneDeep } from 'lodash';
import { useLayoutEffect, useMemo, useRef } from 'react';
import option from './option';

const ProblemTendencyCard = ({ dataSource }: { dataSource: any }) => {
  const chartRef = useRef<any>();

  useLayoutEffect(() => {
    chartRef.current?.resize();
  }, []);

  const LineOption = useMemo(() => {
    const temp = cloneDeep(option) as any;
    const xAxis =
      dataSource?.expand?.trendChart?.map((v: any) =>
        dayjs(v.date).format('MM.DD'),
      ) ?? [];

    temp.xAxis[0].data = xAxis;
    temp.legend.data = ['新增', '解决'];

    const addData = dataSource?.expand?.trendChart.map(
      (v: any) => v.addedCount,
    );

    const solveData = dataSource?.expand?.trendChart.map(
      (v: any) => v.solvedCount,
    );

    temp.series[0].data = addData;
    temp.series[1].data = solveData;
    return temp;
  }, [dataSource]);

  return (
    <BaseCard title="新增与解决趋势" w={440} h={206}>
      <EmptyWithConditions conditions={!dataSource}>
        <EChartsReact
          ref={chartRef}
          style={{
            height: 130,
          }}
          option={LineOption}
        ></EChartsReact>
      </EmptyWithConditions>
    </BaseCard>
  );
};
export default ProblemTendencyCard;
