import EmptyWithConditions from '@/components/EmptyWithConditions';
import BaseCard from '@/pages/GlobalModalServices/components/BaseCard';
import { Badge, Flex } from 'antd';
import EChartsReact from 'echarts-for-react';
import { cloneDeep } from 'lodash';
import { useLayoutEffect, useMemo, useRef } from 'react';
import styles from './index.less';
import pieOption from './option';

const ExceedTimeCard: React.FC<{ dataSource: any }> = (props) => {
  const chartRef = useRef<any>();
  const { dataSource } = props;
  const pieData = useMemo(() => {
    return [
      {
        name: '超期100天以上',
        value: dataSource?.expand?.overdueStatistics?.overdue100DaysPlus,
        percent: dataSource?.expand?.overdueStatistics?.overdue100DaysPlusRate,
      },
      {
        name: '超期30-100天',
        value: dataSource?.expand?.overdueStatistics?.overdue30To100Days,
        percent: dataSource?.expand?.overdueStatistics?.overdue30To100DaysRate,
      },
      {
        name: '超期30天以内',
        value: dataSource?.expand?.overdueStatistics?.overdueLessThan30Days,
        percent:
          dataSource?.expand?.overdueStatistics?.overdueLessThan30DaysRate,
      },
    ];
  }, [props.dataSource]);
  const colors = [
    '#F07283',
    '#A550FF',
    '#5DDDFF',

    '#7664EC',
    '#77E67B',
    '#35B2FF',
    '#FFE335',
    '#FF9B5D',
  ];

  const PieOption = useMemo(() => {
    const temp = cloneDeep(pieOption) as any;
    temp.color = colors;
    temp.series[0].data = pieData;
    return temp;
  }, [pieData]);

  useLayoutEffect(() => {
    chartRef.current?.resize();
  }, []);
  return (
    <BaseCard title="超期统计" w={440} h={216}>
      <EmptyWithConditions conditions={pieData.length === 0}>
        <Flex align="center" gap={20} className={styles.container}>
          <div
            style={{
              height: 110,
              width: 110,
            }}
          >
            <EChartsReact
              ref={chartRef}
              style={{
                height: 110,
                width: 110,
              }}
              option={PieOption}
            ></EChartsReact>
          </div>

          <div className={styles.legendContent}>
            {pieData.map((item, index) => {
              return (
                <Flex key={index} className={styles.legendBg} gap={20}>
                  <Badge color={colors[index % colors.length]} />

                  <div>{item.name}</div>
                  <div>{item.value} 个</div>
                  <div>{item.percent} %</div>
                </Flex>
              );
            })}
          </div>
        </Flex>
      </EmptyWithConditions>
    </BaseCard>
  );
};

export default ExceedTimeCard;
