import Modal from '@/components/HncyModal';

import services from '@/services';
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 = {
    page: 1,
    count: 10,
  };
  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 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: true,
          });
          ref?.current?.resPage();
          setFetchParams({ ...fetchParams, page: 1, ...e });
        }}
      />
      <EventPicList
        ref={ref}
        listData={listData}
        listHeight={630}
        setParams={(data) => {
          console.log(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={1144}
        height={740}
      >
        {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;
