import { h, Component } from 'preact';

import CdnImage from '../cdn-image/cdn-image';
import PopupContainer from '../popup-container/popup-container';

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

export default class PopupAward extends Component<any, any> {
  render() {
    const { title = '奖励', subtitle = '', awardList, onClickClose } = this.props;
    // const awardList = [
    //   {
    //     rank: 1,
    //     list: [
    //       {
    //         img: 'https://image-1251917893.file.myqcloud.com/Esports/new/admin/evaluation-happy.png',
    //         name: '奖励名称',
    //       },
    //     ],
    //   },

    // ];
    return (
      <PopupContainer
        title={title}
        subtitle={subtitle}
        size='big'
        onClickClose={onClickClose}
      >
        {/* 榜单奖励 */}
        <div className={styles['bd-title']}>
          {/* 积分前100名可获得排名奖励 */}
        </div>
        <div className={styles['award-list']}>
          {awardList.map((value, index) => (
            <div
              key={index}
              className={`${styles['award-item']} ${value.rank ? styles[`award-item${value.rank}`] : ''}`}
            >
              {(value.rank && !value.rankStr) ? (
                <div className={styles['award-num-box']}>
                  {
                    value.rank <= 3 ? (
                      <CdnImage
                        className={styles['award-num-img']}
                        src={`https://image-1251917893.file.myqcloud.com/Esports/pix/img/icon-rank${value.rank}.png`}
                      />
                    ) : <div className={styles['award-num']}> {value.rank} </div>
                  }
                </div>
              ) : ''}
              {value.rankStr && (
              <div className={styles['award-num-box']}>
                <div className={styles['award-num']}> {value.rankStr} </div>
              </div>
              )}
              <div className={styles['award-detail']}>
                {value.list.map((listValue, listIndex) => (
                  <div
                    key={listIndex}
                    className={styles['award-detail-item']}
                  >
                    <div className={styles['award-img-box']}>
                      <CdnImage
                        className={styles['award-img']}
                        src={listValue.img}
                      />
                    </div>
                    <text className={styles['award-name']}>
                      {listValue.name}
                    </text>
                  </div>
                ))}
              </div>
            </div>
          ))}
        </div>
      </PopupContainer>
    );
  }
}