import styled from 'styled-components'
import {rem} from '../style/function.style'


export const ProductContainer  = styled.a<{
  size:string
}>`
  position:relative;
  display: block;
  -webkit-tap-highlight-color:transparent;
  ${
    props => props.size == 'small' ?
    `width: ${rem(200)};`:
    `width: ${rem(315)};`
  }
  overflow: hidden;
  font-size: ${rem(24)};

  .imgwrap{
    ${
        props => props.size == 'small' ?
        `height: ${rem(200)};`:
        `height: ${rem(315)};`
    }
    width: 100%;
    position: relative;
    background-color: #f5f5f5;
    border-radius:${rem(8)};
    overflow:hidden;
    -webkit-border-radius:${rem(8)};
  }
  .imgwrap img{
    display: block;
    width: 100%;
    background-color: #f5f5f5;
    border-radius:${rem(8)};
    position:absolute;
    left: 0; right: 0; top: 0; bottom: 0;
    margin: auto;
    -webkit-border-radius:${rem(8)};
  }
  // .imgwrap img[lazy="loading"]{
  //     background-color: #f5f5f5;
  // }
  // .imgwrap img[lazy="error"]{
  //     width: 100%;
  //     height: 100%;
  // }
  .tags-wrapper{
    position: absolute;
    left: ${rem(8)};
    top: ${rem(8)};
    display:flex;
  }
  .preSale-tag{
    margin-right:${rem(8)};
    display: block;
    height: ${rem(36)};
    padding: ${rem(2)} ${rem(8)};
    line-height: ${rem(36)};
    font-size: ${rem(24)};
    color: #FFFFFF;
    text-align: center;
    background: #8E87FA;
    border-radius: ${rem(8)};
    // z-index: 11;
    ${
      props => props.size == 'small' &&
      `
        left: ${rem(8)};
        top: ${rem(8)};
        padding: 0 ${rem(8)};
        height: ${rem(30)};
        line-height: ${rem(30)};
        font-size: ${rem(20)};
      `
    }
  }
  .purple-bgc{
    background: #ff88da;
  }
  .name{
    font-family: "PingFangSC-Medium";
    width: 100%;
    margin-top: ${rem(15)};
    color: #1f1f1f;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    word-break: break-word;
    &.one-line {
        -webkit-line-clamp: 1;
    }
  }

  .coin-icon{
    position: relative;
    top: ${rem(5)};
    display: inline-block;
    width: ${rem(21)};
    height: ${rem(27)};
    margin-right: ${rem(7)};
    background: url(https://easyreadfs.nosdn.127.net/fle/a0df1d4009c7a2ec5fee/1581579879896/coin.png) 0 0 no-repeat;
    background-size: cover;
  }

  .coupon{
    float:left;
    height:${rem(30)};
    line-height:${rem(30)};
    padding:${rem(2)} ${rem(6)};
    margin-top:${rem(10)};
    margin-right:${rem(10)};
    // border:1px solid #ff5367;
    color: #FF6C93;
    border-radius:${rem(8)};
    -webkit-border-radius:${rem(8)};
    font-size:${rem(20)};
    text-align:center;
    background:#FF6C931A;
  }

  .price-block{
    margin-top: ${rem(8)};
  }

  .store-price{
    font-family: "PingFangSC-Medium";
    font-size: ${rem(30)};
    line-height: ${rem(42)};
    color: #ff5367;
  }

  .coin-w.store-price{
    color: #1f1f1f;
  }

  .market-price{
    margin-left: ${rem(10)};
    font-size: ${rem(24)};
    color: #999999;
    text-decoration: line-through;
  }
  .shop{
    background:#F5F5F5;
    width:100%;
    ${props=>{
      return (props.size ==='small' ?

        `height:${rem(25)};
         line-height:${rem(25)};
         padding:${rem(2)} ${rem(8)};
         font-size:${rem(16)};`:

         `height:${rem(38)};
         line-height:${rem(38)};
         padding:${rem(2)} ${rem(8)};
         font-size:${rem(24)};
         `

      )
    }}

    border-radius:${rem(40)};
    .shop-name{
      width:60%;
      height:100%;
      display:inline-block;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      color:#999999;
    }
    .shop-name::before{
      content:'';
      display:inline-block;
      margin-right:2px;
      width:${rem(20)};
      height:${rem(18)};
      // line-height:${rem(20)};
      vertical-align: middle;
      background:url('https://lofter.lf127.net/1638183888718/shop.png') no-repeat;
      background-size:100% auto;
    }
    .shop-entrance{
      color:#2E2E2E;
      // vertical-align: top;
      float:right;
    }
    .shop-entrance::after{
      content:'';
      display:inline-block;
      margin-right:2px;
      width:${rem(8)};
      height:${rem(14)};
      background:url('https://lofter.lf127.net/1638189085987/right.png') no-repeat;
      background-size:100% auto;
    }
  }
`