import Modal from '@/components/HncyModal';

import services from '@/services';
import { useModel } from '@umijs/max';
import { useRequest } from 'ahooks';
import { Flex } from 'antd';
import { useRef, useState } from 'react';
import { colorConfig } from '../../SecurityState/RightLayout/RiskNotice';
import BaseInfo from '../BaseInfo';
import EventPicList from '../EventPicList';
import styles from './index.less';
import TopSearch from './TopSearch';
const RiskWarn = ({ riskModalOpt }: { riskModalOpt: any }) => {
  const ref = useRef();
  // 事件详情弹窗
  const [detailModalOpt, setDetailModalOpt] = useState<{
    open: boolean;
    title: string;
    eventId: string;
  }>({
    open: false,
    title: '',
    eventId: '',
  });
  const params = {
    pageNo: 1,
    pageSize: 10,
  };
  const { selectAreaId } = useModel('safetyAreaId');
  const [listData, setListData] = useState<any>({
    items: [],
    loading: true,
    total: 0,
    page: 1,
    hasNext: false,
  });
  const [fetchParams, setFetchParams] = useState<any>(params);
  // const { data: eventData } = useRequest(
  //   () => services.CityRiskApi.getEventPage(fetchParams),
  //   {
  //     refreshDeps: [fetchParams],
  //     onSuccess: (res) => {
  //       console.log(res);

  //       setListData({
  //         ...res?.data,
  //         items: [
  //           ...listData.items,
  //           ...res?.data?.items?.map((item: any) => ({
  //             ...item,
  //             standardEventTitle: item?.eventType,
  //             caseStatusText: item?.currentStatus,
  //             reportTime: item?.warningTime,
  //             collectionModeName: item?.sourceType,
  //           })),
  //         ],
  //       });
  //     },
  //   },
  // );
  const { data } = useRequest(
    () =>
      services.DataBase.getSjdzInfoData({
        typeCode: 'zzcc-aq-yjxx',
        data: {
          regionCode: selectAreaId,

          ...fetchParams,
        },
      }),
    {
      refreshDeps: [selectAreaId, fetchParams],
      onSuccess: (res) => {
        console.log(res?.data?.data);
        const data = res?.data?.data;
        const list = [
          ...listData?.items,
          ...data?.records?.map((item: any) => ({
            ...item,
            standardEventTitle: item?.riskdescription,
            caseStatusText: item?.status,
            reportTime: item?.risktime,
            collectionModeName: item?.sourceType,
            position:item?.region_name+item?.name
          })),
        ];
      
        
        setListData({
          hasNext: list?.length < data?.page?.total,
          items: list,
        });
      },
    },
  );
  /** 标题渲染 */
  const titleRender = () => {
    return (
      <Flex align="center" className={styles.modalTitle}>
        <div className={styles.title}>{detailModalOpt?.eventType}</div>
        <span
          className={styles.tag}
          style={{
            backgroundImage: `url(${
              colorConfig[detailModalOpt?.riskLevelName]?.bg
            })`,
            color: colorConfig[detailModalOpt?.riskLevelName]?.color,
          }}
        >
          {detailModalOpt?.riskLevelName}
        </span>
        <span className={styles.type}>{detailModalOpt?.position}</span>
      </Flex>
    );
  };
  return (
    <div>
      <TopSearch
        onSearch={(e) => {
          setListData({
            items: [],
            loading: true,
            total: 0,
            page: 1,
            hasNext: false,
          });
          ref?.current?.resPage();
          setFetchParams({ ...fetchParams, page: 1, ...e });
        }}
      />
      <EventPicList
        ref={ref}
        listData={listData}
        listHeight={630}
        setParams={(data) => {
          setFetchParams({ ...fetchParams, page: data.current.page });
        }}
        handleDetail={(details) => {
          setDetailModalOpt({
            open: true,
            eventId: details?.asriskId,
            ...details,
          });
        }}
      />

      {/* 事件详情 */}
      <Modal
        open={detailModalOpt?.open}
        titleRender={titleRender}
        onCancel={() => {
          setDetailModalOpt({
            open: false,
            title: '事件详情',
            eventId: '',
          });
        }}
        width={2650}
        height={900}
      >
        {detailModalOpt?.open && (
          <BaseInfo
            eventId={detailModalOpt?.eventId}
            detail={detailModalOpt}
            onChangeOpt={(val) => {
              console.log(val);

              setDetailModalOpt({
                ...detailModalOpt,
                position: val?.position,
                eventType: val?.event_type,
                riskLevelName: val?.risklevel,
              });
            }}
          />
        )}
      </Modal>
    </div>
  );
};
export default RiskWarn;
