import { RightOutlined } from '@ant-design/icons';
import styles from './index.less';
import { Modal } from 'antd';
import { useState } from 'react';
import SafetyModal from '../../SafetyTips/SafetyModal';
const WeatherCard = () => {
  const [selectedCarouselItem, setSelectedCarouselItem] = useState<any>(null);
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [riskModalOpt, setRiskModalOpt] = useState<{
    open: boolean;
    title: string;
  }>({
    open: false,
    title: '风险预警列表',
  });
  return (
    <div className={styles.container}>
      <div className={styles.titleWarp}>
        <div className={styles.title}>
          气象预警<div className={styles.warnCount}>11</div>
        </div>
        {/* <div className={styles.link}>
          <RightOutlined style={{ color: 'white' }} />
        </div> */}
      </div>
      <div className={styles.content}>
        {[
          {
            icon: require('@/assets/images/SecurityServiceOverview/tqlsIc.png'),
            title: '简阳市 大风蓝色预警大风蓝色预警',
            time: '2024-10-10 12:20:20',
          },
          {
            icon: require('@/assets/images/SecurityServiceOverview/tqlsIc.png'),
            title: '简阳市 大风蓝色预警',
            time: '2024-10-10 12:20:20',
          },
          {
            icon: require('@/assets/images/SecurityServiceOverview/tqlsIc.png'),
            title: '简阳市 大风蓝色预警',
            time: '2024-10-10 12:20:20',
          },
        ]?.map((item,index:number) => {
          return (
            <div className={styles.items} key={index} onClick={()=>{
              setSelectedCarouselItem(item);
              setIsModalOpen(true);
            }}>
              <img src={item?.icon} alt="" className={styles.img} />
              <div className={styles.rwarp}>
                <div className={styles.title}>{item?.title}</div>
                <div className={styles.time}>{item?.time}</div>
              </div>
            </div>
          );
        })}
      </div>
      {selectedCarouselItem && (
        <SafetyModal
          data={selectedCarouselItem}
          open={isModalOpen}
          onCancel={()=>{
            setIsModalOpen(false);
            setSelectedCarouselItem(null);
          }}
        />
      )}
       {/**风险预警 */}
       <Modal
        open={riskModalOpt?.open}
        title={riskModalOpt?.title}
        onCancel={() => setRiskModalOpt({ open: false, title: '' })}
        width={1500}
        height={846}
      >
      
      </Modal>
    </div>
  );
};

export default WeatherCard;
