import React, { Component } from 'react'
import { http } from "@/utils"
import { Toast, Tabs } from 'antd-mobile'
import './index.scss'

class FormalDraw extends Component {

  state = {
    prizes: [],
    currentDisplayPrizes: [],
    tabs: [],
    today: '',
    initialPageIndex: 0
  }

  componentDidMount() {
    http.get(`${API.home}/sys/activity/prize_data`)
      .then(res => {
        const {data} = res
        if (data.code == 200) {
          const {data: resData} = data
          this.setState({
            tabs: resData.list.map(item => ({title: item.date})),
            today: '10月30日',
            initialPageIndex: resData.list.findIndex(item => item.date == resData.value.today) || 0
          })
        } else {
          Toast.info(data.msg, 2, null, false)
        }
      })
  }

  renderStatusText = n => {
    switch (n) {
      case 1:
        return '即将开启'
    }
  }

  render() {
    const {tabs, today, initialPageIndex} = this.state
    return (
      <div id={'formal-draw'}>
        <Tabs
          tabs={tabs}
          initialPage={initialPageIndex}
          tabBarBackgroundColor={'transparent'}
          tabBarActiveTextColor={'#5600DF'}
          tabBarInactiveTextColor={'#FFF604'}
          tabBarUnderlineStyle={{display: 'none'}}
        >
          <div className="content">
            <div className="title">
              <img src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_1111/title-decorate-left.png" alt=""/>
              <div className="hot-value">中奖热力值：<span className={'grade'}>105分</span></div>
              <img src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_1111/title-decorate-right.png" alt=""/>
            </div>
            <div className="progress-bar">
              <img className={'locator'} src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_1111/locator.png"
                   alt=""/>
              <div className="progress"></div>
            </div>
            <ul className="time-ranges">
              <li className={'status-3'}>
                <div className={'status-bar'}>
                  <div className="time">
                    <span>00:00～10:00</span>
                  </div>
                  <div className="status">
                    <span>已结束</span>
                    <a href="">查看中奖记录</a>
                  </div>
                </div>
                <ul className={'prizes'}>
                  <li>
                    <img src="" alt=""/>
                    <span></span>
                  </li>
                </ul>
              </li>
            </ul>
          </div>
        </Tabs>
      </div>
    )
  }
}

export default FormalDraw
