import React, { Component } from 'react';
import { Link } from 'react-router-dom';
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点福气值',
      ],
      welfareRuleList: [
        {
          range: '50~100',
          rules: [
            {id: 1, text: '1.每天一次抽奖机会；'},
            {id: 2, text: '2.中奖概率翻2倍', des: '（热力值越高，中奖概率越大）；'},
            {id: 3, text: '3.满111减11、满1111减111。'},
          ]
        },
        {
          range: '101~190',
          rules: [
            {id: 1, text: '1.每天两次抽奖机会；'},
            {id: 2, text: '2.中奖概率翻3倍', des: '（热力值越高，中奖概率越大）；'},
            {id: 3, text: '3.满111减31、满1111减211；'},
            {id: 4, text: '4.AI水平测试增加1次。'},
          ]
        },
        {
          range: '>190',
          rules: [
            {id: 1, text: '1.每天三次抽奖机会；'},
            {id: 2, text: '2.中奖概率翻4倍', des: '（热力值越高，中奖概率越大）；'},
            {id: 3, text: '3.满111减51、满1111减411；'},
            {id: 4, text: '4.AI水平测试增加1次。'},
          ]
        }
      ],
    };
  }
  
  render() {
    const { 
      isSign,
      userInfo: { isLogin = false, blessingVal = 0 }, 
      handleToShowNotice, 
      handleToShowList, 
      handleToShowInvite,
      handleToShow
    } = this.props;
    const { rules, welfareRuleList } = this.state;
    return (
      <div className="collect-blessing">
        {
          isLogin 
          ? (
            <ListHeader text={`我的福气值： ${blessingVal}分`} size="middle" styles={{margin: '20px 0 0 0'}} />
          ) 
          : (
            <ListHeader size="middle" styles={{margin: '20px 0 0 0'}} >
              <span className="text_nologin">我的福气值：</span> 
              <Link to='/passport' className="login__btn">登录</Link>
            </ListHeader>
          )
        }
        <p className='activity__over'>活动结束 福气榜前20名可获奖品一份</p>
        {
          welfareRuleList.map((item, index) => (
            <div className="rules__item" key={index}>
              <div className="item__left">
                <div className='tip__bubble'>
                  <div className="tip__text">福气值</div>
                  <div className='tip__style'></div>
                </div>
                <div className='range__number'>{item.range}</div>
              </div>
              <div className="item__right">
                {
                  item.rules.map(item => {
                    return (
                      <p key={item.id}>
                        {item.text} 
                        <span>{item.des}</span>
                      </p>
                    )
                  })
                }
              </div>
            </div>
          ))
        }
        <ListHeader text="福气值积攒规则" size="middle" styles={{margin: '30px 0 0'}} />
        {
          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 && (isLogin && isSign) &&
                <a className="collect-blessing__content" onClick={handleToShowNotice}>
                  +5点<br/>福气值
                </a>
              }
              {
                index === 0 && (!isLogin || !isSign) &&
                <Link to='/passport' className="collect-blessing__content">
                  点击<br/>签到
                </Link>
              }
              {
                index === 1 &&
                <a className="collect-blessing__content" onClick={handleToShowNotice}>
                  关注<br/>二维码
                </a>
              }
              {
                index === 2 &&
                <div className="collect-blessing__content" data-layout="column" onClick={()=>{handleToShow('shareMark')}}>
                  <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);