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 { joinPictureHttp } from '@/utils/comm';
import React, { CSSProperties } from 'react';
import styles from './index.less';
interface PropsType {
  data: DistrictAPI.RealtimeIndexDTO;
}
/** @name 气泡卡片 */
const PopoverCardKnotty: 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} title={data?.standardEventTitle}>
        {data?.standardEventTitle || '道路交通设施'}
      </div>
      <div className={styles.imgWarp}>
        <img
          src={
            joinPictureHttp(data?.disposePicPath) ||
            joinPictureHttp(
              '/xindu/2024/12/13/191814240892473fb01eb4a444eb2470_2e779a59f7fd57c98dc957ef0479623.jpg',
            )
          }
          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?.caseStatusText}</div>
      </div>
      <div style={{ marginTop: 20 }}>
        <LabelImgText
          label={'上报时间：'}
          value={data?.reportTime || '2024-05-28 10:20:20'}
          valueStyle={valueStyle}
          labelStyle={labelStyle}
        />
        <LabelImgText
          label={'发生位置：'}
          value={data?.address || '锦江区牛市口街道办'}
          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 PopoverCardKnotty;
