import React, { Component } from 'react';
import './index.scss';


export default class Invite extends Component {
  constructor(props) {
    super(props);
    this.state = {
      showTip: false,
      userList: [{
        id:1,
        avatar: 'https://res.pandateacher.com/CLeWOrD_cLeBDPycJhdmXIsBPh6wOrD_wufeng.png',
        name: '大学生活好'
      }, {
        id:2,
        avatar: 'https://res.pandateacher.com/CLeWOrD_cLeBDPycJhdmXIsBPh6wOrD_wufeng.png',
        name: '大学生活好大学生活好大学生活好'
      }, {
        id:3,
        avatar: 'https://res.pandateacher.com/CLeWOrD_cLeBDPycJhdmXIsBPh6wOrD_wufeng.png',
        name: '大学生活好大学生活好大学生活好'
      }, {
        id:4,
        avatar: 'https://res.pandateacher.com/CLeWOrD_cLeBDPycJhdmXIsBPh6wOrD_wufeng.png',
        name: '大学生活好大学生活好大学生活好'
      }, {
        id:5,
        avatar: 'https://res.pandateacher.com/CLeWOrD_cLeBDPycJhdmXIsBPh6wOrD_wufeng.png',
        name: '大学生活好大学生活好大学生活好'
      }],
    }
  }

  componentDidMount() {

  }

  inviteFriends = () => {
    this.setState({
      showTip: true,
    });
  }

  closeMark = () => {
    this.setState({
      showTip: false,
    });
  }

  render() {
    let {userList, showTip} = this.state;
    return (
      <div className="activity__con">
        <div className='banner__con'></div>
        <div className="invite__content">
          <div className="content__one">
            <p>邀请好友注册，每增加1人可</p>
            <div className="img__con"></div>
          </div>

          <div className="content__two">
            福气值越高，热力值越高，中奖概率越大！
          </div>

          <div className="box__out">
            <div className="box__middle">
              <div className="box__inner">
                <p>当前中奖热力值:</p>
                <p className="hot__value">50</p>
                <div className="hot__progress">
                  <span>0</span>
                  <div className="progress__bar">
                    <span className="position__point"></span>
                  </div>
                  <span>3600</span>
                </div>
              </div>
            </div>
          </div>
        

          <div className="but__con">
            <div className="button__content" onClick={this.inviteFriends}>
            立即邀请
            </div>
          </div>

          <div className="list__title">
            <span>邀请好友列表</span>
          </div>

          <p className="show__new">(仅显示新用户)</p>

          <div className="list__con">
            {
              userList.length > 0 && userList.map((item, index) => {
                return (
                  <div className="user__item-info" key={item.id}>
                    <div className="item__con">
                      <img className="user_avatar" src={item.avatar} />
                      <div className="user_name">{item.name}</div>
                    </div>
                  </div>
                )
              })
            }
          </div>
        </div>
        {
          showTip && (
            <div className="share__mark" onClick={this.closeMark}>
              <div className="share__tip">
              立即分享给好友增加中奖概率
              </div>
              <div className="share__row"></div>
            </div>
          )
        }
      </div>
    )
  }
}
