import React, { Component } from 'react';
import ListFrame from './../listFrame/index';
import ListHeader from './../listHeader';
import './index.scss';

class CollectBlessing extends Component {

  constructor(props) {
    super(props);
    this.state = {
      rules: [
        'app、h5、pc端活动页签到+5点福气值（每天一次）',
        '关注七月在线微信服务号+30点福气值（仅限一次）',
        '分享活动页到朋友圈、qq，分别+2点福气值（每个平台每天一次）',
        '浏览指定课程详情页，一门课程+2点福气值（每天一次）',
        '邀请好友注册，+10点福气值/人（无上限）',
        '活动期间每购买一门课程+20点福气值',
      ]
    };
  }
  
  render() {
    const { handleToShowNotice, handleToShowList, handleToShowInvite } = this.props;
    const { rules } = this.state;
    return (
      <div className="collect-blessing">
        <ListHeader text="福气值积攒规则" size="middle" styles={{}} />
        {
          rules.map((item, index) => (
            <div className="collect-blessing__item" key={index}>
              <i className="collect-blessing__num">{index+1}</i>
              <p className="collect-blessing__title">{item}</p>
              {
                index === 0 &&
                <a className="collect-blessing__content" onClick={handleToShowNotice}>
                  点击<br/>签到
                </a>
              }
              {
                index === 1 &&
                <a className="collect-blessing__content" onClick={handleToShowNotice}>
                  关注<br/>二维码
                </a>
              }
              {
                index === 2 &&
                <div className="collect-blessing__content" data-layout="column">
                  <p className="collect-blessing__label">去分享</p>
                  <div className="collect-blessing__share">
                    <a className="collect-blessing__share-button" data-type="qq"></a>
                    <a className="collect-blessing__share-button" data-type="wechat"></a>
                  </div>
                </div>
              }
              {
                index === 3 &&
                <a className="collect-blessing__content" onClick={handleToShowList}>
                  浏览课程<br/>详情页
                </a>
              }
              {
                index === 4 &&
                <a className="collect-blessing__content" onClick={handleToShowInvite}>
                  邀请<br/>链接
                </a>
              }
              {
                index === 5 &&
                <a className="collect-blessing__content">去选课</a>
              }
            </div>
          ))
        }
      </div>
    )
  }
}

export default ListFrame(CollectBlessing);