//警告风险通知
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 { 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;
  }
> = {
  红色预警: {
    //红色风险
    color: '#FFBCBC',
    bg: redBg,
    icon: 'redIcon',
  },
  橙色预警: {
    //橙色风险
    color: '#FDDFCE',
    bg: orangeBg,
    icon: 'orangeIcon',
  },
  黄色预警: {
    //黄色风险
    color: '#FFE892',
    bg: yellowBg,
    icon: 'yellowIcon',
  },
  一般预警: {
    //一般风险
    color: '#BFE4FF',
    bg: blueBg,
    icon: 'blueIcon',
  },
};
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: eventData } = useRequest(() =>
    services.CityRiskApi.getEventPage({ page: 1, count: 5 }),
  );
  const { data } = useRequest(
    () =>
      services.DataBase.getSjdzInfoData({
        typeCode: 'zzcc-aq-yjxx',
        data: {
          regionCode: selectAreaId,
          pageNo: 1,
          pageSize: 5,
        },
      }),
    {
      refreshDeps: [selectAreaId],
    },
  );
  // console.log(data);

  // 事件详情弹窗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: levelData?.majorRiskTotal,
      },
      {
        label: '橙色风险',
        color: '#FF6F4A',
        num: levelData?.significantRiskTotal,
      },
      {
        label: '黄色风险',
        color: '#FFAF4A',
        num: levelData?.generalRiskTotal,
      },
      {
        label: '一般风险',
        color: '#46B2FF',
        num: levelData?.ybfxRiskTotal,
      },
    ];
  }, [levelData]);

  /** 标题渲染 */
  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 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}
          >
            <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={dayjs().diff(it?.risktime, 'h') + '小时前'}
            >
              {dayjs().diff(it?.risktime, 'h')}小时前
            </div>
          </Space>
        </Flex>
      ))}
      <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?.position,
                eventType: val?.event_type,
                riskLevelName: val?.risklevel,
              });
            }}
          />
        )}
      </Modal>
    </div>
  );
};
export default RiskNotice;
