import React, { Component, Fragment } from 'react'
import { inject, observer } from "mobx-react";
import { Flex, List} from 'antd-mobile';

@inject("store")
@observer
export class PricingInfo extends Component {
    constructor(props){
        super(props);
        this.store = this.props.store;
        this.cityStore = this.store.cityStore;
        // this.cityStore.getTour(this.props.match.params.city,this.props.match.params.tourId);
        // console.log(toJS(this.cityStore.tourObj.activity));
    }
    render() {
        const price = (this.cityStore.tourObj.pricesByDateRange);
        return (
            <Fragment>
                {/* <h2>Pricing details &amp; Language Options</h2>
                <Badge text={`Min passengers: ${tour.rates[0].minPerBooking}`} style={{ marginLeft: 12, padding: '3px 15px', backgroundColor: '#E83032', borderRadius: 12 }} />
                <Badge text={`Max passengers: ${tour.rates[0].maxPerBooking}`} style={{ marginLeft: 12, padding: '3px 15px', backgroundColor: '#21b68a', borderRadius: 12 }} /> */}
                {/* <WhiteSpace /> */}
                <h2>{`${(new Date(price.from)).toDateString()} - ${price.to ? (new Date(price.to)).toDateString() : '>'}`}</h2>
                {price.rates.map(rate => {
                return (<List key={rate.rateId} renderHeader={() => (
                    <Flex>
                        {/* <Flex.Item>{rate.price ? 'Price catalog' : 'Age Band' }</Flex.Item> */}
                        {/* 有歧义的价格 luoyang 7137P54, tianjin: *,zhangjiajie: *, */}
                        <Flex.Item style={{flex:'2 1'}}>{rate.price ? 'Price catalog' : rate.title }</Flex.Item>
                        <Flex.Item style={{textAlign:'right'}}>Price per <span>{rate.price ? 'booking' : 'person'}</span></Flex.Item>
                    </Flex>
                ) }>
                    {/* chengdu 7137P7, P78 */}
                    {rate.price ?
                        <List.Item key={rate.rateId} extra={rate.price ? `${rate.price.currency} ${rate.price.amount}` : `${rate.passengers[0].price.currency} ${rate.passengers[0].price.amount}`}>{rate.title}</List.Item>
                    : null}
                    {rate.passengers ? rate.passengers.map(passenger => {
                        if (passenger.price) {
                            return (
                                <List.Item key={passenger.pricingCategoryId} extra={`${passenger.price.currency} ${passenger.price.amount}`}>
                                    {passenger.title}
                                </List.Item>
                            )
                        }
                        // zhangjiajie 7137P16
                        if(passenger.tieredPrices) {
                            return (
                                <Fragment key={passenger.pricingCategoryId}>
                                    <List.Item>{passenger.title}</List.Item>
                                    {passenger.tieredPrices.map(tieredPrice => (
                                    <List.Item key={passenger.ticketCategory + tieredPrice.minPassengersRequired}
                                        extra={`${tieredPrice.currency} ${tieredPrice.amount}`}>
                                    {tieredPrice.minPassengersRequired===tieredPrice.maxPassengersRequired || tieredPrice.maxPassengersRequired===undefined ? tieredPrice.minPassengersRequired : `${tieredPrice.minPassengersRequired}-${tieredPrice.maxPassengersRequired}`}<span>&nbsp;passengers</span>
                                    </List.Item>
                                    ))}
                                </Fragment>
                            )
                        }
                        return null;
                    }) :
                    null
                    }
                </List> )
                })}
            </Fragment>
        )
    }
}

export default PricingInfo
