import risk1 from '@/assets/images/urbanSituation/risk1.svg';
import risk2 from '@/assets/images/urbanSituation/risk2.svg';
import risk3 from '@/assets/images/urbanSituation/risk3.svg';
import risk4 from '@/assets/images/urbanSituation/risk4.svg';
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 { useEffect, useMemo, useState } from 'react';
import styles from './index.less';

const Security = () => {
  const [modalOpt, setModalOpt] = useState<{
    open: boolean;
    title: string;
    type: string; // 弹窗类型：todayNum 今日事件数，disposalNum 待处理事件数
  }>({
    open: false,
    title: '',
    type: '',
  });


  //预警数
  const { data: warnCoutnData } = useRequest(() =>
    services.DataBase.getSjdzInfoData({
      typeCode: 'zzcc-aq-yjdjtj',
    }),
  );
  // console.log(warnCoutnData?.data?.data?.records[0]?.stat);
  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 (
    <div className={styles.wrap}>
      <div className={styles.header}>
        <span className={styles.title}>城市安全</span>
      </div>
      <div className={styles.content}>
        <Flex justify="space-between">
          {riskData.map((item) => (
            <div
              key={item.label}
              className={styles.riskItem}
              //todo暂时不展示
              // onClick={() => setModalOpt({
              //   open: true,
              //   type: item.type,
              //   title: '安全风险',
              // })}
            >
              <Space size={10}>
                <img src={item.icon} alt="" />
                <Space direction="vertical" size={0}>
                  <div style={{ lineHeight: 1 }}>
                    <span
                      className={styles.num}
                      style={{ background: item.color, backgroundClip: 'text' }}
                    >
                      {/* {item?.value} */}--
                    </span>
                    {/* {item?.value !== '--' && <span>个</span>} */}
                  </div>
                  <div className={styles.label}>{item.label}</div>
                </Space>
              </Space>
            </div>
          ))}
        </Flex>
      </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>
    </div>
  );
};

export default Security;
