import { Descriptions } from 'antd';
import React, { CSSProperties, useMemo } from 'react';
import styles from './index.less';
interface PropsType {
  data: DistrictAPI.RealtimeIndexDTO;
}
const colorConfig: Record<
  string,
  {
    color: CSSProperties['color'];
    bg: string;
  }
> = {
  红色预警: {
    //红色风险
    color: 'rgb(221, 70, 70)',
    bg: 'rgba(221, 70, 70,0.4)',
  },
  橙色预警: {
    //橙色风险
    color: 'rgb(255, 111, 74)',
    bg: 'rgba(255, 111, 74,0.4)',
  },
  黄色预警: {
    //黄色风险
    color: 'rgb(255, 175, 74)',
    bg: 'rgba(255, 175, 74, 0.4)',
  },
  一般预警: {
    //一般风险
    color: 'rgb(70, 178, 255)',
    bg: 'rgba(70, 178, 255,0.4)',
  },
};
/** @name 气泡卡片 */
const PopoverCard: React.FC<PropsType> = (props) => {
  const { data } = props;
  const items = useMemo(() => {
    return [
      {
        key: '1',
        label: '桥梁位置：',
        children: data?.descroad,
      },

      {
        key: '6',
        label: '桥梁类型：',
        children: data?.dictgnlxName,
      },

      // {
      //   key: '3',
      //   label: '负责人：',
      //   children: data?.,
      // },
    ];
  }, [data]);
  return (
    <div className={styles.container}>
      <div className={styles.title}>{data?.name}</div>
      <div>
        <Descriptions
          items={items}
          column={1}
          labelStyle={{
            color: 'rgb(203, 237, 255)',
          }}
          contentStyle={{
            color: '#fff',
            // overflow: 'hidden',
            // whiteSpace: 'nowrap',
            // textOverflow: 'ellipsis',
            // width:200
          }}
        />
        <div
        className={styles.risklevel}
          style={{
            color: colorConfig[data?.risklevel]?.color,
            background: colorConfig[data?.risklevel]?.bg,
          }}
        >
          {data?.risklevel}
        </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 PopoverCard;
