import React, { Component } from 'react';
import { http } from "@/utils";
import './index.scss';

class BlessingRank extends Component {
  constructor(props) {
    super(props);
    this.state = {
      rankList: [],
      rules: [
        '1、排行榜名次以2019年11月13日24点七月在线公布的排行榜为准，榜单确认后，得奖小伙伴请及时填写邮寄信息，7个自然日内不填写，视为主动放弃奖品；',
        '2、福气值只在本活动期间享受抽奖、提高中奖概率、购课优化、增加AI水平测试等福利；',
        '3、如有发现恶意刷榜，刷虚假数据等行为将取消其领奖资格；',
        '4、本活动解释权归北京七月在线科技有限公司所有。',
      ],
    }
  }

  componentDidMount() {
    this.fetchRankData();
  }

  fetchRankData = () => {
    http.get(`${API.home}/sys/blessing/ranking`).then(res => {
      const { code, data } = res.data;
      if(code === 200) {
        this.setState({
          rankList: data,
        });
      }
    });
  }

  formatString = (str, len) => {
    return str.length > len? `${str.substr(0, len)}...` : str;
  }

  render() {
    const { rankList, rules } = this.state;
    return (
      <>
        <div className="rank__banner"></div>
        <div className="rank__body">
          <button className="rank__address">填写收货地址></button>
          <div className="rank__table">
            <dl className="rank__table-header">
              <dd className="rank__table-column">排名</dd>
              <dd className="rank__table-column">用户</dd>
              <dd className="rank__table-column">成绩</dd>
              <dd className="rank__table-column">奖品</dd>
            </dl>
            {
              rankList.map((item, index) => {
                return (
                  <dl className="rank__table-body" key={index}>
                    <dd className="rank__table-column">
                      {
                        index < 3
                        ? (
                          <i className="rank__table-num" data-num={index+1}></i>
                        )
                        : index + 1
                      }
                    </dd>
                    <dd className="rank__table-column">
                      <div className="rank__table-user">
                        <i className="rank__table-portrait" style={{backgroundImage: `url(${item.head_image})`}}></i>
                        <span>{this.formatString(item.user_name, 5)}</span>
                      </div>
                    </dd>
                    <dd className="rank__table-column">{item.blessing_value}</dd>
                    <dd className="rank__table-column">{this.formatString(item.prize_name, 7)}</dd>
                  </dl>
                );
              })
            }
            
          </div>
          <div className="rank__rule">
            <h2 className="rank__rule-title">活动规则</h2>
            {
              rules.map((item, index) => (
                <p className="rank__rule-desc" key={index}>{item}</p>
              ))
            }
          </div>
        </div>
      </>
    );
  }
}

export default BlessingRank;