import React, {Component} from 'react'
import './index.scss'
import {http, SendMessageToApp, getParam} from '@/utils'
import CommonContainer from './../../common/commonContainer/index'
import CourseItem from '../../../../blessingPreheat/courseItem/index'
import {Link, withRouter} from "react-router-dom"

class YarnCourse extends Component {
    constructor(props) {
        super(props)
        this.state = {
            basic: {
                course: [],
                courseList: [],
                isMore: false,
            },
            advanced: {
                course: [],
                courseList: [],
                isMore: false,
            },
            higher: {
                course: [],
                courseList: [],
                isMore: false,
            },
            expand: {
                course: [],
                courseList: [],
                isMore: false,
            },
            bigcourse: {
                course: [],
                courseList: [],
                isMore: false,
            },
            freecourse: {
                course: [],
                courseList: [],
                isMore: false,
            },
            groupcourse: {
                course: [],
                courseList: [],
                isMore: false,
            },
        }
    }

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

    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) => {
        http.get(`${API.home}/activity/four_stage/${key}`).then(res => {
            const {code, data} = res.data
            if (code === 200) {
                this.getList(key, data)
            }
        })
    }

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

    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']
            }
            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']
            }

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

    freeStudy = () => {

    }
    // 点击加入心愿单登录验证，在判断是否关注公众号，已关注的话直接加入，未关注弹出二维码弹窗，点击关闭按钮加入心愿单
    addWishList = (id) => {

    }

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

        return (
            <>
                <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 toCourse={this.toCourse} 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 toCourse={this.toCourse} 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)}
                                                                        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)}
                                                                        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)}
                                                                        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)}
                                                                        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)}
                                                                        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>
            </>
        )
    }
}

export default withRouter(YarnCourse)
