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


const Security = () => {


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

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

  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])

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

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


  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}
                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>
                      <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={statisticsData} defaultCategory={modalOpt?.type} />
      </Modal>
    </div>
  )
}

export default Security