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 getStatus = (val: number) => {
    if (val > 95) {
      return {
        bg: 'rgb(87, 239, 88)',
        desc: '运行良好',
      };
    }
    if (val < 95 && val > 85) {
      return {
        bg: '#0680f4',
        desc: '运行基本正常',
      };
    }
    if (val < 85) {
      return {
        bg: '#ffa250',
        desc: '运行随时会出现问题',
      };
    }
  };
  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}>
            {getStatus(Number(data.qualitySign))?.desc}
          </div>
        </div>
        <div className={styles.rightBox}>
          <div>较5分钟前</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)',
                }}
              >
                {Math.abs(data.diffValue)}%
              </div>
            </Space>
          </div>
          <div>当前问题总数</div>
          <div>
            <span className={styles.rightValue}>{data.eventCount}</span> 件
          </div>
          <div className={styles.checkBtn}>查看详情</div>
        </div>
      </Flex>
    </div>
  );
};

export default PopoverCard;
