//公用饼图
import EmptySpace from '@/components/EmptySpace';
import { Flex } from 'antd';
import classNames from 'classnames';
import { CSSProperties } from 'react';
import Chart from './Chart';
import styles from './index.less';
interface PieChartDto {
  data?: any; //数据源
  labelGap?: number; //label间距
  style?: CSSProperties; //样式
  chartStyle?: CSSProperties; //chartStyle样式
  labelClassName?: string; //label样式
  color?: string[]; //颜色
}
const PieChart: React.FC<PieChartDto> = ({
  style,
  labelGap = 8,
  chartStyle = { width: '260px', height: '300px' },
  data = [],
  labelClassName,
  color = ['#85E979', '#52F9FF', '#FFFCA1', '#FFE335', '#29B5FF'],
  // color = ['#FF9B5D', '#FFE335', '#29B5FF'],
}) => {
  // 计算总数和百分比
  const total = data.reduce((acc: any, cur: any) => acc + Number(cur.num), 0);
  const dataWithPercentage = data.map((item: any) => ({
    ...item,
    percentage: ((Number(item.num) / total) * 100).toFixed(1)
  }));

  return (
    <Flex style={{ ...style }} align="center" gap={20}>
      {data.length > 0 ? (
        <>
          <Chart data={dataWithPercentage} color={color} style={{ ...chartStyle }} />
          <div className={styles.label} style={{ gap: labelGap }}>
            {dataWithPercentage.map((it:any, index: number) => (
              <Flex
                align="center"
                justify="space-between"
                key={it.ssqy}
                className={classNames(styles.labelItem, labelClassName)}
              >
                <div className={styles.dot} style={{ backgroundColor: color[index] }}></div>
                <div className={styles.name}>{it.ssqy}</div>
                <div className={styles.valueWrap}>
                  <div className={styles.numWithUnit}>
                    <b>{it.num}</b>
                    <span className={styles.unit}>件</span>
                  </div>
                  <div className={styles.percentage}>{it.percentage}%</div>
                </div>
              </Flex>
            ))}
          </div>
        </>
      ) : (
        <EmptySpace describe="暂无数据" style={{ height: '160px' }} />
      )}
    </Flex>
  );
};
export default PieChart;
