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

/**
 * 
 * @description 管理要素
 */

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

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

const ManagementElement = () => {
  return (
    <Flex vertical className={styles.wrap}>
      <Flex justify='space-between' align='center' className={styles.top}>
        <span className={styles.title}>管理要素</span>
        <span className={styles.right} onClick={()=>{
          window.open('http://10.1.214.174:1800/comprehensivebig')
        }}>进入网格基座查看更多</span>
      </Flex>
      <Flex vertical justify='space-between' className={styles.main}>
        <Flex justify='space-between' style={{ padding: '0 60px' }}>
          <Space direction='vertical' className={styles.card}>
            <Space>
              <Statistic value={1144} formatter={formatter} />
              <span className={styles.unit}>个</span>
            </Space>
            <span className={styles.name}>责任网格</span>
          </Space>
          <Space direction='vertical' className={styles.card}>
            <Space>
              <Statistic value={8} formatter={formatter} />
              <span className={styles.unit}>个</span>
            </Space>
            <span className={styles.name}>资源网格</span>
          </Space>
        </Flex>
        <Flex justify='space-between' className={styles.gridSection}>
          <Space direction='vertical' className={styles.gridItem}>
            <Space>
              <Statistic value={94156} formatter={formatter} />
              <span className={styles.unit}>个</span>
            </Space>
            <span className={styles.name}>资源</span>
          </Space>
          <Space direction='vertical' className={styles.gridItem}>
            <Space>
              <Statistic value={3046396} formatter={formatter} />
              <span className={styles.unit}>个</span>
            </Space>
            <span className={styles.name}>部件</span>
          </Space>
          <Space direction='vertical' className={styles.gridItem}>
            <Space>
              <Statistic value={2370154} formatter={formatter} />
              <span className={styles.unit}>条</span>
            </Space>
            <span className={styles.name}>感知</span>
          </Space>
        </Flex>
        <Flex justify='center' className={styles.bottom}>
          <Space direction='vertical' style={{ textAlign: 'center'}}>
            <Space>
              <Statistic value={143.48} formatter={formatter1} />
              <span className={styles.unit}>亿</span>
            </Space>
            <span className={styles.name}>剖分网格</span>
          </Space>
        </Flex>
      </Flex>
    </Flex>
  )
}

export default ManagementElement