import React, { Component, Fragment } from 'react';
import { observer, inject } from 'mobx-react';
import { toJS } from 'mobx';
import AppLayout from "@/layouts/AppLayout";
import ItineraryCard from '@/components/ItineraryCard';
import TopDestinations from "@/components/TopDestinations";
import { Card, WhiteSpace } from 'antd-mobile';
import * as Icons from '@/components/Icons';

@inject("store")
@observer
class MyOrders extends Component {
    constructor(props) {
        super(props);
        this.userStore = this.props.store.userStore;
        // this.props.store.login(this.props.match.params.userid);
        // this.props.store.setDocumentTitle(this.props.store.pageTitle);
    }
    componentDidMount() {
        this.userStore.getItinerary(this.props.location.search);
    }

    render() {
        const userinfo = toJS(this.props.store.userinfo);
        const itineraryList = toJS(this.userStore.itinerary);
        return (
            <AppLayout>
                <Fragment>
                    <Card full className="holly-card">
                        <Card.Header
                            title={userinfo ? userinfo.nickname : ''}
                            extra={userinfo ? <img width='40' alt='user head img' src={userinfo.head_img} /> || Icons.USERFILE_LG : ''}
                        />
                    </Card>
                    <WhiteSpace size="lg" />
                    {itineraryList.length !== 0 ? itineraryList.map((item =>
                        <ItineraryCard key={item.orderId} {...item} />
                    )) : <Fragment>
                            <h4 className="holly-text-center">Haven't book any tour yet? Try top destinations of China:</h4>
                            <TopDestinations />
                        </Fragment>
                    }

                </Fragment>
            </AppLayout>
        )
    }
}

export default MyOrders;

