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 React, { CSSProperties } from 'react';
import styles from './index.less';
import LabelImgText from '@/components/LabelImgText';
interface PropsType {
  data: DistrictAPI.RealtimeIndexDTO;
}
/** @name 气泡卡片 */
const PopoverCardWarn: React.FC<PropsType> = (props) => {
  const { data } = props;
  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',
    },
  };
  console.log(data);
  const valueStyle = {
    color: '#fff',
    fontSize: 16,
  };
  const labelStyle = {
    color: '#CBEDFF',
    fontSize: 16,
  };
  return (
    <div className={styles.container}>
      <div className={styles.title}>{data?.event_type}</div>
      <div className={styles.imgWarp}>
        <img src={data?.photosZWW} alt="" className={styles.img} />
        <div
          className={styles.tag}
          style={{
            backgroundImage: `url(${colorConfig[data?.risklevel]?.bg})`,
            color: colorConfig[data?.risklevel]?.color,
          }}
        >
          {data?.risklevel}
        </div>
        <div className={styles.tag1}>
        {data?.current_status}
        </div>
      
      </div>
      <div style={{marginTop:20}}>

<LabelImgText
    label={'预警时间：'}
    value={data?.warning_time}
    valueStyle={valueStyle}
    labelStyle={labelStyle}
  />
  <LabelImgText
    label={'预警地点：'}
    value={data?.warning_context}
    valueStyle={valueStyle}
    labelStyle={labelStyle}
  />
</div>
<div className={styles.btnWarp}>
<div className={styles.checkBtn} data-event-key="detail">
    查看详情
  </div>
</div>

      <img
        src={require('@/assets/images/closeBtn.png')}
        alt=""
        className={styles.close}
        style={{ width: 28, height: 28 }}
        data-event-key="close"
      />
    </div>
  );
};

export default PopoverCardWarn;
