import risk1 from '@/assets/images/centralize/risk1.png';
import risk2 from '@/assets/images/centralize/risk2.png';
import risk3 from '@/assets/images/centralize/risk3.png';
import risk4 from '@/assets/images/centralize/risk4.png';
import Modal from '@/components/HncyModal';
import RiskEvents from '@/pages/Common/Event/RiskEvents';
import services from '@/services';
import { useEffect, useMemo, useState } from 'react';
import styles from './index.less';

const CitySecurityInfo = () => {
  const [modalOpt, setModalOpt] = useState<{
    open: boolean;
    title: string;
    type: string;
  }>({
    open: false,
    title: '',
    type: '',
  });

  const [statisticsData, setStatisticsData] = useState<any>({});

  const riskData = useMemo(() => {
    return [
      {
        type: '红色风险',
        label: '红色风险',
        value: statisticsData?.majorRiskTotal,
        icon: risk1,
        color: 'linear-gradient(180deg, rgb(255, 138, 138), rgb(208, 62, 62))',
      },
      {
        type: '橙色风险',
        label: '橙色风险',
        value: statisticsData?.significantRiskTotal,
        icon: risk4,
        color: 'linear-gradient(180deg, rgb(255, 176, 121), rgb(238, 126, 48))',
      },
      {
        type: '黄色风险',
        label: '黄色风险',
        value: statisticsData?.generalRiskTotal,
        icon: risk3,
        color: 'linear-gradient(180deg, rgb(255, 228, 155), rgb(231, 182, 55))',
      },
      {
        type: '一般风险',
        label: '一般风险',
        value: statisticsData?.ybfxRiskTotal,
        icon: risk2,
        color:
          'linear-gradient(to right, rgb(122, 177, 255), rgb(37, 128, 255))',
      },
    ];
  }, [statisticsData]);

  const getStatisticsData = () => {
    services.CityRiskApi.queryStatisticalRiskLevel().then((res) => {
      if (res.code === 200) {
        setStatisticsData(res.data);
      }
    });
  };

  useEffect(() => {
    getStatisticsData();
  }, []);

  return (
    <div className={styles.container}>
      <div className={styles.header}>
        <span className={styles.title}>城市安全</span>
        <div className={styles.riskList}>
          {riskData.map((item) => (
            <div
              key={item.label}
              className={styles.riskItem}
              onClick={() =>
                setModalOpt({
                  open: true,
                  type: item.type,
                  title: '安全风险',
                })
              }
            >
              <img src={item.icon} alt="" />
              <div>
                <span
                  className={styles.num}
                  style={{ background: item.color, backgroundClip: 'text' }}
                >
                  {item.value}
                </span>
                <span >个</span>
                <div className={styles.label}>{item.label}</div>
              </div>
            </div>
          ))}
        </div>
      </div>

      <Modal
        open={modalOpt?.open}
        title={modalOpt?.title}
        onCancel={() => setModalOpt({ open: false, title: '', type: '' })}
        width={1772}
        height={846}
      >
        <RiskEvents
          statisticsData={statisticsData}
          defaultCategory={modalOpt?.type}
        />
      </Modal>
    </div>
  );
};

export default CitySecurityInfo;
