import PageContent from '@/components/PageContent';
import PageTitle from '@/components/PageTitle';
import ScrollLoading from '@/components/ScrollLoading';
import { GetTokenFromUrl, UnityAction } from '@/utils/utils';
import { connect, history, useParams } from '@umijs/max';
import dayjs from 'dayjs';
import { useEffect, useState } from 'react';
import styles from './index.less';

function List(props) {
  const { loading, processList = [], dispatch } = props;
  const { projectId } = useParams();
  const [list, setList] = useState([]);
  const [curPagination, setCurPagination] = useState({
    pageSize: 50,
    currentPage: 1,
  });

  const defaultParam = {
    projectId: projectId,
    auto: 1,
    startDate: dayjs().subtract(10, 'day').format('YYYY-MM-DD 00:00:00'),
    endDate: dayjs().format('YYYY-MM-DD 23:59:59'),
    pageSize: 50,
    currentPage: 1,
  };

  const goToDetail = (record) => {
    UnityAction.sendMsg('reportDetail', '');
    history.push(
      `/self-inspection/detail/${projectId}/${
        record.Id
      }?JWT-TOKEN=${GetTokenFromUrl()}&eTime=${record.CreatedTime}`,
    );
  };

  useEffect(() => {
    queryData(1);
  }, []);

  const queryData = (currentPage) => {
    const params = { ...defaultParam, currentPage };
    dispatch({
      type: 'patrolArtificialRecord/queryPatrol',
      payload: params,
      callback: (data) => {
        setList([...list, ...data.list]);
        setCurPagination(data.pagination);
      },
    });
  };
  return (
    <PageContent closeable={false}>
      <PageTitle returnable>自检记录</PageTitle>
      <ScrollLoading
        loading={loading}
        pagination={curPagination}
        handleLoadData={queryData}
      >
        <div>
          {list.map((item) => (
            <div className={styles.item} onClick={() => goToDetail(item)}>
              {item.Status == 0 ? (
                <div className={`${styles.status}`}>正常</div>
              ) : (
                <div className={`${styles.status} ${styles.statusError}`}>
                  异常
                </div>
              )}
              <div className={styles.info}>
                <div className={styles.time}>
                  <i></i>自检时间：
                  {dayjs(item.CreatedTime).format('MM-DD HH:mm')}
                </div>
                <div className={styles.desc}>
                  <i></i>
                  发现异常
                  <span className={styles.number}>{item.Status}</span>
                  <span>项</span>
                </div>
              </div>
              <div className={styles.btn}></div>
            </div>
          ))}
        </div>
      </ScrollLoading>
    </PageContent>
  );
}

export default connect(({ patrolArtificialRecord, loading }) => ({
  routeInfoList: patrolArtificialRecord.routeInfoList,
  loading: loading.models.patrolArtificialRecord,
  processList: patrolArtificialRecord.processList,
}))(List);