import React, { Component } from 'react';
import { localUrl } from 'cbkfe-utils';
import { mb_open } from 'cbkfe-bridge';
import CommonHeader from '../CommonHeader';
import './style';
import { gt } from '../track';
/**
 * 此组件非全局组件
 */
export default class Disclaimer extends Component {

    constructor(props) {
        super();
        const notes = props.notes || [
            '“彩贝壳”网络平台作为第三方网络技术提供者，仅为产品或服务直接提供方及平台用户双方之间提供技术网络平台服务。',
            '平台所展示的产品及服务的直接提供方为实际提供产品或服务的商户，彩贝壳并不直接提供产品或服务。',
            '“彩贝壳”作为第三方技术平台，仅在技术服务范围内承担责任，彩贝壳不对产品及服务提供方与平台用户发生的交易承担责任。',
            '体验师针对本服务发布的玩法为个人体验，彩贝壳仅做技术关联处理，不代表彩贝壳对本服务的意见。',
            <span>其他应知条款及事项，请详细阅读<span style={{ color: ' #ff9933', fontSize: '0.7rem' }} onClick={() => mb_open(localUrl.url('/ms/user/agreement/index'))} >《彩贝壳用户协议》</span>、<span style={{ color: ' #ff9933', fontSize: '0.7rem' }} onClick={() => mb_open(localUrl.url('/ms/user/agreement/privacy'))}>《隐私政策》</span>等用户协议。</span>
        ]
        this.state = {
            showMore: false,
            morBtnVisible: notes,
            notes
        };
    }

    defaultLength = 2; // 默认展示2个

    render() {
        let { className, attrs, showMoreCallback, putAwayCallback } = this.props;
        let { showMore, morBtnVisible, notes } = this.state;
        if (!Array.isArray(notes) || notes.length === 0) {
            return null;
        }
        if (!showMore) {
            notes = notes.slice(0, 2);
        }

        return (
            <div {...gt('gbdetail_disclaimer_pv')} {...attrs} className={`disclaimer-container ${className}`}>
                <CommonHeader title="免责说明" />
                {notes.map((note, index) => <p className="disclaimer-item" key={note + index}>{note}</p>)}
                {morBtnVisible ?
                    <React.Fragment>
                        <p {...gt('gbdetail_disclaimer_detail_click')}
                            onClick={() => {
                                typeof showMoreCallback === 'function' && showMoreCallback();
                                this.setState({ showMore: true });
                            }}
                            className={`disclaimer-more ${!showMore ? 'able' : 'disabled'}`}>
                            查看更多<i className="iconfont  icon--arrow icon-down"></i>
                        </p>
                        <p {...gt('gbdetail_disclaimer_up_click')}
                            onClick={() => {
                                typeof putAwayCallback === 'function' && putAwayCallback();
                                this.setState({ showMore: false });
                            }}
                            className={`disclaimer-more ${showMore ? 'able' : 'disabled'}`}>收起<i className={`iconfont icon--arrow ${showMore ? 'icon-up' : ''}`}></i></p>
                    </React.Fragment>
                    : null
                }
            </div>
        );
    }
}