import React from 'react';
import { Empty, Progress, Space } from 'antd';
import styles from './index.less';
import CountUp from 'react-countup';
import EmptySpace from '@/components/EmptySpace';
import classNames from 'classnames';
import { formatValueWithWan, formatDecimalsWithWan, formatUnitWithWan } from '@/pages/Home_v_2504/config/commonUtils';

export interface AreaBarItem {
  name: string;
  value?: number;
  count?: number;
  percentage: number;
  // unit?: string;
}

export interface AreaBarListProps {
  data: AreaBarItem[];
  showCount?: boolean;
  showPercentage?: boolean;
  height?: number;
  progressColor?: {
    from: string;
    to: string;
  };
  onClick?: (item: AreaBarItem, index: number) => void;
  unit?: string;
  percentageUnit?: string;
  percentageFixed?: number;
  valueStyle?: React.CSSProperties;
  isThinProgress?: boolean;
  isWidePadding?: boolean;
}

const AreaBarList: React.FC<AreaBarListProps> = ({
  data = [],
  showCount = true,
  showPercentage = true,
  height = 350,
  progressColor = { from: 'rgb(0, 185, 255)', to: 'rgb(121, 255, 209)' },
  // progressColor = { from: '#79FFD1', to: '#00B9FF' },
  onClick,
  percentageUnit = '%',
  unit = '件',
  percentageFixed = 2,
  valueStyle = {},
  isThinProgress = false,
  isWidePadding = false,
}) => {
  const percentageValue = (value: number) => {
    return Number(value ? Number(value).toFixed(percentageFixed) : 0);
  };
  
  return (
    <div className={styles.container} >
      {data.map((item, index) => (
        <div 
          key={index}
          className={classNames(styles.itemWrapper, {
            [styles.thinItemWrapper]: isThinProgress,
            [styles.widePaddingItemWrapper]: isWidePadding,
          })}
          onClick={() => onClick && onClick(item, index)}
        >
          <div className={classNames(styles.itemHeader, {
            [styles.thinItemHeader]: isThinProgress,
          })}>
            <div className={styles.name}>{item.name}</div>
            <Space size={16} className={styles.valueWrapper}>
              {showCount && item.count !== undefined && (
                <div className={styles.valueGroup}>
                  <div className={styles.value}>
                    <span className={styles.valueNumber} style={valueStyle}>
                      <CountUp
                        // end={Number(item.count)}
                        end={formatValueWithWan(item.count)}
                        separator=","
                        // decimals={0}
                        decimals={formatDecimalsWithWan(item.count)}
                      />
                    </span>
                    <div className={styles.unitWrapper}>
                      <span className={styles.valueUnit}>{formatUnitWithWan(item.count) + unit}</span>
                    </div>
                  </div>
                </div>
              )}
              {showPercentage && (
                <div className={styles.valueGroup}>
                  <div className={styles.value}>
                    <span className={styles.valueNumber} style={valueStyle}>
                      <CountUp
                        end={formatValueWithWan(percentageValue(item.percentage))}
                        separator=","
                        // 当百分比为100时，不显示小数
                        decimals={(Number(item.percentage) === 100 ) ? 0 : percentageFixed}
                        // decimals={(Number(item.percentage) === 100 || Number(item.percentage) === 0) ? 0 : percentageFixed}
                      />
                    </span>
                    <div className={styles.unitWrapper}>
                      <span className={styles.valueUnit}>{formatUnitWithWan(percentageValue(item.percentage)) + percentageUnit}</span>
                    </div>
                  </div>
                </div>
              )}
            </Space>
          </div>
          <Progress
            className={styles.progress}
            percent={item.percentage}
            showInfo={false}
            strokeColor={{ from: progressColor.from, to: progressColor.to }}
            status="active"
            size={{ height: isThinProgress ? 8 : 12 }}
          />
        </div>
      ))}
      {data.length === 0 && (        
        <EmptySpace describe="暂无数据" style={{ height: '160px' }} />
      )}
    </div>
  );
};

export default AreaBarList; 