import { Progress, Space } from 'antd';
import styles from './index.less';

interface DataActivityCardProps {
  data: {
    score: number;
    trend: string;
    topList: Array<{
      name: string;
      value: number;
    }>;
  };
}

const fixedScore = '--%';
const getScore = (score: number) => {
  // console.log('score', score);
    let isDebug = false;
  if (isDebug) {
    return fixedScore;
  }
  return score.toFixed(2);
}
const getName = (name: string) => {
    let isDebug = false;
  if (isDebug) {
    return '--';
  }
  return name;
}

const getProgressWidth = (value: number, total: number) => {
    // let retValue = value * 30;  
    // if (retValue > 100) {
    //     retValue = 100;
    // }
    let retValue = value / total * 100;

    return retValue;
}

const DataActivityCard = ({ data }: DataActivityCardProps) => {
  return (
    <div className={styles.container}>      
      <div className={styles.scoreSection}>
        <div className={styles.circleProgress}>
          <Progress 
            type="circle" 
            percent={100}
            // percent={data.score} 
            strokeColor={{
              '0%': '#07FFC3',
              '100%': '#FF667B',
            }}
            size={100}      
            format={() => (
              <div className={styles.progressContent}>
                <span className={styles.value}>{data.score}</span>
                <span className={styles.unit}>亿条</span>
              </div>
            )}      
            // format={(percent) => (
            //     <>
            //       {percent}
            //       <br />
            //       亿条
            //     </>
            //   )}
          />
        </div>
        <div className={styles.title}>数据接入</div>
        {/* <div className={styles.trend}>
          <span>较上月</span>
          <span className={styles.value}>{data.trend}</span>
        </div> */}
      </div>

      <div className={styles.topSection}>
        <div className={styles.topTitle}>数据接入TOP3</div>
        {data.topList.map((item, index) => (
          <div key={index} className={styles.topItem}>
            <div className={styles.topLabel}>
              {/* <span className={styles.topRank}>TOP{index + 1}</span> */}
              {/* <div className={styles.topName}> */}
              <span className={styles.topName}>{getName(item.name)}</span>
              {/* </div> */}
            </div>
            <div className={styles.progressBar}>
              <div className={styles.progressWrapper} >
                <span className={styles.progressValue}>{getScore(item.value)}</span>
                <span className={styles.progressUnit}>亿条</span>
              </div>
              <div 
                className={styles.progressInner} 
                style={{ width: `${getProgressWidth(item.value, data.score)}%` }}
              />
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};

export default DataActivityCard; 