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

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

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

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

// 计算数据活跃度总和
const totalActiveData = 241752875 + 28172979 + 927234680 + 21376847;

// 处理数值和单位的函数
const formatValue = (value: number) => {
  //使用亿条的单位
  if (value >= 1000000) {
    // if (value >= 100000000) {
    return { value: (value / 100000000).toFixed(2), unit: '亿条' };
  }
  // if (value >= 10000000) {
  //   return { value: (value / 10000000).toFixed(2), unit: '千万条' };
  // }
  if (value >= 10000) {
    return { value: (value / 10000).toFixed(2), unit: '万条' };
  }
  return { value: value.toFixed(0), unit: '条' };
};

const fromWanToYi = (value: number) => {
  return (value / 10000).toFixed(2);
};

const DataElement = () => {
  const [isGovernanceModalOpen, setIsGovernanceModalOpen] = useState(false);
  const { dispatch } = useGlobalModalServices();

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

  const formattedTotal = formatValue(totalActiveData);
  const formattedDetailDb = formatValue(241752875);
  const formattedBaseDb = formatValue(28172979);
  const formattedThemeDb = formatValue(927234680);
  const formattedSpecialDb = formatValue(21376847);

  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"
          onClick={() => setIsGovernanceModalOpen(true)}
        >
          <span className={styles.name}>已汇集数据</span>
          <Space size={20}>
            <Statistic
              className={styles.totalNum}
              value={11.52}
              formatter={yiFormatter}
            />
            <span className={styles.unit}>亿条</span>
          </Space>
          <Space>
            <span className={styles.todayName}>今日新增</span>
            <Statistic
              className={styles.todayNum}
              value={fromWanToYi(1165.04)}
              formatter={yiFormatter}
            />
            {/* <Statistic className={styles.todayNum} value={fromWanToYi(1165.04)} 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}>
          <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={formattedDetailDb.value}
                    formatter={noSeparatorformatter}
                  />
                  <span className={styles.unit}>{formattedDetailDb.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={formattedBaseDb.value}
                    formatter={noSeparatorformatter}
                  />
                  <span className={styles.unit}>{formattedBaseDb.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={formattedThemeDb.value}
                    formatter={noSeparatorformatter}
                  />
                  <span className={styles.unit}>{formattedThemeDb.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={formattedSpecialDb.value}
                    formatter={noSeparatorformatter}
                  />
                  <span className={styles.unit}>{formattedSpecialDb.unit}</span>
                </Space>
              </Flex>
            </Col>
          </Row>

          <Space
            direction="vertical"
            className={styles.left}
            onClick={() => dispatch.push('DataActivity')}
          >
            {/* <Space>
              <Statistic value={formattedTotal.value} formatter={noSeparatorformatter} />
              <span className={styles.unit}>{formattedTotal.unit}</span>
            </Space> */}
            <span className={styles.name}>三级标签体系</span>
          </Space>
        </Flex>
      </Flex>
      <DataGovernance
        open={isGovernanceModalOpen}
        onCancel={() => setIsGovernanceModalOpen(false)}
      />
    </Flex>
  );
};

export default DataElement;
