'use strict';

import React, { Component } from 'react';
import resList from '../../resconfig/resList';

import './comrankp.less';

class Comrankp extends Component {
  constructor(props) {
    super(props);
  }
  /**
   * 
   * 
   * {
      avatar: "",
      index: 1,
      nickname: "name1",
      score: 111,
      userId: "11111"
      },
   * @param {*} list 
   */
  showRankItem(list) {
    const itemRank = (<ul>{list.index}</ul>);
    const itemName = (<ul>{list.nickname}</ul>);

    return (
      <div>
        {itemRank}
        {itemName}
      </div>
    );
  }



  render() {
    let { rankList, onClose, myRankData } = this.props;
    console.log('rankList=====', rankList, ' rank  myRankData===', myRankData);
    let arr = [myRankData.data, ...rankList];
    return (
      <div className="rankp">
        <img className="rankBg" />
        <img className="rankbg3" src={resList['b447bc8b-7c3b-49a7-b261-e4017d4f2bb8'].url} />
        <img className="rankhea" src={resList['ff98a223-5d7b-4e1d-ab01-ad3764c04b6f'].url} />
        <div className="userite">
          <img className="rankbg2" src={resList['e4bacfdd-db1d-4ce6-bed7-9b01ac97f9db'].url} />
          <label className="rank">排名</label>
          <label className="usernic">用户名</label>
          <label className="steps">步数</label>
          <div className="rankLists" >
            <img className="start" src={resList['8ff0a7be-c66a-422e-a233-74d7db1901b5'].url} />
            {arr.map((item, index) => <p key={index} className={index == 0 ? 'rankSlot0' : (index % 2 == 1 ? 'rankSlot1' : 'rankSlot2')}>
              <label className="rankItems">{item.index}</label>
              <label className="rankItems2">{item.nickname?item.nickname:'集步养成'}</label>
              <label className="rankItems3">{item.score}</label>
            </p>)}
            {rankList.length >= 1 && <img className="first" src={resList['94f9079b-951a-4d41-89ee-f59e8dee36df'].url} />}
            {rankList.length >= 2 && <img className="second" src={resList['fcc55c60-6d9f-4524-8028-b7a37aefe152'].url} />}
            {rankList.length >= 3 && <img className="third" src={resList['2bdc9edc-1390-4963-bf12-2acd86699a16'].url} />}

          </div>
        </div>
        <img className="closer" onClick={onClose} src={resList['c9098829-9dc3-4561-887d-e2a9b3a60e43'].url} />
      </div>
    );
  }
}
export default Comrankp;
