import { useRequest } from 'ahooks';
import { useState } from 'react';
import services from '@/services';
import SafetyModal from '../SafetyTips/SafetyModal';
import AccidentItem from './AccidentItem';
import styles from './index.less';

import EmptySpace from '@/components/EmptySpace';

const SafetyAccident = () => {
  const [selectedItem, setSelectedItem] = useState<any>(null);
  const [isModalOpen, setIsModalOpen] = useState(false);

  const { data } = useRequest(services.Information.getArticleList, {
    defaultParams: [
      {
        pushCategoryName: '大屏安全事故通报',
        'category.scopeList': '1',
        attributeList: '3',
        current: '1',
        size: 2,
      },
    ],
  });

  const handleItemClick = (item: any) => {
    setSelectedItem(item);
    setIsModalOpen(true);
  };

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

  return (
    <div className={styles.container}>
      <div className={styles.tag}>安全事故</div>

     {data?.data?.records?.length? <div className={styles.content}>
        {data?.data?.records?.map((item: any) => {
          return <AccidentItem key={item.id} data={item} onClick={() => handleItemClick(item)} />;
        })}
      </div>:<div><EmptySpace/></div>}

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

export default SafetyAccident;
