import React, { Component } from "react"
import { connect } from "react-redux"
import { http } from "src/utils"
import { Popup } from "src/common"
import AddressPopup from "./../blessingPreheat/addressPopup/index"
import "./index.scss"

@connect(({ user }) => ({
  uid: user.data.uid || "",
}))
class BlessingRank extends Component {
  popupInstance = null
  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,
        })
      }
    })
  }

  handleToSwitch = (bool) => {
    const { history, uid } = this.props
    if (bool && !uid) {
      history.push("/passport")
    } else {
      if (bool && !this.popupInstance) {
        this.popupInstance = Popup({
          title: "收货信息",
          content: (
            <AddressPopup handleToHide={() => this.handleToSwitch(false)} />
          ),
        })
      } else {
        this.popupInstance.close()
        this.popupInstance = null
      }
    }
  }

  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"
            onClick={() => this.handleToSwitch(true)}
          >
            填写收货地址&gt;
          </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
