import BaseCard from '@/pages/GlobalModalServices/components/BaseCard';
import { useGlobalModalServices } from '@/pages/GlobalModalServices/provider';
import { Divider, Flex, Space } from 'antd';
import styles from './index.less';

/** 统计 */
const StatisticsCard = ({ dataSource }: { dataSource: any }) => {
  const { dispatch } = useGlobalModalServices();
  return (
    <BaseCard
      w={440}
      h={186}
      title={
        <div className={styles.title}>
          当前&nbsp;<span>{dataSource?.currentUnsolvedCount ?? '--'}</span>
          &nbsp;件疑难问题待解决
        </div>
      }
    >
      <Space direction="vertical" size={10} className={styles.content}>
        <div className={styles.collect}>
          <span>
            历史共计&nbsp;
            <span className={styles.count}>
              {dataSource?.totalCount ?? '--'}
            </span>
            &nbsp;件
          </span>
          <Divider type="vertical" style={{ background: '#BAC8D6' }} />
          <span>
            已解决&nbsp;
            <span className={styles.count}>
              {dataSource?.solvedCount ?? '--'}
            </span>
            &nbsp;件
          </span>
        </div>
        <Flex gap={10} className={styles.cardContent}>
          <div
            className={styles.cardItem}
            onClick={() => {
              dispatch.push('DifficultProblemList', {
                title: '疑难问题列表',
                props: {
                  params: {
                    today: '1',
                    lookAllFlag: '1',
                  },
                },
              });
            }}
          >
            <span>
              <img
                className={styles.img}
                src={require('@/assets/images/event/yinanAddIcon.png')}
                alt=""
              />
              &nbsp;今日新增
            </span>
            <span className={styles.count}>
              {dataSource?.todayAddedCount ?? '--'}
            </span>
            <span>个</span>
          </div>

          <div
            className={styles.cardItem}
            onClick={() => {
              dispatch.push('DifficultProblemList', {
                title: '疑难问题列表',
                props: {
                  params: {
                    today: '1',
                    lookAllFlag: '1',
                    eventStatus:'disposed'
                  },
                },
              });
            }}
          >
            <span>
              <img
                className={styles.img}
                src={require('@/assets/images/event/yinanDispIcon.png')}
                alt=""
              />
              &nbsp;今日解决
            </span>
            <span className={styles.count} style={{ color: '#5895FB' }}>
              {dataSource?.todaySolvedCount ?? '--'}
            </span>
            <span>个</span>
          </div>
        </Flex>
      </Space>
    </BaseCard>
  );
};

export default StatisticsCard;
