import * as React from "react";
import Util from "../../../util/utils";
import CouponCircle from './circle'

/*
* 左右锯齿状优惠券
*/
class CouponOne extends React.Component<any, any> {
    constructor(props) {
        super(props);
        this.centTransform = this.centTransform.bind(this);
        this.state = {}
    }

    centTransform(price) {
        let num = Util.centChange(price);
        let str = num.str;
        let arr = str.split('.');
        let obj = {
            price1: arr[0],
            price2: arr[1],
            unit: num.unit
        };

        return obj;
    }

    onClick(e) {
        let index = this.props.index;
        this.props.onClick ? this.props.onClick(index) : ''
    }

    render(): React.ReactElement<any> | string | number | {} | React.ReactNodeArray | React.ReactPortal | boolean | null | undefined {
        let item = this.props.data;
        let len = this.props.length;
        let centTransform = this.centTransform;
        return (
            <div
                className={'MCoupon_con' + (item.available == 1 ? ' MCoupon_con_receive' : item.available == 2 ? ' MCoupon_con_none' : '')}
                style={this.props.bgColor ? {'backgroundColor': this.props.bgColor} : {}}
                onClick={this.onClick.bind(this)}
            >

                <span className={ 'MCoupon_con_receive_icon icon-coupon-revice'}></span>
                {
                    item.type == 1 ?
                        <p className={'price'}>
                            <span>{centTransform(item.faceValue).price1}</span>
                            <span
                                className={centTransform(item.faceValue).unit ? 'smallPrice' : ''}>.{centTransform(item.faceValue).price2}</span>
                            <span
                                className={len == 1 ? 'unit' : ''}>{centTransform(item.faceValue).unit}元</span>

                        </p> :
                        <p className={'price'}>
                            <span>{item.faceValue}</span>
                            <span className={len == 1 ? 'unit' : ''}>折</span>
                        </p>
                }

                <div className={'useRule'}>
                    {
                        len == 1 ?
                            <p className={'mCouponname'}>优惠券</p> : ''
                    }
                    {
                        item.thresholdType == 1 ?
                            <p>满{Util.centTransformOut(item.threshold)}使用</p> : '无门槛使用'
                    }
                </div>
                {
                    len == 1 ?
                        <div className={'MCoupon_item_right'}>
                            <div className={'MCoupon_item_btn'}>立即领取</div>
                        </div> : ''
                }
                <CouponCircle vars={this.props.vars}></CouponCircle>
            </div>
        );
    }
}

export default CouponOne;