import React, {Component} from 'react'
import {Course, CallApp} from '../../common'
import './index.scss'
import {WithTab} from '@/HOCs'
import Swiper from 'react-mobile-swiper'
import createStyle from './createStyle'
import LazyLoad from 'react-lazy-load'
import {http} from '@/utils'
import LiveRoom from './liveRoom'
import {Link} from "react-router-dom"
import {Toast} from 'antd-mobile'
import {connect} from "react-redux";
import {getCourses} from './../detail/actions';


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: '',
            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/qynx_icon.png'),
                    'name': '企业内训',
                    'href': 'http://m-active.julyedu.com'
                }
            ]
        }
    }

    componentDidMount() {
        this.getIndexData()
    }

    // 首页课程
    getIndexData = () => {
        http.get(`${API.home}/m/home`).then((res) => {
            if (res.data.code === 200) {
                const { data } = res.data || {}
                this.setState({
                    banner: data.banner,
                    lives: data.lives,
                    modules: typeof data.modules === 'object' && data.modules.length > 0? data.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 = `http://www-test.julyedu.com/live/m_room/${item.room_id}`
            }
        }
    }
    // 自组件传给父组件的isshow
    colseBox = (val) => {
        this.setState({isShow: val})
    }

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

    toCourseDetail = (id) => {
        const { dispatch, history } = this.props;
        dispatch(getCourses(id, () => {
            history.push(`/detail?id=${id}`);
            return false;
        }));
    }

    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打开'></CallApp>

                    <i className='iconfont iconiconfront- search' onClick={this.toSearch.bind(this)}></i>
                </div>

                <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}>
                                        <a href={item.href}>
                                            <img src={item.src} alt=""/>
                                            <span>{item.name}</span>
                                        </a>
                                    </li>
                                )
                            })
                        }
                    </ul>
                </div>

                <p className="borderTop"></p>

                {

                    (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
                }

                {
                    (this.state.modules && this.state.modules.length > 0) ? this.state.modules.map((item, index) => {
                        return (
                            <div key={index}>
                                <CourseList modules={item} toDetail={this.toCourseDetail}/>
                                <p className="borderTop"></p>
                            </div>
                        )
                    }) : null
                }

                <div className="category all-course">
                    <Link to='/classify'>
                        <p>查看全部课程</p>
                        <span>数学基础、数学结构、大数据实战、Python...</span>
                    </Link>

                </div>

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

            </div>
        )
    }

}


function TopSwiper({bannerList}) {
    return (
        <Swiper type={animateTypes.CARD} loop={true} height={168} autoPlay={true} typePro createStyle={createStyle}>
            {bannerList && bannerList.length > 0 && bannerList.map((item, index) => {
                return (
                    <a href={item.jump_url} key={index}>
                    {/* <Link to={item.jump_url} key={index}> */}
                        <img className="item" src={item.name} alt=""/>
                    {/* </Link> */}
                    </a>
                )
            })
            }
        </Swiper>
    )
}

// 课程模块儿公共组件
// 课程数量是奇数第一个课程需要横着展示沾满一行，课程数量是偶数一行显示两个
function CourseList({modules, toDetail}) {
    let isOdd = modules.list.length % 2 === 0
    // 数量为奇数时，第一个课程显示大图（如后台未上传，前台显示小图），课程数量为偶数时，均显示小图
    let filterList = ''

    if(isOdd){
        filterList = modules.list
    } else {
        filterList = modules.list[0].course_img === modules.list[0].course_img_small ? modules.list : modules.list.slice(1)
    }
    return (
        <div className='category'>
            <h2 className="title">{modules.name}</h2>
            {
                modules.show_more === 1 &&
                <a className="more" href='/classify'>更多 ></a>
            }
            {
                modules.show_more === 2 &&
                <a className="more" href={modules.more_page}>更多 ></a>
            }
            <LazyLoad offset={50}>
                <ul className='index-course-detail'>
                    {
                        !isOdd && modules.list[0].course_img!== modules.list[0].course_img_small &&
                        <div className="category-vip" onClick={() => toDetail(modules.list[0].course_id)}>
                            {/* <Link to={`/detail?id=${modules.list[0].course_id}`}> */}
                                <img src={modules.list[0].course_img_small} alt=""/>
                            {/* </Link> */}
                        </div>
                    }
                    {
                        filterList.map((item, index) => {
                            const top = (
                                <div>
                                    {item.is_audition === true &&
                                    <span className='audition'><i className={'iconfont iconerji'}></i>试听</span>
                                    }
                                    {item.is_aist &&
                                    <span className='return_bash'></span>
                                    }
                                </div>
                            );

                            const bottom = (
                                <div>
                                    {!item.isbuy && <p className="course-price">
                                        <span className="new">¥{item.discounts_price}</span>
                                        <span className="old">¥{item.price}</span>
                                    </p>
                                    }
                                    {item.isbuy &&
                                    <a href="/#" className="isbuy">已购买</a>
                                    }
                                </div>
                            )

                            const status = (
                                <div>
                                    {item.is_bargain &&
                                    <p className='course-status'>砍价减{item.bargain_price}元</p>
                                    }
                                    {item.is_groupon &&
                                    <p className='course-status'>拼团价{item.groupon_price}元</p>
                                    }
                                </div>
                            )
                            return (
                                <Course
                                    key={index}
                                    top={top}
                                    data={item}
                                    bottom={bottom}
                                    status={status}
                                    img={item.course_img_small}
                                    title={item.course_title}
                                    id={item.course_id}
                                    toDetail={toDetail}
                                    className='text-overflow-2'
                                />
                            )
                        })
                    }
                </ul>
            </LazyLoad>
        </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.live_status === 0 &&
                                            <p className="item-time">时间：{item.live_start_time}</p>
                                        }
                                        {
                                            !item.is_prepare && item.live_status === 0 &&
                                            <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);
