import services from '@/services';
import { useRequest } from 'ahooks';
import { Carousel, Typography } from 'antd';
import dayjs from 'dayjs';
import { useState } from 'react';
import styles from './index.less';
import SafetyModal from './SafetyModal';
import SafetyTipItem from './SafetyTipItem';

const { Paragraph } = Typography;

const SafetyTips = () => {
  const [selectedCarouselItem, setSelectedCarouselItem] = useState<any>(null);
  const [isModalOpen, setIsModalOpen] = useState(false);

  const { data: BigImgData } = useRequest(services.Information.getArticleList, {
    defaultParams: [
      {
        pushCategoryName: '大屏安全工作提示',
        'category.scopeList': '1',
        attributeList: '0,1',
        current: '1',
        size: 3,
      },
    ],
  });

  const { data } = useRequest(services.Information.getArticleList, {
    defaultParams: [
      {
        pushCategoryName: '大屏安全工作提示',
        'category.scopeList': '1',
        attributeList: '3',
        current: '1',
        size: 10,
      },
    ],
  });

  const handleCarouselItemClick = (item: any) => {
    setSelectedCarouselItem(item);
    setIsModalOpen(true);
  };

  const handleModalClose = () => {
    setIsModalOpen(false);
    setSelectedCarouselItem(null);
  };

  return (
    <div className={styles.container}>
      <div className={styles.tag}>安全工作</div>
      <div className={styles.content}>
        <Carousel autoplay style={{ width: 274 }}>
          {BigImgData?.data?.records?.map((item: any) => {
            return (
              <div
                className={styles.carouselItem}
                onClick={() => handleCarouselItemClick(item)}
              >
                <img src={item?.coverList?.[0]} alt="" className={styles.img} />
                <div className={styles.desc}>
                  <Paragraph
                    ellipsis={{
                      rows: 2,
                      expandable: false,
                      suffix: dayjs(item?.publishTime).format('YYYY-MM-DD'),
                    }}
                    style={{
                      color: 'rgb(202, 223, 252)',
                      fontSize: 20,
                      fontWeight: 500,
                    }}
                    title={item?.title}
                  >
                    {item?.title}
                  </Paragraph>
                </div>
              </div>
            );
          })}
        </Carousel>
        <div className={styles.rCont}>
          {data?.data?.records.map((item: any) => {
            return <SafetyTipItem key={item.id} data={item} />;
          })}
        </div>
      </div>

      {selectedCarouselItem && (
        <SafetyModal
          data={selectedCarouselItem}
          open={isModalOpen}
          onCancel={handleModalClose}
        />
      )}
    </div>
  );
};

export default SafetyTips;
