import { h, Component } from 'preact';

import CdnImage from '../cdn-image/cdn-image';

import styles from './css/index.less';


class MyInfoItem extends Component<any, any> {
  private currentValue = 0;
  componentDidMount() {
    // 组件挂载时初始化动画
    if (this.props.num) {
      this.animateNumber(parseInt(this.props.num));
    }
  }

  // 数字滚动动画方法
  animateNumber(target: number) {
    const step = Math.floor(target / 5) + 3; // 步长;
    const interval = setInterval(() => {
      if (this.currentValue < target) {
        const num = this.currentValue + step;
        this.currentValue = num > target ? target : num;
        this.forceUpdate();
      } else {
        clearInterval(interval); // 达到目标值后停止定时器
      }
    }, 100); // 每50毫秒执行一次
  }

  render() {
    const { avatar, num, title, pinyin, reverse, isEmpty } = this.props;
    // const avatar = "https://image-1251917893.file.myqcloud.com/Esports/pix/img/avatar.png";
    // const num = "58"
    // const title = "比赛奖励";
    // const pinyin = "BI SAI JIANG LI";
    const isShowNum = parseInt(this.props.num) > 0;
    return (
      <div className={`${styles['info-item']} ${reverse && styles['info-item-reverse']} ${isEmpty && styles['info-item-gray']} `}>
        <div className={styles['info-left']}>
          {
            !isShowNum && <div className={styles['info-num']}>{num}</div>
          }
          {
            isShowNum && <div className={styles['info-num']}>{this.currentValue}</div>
          }
          {
            avatar && (
            <div className={styles['info-avatar-box']}>
              <CdnImage
                className={styles['info-avatar']}
                src={avatar}
              />
              <div className={styles['avatar-border']}/>
            </div>
            )
          }
        </div>
        <div className={styles['info-right']}>
          <text className={`${styles['info-title']} ${avatar && styles['info-title-name']}`}>
            {title}
          </text>
          <div className={styles['info-pinyin']}>
            {pinyin}
          </div>
        </div>
      </div>
    );
  }
}

export default MyInfoItem;