<template>
  <div class="item">
    <div class="image-wrap" :class="{ border: isPreSale }">
      <img src="/src/static/shop/chicken.png" alt="" />
      <div class="count-down-wrop">
        距离结束:
        <wd-count-down :time="6068060" />
      </div>
      <div class="type">预售</div>
      <img src="/src/static/shop/commodityBorder.png" alt="" />
    </div>
    <div class="commodity-info">
      <div class="name">这是产品名称</div>
      <div class="wrap">
        <div class="describe">描述</div>
        <div class="date">预计8月31日发货</div>
      </div>
      <div class="price">
        <span style="font-size: 22rpx">￥</span>
        135
        <span class="unit">/只</span>
      </div>
    </div>
    <div class="add-shopping-cart">
      <img src="/src/static/shop/add.png" alt="" />
    </div>
  </div>
</template>

<script setup>
const isPreSale = true;
</script>

<style lang="scss" scoped>
.item {
  display: flex;
  position: relative;
  .image-wrap {
    width: 160rpx;
    height: 160rpx;
    margin-right: 20rpx;
    position: relative;
    &.border {
      border: 2rpx solid #fcdbdb;
      box-sizing: border-box;
      border-radius: 16rpx;
    }
    .count-down-wrop {
      display: flex;
      justify-content: center;
      align-items: center;
      position: absolute;
      top: 0;
      left: 0;
      font-size: 16rpx;
      color: #fa5151;
      z-index: 1;
      height: 24rpx;
      width: 100%;
      .wd-count-down {
        font-size: 16rpx;
        color: #fa5151;
      }
    }
    .type {
      position: absolute;
      bottom: 4rpx;
      right: 10rpx;
      font-size: 18rpx;
      color: #fff;
      z-index: 1;
    }
    img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
  }
  .commodity-info {
    display: flex;
    flex-direction: column;
    color: #3d3d3d;
    padding-bottom: 20rpx;
    box-sizing: border-box;

    .name {
      font-size: 24rpx;
    }
    .wrap {
      flex: 1;
    }
    .describe {
      color: #abaaaa;
      font-size: 22rpx;
    }
    .date {
      color: #fa5151;
      font-size: 22rpx;
    }
    .price {
      color: #fa5151;
      font-size: 36rpx;
      span {
        font-size: 22rpx;
      }
      .unit {
        color: #3d3d3d;
      }
    }
  }
  .add-shopping-cart {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    bottom: 16rpx;
    right: 0;
    img {
      width: 52rpx;
      height: 52rpx;
    }
  }
}
</style>
