import React, { Component } from 'react';
import { Flex, List, Toast } from 'antd-mobile';
import { OrderItem } from '@/common/index';
import { Link } from 'react-router-dom';
import { http, getParam } from "@/utils";
import {HeaderBar} from '../../common';


import "./index.scss"

const Item = List.Item;

function OrderList(props) {
    const listData = props.list;
    return (
        <div>
            {
                listData.map((item, index) => {
                    const { is_coupon, course_id, image_name, sale_price, simpledescription, course_title, coupon_num, coupon_desc} = item;
                    let NewPrice = (<span className='order-newprice'>¥{sale_price}</span>);
                    if(props.locationState && props.locationState.group) {
                        NewPrice = (<span className='order-newprice'>¥{props.groupPrice}</span>);
                    }
                    const Info = (
                        <div className="order-info">
                            <p
                                className='order-title'
                                style={{
                                    overflow: 'hidden',
                                    textOverflow: 'ellipsis',
                                    whiteSpace: 'nowrap'
                                }}
                                onClick={() => props.toDetail(course_id)}
                            >
                                {course_title}
                            </p>
                            <p className='order-content' style={{ WebkitBoxOrient: 'vertical', WebkitLineClamp: '2', wordBreak: 'break-all', overflow: 'hidden', textOverflow: 'ellipsis', display: '-webkit-box' }}>{simpledescription}</p>
                            <p className='order-des'>
                                {NewPrice}
                                <span className={'price-des'}>（预付定金）</span>
                            </p>
                        </div>
                    );

                    return (
                        <OrderItem
                            {...item}
                            src={image_name}
                            id={course_id}
                            key={index}
                            info={Info}
                            isaist={props.isaist}
                            toDetail={props.toDetail}
                        >
                            {
                                (props.locationState && (props.locationState.type || props.locationState.simple)) ? (
                                    <div className="order-prefer">
                                        <List key={index}>
                                            <Item
                                                arrow="horizontal"
                                                onClick={() => { }}
                                            >
                                                <Link to={{
                                                    pathname: `/coupons`,
                                                    search: `?id=${course_id}`,
                                                    state: {
                                                        from: '/order'
                                                    }}}>
                                                    <Flex justify='between'>
                            <span
                                style={{
                                    color: '#333',
                                    fontSize: '15px'
                                }}
                            >优惠券</span>
                                                        <span
                                                            style={{
                                                                fontSize: '14px',
                                                                color: '#999999'
                                                            }}
                                                        >
                              {!coupon_desc ? (coupon_num === 0 ? '无' : `${coupon_num}张可用`) : (coupon_desc)}
                            </span>
                                                    </Flex>
                                                </Link>
                                            </Item>
                                        </List>
                                    </div>
                                ) : null
                            }

                        </OrderItem>
                    )
                })
            }
        </div>
    );
}

class Order extends Component {
    constructor(props) {
        super(props);
        this.state = {
            groupPrice: '',
            total: 0.00, // 需要支付总金额
            discount: 0.00, //
            useBalance: false,
            orderList: [],
            info: false,
            offset: 0,
            depositPrice: 0,
            course_id: 165
        };
    }
    // 提交订单
    submitOrder = () => {
        http.post(`${API["base-api"]}/m/deposit/create`, {
            plat_form: 5,
            source: 1,   //来源 1-详情页 2-活动页,
            course_id: this.state.course_id
        }).then(res => {
            const {data} = res
            if(data.errno == 200){
                this.props.history.replace({pathname: '/deposit-pay-order',search: `?oid=${data.data['order_id']}`})
            }else {
                Toast.info(data.msg)
            }
        })
    }

    componentDidMount() {
        http.post(`${API["base-api"]}/m/deposit/preorder`, {
            course_id: this.state.course_id
        })
            .then(res => {
                const {data} = res
                if(data.errno == 200){
                    this.setState({
                        orderList: [data.data.course],
                        depositPrice: data.data.course['sale_price']
                    })
                }else {
                    Toast.info(data.msg)
                }
            })
    };

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

    render() {
        const {
            orderList,
            discount,
            groupPrice,
            depositPrice
        } = this.state;

        return (
            <div className="order-wrapper">
                <Flex>
                    <Flex.Item>
                        <HeaderBar title='课程报名' arrow={true} />
                        <div className="order-list">
                            <OrderList
                                list={orderList}
                                courseId={getParam('id')}
                                locationState={this.props.location.state}
                                groupPrice={groupPrice}
                                toDetail={this.toCourseDetail}
                            />
                        </div>
                        <ul className={'deposit-limit-time'}>
                            <li>· 7月17日 00:00:00开始支付尾款</li>
                            <li>· 代金券只能在支付尾款时使用</li>
                        </ul>
                        <div className="order-bar">
                            <div className="order-course">
                                <span className="order-course-text">{`${orderList.length}门课程`}</span>
                            </div>
                            <div className="order-bar-text">
                                <div className="order-amount">
                                    <span className="order-amount-title">合计:</span>
                                    <span className="order-amount-price">{`￥${depositPrice}`}</span>
                                </div>
                                <div className="order-preprice">
                                    <span className="order-preprice-title">已优惠:</span>
                                    <span className="order-preprice-price">{`¥${discount}`}</span>
                                </div>
                            </div>
                            <button type="button" className="order-button has-info">
                                <span className="order-button-text" onClick={this.submitOrder}>确定订单</span>
                            </button>
                        </div>
                    </Flex.Item>
                </Flex>
            </div>

        )
    }

}

export default Order;
