import { h, Component } from 'preact';

import PopupContainer from '../popup-container/popup-container';

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

export default class PopupRankRule extends Component<any, any> {
  render() {
    // const { onClickClose, ruleTitle, ruleContent } = this.props;
    const { onClickClose, ruleTitle, content, dataList  } = this.props;

    return (
      <PopupContainer
        title={ruleTitle}
        size='big'
        onClickClose={onClickClose}
      >
        <div className={styles['rule-warp']}>
          <text className={styles['rule-content']}>
            {content}
          </text>
          <div className={styles['data-warp']}>
            <div className={styles['data-title']}>
              <div className={styles.line}></div>
              <div className={styles['data-title-text']}>你的当前数据</div>
              <div className={styles.line}></div>
            </div>
            <div className={styles['data-detail']}>
              {dataList.map((item, index) => (
                <div
                  key={`${index}-1`}
                  className={styles['data-item']}
                >
                  <div className={styles['data-item-num']}>
                    <text>{item.value}</text>
                    <text className={styles['time-unit']}>{item.units}</text>
                  </div>
                  <div className={styles['data-item-title']}>{item.name}</div>
                </div>
              ))}
            </div>
            <div
              className={styles['btn-yellow']}
              onClick={onClickClose}
            >
              <text className={styles['btn-yellow-text']}>
                确定
              </text>
            </div>
          </div>
        </div>
      </PopupContainer>
    );
  }
}