import React, { Component } from 'react'
import { CallApp } from '../../common'
import './index.scss'
import { WithTab } from '@/HOCs'
// import Swiper from 'react-mobile-swiper'
// import createStyle from './createStyle'
import HomeCourseList from './course-list'
import { http, isValidUrl } from '@/utils'
import LiveRoom from './liveRoom'
import { Link } from "react-router-dom"
import { Toast } from 'antd-mobile'
import { connect } from "react-redux"
import TopSwiper from './TopSwiper'
// import ExpandActiveToast from './expandActiveToast'
import AllCourseNavigation from "./all-course"
import { UserGift } from "@common"

// const animateTypes = Swiper.animateTypes

@connect(state => ({
  user: state.user,
}))
class Index extends Component {
  constructor(props) {
    super(props)
    this.state = {
      banner: [],   // 首页banner
      lives: [],  //近期直播
      modules: [],  //首页课程模块儿
      isShow: false,
      islive: false,
      roomMess: '',
      isShowUserGift: false,
      tabdata: [
        {
          'src': require('./image/freeclass_icon.png'),
          'name': '公开课',
          'href': '/study/free-course',
        },
        {
          'src': require('./image/jingpin_icon.png'),
          'name': '精品特惠',
          'href': '/preferential',
        },
        {
          'src': require('./image/zjxj_icon.png'),
          'name': '赚奖学金',
          'href': '/scholarship',
        },
        {
          'src': require('./image/mryt_icon.png'),
          'name': '每日一题',
          'href': '/examination',
        },
        {
          'src': require('./image/shequ_icon.png'),
          'name': '社区',
          'href': 'https://ask.julyedu.com',
        },
      ],
    }
  }

  componentDidMount() {
    this.getIndexData()
    this.userStatus()
  }

  componentWillMount() {
    this.showUserGiftFun()
  }

  userStatus = () => {
    http.get(`${API['base-api']}/sys/user/new_user_status`).then((res) => {
      const {errno, data} = res.data
      if (errno === 0) {
        if (data.status == 1) {
          // 新用户登录之后判断是否是新用户
          this.setState({
            isShowUserGift: false,
          })
          Toast.info('新人大礼包已领取成功！', 2)
        } else {
          this.setState({
            isShowUserGift: false,
          })
        }
      }
    })
  }

  showUserGiftFun = () => {
    let newer_last_time = localStorage.getItem('newer_last_time') // 获取用户关闭大礼包的时间
    let now_time = (new Date()).valueOf()
    if (!newer_last_time || now_time - newer_last_time > 86400000) {
      this.setState({
        isShowUserGift: true,
      })
    } else {
      this.setState({
        isShowUserGift: false,
      })
    }
  }
  close = () => {
    this.setState({
      isShowUserGift: false,
    })
    let now_time = (new Date()).valueOf() // 获取当前时间
    localStorage.setItem('newer_last_time', now_time)  // 存储关闭时间
  }

  get_newerModal = () => {
    this.close()
    this.props.history.push('/passport/login')
  }

  // 首页课程
  getIndexData = () => {
    http.get(`${API.home}/m/home`).then((res) => {
      if (res.data.code === 200) {
        const {data} = res.data || {}
        const modules = Array.isArray(data.modules) ? data.modules : []
        this.setState({
          banner: data.banner,
          lives: data.lives,
          modules,
        })
      } else {
        Toast.info(res.data.msg, 2)
      }

    })
  }


  // 点击近期直播课程弹出预约提示框
  liveCourse = (item) => {
    const {user} = this.props
    const uid = user && user.data && user.data.uid
    if (!uid) {
      this.props.history.push('/passport/login')
    } else {
      if (item.live_status === 0) {
        this.setState({
          isShow: true,
          islive: true,
          roomMess: item,
        })
      } else {
        window.location.href = `${window.location.href.includes('pre') ? 'http://www-pre.julyedu.com' : 'http://www.julyedu.com'}/live/m_room/${item.room_id}`
      }
    }
  }
  // 自组件传给父组件的isshow
  colseBox = (val) => {
    this.setState({isShow: val})
  }

  // 点击头部搜索跳转到搜索页面
  toSearch() {
    this.props.history.push('/search')
  }

  render() {
    return (
      <div className='index-box'>
        <div className='header'>
          <img
            className="logo"
            src="http://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/img/index/logo.png"
            alt=""
          />
          {/* <CallApp
            className='to-app'
            text='在APP打开'
          />*/}
          <div className="right">
            <Link to={'/intelligent-recommend'}>
              <span className={'intelligent-recommend-entry'}>
                <i className={'mind-icon'}></i>
                智能选课
            </span>
            </Link>
            <i
              className='iconfont iconiconfront- search'
              onClick={this.toSearch.bind(this)}
            />
          </div>
        </div>

        <div className='zw_height'></div>

        {/*支付尾款提示*/}
        {/*<ExpandActiveToast/>*/}

        <div className='index-swiper'>
          {
            this.state.banner && this.state.banner.length > 0 &&
            <TopSwiper bannerList={this.state.banner}/>
          }
        </div>

        <div className="tabbox">
          <ul>
            {
              this.state.tabdata.map((item, index) => {
                return (
                  <li key={index}>
                    {
                      isValidUrl(item.href)
                        ? <a href={item.href}>
                          <img src={item.src} alt=""/>
                          <span>{item.name}</span>
                        </a>
                        : <Link to={item.href}>
                          <img src={item.src} alt=""/>
                          <span>{item.name}</span>
                        </Link>
                    }

                  </li>
                )
              })
            }
          </ul>
        </div>

        <p className="borderTop"/>

        {

          (this.state.lives && this.state.lives.length > 0) ?
            <div className='lives'>
              <h2 className="title">近期直播</h2>
              <ScrollBox
                livesList={this.state.lives}
                liveCourse={this.liveCourse}
              />
            </div> : null
        }

        <HomeCourseList
          modules={this.state.modules}
        />

        <AllCourseNavigation/>

        {/* 直播间预约 */}
        {
          this.state.islive &&
          <LiveRoom
            isShow={this.state.isShow}
            colseBox={this.colseBox}
            roomMess={this.state.roomMess}
            getIndexData={this.getIndexData}
          />
        }

        {
          this.state.isShowUserGift &&
          <UserGift close={this.close} get_newerModal={this.get_newerModal}/>
        }
      </div>
    )
  }

}


//近期直播
function ScrollBox(props) {
  return (
    <div className='scroll-box'>
      <ul className='scroll-list'>
        {
          props.livesList && props.livesList.length > 0 && props.livesList.map((item, index) => {
            return (
              <li key={index} className='scroll-item'
                  onClick={e => props.liveCourse(item)}>
                <div className='item-box'>
                  {
                    item.live_status === 0 &&
                    <span className='no-start'>即将开始</span>
                  }
                  {
                    (item.live_status === 1 || item.live_status === 10) &&
                    <span className='start'>正在直播</span>
                  }
                  <img className="item-img" src={item.live_img} alt=""/>
                  <div className="item-content">
                    <h2 className="item-title">{item.live_title}</h2>
                    <p className="item-teacher">讲师：{item.live_teacher_name}</p>

                    {/*公开课需预约、付费课不需要预约*/}
                    {
                      (item.is_prepare || item.is_free === 0) && item.live_status === 0 &&
                      <p className="item-time">时间：{item.live_start_time}</p>
                    }
                    {
                      !item.is_prepare && item.live_status === 0 && item.is_free === 1 &&
                      <button className='item-btn'>预约</button>
                    }
                    {
                      (item.live_status === 1 || item.live_status === 10) &&
                      <button className='item-btn'>正在直播</button>
                    }
                  </div>
                </div>
              </li>
            )
          })
        }
      </ul>
    </div>
  )
}

export default WithTab(Index)