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

class Purchased extends Component {
    constructor(props) {
        super(props)
        this.state = {
            data: []
        }
    }

    componentDidMount() {
        this.getList()
    }

    // 获取订单
    getList = () => {
        http.get(`${api.home}/m/my/courses`,).then((res) => {
            if (res.data.code === 200) {
                this.setState({
                    data: res.data.data
                })
            } else {
                Toast.info(res.data.msg, 2);
            }
        })
    }


    render() {
        const {user} = this.props
        const uid = user && user.data && user.data.uid
        return (
            <div className='purchased-box'>
                <HeaderBar title='已购课程' arrow={true} cart={false}></HeaderBar>
                {
                    this.state.data && this.state.data.length > 0 ?
                        <div className="purchased-body">
                            <div className='tip'>加群请备注您的学号：{uid}</div>
                            {
                                this.state.data.map((item, index) => {
                                    const Info = (
                                        <div className="info">
                                            <p className='title'>
                                                <Link to={`/detail?id=${item.course_id}`}>
                                                    {item.course_title}
                                                </Link>
                                            </p>
                                            <p className='contact text-overflow-2'>{item.simpledescription}</p>
                                            <div className='des'>
                                                QQ群：{item.course_qq}
                                            </div>
                                        </div>
                                    )
                                    return (
                                        <VList key={index} img={item.image_name}
                                               id={item.course_id}
                                               info={Info}></VList>
                                    )
                                })
                            }
                        </div>
                        : <div className="cart-tip">
                            <p className='cart-mess'>您还没有课程哦，快去逛逛吧~</p>
                            <Link to='/classify'>去逛逛</Link>
                        </div>
                }

            </div>
        )
    }
}

export default connect(
    state => ({user: state.user}),
    null
)(Purchased)