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

class BlessingRank extends Component {
  constructor(props) {
    super(props);
    this.state = {
      rankList: []
    }
  }

  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 } = this.state;
    return (
      <>
        <div className="rank__banner">

        </div>
        <div className="rank__body">
          <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>
            <p className="rank__rule-desc">1. 11月5日至11月13日之间每人有一次测试机会，可通过“集福气”活动额外获得2次测试机会；</p>
            <p className="rank__rule-desc">2. 单次测试时间为一小时，超时自动提交试卷；</p>
            <p className="rank__rule-desc">3. 试卷内容为Python基础（8道题*3分）、机器学习（12道题*3分）、深度学习（10道题*4分），总分100分；</p>
            <p className="rank__rule-desc">4. 无固定试卷，参与测试时从试题库中随机抽题组卷；</p>
            <p className="rank__rule-desc">5. 排行榜实时更新，分数相同则用时短者排名更高，多次测试保留最高分；</p>
            <p className="rank__rule-desc">6. 如发现某账号有作弊嫌疑，七月在线有权清空账号测试成绩；</p>
            <p className="rank__rule-desc">7. 活动最终解释权归七月在线所有。</p>
          </div>
        </div>
      </>
    );
  }
}

export default BlessingRank;