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;
  }>;
}

const formatter: StatisticProps['formatter'] = (value) => (
  <CountUp end={Number(value)} separator="" decimals={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={formatter} />
                <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.content}>
          <div className={styles.title1}>业务域明细库</div>
            {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={formatter} />
                  <span className={styles.unit}>{item.unit}</span>
                </div>
              </div>
            ))}
          </div>
        </div>
        <div className={styles.subSection}>
          <div className={styles.title1}>基础信息库</div>
          <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={formatter} />
                  <span className={styles.unit}>{item.unit}</span>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>

      <div className={styles.arrow} />

      {/* 专题库和主题库 */}
      <div className={`${styles.section} ${styles.thirdSection}`}>
        <div className={styles.subSection}>
          <div className={styles.title1}>专题库</div>
          <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={formatter} />
                  <span className={styles.unit}>{item.unit}</span>
                </div>
              </div>
            ))}
          </div>
        </div>
        <div className={styles.subSection}>
          <div className={styles.title1}>主题库</div>
          <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={formatter} />
                  <span className={styles.unit}>{item.unit}</span>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
};

export default DataFlowSection; 