import { getCqiStatusTexts } from '@/utils/ui';
import { CaretDownOutlined, CaretUpOutlined } from '@ant-design/icons';
import React from 'react';
import styles from './index.less';

interface PropsType {
  data: DistrictAPI.RealtimeIndexDTO;
}
/** @name 气泡卡片 */
const PopoverCard: React.FC<PropsType> = (props) => {
  const { data } = props;
  return (
    <div className={styles.container}>
      <div className={styles.bg}></div>
      <div className={styles.topBox}>
        <div className={styles.leftBox_title}>{data.objectName}</div>
        <div className={styles.flex}>
          <div className={styles.leftBox_cqi}>实时CQI</div>
          <div className={styles.leftBox_value}>
            {Number(data?.qualitySign)}
          </div>
          <div className={styles.leftBox_status}>
            {getCqiStatusTexts(Number(data?.qualitySign))?.desc}
          </div>
          <div className={styles.status}>
            <div>较5分钟前</div>
            {data.status === 'up' ? (
              <CaretUpOutlined style={{ color: 'rgb(9, 195, 92)' }} />
            ) : (
              <CaretDownOutlined style={{ color: 'rgb(255, 71, 71)' }} />
            )}
            <div
              className={styles.rightValue}
              style={{
                color:
                  data?.status === 'up'
                    ? 'rgb(9, 195, 92)'
                    : 'rgb(255, 71, 71)',
              }}
            >
              {data?.diffValue ?? 0}
            </div>
          </div>
        </div>
      </div>
      <div className={styles.bottomBox}>
        <div className={styles.info}>
          <div className={styles.item}>
            <div className={styles.infoFlex}>
              <div className={styles.value}>{data?.eventCount ?? 0}</div>
              <div>件</div>
            </div>
            <div>当前问题总数</div>
          </div>
          <div>
            <div className={styles.infoFlex}>
              <div className={styles.value}>0</div>
              <div>件</div>
            </div>
            <div>安全风险</div>
          </div>
        </div>

        <div className={styles.checkBtn} data-event-key="detail">
          查看详情
        </div>
      </div>

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

export default PopoverCard;
