import { RightOutlined } from '@ant-design/icons';

import Modal from '@/components/HncyModal';
import services from '@/services';
import { useRequest } from 'ahooks';
import { Typography } from 'antd';
import { useState } from 'react';
import SafetyModal from '../../SafetyTips/SafetyModal';
import rightBack from '@/assets/images/newMain/rightBack.png';
import styles from './index.less';
const { Paragraph } = Typography;

const WeatherCard = () => {
  const [selectedCarouselItem, setSelectedCarouselItem] = useState<any>(null);
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [riskModalOpt, setRiskModalOpt] = useState<{
    open: boolean;
    title: string;
  }>({
    open: false,
    title: '气象预警列表',
  });

  const { data: weatherList } = useRequest(
    services.Information.getArticleList,
    {
      defaultParams: [
        {
          pushCategoryName: '大屏预警信息发布',
          'category.scopeList': '1',
          attributeList: '3',
          current: '1',
          size: 2,
        },
      ],
    },
  );

  const { data: weatherData } = useRequest(
    services.Information.getArticleList,
    {
      defaultParams: [
        {
          pushCategoryName: '大屏预警信息发布',
          'category.scopeList': '1',
          attributeList: '3',
          current: '1',
          size: 100,
        },
      ],
      ready: riskModalOpt?.open,
    },
  );

  return (
    <div className={styles.container}>
      <div className={styles.titleWarp}>
        <div className={styles.title}>
          气象预警
          <div className={styles.warnCount}>
            {weatherList?.data?.total ?? '--'}
          </div>
        </div>
        <div
          className={styles.link}
          onClick={() => {
            setRiskModalOpt({
              ...riskModalOpt,
              open: true,
            });
          }}
        >
         <img src={rightBack} alt="" />
        </div>
      </div>
      <div className={styles.content}>
        {weatherList?.data?.records?.map((item: any, index: number) => {
          return (
            <div
              className={styles.items}
              key={index}
              onClick={() => {
                setSelectedCarouselItem(item);
                setIsModalOpen(true);
              }}
            >
              <img src={item?.coverList?.[0]} alt="" className={styles.img} style={{borderRadius:4}}/>
              <div className={styles.rwarp}>
                <div className={styles.title}>{item?.title}</div>
                <div className={styles.time}>{item?.publishTime}</div>
              </div>
            </div>
          );
        })}
      </div>
      {selectedCarouselItem && (
        <SafetyModal
          data={selectedCarouselItem}
          open={isModalOpen}
          onCancel={() => {
            setIsModalOpen(false);
            setSelectedCarouselItem(null);
          }}
        />
      )}
      {/**风险预警 */}
      <Modal
        open={riskModalOpt?.open}
        
        titleRender={() => {
          return (
            <div className={styles.modTitle}>
              <div className={styles.title}>{'气象预警列表'}</div>
              <div className={styles.desc}>
                当前全市共<span>{weatherList?.data?.total ?? '--'}</span>个预警
              </div>
            </div>
          );
        }}
        onCancel={() => setRiskModalOpt({ open: false, title: '' })}
        width={1033}
        height={858}
      >
        <div className={styles.modContent}>
          {weatherData?.data?.records?.map((item:any) => {
            return (
              <div
                className={styles.weatherItems}
                onClick={() => {
                  setSelectedCarouselItem(item);
                  setIsModalOpen(true);
                }}
              >
                <img src={item?.coverList?.[0]} alt="" style={{borderRadius:4}}/>
                <div className={styles.rwarp}>
                  <div className={styles.name}>{item?.title}</div>
                  <div className={styles.desc}>
                    <Paragraph
                      ellipsis={{
                        rows: 2,
                        expandable: false,
                      }}
                      style={{
                        color: 'rgb(202, 223, 252)',
                        fontSize: 16,
                        marginBottom: 2,
                      }}
                      title={item?.summary}
                    >
                      {item?.summary}
                    </Paragraph>
                  </div>
                  <div className={styles.time}>{item?.publishTime}</div>
                </div>
              </div>
            );
          })}
        </div>
      </Modal>
    </div>
  );
};

export default WeatherCard;
