import { CaretDownOutlined, CaretUpOutlined } from '@ant-design/icons';
import type { StatisticProps } from 'antd';
import { Flex, Space, Statistic } from 'antd';
import classNames from 'classnames';
import { useState } from 'react';
import CountUp from 'react-countup';
import HignLine from './HignLine';
import styles from './index.less';
import LineCharts from './LineCharts';
interface CountItemProps {
  name: string; //名称
  value: string | number; //值
  unit?: string; //单位
  showBg?: boolean; //显示背景
}
/**
 *
 * @description 事件态势
 */

const tabs = [
  {
    key: '1',
    label: '高发类型',
  },
  {
    key: '2',
    label: '高发区域',
  },
  {
    key: '3',
    label: '高发来源',
  },
];
const noSeparatorformatter: StatisticProps['formatter'] = (value) => (
  <CountUp
    end={Number(value)}
    separator=""
    decimals={Number.isInteger(value) ? 0 : 1}
  />
);

//统计
const CountItem: React.FC<CountItemProps> = ({
  name,
  value,
  unit = '个',
  showBg = true,
}) => (
  <Flex
    className={classNames(styles.card, {
      [styles.bg]: showBg,
    })}
    align="center"
    justify="space-between"
  >
    <span className={styles.name}>{name}</span>
    <Space>
      <Statistic value={value} formatter={noSeparatorformatter} />
      <span className={styles.unit}>{unit}</span>
    </Space>
  </Flex>
);

const Situation = () => {
  const [tabActive, setTabActive] = useState<string>('1');
  return (
    <Flex vertical className={styles.wrap}>
      <span className={styles.title}>事件态势</span>
      <Flex gap={20}>
        <CountItem name="立案" value={89} />
        <CountItem name="应急案" value={89} />
        <CountItem name="已结案" value={89} />
        <CountItem name="结案率" value={89} unit="%" />
      </Flex>
      <Flex vertical justify="space-between" className={styles.main}>
        <Flex justify="space-between" align="center">
          <span className={styles.subTitle}>近一月汇聚趋势</span>
          <Flex className={classNames(styles.desc)} gap={10}>
            较昨日
            <div>
              {1 > 0 ? (
                <CaretUpOutlined style={{ color: 'rgb(9, 195, 92)' }} />
              ) : (
                <CaretDownOutlined style={{ color: 'rgb(255, 71, 71)' }} />
              )}
              <b className={styles.value}>289</b>件
            </div>
          </Flex>
        </Flex>
        <LineCharts data={[]} />
        <Flex justify="flex-start" gap={60} className={styles.eventWrap}>
          <CountItem name="疑难问题" value={89} showBg={false} />
          <CountItem name="多跨事件" value={819} showBg={false} />
        </Flex>
      </Flex>
      <div className={styles.hignWrap}>
        <Flex gap={20}>
          {tabs.map((item) => (
            <div
              key={item.key}
              className={classNames(styles.tab, {
                [styles.tabActive]: item.key === tabActive,
              })}
              onClick={() => setTabActive(item.key)}
            >
              {item.label}
            </div>
          ))}
        </Flex>
        <HignLine
          data={[
            {
              name: 'XXXX',
              percent: '29.1',
              value: '34',
            },
            {
              name: 'XXXX',
              percent: '69.1',
              value: '64',
            },
            {
              name: 'XXXX',
              percent: '29.1',
              value: '34',
            },
          ]}
          strokeColor={{ from: '#38F2E3', to: '#3DC3FF' }}
        />
      </div>
    </Flex>
  );
};

export default Situation;
