/* eslint-disable complexity */
import React from 'react';
import './style/index';



/**
 *
 * forceMarketPrice 是强制模式，count = 1的时候不展示要展示marketPrice count > 0 的时候要展示
 */
export default function PriceComponent({ soldPrice, className, count, prePrice, afterPrice, label, marketPrice, direction = 'col', countLabel, forceMarketPrice, preLabel }) {
    if (count === 1 && forceMarketPrice !== true) { // 如果是count 为1 那么 不展示市场价 forceMarketPrice 必须是等于true的时候才会展示marketPrice
        marketPrice = '';
    }
    /**
     * forceMarketPrice 表示是底bar
     * 如果是底bar，只要count > 0 那么底bar里面的价格 都展示 xxx/xx次
     */
    let showPriceAndCount = (count > 0 && forceMarketPrice && !prePrice) || (!forceMarketPrice && count > 1);
    return <div className={`cbkfe-template-price ${className} cbkfe-template-price--${showPriceAndCount ? 'hasCount' : ''}`}>
        {preLabel && <div className="bottom-bar__prelabel">{preLabel}</div>}
        {prePrice && <span className="bottom-bar__prePrice" style={{ color: prePrice === '支付' ? '#000' : '#FF2244' }}>{prePrice}</span>}
        {(soldPrice || soldPrice === 0) && <span className="bottom-bar_soldPrice">
            <span className="bar_soldPrice__unit">¥</span>
            <span className="bar_soldPrice__price">{soldPrice}</span>
        </span>}
        {afterPrice && <span className="bottom-bar__afterPrice">
            {showPriceAndCount
                ? <React.Fragment>
                    <span className="bar-afterPrice-split">/</span>
                    <span className="bar-afterPrice-count">{count}</span>
                    <span className="bar-afterPrice-unit">{afterPrice}</span>
                </React.Fragment>
                : <span className="bar-afterPrice-unit">{count === 1 ? '/' : ''}{afterPrice}</span>
            }

        </span>}
        {countLabel && <div className="bottom-bar__countLabel">{countLabel}</div>}
        {
            (label || marketPrice) && <div className={`bottom-bar_marketPrice bottom-bar_marketPrice--${direction}`}>
                {label && <span className="bottom-bar__label">{label}</span>}
                {marketPrice && <del className="bottom-bar__del">¥{marketPrice}</del>}
            </div>
        }

    </div>;
}