'use strict';

import React from 'react';
import { observer } from 'mobx-react';
import './rankpage.less';
import { Button } from '@src/components/Button';
import { _asyncThrottle } from '@src/utils/utils';
import store from '@src/store';
import { PAGE_MAP } from '@src/utils/constants';

@observer
class Rankpage extends React.Component {
  constructor(props) {
    super(props);
  }

  back = _asyncThrottle(() => {
    store.changePage(PAGE_MAP.HOME_PAGE)
  })

  render() {
    return (
      <div className="rankpage modal_center">
        <span className="bg"></span>
        <span className="headnline"></span>
        <span className="tip">该成绩仅为游戏当日分数</span>
        <Button className="back" onClick={this.back}/>
        <div className="list">
          <span className="border"></span>
          <span className="l_bg"></span>
          <div className="own">
            <span className="ownbg"></span>
            <span className="ownrank">99</span>
            <span className="ownname">用户昵称12345(我)</span>
            <span className="ownscore">200</span>
          </div>
          <div className="sample">
            <span className="userrank">99</span>
            <span className="username">用户昵称12345(他)</span>
            <span className="userscore">200</span>
            <span className="line"></span>
          </div>
          <span className="rank">排名</span>
          <span className="name">用户昵称</span>
          <span className="score">获得分数</span>
        </div>
      </div>
    );
  }
}
export default Rankpage;
