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

class PackagesPurchaseMask extends React.Component {
    constructor(props) {
        super(props);
    }

    //跳转订单页
    searchOrderCommit = (orderCommitUrl) => {
        orderCommitUrl && mb_open(orderCommitUrl);
    };


    showPopup(dealSkus, showPopup, showClosePopup, directBuy, groupNumber) {

        return (
            <Popup
                contentClass="cbkfe-template-packagespurchasemask"
                show={showPopup}
                scrollId="packageMask-container-text"
                onBackClick={showClosePopup}
            >
                <div className="packagesmask-icon"></div>
                <div id="packageMask-container-text" className="packageMask-container-text">
                    <div>
                        {isArray(dealSkus, true) &&
                            dealSkus.map((item, index) => (
                                <div key={index}>
                                    <div className="purchasemask-content">
                                        <div className="purchasemask-container">
                                            <div className="purchasemask-title">
                                                {item.title}
                                            </div>
                                            {item.subtitle && (
                                                <p className="text-description">
                                                    {item.subtitle}
                                                </p>
                                            )}
                                            {item.tags && (
                                                <div className="text-status">
                                                    {item.tags.map((tag, key) => (
                                                        <span
                                                            className="status-info"
                                                            key={key}
                                                        >
                                                            <p className="status-detail">
                                                                {tag}
                                                            </p>
                                                        </span>
                                                    ))}
                                                </div>
                                            )}
                                            <div className="skuinfo-price">
                                                <div className="price-info">
                                                    {item.soldPrice && <React.Fragment>
                                                        <span className="price-icon">￥</span>
                                                        <span className="price-nowprice">{item.soldPrice}</span>
                                                    </React.Fragment>}
                                                    {item.discount && <span className="price-discount">{item.discount}</span>}
                                                    {item.marketPrice && <span className="price-before">￥{item.marketPrice}</span>}

                                                </div>
                                            </div>
                                        </div>
                                        <div className="detail-button">
                                            {item.soldStatus === 1 ? (
                                                /**当售卖状态为1 或者1人团时按钮显示‘购买’，其他情况显示接口给的按钮名 */
                                                (directBuy || groupNumber === 1) ? (
                                                    <div
                                                        className="button-content"
                                                        onClick={this.searchOrderCommit.bind(
                                                            this,
                                                            item.orderCommitUrl
                                                        )}
                                                    >
                                                        购买
                                                    </div>
                                                ) : (
                                                    <div
                                                        className="button-content"
                                                        onClick={this.searchOrderCommit.bind(
                                                            this,
                                                            item.orderCommitUrl
                                                        )}
                                                    >
                                                        {item.btnName}
                                                    </div>
                                                )
                                            ) : (
                                                <div className="button-content--close">
                                                    {item.btnName}
                                                </div>
                                            )}
                                        </div>
                                    </div>
                                    <div className="purchasemask-line"></div>
                                </div>
                            ))}
                    </div>
                </div>
                <div className="closebutton-content" onClick={showClosePopup}>
                    <div className="close-button">
                        <div className="closebutton-container">
                            <span className="closebutton-txt">收起</span>
                            <img
                                className="closebutton-img"
                                src="https://static.caibeike.com/i/58d564b44425b358b963b6007464c13d-a8XLBB-ffwbOhp1"
                            />
                        </div>
                    </div>
                    <div className="iphonex" />
                </div>
            </Popup>
        );
    }

    render() {
        const { dealSkus, show, showClosePopup, directBuy, groupNumber } = this.props;
        return <div>{this.showPopup(dealSkus, show, showClosePopup, directBuy, groupNumber)}</div>;
    }
}
export default PackagesPurchaseMask;