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

/**
 * 组件调用引用的字段
 * info={topInfo}   顶部基础信息
 * showGuide={true}  在sku详情页为true
 * dealSkus={dealSkus} 列表
 * showInitNumber={2}  列表默认展示2
 */


export default class MorePackages extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            dealSkus: props.dealSkus ? props.dealSkus : '',//详情列表
            list: [],
            showItemNumber: 0,
            showInitNumber: props.showInitNumber,
            showMore: true,//出现展示更多
        };
    }
    componentDidMount() {
        this.initPackage();
    }
    //展开剩余套餐
    showAllPackage = () => {
        const { dealSkus } = this.state;
        this.setState({
            list: dealSkus,
            showMore: false
        });
    }
    //初始化套餐展示数据
    initPackage = () => {
        const { dealSkus, showInitNumber } = this.state;
        if (dealSkus.length > showInitNumber) {
            const initList = dealSkus.slice(0, showInitNumber);
            this.setState({
                list: initList,
                showItemNumber: dealSkus.length,
                showMore: true
            });
        } else {
            this.setState({
                list: dealSkus,
                showItemNumber: dealSkus.length,
                showMore: true
            });
        }
    }
    //点击套餐详情
    seachPackageDetail = (value) => {
        value.packageDetailUrl && mb_open(value.packageDetailUrl);
    }
    //查看店铺详情
    searchStoreDetails = (value) => {
        value && mb_open(value);
    }
    render() {
        const { info, showInitNumber, showGuide } = this.props;
        const { showItemNumber, list, showMore, dealSkus } = this.state;
        const showMoreBtn = (showItemNumber - showInitNumber > 0) && showMore;
        return (
            <div style={{ position: 'relative' }} className={`cbk-morepackages-container-content cbk-morepackages-container-content--${showMoreBtn ? '' : 'noMoreBtn'}`}>
                <div className={`${showGuide ? 'cbk-morepackages-first-content' : 'cbk-morepackages-first-content-noguide'}`}>
                    {
                        showGuide && <div className="cbk-morepackages-direction-between">
                            <div className="cbk-morepackages-direction-row">
                                <img className="icon-title" src="https://static.caibeike.com/i/a5f2168463fdc94c5f00e5918499a5f4-M7pKk6" />
                                <span className="package-title">{info.shopName}</span>
                            </div>
                            <div className="cbk-morepackages-direction-row" onClick={this.searchStoreDetails.bind(this, info.linkUrl)}>
                                <span className="loading-more">了解详情</span>
                                <i className="iconfont icon--arrow--down" ></i>
                            </div>
                        </div>
                    }
                    <div className={classNames('cbk-package-dec-container')}>
                        <img className="img-dec" src={info.imageUrl} />
                        <span className="content-dec">{info.title}</span>
                    </div>
                </div>
                {isArray(dealSkus, true) && <div className={`cbk-morepackages-detail-content ${showGuide ? 'cbk-morepackages-detail-content-guide' : 'cbk-morepackages-detail-content-noguide'} `}>
                    {
                        showGuide && showItemNumber >= showInitNumber && <div className="tag-guide">
                            <span className="guide-left">多套餐可选</span>
                            <span className="guide-rigth">商品包含以下套餐，可以任选其一参与拼团</span>
                        </div>
                    }
                    {
                        isArray(list, true) && list.map((item, index) => {
                            return <div className="package-detail-item" key={index} onClick={item.soldStatus === 1 && this.seachPackageDetail.bind(this, item)}>
                                <div className={`package-detail-row-between ${(!showGuide && index === 0) ? '' : 'marginTopTitle'} `}>
                                    <div className="title-row">
                                        {item.soldStatus === 3 && <div className="sold-over" >已抢光</div>}
                                        <span className="font-title"> {item.title}</span>
                                        <img className="font-arrow" src="https://static.caibeike.com/i/fed82a2e8d3f7fc9c10de55ebcdc6fec-QW5Dmz-CgwCghp1" />
                                    </div>
                                    <span className="font-price title-row"><span className="font-usd">￥</span><span>{item.soldPrice}</span></span>
                                </div>
                                <div className="package-detail-row-between">

                                    <div className="detail-tag" key={index}>
                                        {
                                            isArray(item.tags, true) && item.tags.map((item, index) => <Label key={index} bgColor="transparent" type="disable1" className="detail-tag-label" value={item} />)
                                        }

                                    </div>
                                    <del className="detail-price-del">￥{item.marketPrice}</del>
                                </div>
                            </div>;
                        })
                    }

                    {
                        showMoreBtn && <div className="detail-loading-more" onClick={this.showAllPackage}>
                            <span className="font-loading">查看剩余{showItemNumber - showInitNumber}个套餐</span>
                            <i className="iconfont icon--arrow--down transform-arrow-down" ></i>
                        </div>
                    }
                </div>}
            </div >
        );
    }
}