import Tabs from '@/components/Tabs';

import services from '@/services';
import { joinPictureHttp } from '@/utils/comm';
import { useModel } from '@umijs/max';
import { useRequest } from 'ahooks';
import { Flex, Image, List, Spin } from 'antd';
import { useMemo, useState } from 'react';
import InfiniteScroll from 'react-infinite-scroll-component';
import { useGlobalModalServices } from '../../provider';
import styles from './index.less';

const CgftEvent = (props: any) => {
  const {
    searchTime,
    status,
    dueStatus,
    industry,
    objectId,
    highIncidenceTypeId,
  } = props;
  const { initialState } = useModel('@@initialState');
  const { areaId } = initialState;
  const { dispatch } = useGlobalModalServices();

  const [eventStatus, setEventStatus] = useState(status);
  const [overdueStatus, setOverdueStatus] = useState(dueStatus);
  //事件列表
  const [listData, setListData] = useState<any>({
    items: [],
    loading: true,
    total: 0,
    page: 1,
    hasNext: false,
  });

  const [fetchParams, setFetchParams] = useState<any>({
    page: 1,
    count: 10,
    industry: industry || '02',
    objectId: objectId || areaId,
    highIncidenceTypeId: highIncidenceTypeId,
  });
  console.log(industry);

 const{loading}= useRequest(
    () =>
      services.Physicalsign.getNormalEventList({
        ...fetchParams,
        ...searchTime,
        eventStatus,
        overdueStatus,
        industry: industry || '02',
      }),
    {
      refreshDeps: [fetchParams, eventStatus, overdueStatus],
      onSuccess: (res) => {
        const data = res?.data?.items;
        const list = [...listData?.items, ...data];

        setListData({
          hasNext: res?.data?.hasNext,
          items: list,
        });
      },
    },
  );
  // useRequest(
  //   () =>
  //     services.Physicalsign.getHighIncidenceTypeRoadEventList({
  //       ...fetchParams,
  //       ...searchTime,
  //       eventStatus,
  //       overdueStatus,
  //       industry: industry || '02',
  //     }),
  //   {
  //     refreshDeps: [fetchParams, eventStatus, overdueStatus],
  //     onSuccess: (res) => {
  //       const data = res?.data?.items;
  //       const list = [...listData?.items, ...data];

  //       setListData({
  //         hasNext: res?.data?.hasNext,
  //         items: list,
  //       });
  //     },
  //   },
  // );

  const { data: count } = useRequest(
    () =>
      services.Physicalsign.getOverdueStatusCount({
        ...searchTime,
        eventStatus: '处置中',
        industry: industry || '02',
        objectId: objectId || areaId,
      }),
    {
      refreshDeps: [eventStatus],
      ready: eventStatus == '处置中',
    },
  );

  const overdueStatusList = useMemo(() => {
    return [
      {
        key: '0',
        label: `时限正常${count?.data?.[0].onTimeCount ?? 0}`,
      },
      {
        key: '1',
        label: `超时${count?.data?.[0].overdueCount ?? 0}`,
      },
    ];
  }, [count]);
  

  return (
    <div className={styles.wrap}>
      <div className={styles.searchWarp}>
        <Tabs
          style={{
            background: 'transparent',
            height: '30px',
          }}
          defaultValue={status}
          itemStyle={{
            borderRadius: '25px',
            background: 'rgba(7, 50, 93, 0.8)',
            fontSize: '16px',
            marginLeft: 8,
          }}
          onChange={(e) => {
            fetchParams.page = 1;
            setFetchParams({ ...fetchParams });
            setListData({
              items: [],
              hasNext: false,
            });
            setEventStatus(e === 'all' ? undefined : e);
            if (e === '处置中') {
              setOverdueStatus('0');
            } else {
              setOverdueStatus(undefined);
            }
          }}
          itemkey={'key'}
          items={[
            {
              key: 'all',
              label: '全部',
            },
            {
              key: '处置中',
              label: '处置中',
            },
            {
              key: '结案',
              label: '已结案',
            },
          ]}
        />
        {eventStatus === '处置中' ? (
          <Tabs
            style={{
              background: 'transparent',
              height: '30px',
            }}
            itemStyle={{
              borderRadius: '25px',
              background: 'rgba(7, 50, 93, 0.8)',
              fontSize: '16px',
              marginLeft: 8,
            }}
            onChange={(e) => {
              setOverdueStatus(e);
              setListData({
                items: [],
                hasNext: false,
              });
            }}
            itemkey={'key'}
            items={overdueStatusList}
          />
        ) : null}
      </div>
      <div id={'scrollableDiv1'}>
        <InfiniteScroll
          style={{
            height: 650,
            overflow: 'auto',
          }}
          height={650}
          dataLength={listData.items?.length ?? 0}
          hasMore={listData?.hasNext}
          scrollableTarget={'scrollableDiv1'}
          loader={
            <div style={{ textAlign: 'center' }}>
              <Spin />
            </div>
          }
          next={() => {
            console.log('222');
            fetchParams.page++;
            setFetchParams({ ...fetchParams });
          }}
        >
          <List
            grid={{ column: 4, gutter: 20 }}
            dataSource={listData.items}
            loading={loading}
            renderItem={(item: any) => (
              <List.Item
                key={item?.eventId}
                onClick={() => {
                  dispatch.push('EventDetail', {
                    props: {
                      eventId: item?.eventId,
                    },
                    w: 'fit-content',
                  });
                }}
              >
                <div className={styles.cardWrap}>
                  <Image
                    src={joinPictureHttp(item?.disposePicPath)}
                    width={'100%'}
                    height={'160px'}
                    style={{ objectFit: 'cover' }}
                  />
                  <div className={styles.info} onClick={() => {}}>
                    <p className={styles.cardText}>
                      {item?.standardEventTitle ?? '无标题'}
                    </p>
                    <Flex align="center">
                      <span className={styles.status}>
                        {item?.caseStatusName}
                      </span>
                      {(item.collectionModeName || item.eventTypeName) && (
                        <span className={styles.type}>
                          {item.collectionModeName || item.eventTypeName}
                        </span>
                      )}
                    </Flex>
                    <div>
                      <span>上报时间：</span>
                      <span>{item?.reportTime}</span>
                    </div>
                    <div className={styles.textellipsis}>
                      <span>发生位置：</span>
                      <span>{item?.address}</span>
                    </div>
                  </div>
                </div>
              </List.Item>
            )}
          />
        </InfiniteScroll>
      </div>

      {/* <Modal
        open={detailModalOpt?.open}
        title={detailModalOpt?.title}
        onCancel={() =>
          setDetailModalOpt({ open: false, title: '', eventId: '' })
        }
        width={'fit-content'}
        height={950}
      >
        <EventDetail eventId={detailModalOpt?.eventId} />
      </Modal> */}
    </div>
  );
};

export default CgftEvent;
