import { Descriptions } from 'antd';
import React, { useMemo } from 'react';
import styles from './index.less';
interface PropsType {
  data: DistrictAPI.RealtimeIndexDTO;
}
/** @name 气泡卡片 */
const PopoverCard: React.FC<PropsType> = (props) => {
  const { data } = props;
  const items = useMemo(() => {
    return [
      {
        key: '1',
        label: '类型：',
        children: data?.czclx,
      },
      
      {
        key: '6',
        label: '本月处置量(万吨)：',
        children: data?.czl,
      },
      
      {
        key: '3',
        label: '管理单位：',
        children: data?.manageunitname,
      },
      {
        key: '2',
        label: '所在位置：',
        children: data?.address,
      },
      {
        key: '5',
        label: '建设时间：',
        children: data?.jcsscreatetime,
      },

      
      {
        key: '4',
        label: '最大处置量(万吨)：',
        children: data?.czcln,
      },
    ];
  }, [data]);
  return (
    <div className={styles.container}>
      <div className={styles.title}>{data?.czcmc}</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>

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

export default PopoverCard;
