import React from 'react';
import './style';
import { Img, Pager } from 'cbkfe-ui';
import { browser } from 'cbkfe-utils';
import { mb_open } from 'cbkfe-bridge';

/**
 * RecommendModule 商品详情页底部推荐模块
 * Created by ye.song on 2019/02/18
 *
 * @params {array} itemList 内容列表，存在分页逻辑时为第一页内容
 * @params {string} title 内容标题
 * @param {string} className 对外暴露的样式名
 * @param {number} limit 每页数量
 * @param {function} pagerCallBack 分页加载回调函数
 * @param {boolean} hasNext  仅分页时传递，默认false
 */
class RecommendLike extends React.Component {
    constructor(props) {
        super(props);
        const data = props.option;

        this.state = {
            isShow: data.itemList && data.itemList.length,
            className: data.className || '',
            title: data.title || '',
            itemList: data.itemList || [],
            limit: data.limit || 6,
            pagerCallBack: data.pagerCallBack || null,
            hasNext: data.hasNext || false,
        };
    }

    UNSAFE_componentWillReceiveProps(nextProps) {
        this.setState({
            hasNext: nextProps.option.hasNext,
        });
    }

    render() {
        let {
            isShow,
            className,
            title,
            itemList,
            hasNext,
            pagerCallBack
        } = this.state;
        let { onItemEach } = this.props;
        return isShow ? <section className={`recommend-like ${className}`}>
            <div className="module-title"><span className="module-title-item">{title}</span></div>
            <div className="module-content">
                {itemList.map((item, index) => {
                    let itemProps = {};
                    if (onItemEach && typeof onItemEach === 'function') {
                        itemProps = onItemEach(item, index);
                    }

                    return <div {...itemProps.cellprops || {}} className="module-item" key={index} onClick={() => {
                        mb_open(item.url);
                    }}>
                        {/* <div className="item-cover" style={{backgroundImage:`url("${item.imageUrl}")`}} /> */}
                        <div className="item-cover">
                            <Img url={item.imageUrl} />
                        </div>

                        {item.title ? <div className="item-title">{item.title}</div> : null}
                        <div className="item-message">
                            {item.category ? <span className="tag">{item.category}</span> : null}
                            {item.distance ? <div className="distance">{item.distance}</div> : null}
                        </div>
                        {/* {item.subTitle ? <div className="item-slogan">{item.subTitle}</div> : null} */}
                        <div className="item-priceline">
                            {/* 类名控制：免费 、coin 、RMB */}
                            {item.label ? <div className="label">{item.label}</div> : null}
                            {item.pricePrefix ? <span className="item-priceline-prefix">{item.pricePrefix}</span> : null}
                            {item.price ? <div className="price">{item.bizType === 'club' ? '' : '¥'}{item.price}</div> : null}
                            {item.priceSuffix ? <span className="item-priceline-suffix">{item.priceSuffix}</span> : null}
                            {(!item.pricePrefix && item.discountType) ? <div className={`discount discount--${browser.versions.android ? 'android' : ''}`}><span>{item.discount}</span></div> : null}
                            {(!item.pricePrefix && item.marketPrice) ? <del className="market-price">¥{item.marketPrice}</del> : null}
                        </div>
                    </div>;
                })}
            </div>
            <Pager hasNext={hasNext} callBack={pagerCallBack} />
        </section> : null;
    }
}

export default RecommendLike;