import { useGlobalModalServices } from '@/pages/GlobalModalServices/provider';
import { getCqiStatusTexts } from '@/utils/ui';
import { CaretDownOutlined, CaretUpOutlined } from '@ant-design/icons';
import { Flex, Space } from 'antd';
import React from 'react';
import styles from './index.less';

interface PropsType {
  data: DistrictAPI.RealtimeIndexDTO;
}
/** @name 气泡卡片 */
const PopoverCard: React.FC<PropsType> = (props) => {
  const { data } = props;

  const { dispatch } = useGlobalModalServices();

  return (
    <div className={styles.container}>
      <Flex className={styles.popoverCard}>
        <div className={styles.leftBox}>
          <div className={styles.leftBox_title}>{data.objectName}</div>
          <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>
        <div className={styles.rightBox}>
          <div>{data?.desc}</div>
          <div>
            <Space>
              {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}
              </div>
            </Space>
          </div>
          <div>当前问题总数</div>
          <div>
            <span className={styles.rightValue}>{data?.eventCount}</span> 件
          </div>
          <div className={styles.checkBtn} data-event-key="detail">
            查看详情
          </div>
        </div>
      </Flex>
      <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;
