//风险级别
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 EventPicList from '@/pages/Common/components/EventPicList';
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 riskData = useMemo(() => {
    return [
      {
        type: '1',
        label: '红色风险',
        value: statisticsData?.majorRiskTotal,
        icon: risk1,
        color:
          'linear-gradient(180.00deg, rgb(255, 138, 138),rgb(208, 62, 62))',
      },
      {
        type: '2',
        label: '橙色风险',
        value: statisticsData?.significantRiskTotal,
        icon: risk2,
        color:
          'linear-gradient(180.00deg, rgb(255, 176, 121),rgb(238, 126, 48))',
      },
      {
        type: '3',
        label: '黄色风险',
        value: statisticsData?.generalRiskTotal,
        icon: risk3,
        color:
          'linear-gradient(180.00deg, rgb(255, 228, 155),rgb(231, 182, 55))',
      },
      {
        type: '4',
        label: '一般风险',
        value: statisticsData?.ybfxRiskTotal,
        icon: risk4,
        color:
          'linear-gradient(180.00deg, rgb(122, 177, 255),rgb(37, 128, 255))',
      },
    ];
  }, [statisticsData]);
  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>
                <span>个</span>
              </Flex>
            </Flex>
          </Space>
        </div>
      ))}
      <Modal
        open={modalOpt?.open}
        title={
          <Space>
            {modalOpt?.title}-<span>当前还有5个红色风险在整改中</span>
          </Space>
        }
        onCancel={() => setModalOpt({ open: false, title: '', type: '' })}
        width={1772}
        height={846}
      >
        <EventPicList showEventDetail listData={listData} listHeight={640} />
      </Modal>
    </Flex>
  );
};

export default RiskLevelNum;
