import { h, CSSProperties } from 'preact';

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

import styles from './css/index.less';
const HistoryItem = (props: any) => {
  const overflowStyle: CSSProperties = {
    overflowStyle: 'none',
  };
  // 从 props 中解构参数，不提供默认值
  const {
    historyItem, // 历史赛事数据
    onClick, // 点击回调
  } = props;

  // 根据状态码获取样式类名
  const getStatusClass = (item: any = {}) => {
    if (item.showSuccessBg) {
      return styles['pmg-status-up'];
    }

    if (item.showFailBg) {
      return styles['pmg-status-down'];
    }

    return '';
  };

  // 根据状态码获取图标类名
  const getStatusIcon = (item: any = {}) => {
    if (item.showChampionIcon) { // 冠军
      return `${styles['pmg-status-img']} ${styles['pmg-status-champion']}`;
    }
    return `${styles['pmg-status-img']} ${styles['pmg-status-people']}`;
  };

  return (
    <div
      className={styles['pmg-history-item']}
      onClick={onClick}
    >
      <div className={`${styles['pmg-history-status-box']} ${getStatusClass(historyItem)}`}>
        <div className={getStatusIcon(historyItem)}/>
        <div className={styles['pmg-history-status']}>
          <text className={styles['pmg-history-status-text']}>{historyItem.statusText}</text>
        </div>
        <div className={styles['pmg-match-name']}>
          <text className={styles['pmg-match-name-text']}>{historyItem.matchName}</text>
        </div>
      </div>
      <div className={styles['pmg-team-info-box']}>
        <div className={styles['pmg-team-info']}>
          <div className={styles['pmg-team-name']}>
            <div className={styles['pmg-team-name-text-box']}>
              <text className={styles['pmg-team-name-text']}>{historyItem.teamName}</text>
            </div>
            <div className={styles['pmg-icon-back']}/>
          </div>
          <div className={styles['pmg-match-time']}>
            <div className={styles['pmg-icon-time']}/>
            <text className={styles['pmg-match-time-text']}>{historyItem.matchTime}</text>
          </div>
        </div>
        <div
          className={styles['pmg-team-list']}
          style={overflowStyle}
        >
          {historyItem.teamMember.map((member, index) => (
            <div
              key={index}
              className={styles['pmg-team-item']}
            >
              <div className={styles['pmg-team-member']}>
                <CdnImage
                  className={styles['pmg-member-avatar']}
                  src={member.memberAvatar}
                />
              </div>
              <CdnImage
                className={styles['pmg-member-rank']}
                src={member.memberRank}
              />
              <div className={styles['pmg-member-name']}>
                <text className={styles['pmg-member-name-text']}>{member.memberName}</text>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

export default HistoryItem;