import * as React from 'react'
import log from '../utils/lofter-log'
import { getCouponData4Show, getPreferentialText } from '../utils/couponFormat'
import { imgResize, getParmvalByKey } from '../utils/imgResize'
import LazyLoad from 'react-lazy-load'
import * as Styled from './index.style'
import {handlePathQuery} from "../utils/snailTargetHandler";
import {genSpmLink} from "../utils/statistics";
import { ProductItemType } from '../lofterProductLarge'
import { trackingClickEvent } from '../lofterProduct'

export default class LofterProductDefault extends React.Component<{product:ProductItemType,size?:string}> {
  private async toProductDetail(id:string,specialArea:string,event:React.MouseEvent) {
    event.stopPropagation();
    await trackingClickEvent(id)
    if(specialArea && this.props.product.shopUrl){
      location.href = this.props.product.shopUrl
      return
    }
    const spmLink = genSpmLink({url: `https://www.lofter.com/market/fe/html/product.html?productId=${id}&njb_navigator=false`, name: 'spmCmspageProduct'})
    location.href = spmLink;
  }
  public render() {
    let {product, size} = this.props
    return <Styled.ProductContainer size={size} onClick={this.toProductDetail.bind(this, product.productId,'')}>
      <LazyLoad className="imgwrap" offsetVertical={900}>
        <img src={imgResize(product.image,750,750,1,true)} />
      </LazyLoad>
      {
        product.iconText &&
        <div className="tags-wrapper">
          {product.iconText.split(',').map((iconText:string) => {
              return <span key={iconText} className={`preSale-tag ${iconText==='同人' ? 'purple-bgc' : ''}`}>{iconText}</span>
          })}
        </div>
      }
      <div className="info">
        <div className={`name ${!!product.coupon || size == 'small'  ? 'one-line' : ''}`} >{product.name}</div>
        {
          product.shop && product.shopUrl && <>
          <div className="shop"  onClick={this.toProductDetail.bind(this, product.productId,'shopArea')}>
            <span className="shop-name">{product.shop || '进店选购'}</span>
            <span className="shop-entrance">进店 </span>
          </div>
        </>
        }
        {
          ( !!product.coupon || !!product.bounties && product.bounties.length > 0 ) &&
          <div className="f-cb">
            {
              !!product.coupon &&
              <div className="coupon">{getPreferentialText(product.coupon)}</div>
            }

            {
              !!product.bounties && product.bounties.length > 0 &&
              <div className="coupon">津贴</div>
            }
          </div>
        }

        {
          !!product.activity && [1,2].includes(product.activity.type) &&
          <div className="f-cb">
            <div className="coupon">{product.activity.type == 1 ? '秒杀' : '限时购'}</div>
          </div>
        }

        <div className="price-block">
          <span className={`store-price ${product.priceType == 0 ? 'coin-w' : ''}`}>
            {
              product.priceType == 0 ?
              <span className="coin-icon f-fl"></span> :
              <em>¥</em>
            }
            {product.storePrice}
          </span>
          {
            product.storePrice != product.marketPrice && product.priceType != 0 && product.marketPrice &&
            <span className="market-price"><em>¥</em>{product.marketPrice}</span>
          }
        </div>
      </div>
    </Styled.ProductContainer>
  }
}