import { h, Component } from 'preact';

import MyInfoItem from '../my-info-item/my-info-item';

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

export const EMPTY_IMAGES = {
  DAI_DING: 'https://image-1251917893.file.myqcloud.com/Esports/pix/img/common-empty.png',  // 待定
  TEAM_EMPTY: 'https://image-1251917893.file.myqcloud.com/Esports/pix/img/team-empty.png',  // 战队轮空
  MEMBER_EMPTY: 'https://image-1251917893.file.myqcloud.com/Esports/pix/img/member-empty.png',    // 个人轮空
};

class MatchScoreVs extends Component<any, any> {
  render() {
    const { mySchInfo, isVS } = this.props;
    return (
      <div className={styles['my-info']}>
        <MyInfoItem
          avatar={mySchInfo?.teamA?.head}
          title={mySchInfo?.teamA?.name  || '待定'}
          pinyin="ZHANG HAO"
          isEmpty={mySchInfo.teamA?.isEmpty}
        />
        {
          isVS
            ? <div className={styles['vs-icon']}></div>
            : (
              <div className={styles['score-detail']}>
                <div className={styles['score-text']}>{mySchInfo?.teamA?.score}</div>
                <div className={styles['score-compare']}>:</div>
                <div>{mySchInfo?.teamB?.score}</div>
              </div>
            )
        }
        {/* 灰色加战队轮空:
      个人轮空:
      待定 */}
        <MyInfoItem
          avatar={mySchInfo?.teamB?.head}
          title={mySchInfo?.teamB?.name || '待定'}
          pinyin="ZHANG HAO"
          isEmpty={mySchInfo.teamB?.isEmpty}
          reverse
        />
      </div>
    );
  }
}

export default MatchScoreVs;