import React, { Component, Fragment } from 'react';
import { inject, observer } from "mobx-react";
import SecondaryLayout from '@/layouts/SecondaryLayout';
import { Button, Accordion, Card, WhiteSpace, Toast } from 'antd-mobile';
import Pay from '@/utils/wxpay';

@inject("store")
@observer
export class OrderDetail extends Component {
    constructor(props) {
        super(props);
        this.store = this.props.store;
        this.userStore = this.store.userStore;
    }
    componentDidMount() {
        const script = document.createElement("script");
        script.src = "http://res.wx.qq.com/open/js/jweixin-1.0.0.js";
        script.async = true;
        document.body.appendChild(script);
        this.userStore.orderTrack(this.props.match.params.orderId);
        this.userStore.itineraryDetail(this.props.match.params.coli);
        // test: '180524043M'
        // this.userStore.orderTrack('180524043M'); // '180524043M'
        // this.userStore.itineraryDetail('435010163');
    }
    onClickWxpay = (coli_sn) => {
        Toast.loading('', 0);
        Pay.done(coli_sn, 'JSAPI', isTrue => {
            if (isTrue !== false) {
                Toast.success('Success!', 1);
                this.userStore.paidCallback(isTrue);
            } else {
                Toast.offline('Something wrong, We\'ll contact you later.', 2);
            }
        });
    }

    render() {
        return (
            <SecondaryLayout navTitle="Order Details" >
                <Fragment>
                    <Card full className="holly-card">
                        <Card.Header
                            title={`Booking Reference # ${this.props.match.params.orderId}`}
                            extra=''
                        />
                        <Card.Body>
                            <p>Total Price: <span>{`${this.userStore.orderDetail.orderTour[0].currency} ${this.userStore.orderDetail.orderTour[0].totalPrice}`}</span></p>
                            {this.userStore.orderDetail.operator &&
                                <Fragment>
                                    <p>Trip advisor name: <span>{`${this.userStore.orderDetail.operator.englishName} ${this.userStore.orderDetail.operator.chineseName}`}</span></p>
                                    <p>Mobile: <span>{this.userStore.orderDetail.operator.tel}</span> </p>
                                    <p>Email: <span>{this.userStore.orderDetail.operator.email}</span> </p>
                                </Fragment>
                            }
                        </Card.Body>
                        {parseFloat(this.userStore.orderDetail.paidQuote)===0 &&
                            <Card.Footer
                                content={(
                                    <Fragment>
                                        <p> {`Paid: ${this.userStore.orderDetail.paidQuote}`}</p>
                                        <p> {`Pending payment: ${this.userStore.orderDetail.pendingBalance}`}</p>
                                    </Fragment>
                                )}
                                extra={(<Button inline onClick={e => this.onClickWxpay(this.userStore.orderDetail.orderTour[0].coli)} className="holly-btn_paywx" >Pay Now</Button>)}
                            // extra={<Button inline type="ghost" onClick={e => this.onClickWxpay(this.userStore.orderDetail.orderTour[0].coli)}>Pay Now</Button>}
                            />
                        }
                    </Card>

                </Fragment>
                <WhiteSpace />
                {/*  */}
                {this.userStore.orderDetail.orderTour.length > 0 && this.userStore.operation.status === 0 &&
                    <Fragment>
                        <Accordion defaultActiveKey="0" className="holly-accordion" >
                            {this.userStore.orderDetail.orderTour.map((day, i) => (
                                <Accordion.Panel header={day.startDate} key={i} >
                                    <Card full>
                                        <Card.Header
                                            title="Tour name"
                                        />
                                        <Card.Body>
                                            <div>{day.tourName}</div>
                                            <div>{day.subTourInfo}</div>
                                        </Card.Body>
                                    </Card>
                                    <Card full>
                                        <Card.Header
                                            title="Total number of travelers"
                                        />
                                        <Card.Body>
                                            <div>{day.personNum}</div>
                                        </Card.Body>
                                    </Card>
                                    <Card full>
                                        <Card.Header
                                            title="Contact information"
                                        />
                                        <Card.Body>
                                            <div>{day.leader}</div>
                                        </Card.Body>
                                    </Card>
                                    <Card full>
                                        <Card.Header
                                            title="Hotel Info"
                                        />
                                        <Card.Body>

                                            <p>Name: <span>{day.hotelName}</span> </p>

                                            <p>Address: <span>{day.hotelAddress}</span></p>

                                            <p>Tel: <span>{day.hotelTel}</span> </p>
                                        </Card.Body>
                                    </Card>
                                </Accordion.Panel>
                            ))}
                        </Accordion>
                    </Fragment>
                }
                {this.userStore.operation.status === 1 &&
                    <Fragment>
                        <Accordion defaultActiveKey="0" className="holly-accordion" >
                            {this.userStore.operation.operation.map((day, i) => (
                                <Accordion.Panel header={day.start_date} key={i} >
                                    <Card full>
                                        <Card.Header
                                            title="Tour name"
                                        />
                                        <Card.Body>
                                            <div>{day.tour_name}</div>
                                        </Card.Body>
                                    </Card>
                                    <Card full>
                                        <Card.Header
                                            title="Total number of travelers"
                                        />
                                        <Card.Body>
                                            <div>{day.personNum_text}</div>
                                        </Card.Body>
                                    </Card>
                                    <Card full>
                                        <Card.Header
                                            title="Contact information"
                                        />
                                        <Card.Body>
                                            <div>{day.leader_name}</div>
                                        </Card.Body>
                                    </Card>
                                    <Card full>
                                        <Card.Header
                                            title="Hotel Info"
                                        />
                                        <Card.Body>

                                            <p>Name: <span>{day.hotel_name}</span> </p>

                                            <p>Address: <span>{day.hotel_address}</span></p>

                                            <p>Tel: <span>{day.hotel_tel}</span> </p>
                                        </Card.Body>
                                    </Card>
                                    <Card full>
                                        <Card.Header
                                            title="Pick Up"
                                        />
                                        <Card.Body>
                                            <div>{day.pick_up}</div>
                                        </Card.Body>
                                    </Card>
                                    <Card full>
                                        <Card.Header
                                            title="Drop Off"
                                        />
                                        <Card.Body>
                                            <div>{day.drop_off}</div>
                                        </Card.Body>
                                    </Card>
                                    {day.cardriver &&
                                        <Card full>
                                            <Card.Header
                                                title="Driver"
                                            />
                                            <Card.Body>
                                                <p>Name: <span>{day.cardriver[0].driver_name}</span> </p>
                                                <p>Mobile: <span>{day.cardriver[0].driver_tel}</span> </p>
                                                <p>Vehicle: <span>{`${day.cardriver[0].car_type} ${day.cardriver[0].car_license}`}</span> </p>
                                            </Card.Body>
                                        </Card>
                                    }
                                    {day.tourguide &&
                                        <Card full>
                                            <Card.Header
                                                title="Tour Guide"
                                            />
                                            <Card.Body>
                                                <p>Name: <span>{`${day.tourguide[0].guide_name}`}</span></p>
                                                <p>Mobile: <span>{day.tourguide[0].guide_tel}</span></p>
                                            </Card.Body>
                                        </Card>
                                    }
                                </Accordion.Panel>
                            ))}
                        </Accordion>
                    </Fragment>
                }
            </SecondaryLayout>
        )
    }
}
export default OrderDetail
