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


class ReserveCourse extends Component {
    constructor(props) {
        super(props);
        this.state = {
            courseData: []
        };
    }

    componentDidMount() {
        this.fetchAICourse();
    }

    fetchAICourse = () => {
        http.get(`${API.home}/sys/pre_coursee`).then(res => {
            const {code, data, msg} = res.data;
            if (code === 200) {
                this.setState({
                    courseData: data
                })
            } else {
                Toast.info(msg, 2);
            }
        });
    }

    // 立即付定金
    expandPaydj = (courseId) => {
        const {user, history} = this.props;
        const uid = user && user.data && user.data.uid;
        if (!uid) {
            this.props.history.push('/passport/login')
        } else {
            this.props.history.push(
                `/deposit-order?oid=${courseId}&source=${1}`,
                {
                    id: courseId,
                    isexpand: 1,
                    sourcenum: 1
                }
            )
        }
    }
    // 立即付尾款
    expandPaywk = (courseId, day) => {
        const {user, history} = this.props;
        const uid = user && user.data && user.data.uid;
        if (!uid) {
            this.props.history.push('/passport/login')
        } else {
            Toast.info("付尾款时间将在" + day + "开启", 2);
        }
    }
    // 去学习
    tostudy = (courseId) => {
        this.props.history.push(`/getDetail?id=${courseId}`)
    }

    render() {
        const {courseData} = this.state;
        return (
            <div className='reserve-course-module'>
                <CourseList courseData={courseData}
                            expandPaydj={this.expandPaydj}
                            expandPaywk={this.expandPaywk}
                            tostudy={this.tostudy}/>
            </div>
        )
    }
}

function CourseList(props) {
    const {courseData, expandPaydj, expandPaywk, tostudy} = props
    return (
        <div className="course-list">
            <ul>
                {
                    courseData.map((item, index) => {
                        return (
                            <li className="course-item-box" key={index}>
                                <Link to={`/getDetail?id=${item.course_id}`}>
                                    <div className="top">
                                        <div className="square">
                                            <p className="circular">
                                                到手最低¥<span>{Number(item.price) - Number(item.deduction_amount) - Number(item.limit_amount)}</span>
                                            </p>
                                        </div>
                                        <img className="course-img" src={item.image_name} alt=""/>
                                    </div>
                                </Link>

                                <p className="count-price">
                                    =原价¥{item.price}
                                    <span>-抵扣¥<i>{item.deduction_amount}</i></span>
                                    <span>-膨胀券¥<i>{item.limit_amount}</i></span>
                                </p>

                                <div className="btn">
                                    {
                                        item.is_buy === 0 &&
                                        <button className="to-expand-buy1"
                                                onClick={() => expandPaydj(item.course_id)}>立即付定金</button>
                                    }
                                    {
                                        item.is_buy === 1 &&
                                        <button className="to-expand-buy2"
                                                onClick={() => expandPaywk(item.course_id, item.final_start_time)}>立即付尾款</button>
                                    }
                                    {
                                        item.is_buy === 2 &&
                                        <button className="to-study"
                                                onClick={() => tostudy(item.course_id)}>开始学习</button>
                                    }

                                </div>
                            </li>
                        )
                    })
                }
            </ul>
        </div>
    )
}

export default listFrame(connect(
    state => ({
        user: state.user
    }),
)(withRouter(ReserveCourse)))