//公用饼图
import EmptySpace from '@/components/EmptySpace';
import { Flex } from 'antd';
import classNames from 'classnames';
import { CSSProperties } from 'react';
import Chart from './Chart';
import DotText from './DotText/index';
import styles from './index.less';
interface PieChartDto {
  data?: any[]; //数据源
  labelGap?: number; //label间距
  style?: CSSProperties; //样式
  chartStyle?: CSSProperties; //chartStyle样式
  labelStyle?: CSSProperties;
  labelClassName?: string; //label样式
  color?: string[]; //颜色
}
const PieChart: React.FC<PieChartDto> = ({
  style,
  labelGap = 8,
  chartStyle = { width: '260px', height: '300px' },
  data = [],
  labelClassName,
  labelStyle,
  color = [
    'rgb(150, 216, 129)',
    'rgb(83, 214, 255)',
    'rgb(159, 159, 255)',
    'rgb(247, 161, 91)',
    '#B5B42F',
  ],
}) => {
  return (
    <Flex style={{ ...style }} align="center">
      {data?.length > 0 ? (
        <>
          <Chart data={data} color={color} style={{ ...chartStyle }} />
          <div
            className={styles.label}
            style={{ gap: labelGap, ...labelStyle }}
          >
            {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}
                  textColor={'rgb(188, 206, 233)'}
                />
                <p className={styles.valueWrap} style={labelStyle}>
                  <b>
                    {it.value}
                    <span
                      style={{ fontSize: 14, fontWeight: 400, marginLeft: 5 }}
                    >
                      件
                    </span>
                  </b>
                </p>
                {it.percent ? (
                  <p>
                    <b>{parseFloat(Number(it.percent).toFixed(2))}</b>%
                  </p>
                ) : null}
              </Flex>
            ))}
          </div>
        </>
      ) : (
        <EmptySpace describe="暂无数据" style={{ height: '160px' }} />
      )}
    </Flex>
  );
};
export default PieChart;
