import { getCqiStatusStyle, getCqiStatusTexts } from '@/utils/ui';
import { CaretDownOutlined, CaretUpOutlined } from '@ant-design/icons';
import dayjs from 'dayjs';
import React, { useMemo } from 'react';
import styles from './index.less';
interface PropsType {
  data: DistrictAPI.RealtimeIndexDTO;
}
/** @name 气泡卡片 */
const PopoverCardArea: React.FC<PropsType> = (props) => {
  const { data } = props;

  const valueStyle = {
    color: '#fff',
    fontSize: 16,
  };
  const labelStyle = {
    color: '#CBEDFF',
    fontSize: 16,
  };
  const cards = useMemo(() => {
    console.log(data?.currentIndex?.indexs);

    return [
      {
        name: '安全',
        value:
          data?.currentIndex?.indexs?.find((item: any) => item.name === '安全')
            ?.value ?? 0,
        ...getCqiStatusStyle(
          data?.currentIndex?.indexs?.find((item: any) => item.name === '安全')
            ?.value,
        ),
      },
      {
        name: '整洁',
        value:
          data?.currentIndex?.indexs?.find((item: any) => item.name === '整洁')
            ?.value ?? 0,
        ...getCqiStatusStyle(
          data?.currentIndex?.indexs?.find((item: any) => item.name === '整洁')
            ?.value,
        ),
      },
      {
        name: '有序',
        value:
          data?.currentIndex?.indexs?.find((item: any) => item.name === '有序')
            ?.value ?? 0,
        ...getCqiStatusStyle(
          data?.currentIndex?.indexs?.find((item: any) => item.name === '有序')
            ?.value,
        ),
      },
      {
        name: '便民',
        value:
          data?.currentIndex?.indexs?.find((item: any) => item.name === '便民')
            ?.value ?? 0,
        ...getCqiStatusStyle(
          data?.currentIndex?.indexs?.find((item: any) => item.name === '便民')
            ?.value,
        ),
      },
      {
        name: '美观',
        value:
          data?.currentIndex?.indexs?.find((item: any) => item.name === '美观')
            ?.value ?? 0,
        ...getCqiStatusStyle(
          data?.currentIndex?.indexs?.find((item: any) => item.name === '美观')
            ?.value,
        ),
      },
    ];
  }, [data]);

  return (
    <div className={styles.container}>
      <div className={styles.title}>{data?.objectName}</div>
      <div className={styles.header}>
        <div className={styles.cqiWarp}>
          <div
            className={styles.cqi}
            style={{ color: getCqiStatusStyle(data?.currentIndex?.cqi)?.color }}
          >
            {data?.currentIndex?.cqi}
            <span
              className={styles.tag}
              style={{
                background: getCqiStatusStyle(data?.currentIndex?.cqi)
                  ?.background,
              }}
            >
              {getCqiStatusTexts(data?.currentIndex?.cqi)?.text}
            </span>
          </div>
        </div>

        <div className={styles.compare}>
          <span className={styles.tips}>
            较{dayjs().diff(data?.indexTime, 'h')}小时前
          </span>
          <div style={{ display: 'flex' }}>
            {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>
          </div>
        </div>
      </div>

      <div> {getCqiStatusTexts(data?.currentIndex?.cqi)?.desc}</div>

      <div className={styles.cardSection}>
        {cards.map((item, index) => (
          <div
            key={index}
            className={styles.card}
            style={{ background: item.background }}
          >
            <div className={styles.name}>{item.name}</div>
            <div className={styles.value} style={{ color: item.color }}>
              {item.value}
            </div>
          </div>
        ))}
      </div>
      <div className={styles.fx}>
        <div className={styles.countWarp}>
          <span>安全风险</span>
          <div className={styles.count}>15</div>
          <span>个</span>
        </div>
        <div className={styles.countWarp}>
          <span>城市问题</span>
          <div className={styles.count}>78</div>
          <span>个</span>
        </div>
      </div>
      <div className={styles.btnWarp}>
        <div className={styles.checkBtn} data-event-key="detail">
          查看详情
        </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 PopoverCardArea;
