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 LabelImgText from '@/components/LabelImgText';
import React, { CSSProperties } from 'react';
import styles from './index.less';
import { colorConfig } from '..';
interface PropsType {
  data: DistrictAPI.RealtimeIndexDTO;
}
/** @name 气泡卡片 */
const PopoverCardWarn: React.FC<PropsType> = (props) => {
  const { data } = props;
 
  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?.riskdescription}</div>
      <div className={styles.imgWarp}>
        <img src={data?.photosZWW} alt="" className={styles.img} />
        <div className={styles.tag}>
          <img
            src={colorConfig[data?.risklevel!]?.tag}
            alt=""
            style={{ width: 83, height: 30,  }}
          />
        </div>
        <div className={styles.tag1}>{data?.status}</div>
      </div>
      <div style={{ marginTop: 20 }}>
        <LabelImgText
          label={'预警时间：'}
          value={data?.risktime}
          valueStyle={valueStyle}
          labelStyle={labelStyle}
        />
        <LabelImgText
          label={'预警地点：'}
          value={data?.region_name}
          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;
