import { Progress, Statistic, StatisticProps } from 'antd';
import styles from './index.less';
import CountUp from 'react-countup';

interface DataQualityCardProps {
  data: {
    score: number;
    trend: string;
    metrics: Array<{
      name: string;
      value: number;
    }>;
  };
}

const formatter: StatisticProps['formatter'] = (value) => (
    <CountUp end={Number(value)} separator="" decimals={0} />
  //   <CountUp end={Number(value)} separator="," decimals={2} />
  );
  
const fixedScore = '--%';
const getScore = (score: number) => {
    let isDebug = false;
  if (isDebug) {
    return fixedScore;
  }
  return score;
}

// 计算进度条百分比
const getProgressPercent = (value: number) => {
  // 假设最大值是300，可以根据实际情况调整
  const maxValue = 300;
  const percent = (value / maxValue) * 100;
  return Math.min(percent, 100);
};

const DataQualityCard = ({ data }: DataQualityCardProps) => {
  return (
    <div className={styles.container}>
      <div className={styles.scoreSection}>
        <div className={styles.circleProgress}>
          <Progress 
            type="circle" 
            percent={100}
            // percent={getProgressPercent(data.score)}
            strokeColor={{
              '0%': '#07FFC3',
              '100%': '#FF667B',
            }}
            size={100}
            format={() => (
              <div className={styles.progressContent}>
                {/* <Statistic value={data.score || 0} formatter={formatter} className={styles.value}/> */}
                <span className={styles.value}>{data.score}</span>
                <span className={styles.unit}>项</span>
              </div>
            )}
          />
        </div>
        <div className={styles.title}>数据共享</div>
      </div>

      <div className={styles.metricsSection}>
        <div className={styles.metricsGrid}>
          {data.metrics.map((metric, index) => (
            <div key={index} className={styles.metricItem}>
                <Statistic value={getScore(metric.value) || 0} formatter={formatter} className={styles.metricValue}/>
              {/* <div className={styles.metricValue}>{getScore(metric.value)}</div> */}
              <div className={styles.metricName}>{metric.name}</div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

export default DataQualityCard; 