import React, {Component} from 'react'
import './index.scss'
import {http, SendMessageToApp, getParam, browser} from '@/utils'
import CommonContainer from './../../common/commonContainer/index'
import CourseItem from '../../../../blessingPreheat/courseItem/index'
import {withRouter} from "react-router-dom"
import CommonPopup from './../../common/commonPopup/index'
import {Toast} from 'antd-mobile'
import QRCode from 'qrcode'
import {connect} from "react-redux"

@connect(state => ({
    user: state.user
}))

class YearCourse extends Component {
    constructor(props) {
        super(props)
        this.state = {
            tofreeStudy: false,
            basic: {
                course: [],
                courseList: [],
                isMore: false,
                addshowMore: false,
            },
            advanced: {
                course: [],
                courseList: [],
                isMore: false,
                addshowMore: false,
            },
            higher: {
                course: [],
                courseList: [],
                isMore: false,
                addshowMore: false,
            },
            expand: {
                course: [],
                courseList: [],
                isMore: false,
                addshowMore: false,
            },
            bigcourse: {
                course: [],
                courseList: [],
                isMore: false,
            },
            freecourse: {
                course: [],
                courseList: [],
                isMore: false,
            },
            groupcourse: {
                course: [],
                courseList: [],
                isMore: false,
            },
            isshowFollow: false, // 是否提示关注公众号
            wish: {
                id: '',
                key: ""
            },
            followBarcode: ''
        }
    }

    componentDidMount() {
        this.getLength()
        this.fetchBigCourse()
        this.fetchFreeCourse()
        this.fetchGroupCourse()
        // AI之路-基础
        this.fetchAICourse('one', false)
        // AI之路-进阶
        this.fetchAICourse('two', false)
        // AI之路-高阶
        this.fetchAICourse('three', false)
        // AI之路-拓展
        this.fetchAICourse('four', false)
    }

    shouldComponentUpdate(nextProps, nextState, nextContext) {
        if (this.props.isAppUpdate !== nextProps.isAppUpdate) {
            this.fetchBigCourse()
            this.fetchFreeCourse()
            this.fetchGroupCourse()
            // AI之路-基础
            this.fetchAICourse('one')
            // AI之路-进阶
            this.fetchAICourse('two')
            // AI之路-高阶
            this.fetchAICourse('three')
            // AI之路-拓展
            this.fetchAICourse('four')
            return false
        }
        return true
    }

    getLength = () => {
        let _this = this
        http.get(`${API.home}/activity/wish_sum`).then(res => {
            const {code, data} = res.data
            if (code == 200) {
                _this.setState({
                    sum: data.sum
                })
                this.props.getSum(_this.state.sum)
            }
        })
    }

    fetchBigCourse = () => {
        const {bigcourse} = this.state
        http.get(`${API.home}/activity/preheat_data`).then(res => {
            const {code, data} = res.data
            if (code === 200) {
                this.setState({
                    bigcourse: Object.assign({}, bigcourse, {
                        isMore: data.length > 4 ? true : false,
                        course: data.length > 4 ? data.filter((item, index) => index < 4) : data,
                        courseList: data,
                    })
                })
            }
        })
    }
    fetchFreeCourse = () => {
        const {freecourse} = this.state
        http.get(`${API['base-api']}/assistance/detail`).then(res => {
            const {errno, data} = res.data
            if (errno === 200) {
                this.setState({
                    freecourse: Object.assign({}, freecourse, {
                        isMore: data.course_info.length > 4 ? true : false,
                        course: data.course_info.length > 4 ? data.course_info.filter((item, index) => index < 4) : data.course_info,
                        courseList: data.course_info,
                    })
                })
            }
        })
    }
    fetchGroupCourse = () => {
        const {groupcourse} = this.state
        http.get(`${API.home}/activity/excellent_course`).then(res => {
            const {code, data} = res.data
            if (code === 200) {
                this.setState({
                    groupcourse: Object.assign({}, groupcourse, {
                        isMore: data.length > 4 ? true : false,
                        course: data.length > 4 ? data.filter((item, index) => index < 4) : data,
                        courseList: data,
                    })
                })
            }
        })
    }

    fetchAICourse = (key, addshowMore) => {
        http.get(`${API.home}/activity/four_stage/${key}`).then(res => {
            const {code, data} = res.data
            if (code === 200) {
                this.getList(key, data, addshowMore)
            }
        })
    }

    getList = (key, data, addshowMore) => {
        const {basic, advanced, higher, expand} = this.state
        if (key === 'one') {
            this.setState({
                basic: Object.assign({}, basic, {
                    isMore: data.length > 4 && !addshowMore ? true : false,
                    course: data.length > 4 && !addshowMore ? data.filter((item, index) => index < 4) : data,
                    courseList: data,
                    addshowMore: addshowMore,
                })
            })
        }
        if (key === 'two') {
            this.setState({
                advanced: Object.assign({}, advanced, {
                    isMore: data.length > 4 && !addshowMore ? true : false,
                    course: data.length > 4 && !addshowMore ? data.filter((item, index) => index < 4) : data,
                    courseList: data,
                    addshowMore: addshowMore,
                })
            })
        }
        if (key === 'three') {
            this.setState({
                higher: Object.assign({}, higher, {
                    isMore: data.length > 4 && !addshowMore ? true : false,
                    course: data.length > 4 && !addshowMore ? data.filter((item, index) => index < 4) : data,
                    courseList: data,
                    addshowMore: addshowMore,
                })
            })
        }
        if (key === 'four') {
            this.setState({
                expand: Object.assign({}, expand, {
                    isMore: data.length > 4 && !addshowMore ? true : false,
                    course: data.length > 4 && !addshowMore ? data.filter((item, index) => index < 4) : data,
                    courseList: data,
                    addshowMore: addshowMore,
                })
            })
        }
    }

    toQQque = () => {
        if (!getParam('version')) {
            location.href = 'https://q.url.cn/AB8aue?_type=wpa&qidian=true'
        } else {
            SendMessageToApp("toQQ", 'https://q.url.cn/AB8aue?_type=wpa&qidian=true')
        }
    }

    // 去课程详情页
    toCourse = (courseId) => {
        const {history} = this.props
        if (!getParam('version')) {
            history.push(`/detail?id=${courseId}`)
        } else {
            SendMessageToApp("toCourse", courseId)
        }
    }
    handleToMore = (key) => {
        let data = {}
        if (this.state[key]['isMore']) {
            data[key] = {
                isMore: !this.state[key]['isMore'],
                course: this.state[key]['courseList'],
                courseList: this.state[key]['courseList'],
                addshowMore: !this.state[key]['addshowMore']
            }
            this.setState({
                ...data
            })
        } else {
            data[key] = {
                isMore: !this.state[key]['isMore'],
                course: this.state[key]['courseList'].filter((item, index) => index < 4),
                courseList: this.state[key]['courseList'],
                addshowMore: !this.state[key]['addshowMore']
            }

            this.setState({
                ...data
            })
        }
    }

    // 去登录
    toLogin = () => {
        if (!getParam('version')) {
            this.props.history.push('/passport/login')
        } else {
            SendMessageToApp("toLogin")
        }
    }

    // 免费学习
    freeStudy = () => {
        this.setState({
            tofreeStudy: true,
        })
    }
    // 关闭弹框
    closePopup = () => {
        this.setState({
            tofreeStudy: false,
        })
    }

    closePopupWish = () => {
        const _this = this
        _this.setState({
            isshowFollow: false
        })

        setTimeout(function () {
            _this.toJoinList(_this.state.wish.id, _this.state.wish.key)
        }, 200)
    }

    getQRcodeUrl = () => {
        let _this = this
        http.get(`${API['base-api']}/wx/user_temporary_qrcode/${_this.props.user.data.uid}`)
            .then(res => {
                const {errno, data, msg} = res.data
                QRCode.toDataURL('http://weixin.qq.com/q/02mntn9j4xcw01_VSN1tc2', (err, url) => {
                    this.setState({
                        followBarcode: url,
                    })
                })
                // _this.followBarcode = "https://mp.weixin.qq.com/cgi-bin/showqrcode?ticket=gQEV8DwAAAAAAAAAAS5odHRwOi8vd2VpeGluLnFxLmNvbS9xLzAybW50bjlqNHhjdzAxX1ZTTjF0YzIAAgR5pfBdAwSAUQEA"

                // if (errno == 0) {
                //     _this.followBarcode = data.url
                // } else {
                //     Message.warning(msg)
                // }
            })
    }

    // 点击加入心愿单登录验证，在判断是否关注公众号，已关注的话直接加入，未关注弹出二维码弹窗，点击关闭按钮加入心愿单
    addWishList = (id, key) => {
        const _this = this
        const isLogin = !this.props.user.hasError
        _this.setState({
            wish: {
                id: id,
                key: key
            }
        })

        if (isLogin) {
            _this.isFollow(id, key)
        } else {
            _this.toLogin()
        }
    }

    isFollow = (id, key) => {
        const _this = this
        http.get(`${API.home}/m/live/isFollow`).then(res => {
            const {code, data, msg} = res.data
            if (code === 200) {
                _this.setState({
                    isshowFollow: data.status == 0 ? true : false
                })

                if (!_this.state.isshowFollow) {
                    _this.toJoinList(id, key)
                } else {
                    _this.getQRcodeUrl()
                }
            } else {
                Toast.info(msg, 2)
            }
        })
    }

    toJoinList = (id, key) => {
        const _this = this
        http.post(`${API.home}/activity/join_list`, {course_id: id})
            .then(res => {
                const {code, msg} = res.data
                if (code == 200) {
                    Toast.success('已成功加入心愿单', 3)
                    _this.getLength()
                    if (key === '1') {
                        _this.fetchAICourse('one', _this.state.basic.addshowMore)
                    }
                    if (key === '2') {
                        _this.fetchAICourse('two', _this.state.advanced.addshowMore)
                    }
                    if (key === '3') {
                        _this.fetchAICourse('three', _this.state.higher.addshowMore)
                    }
                    if (key === '4') {
                        _this.fetchAICourse('four', _this.state.expand.addshowMore)
                    }
                    if (key === 'group') {
                        _this.fetchGroupCourse()
                    }
                } else {
                    Toast.info(msg, 2)
                }
            })
    }

    // 安卓手机保存二维码
    saveImage = () => {
        let version = getParam('version')
        version = typeof version === 'string' ? version.replace('.', '').replace('.', '').slice(0, 3) : ''
        const QRCodeUrl = '//julyedu-cdn.oss-cn-beijing.aliyuncs.com/2018christyear/h5/qrcode.jpg'
        if (version && parseInt(version) < 451) {
            Toast.info('当前不支持此功能，升级到最新版本app可以点击保存二维码！', 3, null, false)
        } else {
            SendMessageToApp('generateQRCode', QRCodeUrl)
        }
    }

    render() {
        const {bigcourse, freecourse, groupcourse, basic, advanced, higher, expand} = this.state

        return (
            <div className={'year-index-course'}>
                <CommonContainer title='重磅好课' id='year-course'>
                    <div>
                        {
                            (bigcourse.course && bigcourse.course.length > 0) &&
                            <>
                                <div className='bigcourse course-box'>
                                    {
                                        bigcourse.course.map(item => (
                                            <CourseItem image={item.image_name} key={item.course_id} id={item.course_id}
                                                        toCourse={this.toCourse}>
                                                <div className="coupon-course__footer">
                                                    {
                                                        item.is_buy == 1 &&
                                                        <a onClick={() => this.toCourse(item.course_id)} className="btn to-study">开始学习</a>
                                                    }
                                                    {
                                                        item.is_buy == 0 &&
                                                        <a onClick={() => this.toQQque()}
                                                           className="btn big-course">速抢拼团名额</a>
                                                    }

                                                </div>
                                            </CourseItem>
                                        ))
                                    }
                                </div>
                                {
                                    (bigcourse.courseList && bigcourse.courseList.length > 4) &&
                                    <button className="more-button" onClick={() => this.handleToMore('bigcourse')}>
                                        {group.isMore ? '查看更多' : '收起'}
                                    </button>
                                }
                            </>
                        }
                    </div>
                </CommonContainer>
                <CommonContainer title='人气好课免费学' id='year-free'>
                    <div>
                        {
                            (freecourse.course && freecourse.course.length > 0) &&
                            <>
                                <div className='freecourse course-box'>
                                    {
                                        freecourse.course.map(item => (
                                            <CourseItem image={item.image_name} key={item.course_id} id={item.course_id}
                                                        toCourse={this.toCourse}>
                                                <div className="coupon-course__footer">
                                                    {
                                                        item.is_buy == 1 &&
                                                        <a onClick={() => this.toCourse(item.course_id)} className="btn to-study">开始学习</a>
                                                    }
                                                    {
                                                        item.is_buy == 0 &&
                                                        <a onClick={() => this.freeStudy()}
                                                           className="btn free-study">点击免费学</a>
                                                    }

                                                    <p className="free-course-num">已送出<span>{item.act_num}</span>个课程</p>

                                                </div>
                                            </CourseItem>
                                        ))
                                    }
                                </div>
                                {
                                    (freecourse.courseList && freecourse.courseList.length > 4) &&
                                    <button className="more-button" onClick={() => this.handleToMore('freecourse')}>
                                        {group.isMore ? '查看更多' : '收起'}
                                    </button>
                                }
                            </>
                        }
                    </div>
                </CommonContainer>
                <CommonContainer title='精品好课1分开抢' id='year-group'>
                    <div>
                        {
                            (groupcourse.course && groupcourse.course.length > 0) &&
                            <>
                                <div className='groupcourse course-box'>
                                    {
                                        groupcourse.course.map(item => (
                                            <CourseItem image={item.image_name} key={item.course_id} id={item.course_id}
                                                        toCourse={this.toCourse}>
                                                <div className="group-num">限量300个</div>
                                                <div className="coupon-course__footer">
                                                    {
                                                        item.is_buy == 1 &&
                                                        <>
                                                            <p className={'course-title text-overflow-1'}>{item.course_title}</p>
                                                            <a onClick={() => this.toCourse(item.course_id)}
                                                               className="btn to-study">开始学习</a>
                                                        </>
                                                    }
                                                    {
                                                        item.is_buy == 0 &&
                                                        <>
                                                            <div className="type">
                                                                <span className="tag">拼团价</span>
                                                                <span className="time">12月23日开团</span>
                                                            </div>
                                                            <div className="price">¥
                                                                <span className="new-price">0.01</span>
                                                                <span
                                                                    className="old-price">现价：<s>¥{item.price1}</s></span>
                                                            </div>

                                                            <div className="status">
                                                                <a onClick={() => this.toCourse(item.course_id)}
                                                                   className="status-btn to-buy">直接购买</a>
                                                                {
                                                                    item.is_join == 1 &&
                                                                    <a className="status-btn add-wish"><img
                                                                        src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/PC/add-success.png"
                                                                        alt=""/>已加心愿单</a>
                                                                }
                                                                {
                                                                    item.is_join == 0 &&
                                                                    <a
                                                                        onClick={() => this.addWishList(item.course_id, 'group')}
                                                                        className="status-btn add-wish-success">
                                                                        <img
                                                                            src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/H5/like_icon.png"
                                                                            alt=""/>加入心愿单
                                                                    </a>
                                                                }
                                                            </div>
                                                        </>
                                                    }

                                                </div>
                                            </CourseItem>
                                        ))
                                    }
                                </div>
                                {
                                    (groupcourse.courseList && groupcourse.courseList.length > 4) &&
                                    <button className="more-button" onClick={() => this.handleToMore('groupcourse')}>
                                        {group.isMore ? '查看更多' : '收起'}
                                    </button>
                                }
                            </>
                        }
                    </div>
                </CommonContainer>
                <CommonContainer title='好课价到，等你抄底' id='year-discount'>
                    <div>
                        <h4 className="ai-course__subtitle">基础</h4>
                        {
                            (basic.course && basic.course.length > 0) &&
                            <>
                                <div className='groupcourse course-box'>
                                    {
                                        basic.course.map(item => (
                                            <CourseItem image={item.image_name} key={item.course_id} id={item.course_id}
                                                        toCourse={this.toCourse}>
                                                <div className="coupon-course__footer">
                                                    {
                                                        item.is_buy == 1 &&
                                                        <>
                                                            <p className={'course-title text-overflow-1'}>{item.course_title}</p>
                                                            <a onClick={() => this.toCourse(item.course_id)}
                                                               className="btn to-study">开始学习</a>
                                                        </>
                                                    }
                                                    {
                                                        item.is_buy == 0 &&
                                                        <>
                                                            <div className="type">
                                                                {
                                                                    item.type == 0 &&
                                                                    <>
                                                                        <span className="tag">活动价</span>
                                                                        <span className="time">12.23开始</span>
                                                                    </>
                                                                }
                                                                {
                                                                    item.type == 1 &&
                                                                    <>
                                                                        <span className="tag">拼团价</span>
                                                                        <span className="time">12.23开团</span>
                                                                    </>
                                                                }
                                                                {
                                                                    item.type == 2 &&
                                                                    <>
                                                                        <span className="tag">好友帮帮砍</span>
                                                                        <span className="time">12.23开砍</span>
                                                                    </>
                                                                }

                                                            </div>
                                                            <div className="price">
                                                                {item.type == 2 ? '到手最低:¥' : '¥'}
                                                                <span className="new-price">{item.price1}</span>
                                                                <span
                                                                    className="old-price">
                                                                     {item.type == 2 ? '' : '现价：'}
                                                                    <s>¥{item.price0}</s></span>
                                                            </div>

                                                            <div className="status">
                                                                <a onClick={() => this.toCourse(item.course_id)}
                                                                   className="status-btn to-buy">直接购买</a>
                                                                {
                                                                    item.is_join == 1 &&
                                                                    <a className="status-btn add-wish"><img
                                                                        src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/PC/add-success.png"
                                                                        alt=""/>已加心愿单</a>
                                                                }
                                                                {
                                                                    item.is_join == 0 &&
                                                                    <a
                                                                        onClick={() => this.addWishList(item.course_id, '1')}
                                                                        className="status-btn add-wish-success">
                                                                        <img
                                                                            src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/H5/like_icon.png"
                                                                            alt=""/>加入心愿单
                                                                    </a>
                                                                }
                                                            </div>
                                                        </>
                                                    }

                                                </div>
                                            </CourseItem>
                                        ))
                                    }
                                </div>
                                {
                                    (basic.courseList && basic.courseList.length > 4) &&
                                    <button className="more-button" onClick={() => this.handleToMore('basic')}>
                                        {basic.isMore ? '查看更多' : '收起'}
                                    </button>
                                }
                            </>
                        }

                        <h4 className="ai-course__subtitle">进阶</h4>
                        {
                            (advanced.course && advanced.course.length > 0) &&
                            <>
                                <div className='groupcourse course-box'>
                                    {
                                        advanced.course.map(item => (
                                            <CourseItem image={item.image_name} key={item.course_id} id={item.course_id}
                                                        toCourse={this.toCourse}>
                                                <div className="coupon-course__footer">
                                                    {
                                                        item.is_buy == 1 &&
                                                        <>
                                                            <p className={'course-title text-overflow-1'}>{item.course_title}</p>
                                                            <a onClick={() => this.toCourse(item.course_id)}
                                                               className="btn to-study">开始学习</a>
                                                        </>
                                                    }
                                                    {
                                                        item.is_buy == 0 &&
                                                        <>
                                                            <div className="type">
                                                                {
                                                                    item.type == 0 &&
                                                                    <>
                                                                        <span className="tag">活动价</span>
                                                                        <span className="time">12.23开始</span>
                                                                    </>
                                                                }
                                                                {
                                                                    item.type == 1 &&
                                                                    <>
                                                                        <span className="tag">拼团价</span>
                                                                        <span className="time">12.23开团</span>
                                                                    </>
                                                                }
                                                                {
                                                                    item.type == 2 &&
                                                                    <>
                                                                        <span className="tag">好友帮帮砍</span>
                                                                        <span className="time">12.23开砍</span>
                                                                    </>
                                                                }

                                                            </div>
                                                            <div className="price">
                                                                {item.type == 2 ? '到手最低:¥' : '¥'}
                                                                <span className="new-price">{item.price1}</span>
                                                                <span
                                                                    className="old-price">
                                                                     {item.type == 2 ? '' : '现价：'}
                                                                    <s>¥{item.price0}</s></span>
                                                            </div>

                                                            <div className="status">
                                                                <a onClick={() => this.toCourse(item.course_id)}
                                                                   className="status-btn to-buy">直接购买</a>
                                                                {
                                                                    item.is_join == 1 &&
                                                                    <a className="status-btn add-wish"><img
                                                                        src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/PC/add-success.png"
                                                                        alt=""/>已加心愿单</a>
                                                                }
                                                                {
                                                                    item.is_join == 0 &&
                                                                    <a
                                                                        onClick={() => this.addWishList(item.course_id, '2')}
                                                                        className="status-btn add-wish-success">
                                                                        <img
                                                                            src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/H5/like_icon.png"
                                                                            alt=""/>加入心愿单
                                                                    </a>
                                                                }
                                                            </div>
                                                        </>
                                                    }

                                                </div>
                                            </CourseItem>
                                        ))
                                    }
                                </div>
                                {
                                    (advanced.courseList && advanced.courseList.length > 4) &&
                                    <button className="more-button" onClick={() => this.handleToMore('advanced')}>
                                        {advanced.isMore ? '查看更多' : '收起'}
                                    </button>
                                }
                            </>
                        }

                        <h4 className="ai-course__subtitle">高阶</h4>
                        {
                            (higher.course && higher.course.length > 0) &&
                            <>
                                <div className='groupcourse course-box'>
                                    {
                                        higher.course.map(item => (
                                            <CourseItem image={item.image_name} key={item.course_id} id={item.course_id}
                                                        toCourse={this.toCourse}>
                                                <div className="coupon-course__footer">
                                                    {
                                                        item.is_buy == 1 &&
                                                        <>
                                                            <p className={'course-title text-overflow-1'}>{item.course_title}</p>
                                                            <a onClick={() => this.toCourse(item.course_id)}
                                                               className="btn to-study">开始学习</a>
                                                        </>
                                                    }
                                                    {
                                                        item.is_buy == 0 &&
                                                        <>
                                                            <div className="type">
                                                                {
                                                                    item.type == 0 &&
                                                                    <>
                                                                        <span className="tag">活动价</span>
                                                                        <span className="time">12.23开始</span>
                                                                    </>
                                                                }
                                                                {
                                                                    item.type == 1 &&
                                                                    <>
                                                                        <span className="tag">拼团价</span>
                                                                        <span className="time">12.23开团</span>
                                                                    </>
                                                                }
                                                                {
                                                                    item.type == 2 &&
                                                                    <>
                                                                        <span className="tag">好友帮帮砍</span>
                                                                        <span className="time">12.23开砍</span>
                                                                    </>
                                                                }

                                                            </div>
                                                            <div className="price">
                                                                {item.type == 2 ? '到手最低:¥' : '¥'}
                                                                <span className="new-price">{item.price1}</span>
                                                                <span
                                                                    className="old-price">
                                                                     {item.type == 2 ? '' : '现价：'}
                                                                    <s>¥{item.price0}</s></span>
                                                            </div>

                                                            <div className="status">
                                                                <a onClick={() => this.toCourse(item.course_id)}
                                                                   className="status-btn to-buy">直接购买</a>
                                                                {
                                                                    item.is_join == 1 &&
                                                                    <a className="status-btn add-wish"><img
                                                                        src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/PC/add-success.png"
                                                                        alt=""/>已加心愿单</a>
                                                                }
                                                                {
                                                                    item.is_join == 0 &&
                                                                    <a
                                                                        onClick={() => this.addWishList(item.course_id, '3')}
                                                                        className="status-btn add-wish-success">
                                                                        <img
                                                                            src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/H5/like_icon.png"
                                                                            alt=""/>加入心愿单
                                                                    </a>
                                                                }
                                                            </div>
                                                        </>
                                                    }

                                                </div>
                                            </CourseItem>
                                        ))
                                    }
                                </div>
                                {
                                    (higher.courseList && higher.courseList.length > 4) &&
                                    <button className="more-button" onClick={() => this.handleToMore('higher')}>
                                        {higher.isMore ? '查看更多' : '收起'}
                                    </button>
                                }
                            </>
                        }

                        <h4 className="ai-course__subtitle">扩展</h4>
                        {
                            (expand.course && expand.course.length > 0) &&
                            <>
                                <div className='groupcourse course-box'>
                                    {
                                        expand.course.map(item => (
                                            <CourseItem image={item.image_name} key={item.course_id} id={item.course_id}
                                                        toCourse={this.toCourse}>
                                                <div className="coupon-course__footer">
                                                    {
                                                        item.is_buy == 1 &&
                                                        <>
                                                            <p className={'course-title text-overflow-1'}>{item.course_title}</p>
                                                            <a onClick={() => this.toCourse(item.course_id)}
                                                               className="btn to-study">开始学习</a>
                                                        </>
                                                    }
                                                    {
                                                        item.is_buy == 0 &&
                                                        <>
                                                            <div className="type">
                                                                {
                                                                    item.type == 0 &&
                                                                    <>
                                                                        <span className="tag">活动价</span>
                                                                        <span className="time">12.23开始</span>
                                                                    </>
                                                                }
                                                                {
                                                                    item.type == 1 &&
                                                                    <>
                                                                        <span className="tag">拼团价</span>
                                                                        <span className="time">12.23开团</span>
                                                                    </>
                                                                }
                                                                {
                                                                    item.type == 2 &&
                                                                    <>
                                                                        <span className="tag">好友帮帮砍</span>
                                                                        <span className="time">12.23开砍</span>
                                                                    </>
                                                                }

                                                            </div>
                                                            <div className="price">
                                                                {item.type == 2 ? '到手最低:¥' : '¥'}
                                                                <span className="new-price">{item.price1}</span>
                                                                <span
                                                                    className="old-price">
                                                                     {item.type == 2 ? '' : '现价：'}
                                                                    <s>¥{item.price0}</s></span>
                                                            </div>

                                                            <div className="status">
                                                                <a onClick={() => this.toCourse(item.course_id)}
                                                                   className="status-btn to-buy">直接购买</a>
                                                                {
                                                                    item.is_join == 1 &&
                                                                    <a className="status-btn add-wish"><img
                                                                        src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/PC/add-success.png"
                                                                        alt=""/>已加心愿单</a>
                                                                }
                                                                {
                                                                    item.is_join == 0 &&
                                                                    <a
                                                                        onClick={() => this.addWishList(item.course_id, '4')}
                                                                        className="status-btn add-wish-success">
                                                                        <img
                                                                            src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/H5/like_icon.png"
                                                                            alt=""/>加入心愿单
                                                                    </a>
                                                                }
                                                            </div>
                                                        </>
                                                    }

                                                </div>
                                            </CourseItem>
                                        ))
                                    }
                                </div>
                                {
                                    (expand.courseList && expand.courseList.length > 4) &&
                                    <button className="more-button" onClick={() => this.handleToMore('expand')}>
                                        {expand.isMore ? '查看更多' : '收起'}
                                    </button>
                                }
                            </>
                        }
                    </div>
                </CommonContainer>

                {
                    this.state.tofreeStudy &&
                    <CommonPopup top={100} closePopup={this.closePopup} mark={false}>
                        <div className='sub__code_container'>
                            <p className='sub__title'>提醒服务</p>
                            <p className='sub__tip'>进入服务号回复<i>77</i>免费领取课程</p>
                            <img className='sub__qr_code' id={'live-qr-code'}
                                 src='//julyedu-cdn.oss-cn-beijing.aliyuncs.com/2018christyear/h5/qrcode.jpg' alt=""/>
                            {
                                browser.isAndroidApp ? (
                                    <button className={'save-image'} onClick={this.saveImage}>保存二维码</button>
                                ) : <p className='sub__tip'>长按识别/扫码 关注【七月在线】服务号</p>
                            }
                        </div>
                    </CommonPopup>
                }
                {
                    this.state.isshowFollow &&
                    <CommonPopup top={100} closePopup={this.closePopupWish} mark={false}>
                        <div className='sub__code_container'>
                            <p className='sub__title'>提醒服务</p>
                            <p className='sub__tip'>课程开售立即提醒，不错过任何优惠哦！</p>
                            <img className='sub__qr_code' id={'live-qr-code'}
                                 src={this.state.followBarcode} alt=""/>
                            {
                                browser.isAndroidApp ? (
                                    <button className={'save-image'} onClick={this.saveImage}>保存二维码</button>
                                ) : <p className='sub__tip'>长按识别/扫码 关注【七月在线】服务号</p>
                            }
                        </div>
                    </CommonPopup>
                }
            </div>
        )
    }
}

export default withRouter(YearCourse)
