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

class FavourablePackages extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            dealSkus: props.dealSkus, //优惠套餐
            isShowMore: false,        //展开折叠按钮状态
            rightText: false,
        };
    }

    componentDidMount() {
        this.initFavourablePackage();
    }

    //初始化优惠套餐信息
    initFavourablePackage = () => {
        const { dealSkus } = this.state;
        const hidePackageNum = this.props.hidePackageNum;
        if (hidePackageNum) {
            this.setState({
                dealSkus: dealSkus.slice(0, hidePackageNum),
            });
        } else {
            this.setState({
                dealSkus: this.state.dealSkus,
                isShowMore: true,
            });
        }
    };

    //展开剩余套餐
    showAllFavourablePackage = () => {
        this.setState({
            dealSkus: this.props.dealSkus,
            isShowMore: true,
        });
    };

    //跳转详情页
    searchPackageDetail = (packageDetailUrl) => {
        packageDetailUrl && mb_open(packageDetailUrl);
    };

    render() {
        const { dealSkus, isShowMore } = this.state;
        const { itemPackagesTitle, packageNum, hidePackageNum } = this.props;
        if (!isArray(dealSkus, true)) {
            return null;
        }
        return (
            <div className="cbkfe-template-favourPackages">
                <div className="favour-modelTitle">
                    <CommonHeader title={itemPackagesTitle} num={packageNum} />
                </div>
                {dealSkus.map((item, key) => (
                    <div
                        className="favour-content"
                        key={key}
                        onClick={this.searchPackageDetail.bind(this, item.packageDetailUrl)}
                    >
                        <div className="content-skuImg">
                            <img
                                className="package-image"
                                src={item.imageUrl}
                            />
                        </div>
                        <div className="content-skuInfo">
                            <div className="skuInfo-title">
                                <span className="title-text--wrap" >
                                    {item.title}
                                </span>
                                <i className="iconfont icon--arrow"></i>
                            </div>
                            {/* {item.subtitle && (
                                <div className="skuInfo-detail">
                                    {item.subtitle}
                                </div>
                            )} */}
                            {isArray(item.tags, true) && (
                                <div className="skuInfo-state">
                                    {item.tags.map((tagText, key) => <Label key={key} type="disable1" bgColor="transparent" className="skuInfo-state-label" value={tagText} />)}
                                </div>
                            )}
                            {item.soldPrice && <div className="skuInfo-price">
                                <div className="price-info">
                                    <span className="price-icon">￥</span>
                                    <span className="price-nowPrice">
                                        {item.soldPrice}
                                    </span>
                                    {item.discount && <span className="price-discount">
                                        {item.discount}
                                    </span>}
                                    <span className="price-before">
                                        ￥{item.marketPrice}
                                    </span>
                                </div>
                                {item.soldStatus === 3 && (
                                    <div className="package-state">
                                        {item.btnName}
                                    </div>
                                )}
                            </div>}
                        </div>
                    </div>
                ))}

                {(!isShowMore && packageNum - hidePackageNum > 0) &&
                    <div className="view-package-button">
                        <div
                            className="button-text"
                            onClick={this.showAllFavourablePackage}
                        >
                            <span>查看剩余{packageNum - hidePackageNum}个套餐</span>
                            <img
                                className="button-icon"
                                src="https://static.caibeike.com/i/58d564b44425b358b963b6007464c13d-a8XLBB-ffwbOhp1"
                            />
                        </div>
                    </div>
                }
            </div>
        );
    }
}

export default FavourablePackages;