import * as React from 'react'
import 'intersection-observer'
import log from '../utils/lofter-log'
import { getCouponData4Show, getPreferentialText } from '../utils/couponFormat'
import {getParmvalByKey, imgResize} from '../utils/imgResize'
import LazyLoad from 'react-lazy-load'
import * as Styled from './index.style'
import {genSpmLink} from "../utils/statistics";
import { trackingClickEvent } from '../lofterProduct'
export interface ProductItemType { // 商品部分字段
  shopUrl: string,
  bounties: Object[],
  iconText: string
  image: string
  name: string
  onSaleTime: string
  preSaleType: number
  priceType: number
  productId: string
  productType: number
  restStock: number
  saledStock: string
  status: number
  storePrice: number
  supplierId: string,
  marketPrice:number,
  tags?: string,
  shop?:string,
  coupon?:Object[],
  activity:any,
  desc?:string
}
export default class LofterProductLarge extends React.Component<{product:ProductItemType}> {
  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 = this.props.product
    return <Styled.ProductContainer onClick={this.toProductDetail.bind(this, product.productId,'')}>
      <LazyLoad className="imgwrap" offsetVertical={900}>
        <img src={imgResize(product.image,400,400,1,true)} />
      </LazyLoad>
      {
        product.iconText &&
        <div className="tags-wrapper">
          {product.iconText.split(',').map((iconText:string, index) => {
              return <span key={index} className={`preSale-tag ${iconText==='同人' ? 'purple-bgc' : ''}`}>{iconText}</span>
          })}
        </div>
      }
      <div className="info">
        <div className="name f-thide">{product.name}</div>
        <div className="desc">
          {product.desc}
          {
            !product.desc && product.shop && product.shopUrl && <>
              <div className="shop"  onClick={this.toProductDetail.bind(this, product.productId,'shopArea')}>
              {/* <div className="shop"  onClick={this.toProductShop.bind(this)}> */}
                <span className="shop-name">{product.shop || '进店选购'}</span>
                <span className="shop-entrance">进店 </span>
              </div>
            </>
          }
        </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 ${product.priceType == 0 ? 'price-coin' : ''}`}>
          {
            product.priceType == 0 ?
            <span><b className="coin"></b>{product.storePrice}</span> :
            <span>
              <span className="store-price">¥{product.storePrice}</span>
              {
                (product.storePrice||0)<(product.marketPrice||0) &&
                <em>¥{product.marketPrice}</em>
              }
            </span>
          }
        </div>
      </div>
      <div className="purchase"><span>立即抢购</span></div>
      {/* <a  className="hoverlink"></a> */}
    </Styled.ProductContainer>
  }
}