import React from "react"
import { VList } from '../../../common'
import './my-courses.scss'

const mockData = [
    {
        title: '三月面试求职班',
        imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
        contact: 'QQ群：449141326',
        time: '03月12日',
        record: '学习到第2课2分33秒'
    },
    {
        title: '三月面试求职班',
        imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
        contact: 'QQ群：449141326',
        time: '03月12日',
        record: '学习到第2课2分33秒'
    },
    {
        title: '三月面试求职班',
        imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
        contact: 'QQ群：449141326',
        time: '03月12日',
        record: '学习到第2课2分33秒'
    },
    {
        title: '三月面试求职班',
        imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
        contact: 'QQ群：449141326',
        time: '03月12日',
        record: '学习到第2课2分33秒'
    },
]


function AddCourse(props) {
    return (
        <div className='add-course'>
            <button className='add' onClick={props.addCourseClick}>添加课程+</button>
        </div>
    )
}

export default function MyCourses() {
    const handleClick = () => {
        console.log(1);
    }
    const addCourseClick = () => {
        console.log(2);
    }
    if(mockData.length !== 0){
        return (
            <>
                <ul>
                    {
                        mockData.map((item, index) => {
                            const Info = (
                                <div className="info">
                                    <p className='title'>{item.title}</p>
                                    <p className='contact'>{item.contact}</p>
                                    <p className='des'>
                                        <span className='time'>{item.time}</span>
                                        <span className='record'>{item.record}</span>
                                    </p>
                                </div>
                            )
                            return (
                                <VList handleClick={handleClick} {...item} key={index} info={Info}></VList>
                            )
                        })
                    }
                </ul>
                <AddCourse addCourseClick={addCourseClick}/>
            </>
        )
    }else {
        return (
            <div className="empty">
                <p><i className='iconfont iconfish'></i></p>
                <p className='empty-prompt'>还是咸鱼一条，快去翻身~</p>
                <p><button>去选课</button></p>
            </div>
        )
    }

}