import { Flex, Image } from 'antd';

import services from '@/services';
import { useEffect, useState } from 'react';
import styles from './index.less';

const tagColors = ['#FCB129', '#588CF4', '#4BCF81', '#8D9EB6'];

export default ({ type }: { type: string }) => {
  const [dataSource, setDataSource] = useState<any[]>([]);

  const getData = (page: number) => {
    const classification = type === 'all' ? undefined : type;

    services.Physicalsign.getDifficultEventsTop10({
      page: page,
      count: 6,
      classification,
    }).then((res) => {
      if (res.code === 200) {
        setDataSource(res.data.items);
      }
    });
  };
  useEffect(() => {
    getData(1);
  }, [type]);

  return (
    <div className={styles.container}>
      <div className={styles.listWrap}>
        {dataSource.map((item: any, index: number) => {
          return (
            <Flex
              justify="space-between"
              align="center"
              className={styles.card}
              key={item.title}
            >
              <Flex gap={20}>
                <div className={styles.imgBox}>
                  <Image
                    className={styles.pic}
                    src={item.disposePicPath}
                    alt=""
                  />
                  <div
                    className={styles.tag}
                    style={{ background: tagColors[index] }}
                  >
                    TOP{index + 1}
                  </div>
                </div>
                <div>
                  <div className={styles.title}>{item.standardEventTitle}</div>
                  <div className={styles.desc}>{item.reportTime}</div>
                  <div className={styles.loc}>{item.address}</div>
                </div>
              </Flex>
              <Flex align="center" className={styles.comp}>
                <div className={styles.compAdr}>
                  <span className={styles.dot}></span>
                  {item.districtName}
                </div>
                <div className={styles.name}>责任单位：{item.deptName}</div>
              </Flex>
            </Flex>
          );
        })}
      </div>
    </div>
  );
};
