import React, { Component } from 'react'
import { http } from "@/utils"
import './index.scss'
import { HeaderBar } from "@common/index"
import { WhiteSpace, Toast } from "antd-mobile";
import VList from '@/common/v-list-base'
import { Popup } from "@common/index"
import WithFullSize from "@/HOCs/WithFullSize"

function showToast(msg) {
  Toast.info(msg, 2, null, false)
}

class LimitFree extends Component {

  nav
  state = {
    tab: {},
    courses: [],
    navItemStyle: {},
    tabActiveIndex: 0
  }

  componentDidMount() {
    this.getData()
  }

  getData = () => {
    Promise.all([http.get(`${API.home}/sys/category`), http.get(`${API.home}/sys/course`)])
      .then(res => {
        const [tab, courses] = res
        const {data: tabData, code: tabCode, msg: tabMsg} = tab.data
        const {data: coursesData, code: coursesCode, msg: coursesMsg} = courses.data
        if (tabCode == 200) {
          this.setState({
            tab: tabData
          })
        } else {
          showToast(tabMsg)
        }
        if (coursesCode === 200) {
          this.setState({
            courses: coursesData
          })
        } else {
          showToast(coursesMsg)
        }
      })
  }

  handleClick = id => {

  }

  changeTab = (e, index) => {
    const {tabActiveIndex} = this.state
    if (tabActiveIndex !== index) {
      this.setState({
          tabActiveIndex: index
        }
      )
    }
  }

  getCourse = id => {
    //todo 联调
    const instance = Popup({
      className: 'get-course-popup',
      closable: false,
      clickMaskClose: false,
      title: <div>
        <img src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/time_limited_free/M/check.png" alt=""/>
        <div>课程有效期7天，快去学习吧~</div>
      </div>,
      content: <div className={'btns'}>
        <button onClick={() => {
          instance.close()
        }}>知道了
        </button>
        <button>立即学习</button>
      </div>
    })
  }

  render() {
    const {tab, courses, navItemStyle, tabActiveIndex} = this.state
    return (
      <div className='limit-free'>
        <HeaderBar arrow={true} title={'限时免费'}></HeaderBar>
        <div className="banner">
          <img src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/time_limited_free/M/banner.png" alt=""/>
        </div>
        <nav>
          <div className="prev-cover"></div>
          <ul ref={el => this.nav = el}>
            {
              tab && !!Object.keys(tab).length && Object.keys(tab).map((item, index) => {
                return (
                  <li key={index} className={index === tabActiveIndex ? 'active' : ''} style={navItemStyle}
                      onClick={e => this.changeTab(e, index)}>
                    <a href={`#category${item}`} target={'_self'}>{tab[item]}</a>
                  </li>
                )
              })
            }
          </ul>
          <div className="next-cover"></div>
        </nav>
        <WhiteSpace/>
        <div className="course-list">
          <ul>
            {
              tab && !!Object.keys(tab).length && Object.keys(tab).map(key => {
                return (
                  <li key={key} className={'category'}>
                    <h2 id={`category${key}`}>
                      <img src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/time_limited_free/M/category-icon.png"
                           alt=""/>
                      <span>{tab[key]}</span>
                    </h2>
                    <ul className={'courses'}>
                      {
                        courses && courses.length && courses.map((item, index) => {
                          if (item.category_id != key) {
                            return null
                          }
                          /*
                          * course_status:
                          * 0未领取 1已领取未过期 2 已领取已过期 3 正常已购买
                          * */
                          //todo 状态2
                          let des, bottom
                          switch (item.course_status) {
                            case 0:
                              des = <div className={'learner'}>
                                <i className='iconfont iconRectangleCopy4'/>
                                <span>{item.play_times}人学习</span>
                              </div>
                              bottom = <div className={'bottom'}>
                                <span className={'red'}>限时免费</span>
                                <span className={'origin-price'}>¥{item.price0}</span>
                                <button onClick={this.getCourse.bind(this, item.course_id)}>免费领取</button>
                              </div>
                              break
                            case 1:
                              des = <div className={'remain-time'}>
                                <i className={'iconfont iconiconfront-21'}/>
                                <span>12天55时55分后过期</span>
                              </div>
                              bottom = <div className={'bottom'}>
                                <span className={'red'}>限时免费</span>
                                <span className={'origin-price'}>¥{item.price0}</span>
                                <button>立即学习</button>
                              </div>
                              break
                            case 3:
                              des = <div className={'purchased'}>
                                <i className='iconfont iconRectangleCopy4'/>
                                <span>{item.play_times}人学习</span>
                              </div>
                              bottom = <div className="bottom">
                                <span>已购买</span>
                                <button>立即学习</button>
                              </div>
                          }

                          const info = (
                            <div className='info'>
                              <div className='title'>{item.course_title}</div>
                              {des}
                              {bottom}
                            </div>
                          )
                          return (
                            <VList img={item.image_name}
                                   handleClick={this.handleClick}
                                   info={info}
                                   key={index}
                            />
                          )
                        })
                      }
                    </ul>
                  </li>

                )
              })
            }
          </ul>
        </div>
        <div className="no-more">
          -没有更多了-
        </div>
      </div>
    );
  }
}

export default WithFullSize(LimitFree)