import { Flex, Statistic, Space, Row, Col } from 'antd'
import type { StatisticProps } from 'antd';
import CountUp from 'react-countup';
import styles from './index.less'
import LineCharts from './LineCharts';
import { useGlobalModalServices } from '@/pages/GlobalModalServices/provider';

/**
 * 
 * @description 数据要素
 */

const formatter: StatisticProps['formatter'] = (value) => (
  <CountUp end={value as number} separator="," />
);

const noSeparatorformatter: StatisticProps['formatter'] = (value) => (
  <CountUp end={value as number} separator="" />
);


const DataElement = () => {

  const { dispatch } = useGlobalModalServices();

  const openDataBaseModal = () => {
    dispatch.push('DataBase');
  }

  return (
    <Flex vertical className={styles.wrap}>
      <Flex className={styles.top}>
        <span className={styles.title}>数据要素</span>
      </Flex>
      <Flex vertical justify='space-between' className={styles.main}>
        <Flex className={styles.totalSection} justify='space-between' align='center'>
          <span className={styles.name}>已汇集数据</span>
          <Space size={20}>
            <Statistic className={styles.totalNum} value={15890000} formatter={formatter} />
            <span className={styles.unit}>万条</span>
          </Space>
          <Space>
            <span className={styles.todayName}>今日新增</span>
            <Statistic className={styles.todayNum} value={15583} formatter={formatter} />
            <span className={styles.todayunit}>条</span>
          </Space>
        </Flex>
        <Space direction='vertical' size={20} className={styles.chartSection}>
          <span className={styles.title}>近一月汇聚趋势</span>
          <LineCharts data={[]} />
        </Space>
        <Flex className={styles.cardSection} gap={30}>
          <Space direction='vertical' className={styles.left}>
            <Space>
              <Statistic value={1500} formatter={noSeparatorformatter} />
              <span className={styles.unit}>个</span>
            </Space>
            <span className={styles.name}>数据活跃度</span>
          </Space>

          <Row gutter={[20, 20]} className={styles.right}>
            <Col span={12}>
              <Flex className={styles.card} align='center' justify='space-between' onClick={openDataBaseModal}>
                <span className={styles.name}>基础信息库</span>
                <Space>
                  <Statistic value={1500} formatter={noSeparatorformatter} />
                  <span className={styles.unit}>个</span>
                </Space>
              </Flex>
            </Col>
            <Col span={12}>
              <Flex className={styles.card} align='center' justify='space-between' onClick={openDataBaseModal}>
                <span className={styles.name}>业务库</span>
                <Space>
                  <Statistic value={1500} formatter={noSeparatorformatter} />
                  <span className={styles.unit}>个</span>
                </Space>
              </Flex>
            </Col>
            <Col span={12}>
              <Flex className={styles.card} align='center' justify='space-between' onClick={openDataBaseModal}>
                <span className={styles.name}>主题库</span>
                <Space>
                  <Statistic value={1500} formatter={noSeparatorformatter} />
                  <span className={styles.unit}>个</span>
                </Space>
              </Flex>
            </Col>
            <Col span={12}>
              <Flex className={styles.card} align='center' justify='space-between' onClick={openDataBaseModal}>
                <span className={styles.name}>专题库</span>
                <Space>
                  <Statistic value={1500} formatter={noSeparatorformatter} />
                  <span className={styles.unit}>个</span>
                </Space>
              </Flex>
            </Col>
          </Row>
        </Flex>
      </Flex>
    </Flex>
  )
}

export default DataElement