import React, { useMemo } from 'react';
import classNames from 'classnames';
import styles from './index.less';
import { getStatusByScore, StatusType, STATUS_COLORS } from '../DimensionCard';

// 导入资源
import clockDot from '@/assets/images/V-2504/cqi-clock-dot.png';
import clockPointer from '@/assets/images/V-2504/cqi-clock-pointer.png';
import CountUp from 'react-countup';

// 不同状态的资源
const getStatusResources = (status: StatusType) => {
  const statusIndex = {
    ideal: 1,
    standard: 2,
    warning: 3,
    emergency: 4,
  }[status];

  return {
    clockBg: require(`@/assets/images/V-2504/cqi-clock-bg-${statusIndex}.png`),
    statusBg: require(`@/assets/images/V-2504/cqi-clock-status-${statusIndex}.png`),
  };
};

interface CQIGaugeProps {
  score: number;
  change: number; // 变化值，正数表示上升，负数表示下降
  compareHours: number; // 比较的小时数，如2表示"较2小时前"
}

const CQIGauge: React.FC<CQIGaugeProps> = ({ score, change, compareHours }) => {
  // 计算状态
  const status = getStatusByScore(score);
  const statusColor = STATUS_COLORS[status];
  const resources = getStatusResources(status);
  
  // 计算指针旋转角度（分数0-100对应角度0-180度）
  const pointerRotation = useMemo(() => {
    // 将分数从0-100映射到0-180度（从9点钟方向开始顺时针旋转）
    const angle = (score / 100) * 180;
    // 因为指针默认指向12点钟方向（0度），所以顺时针旋转即可
    return angle - 90;
  }, [score]);

  // 计算指示点位置
  const dotPosition = useMemo(() => {
    // 将角度转换为弧度
    const radian = (pointerRotation) * (Math.PI / 180);
    // 圆的半径
    const radius = 92 - 10; // 减去指示点的一半
    
    // 计算指示点的x和y坐标（相对于圆心）
    const x = Math.sin(radian) * radius;
    const y = -Math.cos(radian) * radius; // 负号是因为Y轴向下为正
    
    return { x, y };
  }, [pointerRotation]);
  
  return (
    <div className={styles.gaugeContainer}>
      <div className={styles.clockWrapper}>
        <img src={resources.clockBg} className={styles.clockBg} alt="背景" />
        
        {/* 指针 */}
        <div className={styles.pointerWrapper}>
          <img 
            src={clockPointer} 
            className={styles.clockPointer} 
            alt="指针"
            style={{ 
              transform: `rotate(${pointerRotation}deg)`,
              transition: 'transform 0.8s ease-in-out' 
            }}
            // style={{ transform: `rotate(${pointerRotation}deg)` }}
          />
        </div>
        
        {/* 指示点 */}
        <div
          className={styles.dotWrapper}
          style={{ 
            transform: `translate(${dotPosition.x}px, ${dotPosition.y}px)`,
            // transition: 'transform 0.8s ease-in-out' 
            // transform: `rotate(${pointerRotation}deg) translate(0, -82px)`,
            // transformOrigin: 'center 82px',
            // transition: 'transform 0.8s ease-in-out'
          }}
        >
          <img 
            src={clockDot}
            className={styles.clockDot}
            alt="指示点"
          />
        </div>
      </div>
      
      {/* 分数 */}
      <div className={styles.scoreValue} style={{ color: statusColor }}>
        {/* {score.toFixed(2)} */}
        <CountUp 
          end={score} 
          decimals={2} 
          duration={1}
          preserveValue 
        />
      </div>
      
      {/* 状态标签 */}
      <div className={styles.statusWrapper}>
        <img src={resources.statusBg} className={styles.statusBg} alt="状态" />
        {/* <div className={styles.statusText}>
          {status === 'ideal' && '理想态'}
          {status === 'standard' && '标准态'}
          {status === 'warning' && '预警态'}
          {status === 'emergency' && '应急态'}
        </div> */}
      </div>
      
      {/* 变化状态 */}
      <div className={styles.changeWrapper}>
        <span className={styles.compareText}>较{compareHours}小时前</span>
        <img 
          src={change >= 0 
            ? require('@/assets/images/V-2504/cqi-clock-up.png') 
            : require('@/assets/images/V-2504/cqi-clock-down.png')} 
          className={styles.changeIcon} 
          alt={change >= 0 ? "上升" : "下降"} 
        />
        <span className={styles.changeValue}>{Math.abs(change).toFixed(2)}</span>
      </div>
    </div>
  );
};

export default CQIGauge; 