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

interface DataFlowSectionProps {
  sourceData: Array<{
    id: number;
    type: string;
    type_desc: string;
    num: number;
    unit: string;
  }>;
  businessData: Array<{
    id: number;
    type: string;
    type_desc: string;
    num: number;
    unit: string;
  }>;
  baseInfoData: Array<{
    id: number;
    type: string;
    type_desc: string;
    num: number;
    unit: string;
  }>;
  themeData: Array<{
    id: number;
    type: string;
    type_desc: string;
    num: number;
    unit: string;
  }>;
  specialData: Array<{
    id: number;
    type: string;
    type_desc: string;
    num: number;
    unit: string;
  }>;
}

// 新增根据unit决定小数位数的formatter生成函数
const getFormatter = (unit: string): StatisticProps['formatter'] => (value) => (
  <CountUp 
    end={Number(value)} 
    separator="" 
    decimals={unit === '条' ? 0 : 2} 
  />
);

const DataFlowSection = ({ sourceData, businessData, baseInfoData, themeData, specialData }: DataFlowSectionProps) => {
  return (
    <div className={styles.container}>
      {/* 原始库 */}
      <div className={`${styles.section} ${styles.sourceSection}`}>
        <div className={styles.title}>原始库</div>
        <div className={styles.content}>
          {sourceData.map(item => (
            <div key={item.id} className={styles.item}>
              <div className={styles.label}>{item.type_desc}</div>
              <div className={styles.valueWrapper}>
                <Statistic value={item.num} formatter={getFormatter(item.unit)} />
                <span className={styles.unit}>{item.unit}</span>
              </div>
            </div>
          ))}
        </div>
      </div>

      <div className={styles.arrow} />

      {/* 业务域明细库和基础信息库 */}
      <div className={`${styles.section} ${styles.doubleSection}`}>
        <div className={styles.subSection}>
          <div className={styles.title1}>基础信息库</div>
          <div className={styles.contentWrapper}>
            <div className={styles.content}>
              {baseInfoData.map(item => (
                <div key={item.id} className={styles.item}>
                  <div className={styles.label}>{item.type_desc}</div>
                  <div className={styles.valueWrapper}>
                    <Statistic value={item.num} formatter={getFormatter(item.unit)} />
                    <span className={styles.unit}>{item.unit}</span>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
        <div className={styles.subSection}>
          <div className={styles.title1}>业务域明细库</div>
          <div className={styles.contentWrapper}>
            <div className={styles.content}>
              {businessData.map(item => (
                <div key={item.id} className={styles.item}>
                  <div className={styles.label}>{item.type_desc}</div>
                  <div className={styles.valueWrapper}>
                    <Statistic value={item.num} formatter={getFormatter(item.unit)} />
                    <span className={styles.unit}>{item.unit}</span>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>

      <div className={styles.arrow} />

      {/* 专题库和主题库 */}
      <div className={`${styles.section} ${styles.thirdSection}`}>
        <div className={styles.subSection} style={{padding: '0 10px 0 20px'}}>
          <div className={styles.title1}>主题库</div>
          <div className={styles.contentWrapper} style={{padding: '60px 10px 0 10px', margin: '10px 40px 0 0'}}>
            <div className={styles.content}>
              {themeData.map(item => (
                <div key={item.id} className={styles.item}>
                  <div className={styles.label}>{item.type_desc}</div>
                  <div className={styles.valueWrapper}>
                    <Statistic value={item.num} formatter={getFormatter(item.unit)} />
                    <span className={styles.unit}>{item.unit}</span>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
        
        <div className={styles.subSection} >
          <div className={styles.title1} style={{left: '-30px'}}>专题库</div>
          <div className={styles.contentWrapper} style={{padding: '60px 10px 0 10px', margin: '10px 10px 0 -30px'}}>
            <div className={styles.content}>
              {specialData.map(item => (
                <div key={item.id} className={styles.item}>
                  <div className={styles.label}>{item.type_desc}</div>
                <div className={styles.valueWrapper}>
                  <Statistic value={item.num} formatter={getFormatter(item.unit)} />
                  <span className={styles.unit}>{item.unit}</span>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default DataFlowSection; 