import type { StatisticProps } from 'antd';
import { Flex, Space, Statistic } 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('https://10.1.174.34:13600/user/autoLogin');
          }}
        >
          进入网格基座查看更多
        </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;
