import { observer } from 'mobx-preact';
import { Component, h } from 'preact';

import CdnImage from '../cdn-image/cdn-image';
import { $t } from '../locale';
import PMGPopupContainer  from '../pmg-popup-container/pmg-popup-container';


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

@observer
class PMGAwardListDialog extends Component<any, any> {
  render() {
    const { awardList, onClickClose, titleColor = '#fff', title = $t('奖励说明') } = this.props;
    return (
      <PMGPopupContainer
        size="normal"
        titleColor={titleColor}
        title={title}
        onClickClose={onClickClose}
      >
        <div className={styles['pmg-award-info-content']}>
          {
            awardList.length > 0 && awardList.map((item, index) => (
              <div
                className={styles['pmg-award-item']}
                key={`key-${index}`}
              >
                <div className={styles['pmg-award-img-wrapper']}>
                  <CdnImage
                    className={styles['pmg-award-img']}
                    src={item.img}
                    alt=""
                  />
                  <text className={styles['pmg-award-num']}>{item.num}</text>
                </div>
                <div className={styles['pmg-award-info']}>
                  <text className={styles['pmg-award-name']}>{item.name}</text>
                  <text className={styles['pmg-award-desc']}>{item.desc}</text>
                </div>
              </div>
            ))
          }
        </div>
      </PMGPopupContainer>
    );
  }
  // eslint-disable-next-line react/no-deprecated
  async componentWillMount() {
  }
}

export default PMGAwardListDialog;