import React, {Component} from 'react';
import {WithTab} from '@/HOCs'
import './index.scss';
import {http} from "@/utils";
import {Link} from 'react-router-dom'
import {Toast} from 'antd-mobile'
import {HeaderBar} from "@/common"
import Loading from '@/common/Loading'
import {connect} from 'react-redux';

@connect()
class Classify extends Component {
    constructor(props) {
        super(props)
        this.state = {
            camp: [],
            employment: [],
            basics: [],
            advanced: [],
            special: [],
            isLoading: true
        }
    }

    componentDidMount() {
        let data = 1
        http.get(`${API.home}/m/course/classify/${data}`,).then((res) => {
            if (res.data.code === 200) {
                this.setState({
                    isLoading: false
                })

                if (res.data.data.common.length > 0) {
                    this.setState({
                        basics: res.data.data.common[0],
                        advanced: res.data.data.common[1] || [],
                    })
                }
                if (res.data.data.special.length > 0) {
                    this.setState({
                        camp: res.data.data.special[0],
                        employment: res.data.data.special[1] || [],
                        special: res.data.data.special[2] || [],
                    })

                }
            } else {
                Toast.info(res.data.msg, 2)
            }

        })
    }

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

    render() {
        return (
            <div className='class-box'>
                <HeaderBar title='分类' arrow={false} cart={false}></HeaderBar>
                <Loading isLoading={this.state.isLoading}>
                    <ClassCourseBox toDetail={this.toCourseDetail} data={this.state.camp.list} title={this.state.camp.name} type={1}/>
                    <ClassCourseBox toDetail={this.toCourseDetail} data={this.state.employment.list} title={this.state.employment.name} type={1}/>
                    <ClassCourseBox toDetail={this.toCourseDetail} data={this.state.basics.list} title={this.state.basics.name} type={2}/>
                    <ClassCourseBox toDetail={this.toCourseDetail} data={this.state.advanced.list} title={this.state.advanced.name} type={2}/>
                    <div className="vip">
                        {this.state.special.list && this.state.special.list.length > 0 && this.state.special.list.map((item, index) => {
                            return (
                                <a onClick={() => this.toCourseDetail(item.course_id)} key={index}>
                                    <img src={item.course_img} alt=""/>
                                </a>
                            )
                        })
                        }
                    </div>
                </Loading>
            </div>
        )
    }
}

// 课程图片形式展示 点击图片直接跳转课程详情页面
function ClassCourseA({data, toDetail}) {
    return (
        <div className='items-box'>
            {
                data && data.length > 0 && data.map((item, index) => {
                    return (
                        <a onClick={() => toDetail(item.course_id)} key={index} className='item-banner'>
                            <img src={item.course_img} alt=""/>
                            {
                                (item.is_aist &&
                                    <span className='return_cash'></span>)
                            }
                        </a>
                    )
                })
            }
        </div>
    )
}

// 课程标签的形式展示  点击标签跳转分类详情页面
function ClassCourseB(props) {
    return (
        <div className='items-box'>
            {
                props.data && props.data.length > 0 && props.data.map((item, index) => {
                    return (
                        <Link to={`/courselist?id=${item.c_id}&name=${item.c_name}`} key={index} className='item-label'>
                            {item.c_name}
                        </Link>
                    )
                })
            }
        </div>
    )
}

function ClassCourseBox(props) {
    return (
        <div className="class-course">
            <p className='course-items-title'>
                {
                    props.title &&
                    <img src={require('./image/tips.png')} alt=""/>
                }
                {props.title}
            </p>
            {props.type === 1 &&
            <ClassCourseA data={props.data} toDetail={props.toDetail} />
            }
            {props.type === 2 &&
            <ClassCourseB data={props.data}/>
            }
        </div>
    )
}

export default WithTab(Classify);