import React, { Component } from 'react';
import { mb_open } from 'cbkfe-bridge';
import { isArray, browser, isObject } from 'cbkfe-utils';
import './style';
import { Label } from 'cbkfe-ui';

/**
 * @param{object} labels 标签数组
 * @param{object} ruleModel 标签展示 数组
 * 
 * @param{string} ruleModel.type 标签后面展示的是问号还是箭头 type==='arrow' 表示箭头 type === 'question'表示问号 不给type则都不展示
 * @param{number} ruleModel.limit 限制展示几个标签 如果没给则全部展示
 */
export default class RegularLabels extends Component {

    constructor() {
        super();
        this.isAndroid = browser.versions.android;
    }

    renderLabels() {
        let { labels } = this.props;
        let { ruleLink, type, limit } = this.props.ruleModel || {};
        // 判断labels里面是否有item.style === 'label'的情况，假如有任何一个对象里面有这个，那么就不会展示标签后面的箭头或者问号
        const labelsStyleList = isArray(labels, true) && labels.filter((item) => item.style && item.style === 'label');

        return <React.Fragment>
            {
                isArray(labels, true) && labels.map((label, index) => {
                    if (label.style && label.style === 'label') {
                        return <div className="progress-header__labels">
                            <div key={index} className="progress-header__label"><Label value={label.content} type="primary" /></div>
                        </div>;
                    } else {
                        return (index + 1 <= (limit || labels.length))
                            ? isObject(label, true) && <div key={index} className={`c-regular-label-content ${index !== labels.length - 1 && 'regular__label--right'}`}>
                                {/* 后端有些层级太深，不好统一icon名称 ，在这个地方做兼容 */}
                                <img className="regular-label__icon " src={label.icon || label.url || label.labal || label.iconUrl || label.label} />
                                <div style={{ color: label.color }} className={`regular-label__text ${this.isAndroid ? 'regular-label__text--and' : ''}`}>{label.content || label.title}</div>
                            </div>
                            : null;
                    }

                })
            }
            {!isArray(labelsStyleList, true) && ruleLink && type === 'arrow' ? <i className="iconfont regular-labels__arrowRight"></i> : null}
            {!isArray(labelsStyleList, true) && ruleLink && type === 'question' ? <i className={`iconfont icon--question ${this.isAndroid ? 'icon--question--and' : ''}`}></i> : null}
        </React.Fragment >;
    }


    // 退改标签栏点击事件
    onSaleRulesHandle = () => {
        let {
            showExplain,
            ruleLink
        } = this.props.ruleModel || {};
        if (ruleLink) {
            mb_open(ruleLink);
            return;
        }
        if (!showExplain || !ruleLink) {
            return false;
        }

    }

    render() {
        let { labels } = this.props; // 没有“过期自动退”or“未预约随时退” 展示简单的样式，附着在内容区域底部
        if (!isArray(labels, true)) {
            return null;
        }
        return (
            <React.Fragment>
                {
                    <div onClick={this.onSaleRulesHandle} className="c-regular-labels--simple">
                        {this.renderLabels(true)}
                    </div>
                }


            </React.Fragment>
        );
    }
}