import React, { Component } from 'react';
import CommonHeader from '../CommonHeader';
import { mb_open } from 'cbkfe-bridge';
import { isArray } from 'cbkfe-utils';
import './style';
import { gt } from '../track';

export default class PackageContent extends Component {
    componentDidMount() {
    }

    //https://static.caibeike.com/i/8dab859fb24a0d6c77d486dd3e779234-ihZZL0-fMwfMhp1    美食
    //https://static.caibeike.com/i/b349c8ca7595fcd498147ebad505f110-hVm0WZ-fMwfMhp1    玩乐
    //https://static.caibeike.com/i/89429b9193085fff1de31e0c77fc9675-TF4Xz7-fMwfMhp1    课程

    renderFoodMenuVoucher(infos) {

        if (!isArray(infos, true)) {
            return null;
        }
        return <div className="food-menu-container">
            {infos.map((infosItem, index) => <div className="food-menu-container-title" key={index}>
                {infos.length > 1 && <div className="food-menu-title">
                    {infosItem.icon && <img className="title-image" src={infosItem.icon}></img>}
                    {infosItem.title && <div className="title-des" >{infosItem.title}</div>}
                </div>}
                {
                    isArray(infosItem.packageContents, true) && infosItem.packageContents.map((info, index) => {
                        return <div className="food-menu" key={index}>
                            <div className="food-menu_title-layout">
                                <span className="food-menu__title">{info.title}</span>
                                <span className="foodMenu-item_price">{info.price}</span>
                            </div>
                            {
                                Array.isArray(info.details) && info.details.map((item, index) => {
                                    return <div key={index} className="food-menu__item">
                                        <span className="foodMenu-item_name" >
                                            {/* <span style={{fontSize: '0.5rem',marginRight: '0.28rem'}}>•</span> */}
                                            <span className="foodMenu-item_text">{item.title}</span>
                                            {item.unit ? <span className="foodMenu-item_count">({item.unit})</span> : null}
                                        </span>
                                        <span className="foodMenu-item_price">{item.price}</span>
                                    </div>;
                                })
                            }
                        </div>;
                    })
                }
            </div>)}
        </div>;
    }

    renderFoodMenu(infos) {
        if (!isArray(infos, true)) {
            return null;
        }
        return <div className="food-menu-container">
            {
                infos.map((info, index) => {
                    return <div className="food-menu" key={index}>
                        <p className="food-menu__title">{info.title}</p>
                        {
                            Array.isArray(info.details) && info.details.map((item, index) => {
                                return <div key={index} className="food-menu__item">
                                    <span className="foodMenu-item_name" >
                                        {/* <span style={{fontSize: '0.5rem',marginRight: '0.28rem'}}>•</span> */}
                                        <span className="foodMenu-item_text">{item.title}</span>
                                        {item.unit ? <span className="foodMenu-item_count">({item.unit})</span> : null}
                                    </span>
                                    <span className="foodMenu-item_price">{item.price}</span>
                                </div>;
                            })
                        }
                    </div>;
                })
            }
        </div>;
    }


    renderParkDesc = (renderComments) => {
        if (!isArray(renderComments, true)) {
            return null;
        }
        return <div className="package-comment">
            {
                renderComments.map((comment, index) => {
                    return <React.Fragment key={comment.title + index}>
                        <p className="package-comment__title"><img className="icon-cost" src={comment.icon} />{comment.title}</p>
                        <div>
                            {
                                Array.isArray(comment.comments)
                                && comment.comments.map((item, index) =>
                                    <p key={index} className="package-comment-item">
                                        <span className="comment-item__point">•</span>
                                        {item}
                                    </p>
                                )
                            }
                        </div>
                    </React.Fragment>;
                })
            }
        </div>;
    }

    renderMoregroupons = (item, index) => {
        return <div key={item.title + index} className="moreGroupon-item">
            <div className="moreGroupon__title">{item.title}</div>
            <div className="moreGroupon__priceInfo">
                <span className="moreGroupon__soldPrice">¥{item.soldPrice}</span>
                <del className="moreGroupon__marketPrice">¥{item.marketPrice}</del>
                <span className="moreGroupon__label">{item.groupNumber}人团</span>
                <i className="iconfont icon--arrow moreGroupon__arrow"></i>
            </div>
        </div>;
    }

    render() {
        let { packageType, infos, packageContents, comments = [], type } = this.props.info;
        infos = packageContents || infos;
        let renderContent = null;

        if (type === 'vouchers') {
            renderContent = this.renderFoodMenuVoucher(infos);
        } else {
            switch (packageType) {
                case 'food': // 餐类型的话 展示菜单
                    if (!Array.isArray(infos) || infos.length === 0) {
                        renderContent = null;
                    }
                    renderContent = this.renderFoodMenu(infos);
                    break;
                default: //  默认非餐
                    if (!isArray(comments, true)) {
                        renderContent = null;
                        break;
                    }
                    let renderComments = comments.filter(comment => comment.title && Array.isArray(comment.comments) && comment.comments.length);
                    if (renderComments.length === 0) {
                        renderContent = null;
                    }
                    renderContent = this.renderParkDesc(renderComments);
                    break;
            };
        }



        let { packageTitle, moreItem, itemId } = this.props.info;
        let { Header, children } = this.props;
        if (!renderContent && !children) {
            return null;
        }
        return (
            <div className="package-content">
                {
                    (packageTitle || Header)
                        ? <div className="package-content__header">
                            {packageTitle && <CommonHeader title={packageTitle} />}
                            {Header && <Header />}
                        </div>
                        : null
                }


                {renderContent && <div className="package-content__card">{renderContent}</div>}
                {moreItem && moreItem.linkUrl
                    ? <div
                        {...gt(`group_detail_other_enter_pv,group_detail_other_enter_click/${itemId}/${moreItem.itemId || ''}`)}
                        onClick={() => {
                            mb_open(moreItem.linkUrl);
                        }} className="package-content__moreGroupon">
                        {this.renderMoregroupons(moreItem)}
                    </div>
                    : null}
                {children}
            </div>
        );
    }
}