//警告风险通知
import blueBg from '@/assets/images/SecurityServiceOverview/right/blueBg.png';
import orangeBg from '@/assets/images/SecurityServiceOverview/right/orangeBg.png';
import redBg from '@/assets/images/SecurityServiceOverview/right/redBg.png';
import yellowBg from '@/assets/images/SecurityServiceOverview/right/yellowBg.png';
import Modal from '@/components/HncyModal';
import BaseInfo from '@/pages/SecurityServiceOverview/components/BaseInfo';
import RiskWarn from '@/pages/SecurityServiceOverview/components/RiskWarn';
import services from '@/services';
import { getTime } from '@/utils/ui';
import { DoubleRightOutlined } from '@ant-design/icons';
import { useModel, useRequest } from '@umijs/max';
import { Flex, Space } from 'antd';
import classNames from 'classnames';
import dayjs from 'dayjs';
import { CSSProperties, useMemo, useState } from 'react';
import styles from './index.less';
type RiskLevelDto = {
  label: string;
  color: CSSProperties['color'];
  num: number;
};
export const colorConfig: Record<
  string,
  {
    color: CSSProperties['color'];
    bg: string;
    icon: string;
    tag?: string;
  }
> = {
  红色预警: {
    //红色风险
    color: 'rgb(255, 227, 227)',
    bg: redBg,
    icon: 'redIcon',
    tag: require('@/assets/images/SecurityServiceOverview/dtyjtag1.png'),
  },
  橙色预警: {
    //橙色风险
    color: 'rgb(255, 249, 246)',
    bg: orangeBg,
    icon: 'orangeIcon',
    tag: require('@/assets/images/SecurityServiceOverview/dtyjtag2.png'),
  },
  黄色预警: {
    //黄色风险
    color: 'rgb(255, 250, 233)',
    bg: yellowBg,
    icon: 'yellowIcon',
    tag: require('@/assets/images/SecurityServiceOverview/dtyjtag3.png'),
  },
  一般预警: {
    //一般风险
    color: 'rgb(220, 241, 255)',
    bg: blueBg,
    icon: 'blueIcon',
    tag: require('@/assets/images/SecurityServiceOverview/dtyjtag4.png'),
  },
};
const RiskNotice: React.FC = () => {
  const { selectAreaId } = useModel('safetyAreaId');
  const [riskModalOpt, setRiskModalOpt] = useState<{
    open: boolean;
    title: string;
  }>({
    open: false,
    title: '风险预警列表',
  });
  const { data: levelData } = useRequest(
    services.CityRiskApi.getStatisticalRiskLevel,
  );
  //预警数
  const { data: warnCoutnData } = useRequest(
    () =>
      services.DataBase.getSjdzInfoData({
        typeCode: 'zzcc-aq-yjdjtj',
        data: {
          regionCode: selectAreaId,
        },
      }),
    {
      refreshDeps: [selectAreaId],
    },
  );
  //前五个预警
  const { data } = useRequest(
    () =>
      services.DataBase.getSjdzInfoData({
        typeCode: 'zzcc-aq-yjxx',
        data: {
          regionCode: selectAreaId,
          pageNo: 0,
          pageSize: 5,
        },
      }),
    {
      refreshDeps: [selectAreaId],
    },
  );

  // 事件详情弹窗zzcc-aq-yjxx
  const [detailModalOpt, setDetailModalOpt] = useState<{
    open: boolean;
    title: string;
    eventId: string;
    eventType?: string | undefined;
    riskLevelName?: string;
    position?: string;
  }>({
    open: false,
    title: '',
    eventId: '',
  });
  const riskLevel: RiskLevelDto[] = useMemo(() => {
    return [
      {
        label: '红色风险',
        color: '#DD4646',
        num:
          warnCoutnData?.data?.records?.[0]?.stat?.find(
            (item) => item?.risklevel === '红色预警',
          )?.num || '--',
        key: '3',
      },
      {
        label: '橙色风险',
        color: '#FF6F4A',
        num:
          warnCoutnData?.data?.records?.[0]?.stat?.find(
            (item) => item?.risklevel === '橙色预警',
          )?.num || '--',
        key: '4',
      },
      {
        label: '黄色风险',
        color: '#FFAF4A',

        num:
          warnCoutnData?.data?.records?.[0]?.stat?.find(
            (item) => item?.risklevel === '黄色预警',
          )?.num || '--',
        key: '2',
      },
      {
        label: '一般风险',
        color: '#46B2FF',
        num:
          warnCoutnData?.data?.records?.[0]?.stat?.find(
            (item) => item?.risklevel === '一般预警',
          )?.num || '--',
        key: '1',
      },
    ];
  }, [warnCoutnData]);

  /** 标题渲染 */
  const titleRender = () => {
    return (
      <Flex align="center" className={styles.modalTitle}>
        <div className={styles.title}>{detailModalOpt?.riskdescription}</div>
        <img
          src={colorConfig[detailModalOpt?.riskLevelName!]?.tag}
          alt=""
          style={{ width: 136, height: 30, marginLeft: 36, marginRight: 13 }}
        />

        <span className={styles.type}>
          {detailModalOpt?.industry_name_dl}-{detailModalOpt?.name}
        </span>
      </Flex>
    );
  };

  return (
    <div className={styles.riskwrap}>
      <div className={styles.cardTitle}>风险预警</div>
      <div className={styles.levelCont}>
        {riskLevel?.map((it) => (
          <div
            className={styles.levelWrap}
            key={it.label}
            style={{ '--bg': it.color } as CSSProperties}
            onClick={() => {
              setRiskModalOpt({
                open: true,
                title: '风险预警列表',
                params:{
                  risklevelid: it?.key,
                }
              
              });
            }}
          >
            <span className={styles.name}>{it.label}</span>
            <div className={styles.num}>{it.num}</div>
          </div>
        ))}
      </div>

      {data?.data?.records?.map((it: any, index: number) => (
        <Flex
          className={styles.warnItem}
          justify="center"
          vertical
          key={index}
          style={
            {
              '--color': colorConfig[it?.risklevel]?.color,
              background: `url(${colorConfig[it?.risklevel]?.bg})`,
              backgroundSize: '100% 100%',
            } as CSSProperties
          }
          onClick={() => {
            setDetailModalOpt({
              open: true,
              eventId: it?.riskid,

              ...it,
            });
          }}
        >
          {colorConfig[it?.risklevel]?.icon && (
            <img
              src={require(`@/assets/images/SecurityServiceOverview/right/${
                colorConfig[it?.risklevel]?.icon
              }.png`)}
              className={styles.icon}
            />
          )}
          <div className={classNames(styles.title, 'textellipsis')}>
            {it?.riskdescription}
          </div>
          <Space align="start">
            <span className={classNames(styles.address, 'textellipsis')}>
              {it?.region_name}
            </span>
            <div
              className={styles.time}
              title={getTime(dayjs().diff(it?.risktime, 's')) + '小时前'}
            >
              {getTime(dayjs().diff(it?.risktime, 's'))}前
            </div>
          </Space>
        </Flex>
      ))}
      {data?.data?.records?.length && (
        <p
          className={styles.more}
          onClick={() => {
            setRiskModalOpt({ open: true, title: '风险预警列表' });
          }}
        >
          查看全部
          <DoubleRightOutlined />
        </p>
      )}
      {/**风险预警 */}
      <Modal
        open={riskModalOpt?.open}
        title={riskModalOpt?.title}
        onCancel={() => setRiskModalOpt({ open: false, title: '' })}
        width={1500}
        height={846}
      >
        <RiskWarn riskModalOpt={riskModalOpt} />
      </Modal>
      {/* 事件详情 */}
      <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?.region_name,

                riskLevelName: val?.risklevel,
              });
            }}
          />
        )}
      </Modal>
    </div>
  );
};
export default RiskNotice;
