//风险数
import Modal from '@/components/HncyModal';
import EventPicList from '@/pages/Common/components/EventPicList';
import CustomCard from '@/pages/SecurityServiceOverview/components/CustomCard';
import WarnProgress from '@/pages/SecurityServiceOverview/SecurityState/IndustryWarn/WarnProgress';
import { Flex, Space } from 'antd';
import { useState } from 'react';
import styles from './index.less';

const IndustryRisk: React.FC = () => {
  const [modalOpt, setModalOpt] = useState<{
    open: boolean;
    title?: string;
  }>({
    open: false,
    title: '',
  });
  const [listData, setListData] = useState<any>({
    items: [],
    loading: true,
    total: 0,
    page: 1,
    hasNext: false,
  });
  const riskList = [
    {
      label: '道路桥梁',
    },
    {
      label: '固废处置',
    },
    {
      label: '城市照明',
    },
    {
      label: '城市环卫',
    },
    {
      label: '户外广告招牌',
    },
    {
      label: '综合管廊',
    },
    {
      label: '油烟扬尘',
    },
  ];
  return (
    <Flex gap={30} justify="space-between">
      {riskList?.map((it, index) => (
        <CustomCard
          key={it.label}
          title={it.label}
          width={276}
          height={261}
          titleStyle={{ color: '#fff' }}
          style={{
            paddingTop: 22,
            backgroundColor: 'rgba(63, 149, 229, 0.2)',
          }}
        >
          <div
            className={styles.numWrap}
            onClick={() => setModalOpt({ open: true, title: it.label })}
          >
            <p className={styles.text}>
              风险源数<span> 12</span>
            </p>
            {index % 2 === 0 ? (
              <>
                <p className={styles.text}>
                  预警数<span className={styles.warnNum}> 12</span>
                </p>
                <p className={styles.text}>
                  已处置<span className={styles.dealNum}> 12</span>
                </p>
                <WarnProgress
                  size={{ height: 14 }}
                  percent={80}
                  success={{ percent: 71 }}
                />
              </>
            ) : (
              <Flex className={styles.notWarn} align="center" justify="center">
                <img
                  src={require('@/assets/images/SecurityServiceOverview/notWarnIcon.png')}
                  alt=""
                  className={styles.icon}
                />
                <span>无风险预警</span>
              </Flex>
            )}
          </div>
        </CustomCard>
      ))}
      <Modal
        open={modalOpt?.open}
        title={
          <Space>
            {modalOpt?.title}-<span>当前还有5个红色风险在整改中</span>
          </Space>
        }
        onCancel={() => setModalOpt({ open: false, title: '' })}
        width={1772}
        height={846}
      >
        <EventPicList showEventDetail listData={listData} listHeight={640} />
      </Modal>
    </Flex>
  );
};
export default IndustryRisk;
