import * as React from 'react';
import { Props, State } from './type';
import * as Styled from './index.style'
import { formatImage } from '../utils/imgResize';
import {getCouponData4Show} from '../utils/lofterMarket'

export class Container extends React.Component<Props, State> {
  public static defaultProps = new Props();
  public state = new State();

  private gotoProduct(id:any) {
    location.href = `//www.lofter.com/benefit/main/product?productId=${id}`;
  }

  public render() {
    let {backgroundImage, containerType, style, list, numbers=1, overflow }= this.props;
    if(backgroundImage && this.props.style.width){
      const {url, width, height} = backgroundImage;
      style = {
        backgroundImage: `url(${formatImage(url)})`
      }
      if(this.props.isAutoHeight){
        style.height = 'auto'
        style.backgroundSize = '100% auto'
      }else{
        style.height = `${parseFloat(this.props.style.width) * (height/width)}rem`
        style.backgroundSize = '100% 100%'
      }
    }else{
      style = null;
    }
    // 兼容以前overflow为true的情况
    // @ts-ignore
    if (overflow === true) {
      overflow = 'auto'
    }
    return (
      <div 
        id={this.props.instanceKey} 
        style={{
          ...this.props.style, 
          ...style,
          overflow,
          minHeight: (this.props.children as [])?.length ? '0' : '40px'
        }}
      >
        {
          containerType === 'list' && numbers === 1 &&
          <Styled.mOpera>
          <ul className="f-clearfix xtag">
            {
            list && list.map((pro:any) => {
              const product = pro.product
              const imgSrc = JSON.parse(product.productImages)
              return (
              <li key={product.id} className="f-clearfix">
                <div className="imgwrap" onClick={()=>{this.gotoProduct(product.id)}}>
                  <img src={imgSrc[0]} />
                  {product.status != 1 &&
                    <em className="f-icons soldout"></em>
                  }
                </div>
                <div className="info">
                  <div className="name f-thide">{product.productName}</div>
                  {/* <div className="desc" dangerouslySetInnerHTML={{ __html: product.productDetail }}></div> */}
                  {pro.coupons && pro.coupons.length > 0 && <div className="f-clearfix">
                    <div className="coupon">{getCouponData4Show(pro.coupons[0]).corecnt}</div>
                  </div>}

                  <div className="price">
                    <span>￥{pro.minStorePrice}</span>
                    {pro.maxStorePrice < pro.marketPrice &&
                    <em>￥{pro.marketPrice}</em>
                    }
                  </div>
                </div>
              </li>)
            })
            }
          </ul>
          </Styled.mOpera>
        }
        {
          containerType === 'list' && numbers === 2 &&
          <Styled.goodList>
            {
            list && list.map((pro:any) => {
              const product = pro.product
              const imgSrc = JSON.parse(product.productImages)
              return (
              <div key={product.id} className="gditm f-clearfix">
                <div className="imgwrap" onClick={()=>{this.gotoProduct(product.id)}}>
                  <img src={imgSrc[0]} />
                  {product.status != 1 &&
                    <em className="f-icons soldout"></em>
                  }
                </div>
                <div className="info">
                  <div className="name f-thide">{product.productName}</div>
                  {/* <div className="desc" dangerouslySetInnerHTML={{ __html: product.productDetail }}></div> */}
                  {pro.coupons && pro.coupons.length > 0 && <div className="f-clearfix">
                    <div className="coupon">{getCouponData4Show(pro.coupons[0]).corecnt}</div>
                  </div>}

                  <div className="price">
                    <span>￥{pro.minStorePrice}</span>
                    {pro.maxStorePrice < pro.marketPrice &&
                    <em>￥{pro.marketPrice}</em>
                    }
                  </div>
                </div>
              </div>)
            })
            }
          </Styled.goodList>
        }
        {this.props.children}
      </div>
    )
  }
}