//公用饼图
import DotText from '@/components/DotText';
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?: API.BaseChartInfo[]; //数据源
  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 = ['#fd86b1', '#14c3dc', '#ffd28e', '#B5B4FF', '#B5B42F'],
}) => {
  return (
    <Flex style={{ ...style }} align="center" vertical>
      {data.length > 0 ? (
        <>
          <Chart data={data} color={color} style={{ ...chartStyle }} />
          <div className={styles.label} style={{ gap: labelGap }}>
            {data.map((it, index) => (
              <Flex
                align="center"
                justify="space-between"
                key={it.name}
                className={classNames(styles.labelItem, labelClassName)}
              >
                <DotText dotcolor={color[index]} title={it.name} />
                <p className={styles.valueWrap}>
                  <b>{it.value}</b>
                </p>
                <p>
                  <b>{parseFloat(Number(it.percent).toFixed(1))}</b>%
                </p>
              </Flex>
            ))}
          </div>
        </>
      ) : (
        <EmptySpace describe="暂无数据" style={{ height: '160px' }} />
      )}
    </Flex>
  );
};
export default PieChart;
