import React, {Component} from 'react';
import {loggerCors} from './logger';
import BaseRechargeItem from './BaseRechargeItem'
import * as Styled from './saleRechargeItem.style'

const RECHARGE_TYPE = {
    WX_JSAPI: 'WX_JSAPI',
    WX_NATIVE: 'WX_NATIVE',
    ALIPAY: 'ALIPAY'
}

/*=============
 充值页
 ==============*/
export default class SaleRechargeItem extends BaseRechargeItem {
    constructor(props) {
        super(props);
    }

    handleRecharge(product, type) {
        loggerCors({dot: 'pthd-3', message: {id: this.props.siteInfo.userId, activityId: this.props.activityId, price: product.price, hongbao: product.hongbao/100}}, this.props.siteInfo);
        if(product.stopRecharge) {
            this.limitCallback();
        }
        else {
            product.fromPage = 'vipRechargeActivity';
            super.handleRecharge(product, type)
        }
    }

    renderRechargesTypes() {
        const {config, rechargeProductMap, rechargeItem, parentProps} = this.props;
        const {hasStart, hasEnd} = config;
        let btnText = hasStart ? '活动已结束' : '敬请期待';
        let btnStyle = hasEnd ? "btn-recharge disabled" : "btn-recharge disabled";
        let saleProducts = [];
        if(rechargeProductMap && rechargeProductMap.length > 0) {
            (rechargeProductMap || []).map((product, index, array) => {
                product.needPay = Math.max(product.price - (product.discount || 0), 0);
                saleProducts.push(product);
            })
        }
        const len = saleProducts.length;
        return saleProducts.map((saleProduct, index) => {
          let backgroundImage = parentProps[`novelfestival_backgroundImage_${index}`];
          let posX = parentProps[`novelfestival_posx_${index}`] || 5.2;
          let style = {width: `${parentProps.productWidth}rem`}
          if(backgroundImage){
            const {url, width, height} = backgroundImage;
            style = {
              ...style,
              backgroundImage: `url(${url})`,
              height: `${parentProps.productWidth * (height/width)}rem`
            }
            url && (style.backgroundColor = 'transparent');
          }

          return <Styled.RechargeCard>
              <div className="inner f-clearfix"
                style={{
                  ...style,
                  marginBottom: parentProps.productMargin+'rem'
                }}>
                  {saleProduct.hongbao <= 0 ?
                      (
                          <div className="inner-cont" style={{marginLeft: `${posX}rem`}}>
                              <div className="title">{saleProduct.vm}阅点</div>
                              <p className="desc"></p>
                              {
                                  hasStart && !hasEnd ?
                                  (
                                      saleProduct.stopRecharge ?
                                      (<Styled.ButRecharged href="javascript:;" className="disabled"><p>充值已达上限</p></Styled.ButRecharged>) :
                                      (
                                          <Styled.ButRecharged href="javascript:;" onClick={this.handleRecharge.bind(this, saleProduct, rechargeItem.type)}  style={{backgroundColor: parentProps.productButtonColor}}>
                                              ¥&nbsp;{saleProduct.needPay}
                                              <div className="icon-sale icon-sale-s" style={{backgroundColor: parentProps.productSaleColor}}>
                                                超低价
                                                <div className="trigon" style={{borderColor: `transparent ${parentProps.productSaleColor}`}}></div>
                                              </div>
                                          </Styled.ButRecharged>
                                      )
                                  ) :
                                  (<Styled.ButRecharged href="javascript:;" className={btnStyle}><p>{btnText}</p></Styled.ButRecharged>)
                              }
                          </div>
                      ) :
                      (
                          <div className="inner-cont" style={{marginLeft: `${posX}rem`}}>
                              <div className="title">充{saleProduct.price}元&nbsp;送{saleProduct.hongbao/100}元</div>
                              <p className="desc">{saleProduct.vm}阅点+{saleProduct.hongbao}阅点红包</p>
                              {
                                  hasStart && !hasEnd ?
                                  (
                                      saleProduct.stopRecharge ?
                                      (<Styled.ButRecharged href="javascript:;" className="disabled"><p>充值已达上限</p></Styled.ButRecharged>) :
                                      (
                                          <Styled.ButRecharged href="javascript:;" onClick={this.handleRecharge.bind(this, saleProduct, rechargeItem.type)} style={{backgroundColor: parentProps.productButtonColor}}>
                                              ¥&nbsp;{saleProduct.needPay}
                                              <div className="icon-sale" style={{backgroundColor: parentProps.productSaleColor}}>
                                                {((saleProduct.vm/(saleProduct.vm + saleProduct.hongbao)) * 10).toFixed(2) * 1}折
                                                <div className="trigon" style={{borderColor: `transparent ${parentProps.productSaleColor}`}}></div>
                                              </div>
                                          </Styled.ButRecharged>
                                      )
                                  ) :
                                  (<Styled.ButRecharged href="javascript:;" className={btnStyle}><p>{btnText}</p></Styled.ButRecharged>)
                              }
                          </div>
                      )
                  }
              </div>
          </Styled.RechargeCard>
        })
    }

    render() {
        const {action} = this.state;
        return (
            <div className="m-saleRechargeItem" id='saleRechargeItem'>
                {super.render()}
                <div>
                    {this.renderRechargesTypes()}
                </div>
            </div>
        )
    }
}