//风险级别
import risk4 from '@/assets/images/SecurityServiceOverview/risk/blue.png';
import risk2 from '@/assets/images/SecurityServiceOverview/risk/orange.png';
import risk1 from '@/assets/images/SecurityServiceOverview/risk/red.png';
import risk3 from '@/assets/images/SecurityServiceOverview/risk/yellow.png';
import Modal from '@/components/HncyModal';
import RiskEvents from '@/pages/Common/Event/RiskEvents';
import services from '@/services';
import { useRequest } from 'ahooks';
import { Flex, Space } from 'antd';
import { useMemo, useState } from 'react';
import styles from './index.less';
const RiskLevelNum: React.FC = () => {
  //事件列表
  const [listData, setListData] = useState<any>({
    items: [],
    loading: true,
    total: 0,
    page: 1,
    hasNext: false,
  });
  const [statisticsData, setStatisticsData] = useState<any>({});
  const [modalOpt, setModalOpt] = useState<{
    open: boolean;
    title: string;
    type: string;
  }>({
    open: false,
    title: '',
    type: '',
  });

  //预警数
  const { data: warnCoutnData } = useRequest(() =>
    services.DataBase.getSjdzInfoData({
      typeCode: 'zzcc-aq-yjdjtj',
    }),
  );
  const riskData = useMemo(() => {
    return [
      {
        type: '红色风险',
        label: '红色风险',
        value:
          warnCoutnData?.data?.data?.records?.[0]?.stat?.find(
            (item) => item?.risklevel === '红色预警',
          )?.num || '--',
        icon: risk1,
        color: 'linear-gradient(180deg, rgb(255, 138, 138), rgb(208, 62, 62))',
      },
      {
        type: '橙色风险',
        label: '橙色风险',
        value:
          warnCoutnData?.data?.data?.records?.[0]?.stat?.find(
            (item) => item?.risklevel === '橙色预警',
          )?.num || '--',
        icon: risk2,
        color: 'linear-gradient(180deg, rgb(255, 176, 121), rgb(238, 126, 48))',
      },
      {
        type: '黄色风险',
        label: '黄色风险',
        value:
          warnCoutnData?.data?.data?.records?.[0]?.stat?.find(
            (item) => item?.risklevel === '黄色预警',
          )?.num || '--',
        icon: risk3,
        color: 'linear-gradient(180deg, rgb(255, 228, 155), rgb(231, 182, 55))',
      },
      {
        type: '一般风险',
        label: '一般风险',
        value:
          warnCoutnData?.data?.data?.records?.[0]?.stat?.find(
            (item) => item?.risklevel === '一般预警',
          )?.num || '--',
        icon: risk4,
        color:
          'linear-gradient(to right, rgb(122, 177, 255), rgb(37, 128, 255))',
      },
    ];
  }, [warnCoutnData]);

 
  return (
    <Flex justify="space-between" className={styles.riskWrap}>
      {riskData.map((item) => (
        <div
          key={item.label}
          className={styles.riskItem}
          onClick={() =>
            setModalOpt({
              open: true,
              type: item.type,
              title: '安全风险',
            })
          }
        >
          <Space size={6}>
            <img src={item.icon} alt="" className={styles.riskIcon} />
            <Flex align="center">
              <span>{item.label}</span>
              <Flex align="center">
                <span
                  className={styles.num}
                  style={{
                    background: item?.color,
                    backgroundClip: 'text',
                  }}
                >
                  {/* {item?.value ?? 0} */}--
                </span>
                {/* {item?.value !== '--' && <span>个</span>} */}
              </Flex>
            </Flex>
          </Space>
        </div>
      ))}
      <Modal
        open={modalOpt?.open}
        title={modalOpt?.title}
        onCancel={() => setModalOpt({ open: false, title: '', type: '' })}
        width={1772}
        height={846}
      >
        <RiskEvents
          statisticsData={warnCoutnData?.data?.data?.records?.[0]}
          defaultCategory={modalOpt?.type}
        />
      </Modal>
    </Flex>
  );
};

export default RiskLevelNum;
