import React from 'react';
import './style/index';
import classNames from 'classnames';
import { Popup, Label } from 'cbkfe-ui';
import { mb_open } from 'cbkfe-bridge';
import { isArray } from 'cbkfe-utils';

export default class TourPackages extends React.Component {
    //点击拼团进入订单页
    enterOrder = (value) => {
        value.soldStatus !== 3 && value.orderCommitUrl && mb_open(value.orderCommitUrl);;
    }

    showPopup(popupTitle, tourPackageList, showPopup, changeShowFunction) {
        return <Popup
            show={showPopup}
            type="top"
            contentClass="cbkfe-tourPackage-popup"
            onBackClick={changeShowFunction}
        >
            <p className="element-center cbkfe-tourPackage-title">{popupTitle}</p>
            <div className="scroll-height">
                {isArray(tourPackageList, true) && tourPackageList.map((item, index) => {
                    return <div key={index}>
                        <div className="cbk-line"></div>
                        <div className="direction-row" >

                            <div className="direction-row-content">
                                <p className="pageage-title over-ellipsis">{item.title}</p>
                                <p className="pageage-dec over-ellipsis">{item.subtitle}</p>
                                <div className="direction-row-tag" >
                                    {isArray(item.tags, true) && item.tags.map((item, index) => <Label key={index} type="disable1" bgColor="transparent" className="row-tag-label" value={item} />)}
                                    {/* {isArray(item.tags, true) && item.tags.map((item, index) => {
                                        return <div className={classNames('cbkfe-item-back', { 'marginLeft-tag': index })} key={index}><div style={{transform:'translateY(1px)'}}>{item} </div></div>;
                                    })} */}
                                </div>

                                <div className="price-flex-row">
                                    <div className="price-flex-soldPrice">
                                        <div style={{ fontSize: '0.6rem', marginBottom: '0.1rem' }}>￥</div>
                                        <div style={{ fontSize: '0.9rem' }}>{item.soldPrice}</div>
                                    </div>

                                    <del className="price-flex-del">￥{item.marketPrice}</del>
                                </div>
                            </div>
                            <div className="flex-end">

                                {/* soldStatus为3时表示已卖光 */}
                                <div className={classNames('bth-tour', { 'btn-notour': item.soldStatus === 3 })} onClick={this.enterOrder.bind(this, item)}>{item.btnName}</div>
                            </div>
                        </div>
                    </div>;
                })}
            </div>
        </Popup>;
    }

    render() {
        const { popupTitle, tourPackageList, show, change } = this.props;
        return (
            <div>
                {this.showPopup(popupTitle, tourPackageList, show, change)}
            </div >

        );
    }
}