//警告风险通知
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 RiskWarn from '@/pages/SecurityServiceOverview/components/RiskWarn';
import services from '@/services';
import { DoubleRightOutlined } from '@ant-design/icons';
import { 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';
import BaseInfo from '@/pages/SecurityServiceOverview/components/BaseInfo';
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 [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 [detailModalOpt, setDetailModalOpt] = useState<{
      open: boolean;
      title: string;
      eventId: 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}>
      {riskLevel?.map((it) => (
        <Flex
          align="center"
          justify="space-between"
          className={styles.levelWrap}
          key={it.label}
          style={{ '--bg': it.color } as CSSProperties}
        >
          <span className={styles.name}>{it.label}</span>
          <span className={styles.num}>{it.num}</span>
        </Flex>
      ))}

      {eventData?.items?.map((it:any, index:number) => (
        <Flex
          className={styles.warnItem}
          justify="center"
          vertical
          key={index}
          style={
            {
              '--color': colorConfig[it?.riskLevelName]?.color,
              background: `url(${colorConfig[it?.riskLevelName]?.bg})`,
              backgroundSize: '100% 100%',
            } as CSSProperties
          }
          onClick={()=>{
            setDetailModalOpt({
              open: true,
              eventId: it?.asriskId,
              ...it,
            });
          }}
        >
          {colorConfig[it?.riskLevelName]?.icon && (
            <img
              src={require(`@/assets/images/SecurityServiceOverview/right/${
                colorConfig[it?.riskLevelName]?.icon
              }.png`)}
              className={styles.icon}
            />
          )}
          <div className={classNames(styles.title, 'textellipsis')}>
            {it?.eventType}
          </div>
          <Space align="start">
            <span className={classNames(styles.address, 'textellipsis')}>
              {it?.position}
            </span>
            <div
              className={styles.time}
              title={dayjs().diff(it?.warningTime, 'm') + '分钟前'}
            >
              {dayjs().diff(it?.warningTime, 'm')}分钟前
            </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={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 RiskNotice;
