import React, { Component } from 'react';
import './index.scss'
import { Tabs, Toast } from "antd-mobile";
import { http } from "@/utils"
import storage from 'store2'
import { html } from '@/utils'
import { compareDesc } from "date-fns";
import { Link } from "react-router-dom";


class Scores extends Component {

  store = storage.namespace('aiTestEntry')

  state = {
    tabs: [
      {title: '当前成绩'},
      {title: '今日最佳'},
      {title: '本月最佳'},
    ],
    rankList: [],
    isExpandRankList: false,
    type: 2,
    icons: [
      require('./rank-1.png'),
      require('./rank-2.png'),
      require('./rank-3.png'),
    ],
    isShowRule: false,
    isNeverShow: this.store.get('isNeverShow'),
    pageState: {},
    availableTestNum: 0,
    userScore: {},
    userAddress: {
      name: '',
      phone: '',
      address: '',
    },
    isShowUserAddress: false,
  }

  componentDidMount() {
    this.getInitialData()
    this.getRankList()
    this.getUserScores(0)
    this.getUserAddress()
  }

  handleChange = (e) => {
    const isNeverSHow = e.target.checked
    this.setState({
      isNeverSHow,
    })
    this.store.set('isNeverShow', isNeverSHow)
  }

  startTest = () => {
    this.props.history.push('/ai-test/exam')
  }

  getInitialData = () => {
    http.get(`${API.home}/sys/activity_data`)
      .then(res => {
        const {code, msg, data} = res.data
        if (code === 200) {
          this.setState({
            pageState: data,
          })
        } else {
          Toast.fail(msg, 2, null, false)
        }
      })
  }

  getRankList = () => {
    http.get(`${API.home}/sys/at/ranks/${this.state.type}`)
      .then(res => {
        const {code, msg, data} = res.data
        if (code === 200) {
          this.setState({
            rankList: data,
          })
        } else {
          Toast.fail(msg, 2, null, false)
        }
      })
  }

  getUserScores = (type) => {
    http.get(`${API.home}/sys/at/user_score/${type}`)
      .then(res => {
        const {code, msg, data} = res.data

        if (code === 200) {
          this.setState({
            userScore: data,
          })
        } else {
          Toast.fail(msg, 2, null, false)
        }
      })
  }

  getUserAddress = () => {
    http.get(`${API.home}/sys/user_address_info`)
      .then(res => {
        const {code, msg, data} = res.data
        if (code === 200) {
          this.setState({
            userAddress: data,
          })
        }
      })
  }

  inputText = e => {
    const key = e.target.name
    const value = e.target.value
    this.setState(state => {
      return {
        userAddress: {
          ...state.userAddress, ...{
            [key]: value,
          },
        },
      }
    })
  }

  submitForm = (e) => {
    e.preventDefault()
    const {userAddress} = this.state
    if (!Object.values(userAddress).every(item => !!item)) {
      Toast.info('请填写完整')
      return
    }
    http.post(`${API.home}/sys/update_address`, userAddress)
      .then(res => {
        const {code, msg, data} = res.data
        if (code === 200) {
          Toast.success('提交成功', 2, null, false)
          this.setState({
            isShowUserAddress: false,
          })
        } else {
          Toast.fail(msg, 2, null, false)
        }
      })
  }

  render() {
    const {
      tabs,
      rankList,
      icons,
      isExpandRankList,
      isShowRule,
      isNeverShow,
      pageState,
      userScore,
      isShowUserAddress,
      userAddress,
    } = this.state
    const _rankList = Array.isArray(rankList) ? isExpandRankList ? rankList : rankList.slice(0, 10) : []
    return (
      <div className={'scores'}>
        <div className="banner">
          <img src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/ai-test/m/scores/banner.png" alt=""/>
        </div>
        <div className="info">
          <span>已有{pageState.join_num}人参加测试</span>
          <a href="javascript:void(0);" onClick={() => {
            this.setState({
              isShowRule: true,
            })
          }}>规则</a>
        </div>
        {
          userScore.rank !== '-' &&
          <div className="score-list">
            <Tabs tabs={tabs} tabBarUnderlineStyle={{display: 'none'}} onChange={(tab, i) => {
              this.getUserScores(i)
            }}>
              {
                tabs.map((tab, index) => {
                  return <div className={'tab-content'} key={index}>
                    <table>
                      <thead>
                      <tr>
                        <th>分数</th>
                        <th>用时</th>
                        <th>最终排名</th>
                      </tr>
                      </thead>
                      <tbody>
                      <tr>
                        <td>{userScore.score} <Link to={`/ai-test/parse/${userScore.r_id}`}>解析</Link></td>
                        <td>{userScore.cost_time}</td>
                        <td>{userScore.rank}名</td>
                      </tr>
                      </tbody>
                    </table>
                  </div>
                })
              }
            </Tabs>
            <div className="share">
              <Link to={'/ai-test/report'}>分享</Link>
            </div>
          </div>
        }
        <div className="rank-list">
          <div className="head">
            <div>
              测试排行榜
            </div>
            <div>
              <span>仅显示前50名</span>
              <a href="javascript:void(0);" onClick={() => {
                this.setState({
                  isShowUserAddress: true,
                })
              }}>收货地址</a>
            </div>
          </div>
          <div className="list">
            <table>
              <thead>
              <tr>
                <th>名次</th>
                <th>昵称</th>
                <th>成绩</th>
                <th>奖品</th>
              </tr>
              </thead>
              <tbody>
              {
                !!_rankList.length && _rankList.map((item, index) => {
                  return <tr key={index}>
                    <td>
                      {
                        index < 3 ? <img src={icons[index]} alt=""/> : index + 1
                      }
                    </td>
                    <td>
                      <img src={item.avatar} className={'avatar'} alt=""/>
                      {item.user_name}
                    </td>
                    <td>
                      <span className={'score'}>{item.score}</span>/<span>{item.cost_time}</span>
                    </td>
                    <td>
                      {
                        item.prize_url ? <a href={item.prize_url}>{item.prize}</a> : item.prize
                      }
                    </td>
                  </tr>
                })
              }
              </tbody>
            </table>
            {
              !isExpandRankList ?
                <div className="expand" onClick={() => {
                  this.setState({
                    isExpandRankList: true,
                  })
                }}>
                  <span>
                    展开更多
                    <i className={'iconfont iconiconfront-69'}></i>
                  </span>
                </div>
                :
                <div className="expand" onClick={() => {
                  this.setState({
                    isExpandRankList: false,
                  })
                }}>
                  <span>
                    收起
                    <i className={'iconfont iconiconfront-71'}></i>
                  </span>
                </div>
            }
          </div>
        </div>
        <div className="btn">
          {
            compareDesc(new Date(), pageState.stop_time * 1000) > 0 ?
              pageState.daily_test_num > 0
                ? <button className={'available'} onClick={() => {
                  isNeverShow ? this.startTest() : this.setState({
                    isShowRule: true,
                  })
                }}>开始测试<span>（今日可测试{pageState.daily_test_num}次）</span></button>
                : <Link to={'/ai-test/share'}>
                  <button className={'get-chance'}>获取测试机会<span>（今日可测试0次）</span></button>
                </Link>
              : <button className={'unavailable'}>活动已结束</button>
          }
        </div>
        {
          isShowRule &&
          <Rule rule={pageState.rule} startTest={this.startTest} neverShow={this.handleChange} isNeverShow={isNeverShow}
                close={() => {
                  this.setState({
                    isShowRule: false,
                  })
                }}/>
        }
        {
          isShowUserAddress &&
          <div className="user-address-wrapper">
            <div className="user-address">
              <div className="title">收货信息</div>
              <div className="tip">获奖用户（以最终榜单为准）请及时填写收货信息</div>
              <form action="" onSubmit={this.submitForm}>
                <input type="text" placeholder={'收件人'} name={'name'} onChange={this.inputText}
                       value={userAddress.name}/>
                <input type="tel" placeholder={'联系方式'} name={'phone'} onChange={this.inputText}
                       value={userAddress.phone}/>
                <input type="text" placeholder={'收货地址'} name={'address'} onChange={this.inputText}
                       value={userAddress.address}/>
                <button type={'submit'}
                        className={Object.values(userAddress).every(value => !!value) ? 'available' : ''}>提交
                </button>
              </form>
              <i className={'close iconfont iconiconfront-2'} onClick={() => {
                this.setState({
                  isShowUserAddress: false,
                })
              }}/>
            </div>
          </div>
        }
      </div>
    );
  }
}

function Rule({neverShow, isNeverShow, rule, close, startTest}) {
  return <div className="rule-mask">
    <div className="rule">
      <div>测试规则</div>
      <div dangerouslySetInnerHTML={html(rule)}></div>
      <div className="option">
        <input id={'never-show'} type="checkbox" onChange={neverShow} checked={isNeverShow}/>
        <label htmlFor="never-show">不再提示</label>
      </div>
      <button onClick={startTest}>进入测试</button>
      <i className={'close iconfont iconiconfront-2'} onClick={close}/>
    </div>
  </div>
}


export default Scores;