<template>
  <div class="goods-info">
    <!--      //获取图片-->
    <div class="goods-img"><img :src="getImage(props.goodsInfo.img)" alt=""></div>
    <div class="goods-name">{{ props.goodsInfo.name }}
    </div>
    <div class="goods-price">{{ props.goodsInfo.price }}</div>
    <div v-if="props.goodsInfo.originalPrice!==props.goodsInfo.price">
      <div class="goods--original-price">￥{{ props.goodsInfo.originalPrice }}</div>
      <div class="goods-discount-percentage">{{ props.goodsInfo.discountPercentage }}</div>
    </div>
    <div v-else>
      <div class="goods--original-price"></div>
    </div>
  </div>
</template>
<script setup lang="ts">
import {GoodsInfo} from "../entity/Entity.ts";

const props = defineProps({
  goodsInfo: {
    type: GoodsInfo,
    default: () => null
  }
})

function getImage(url: string) {
  return new URL(`${url}`, import.meta.url).href;
}


</script>
<style scoped>
.goods-info {
  display: block;
  max-width: 170px;
  margin-bottom: 30px;

  &:hover {
    cursor: pointer;
    background: rgba(224, 224, 224, 0.4);
  }

  .goods-img {
    padding: 0;
    margin: 0 0 12px 0;
    overflow: hidden;
    display: flex;

    img {
      height: 228px;
      width: 170px;

      &:hover {
        z-index: 0;
      }
    }

    &:hover::after {
      opacity: 1;
      box-shadow: rgba(100, 100, 100, 0.3) 0 0 8px 3px;
    }

    &::after {
      content: "";
      position: absolute;
      width: 170px;
      height: 228px;
      box-sizing: border-box;
      background: rgba(229, 229, 229, 0.2);
      animation: 0.2s ease 0s 1 normal none running enlarge;
      opacity: 0;
      transition: all 0.3s ease 0s;
    }
  }

  .goods-name {
    height: 38px;
    font-size: 12px;
    /*最大行数两行*/
    text-overflow: ellipsis;
    overflow: hidden;
    -webkit-line-clamp: 2;
  }

  .goods-price {
    font-size: 16px;
    margin: 5px 0;
    font-weight: bold;

    &::before {
      content: "￥";
    }
  }

  .goods--original-price {
    display: inline-block;
    text-decoration: line-through;
    font-size: 12px;
    margin: 0;
    padding: 0;

  }

  .goods-discount-percentage {
    display: inline-block;
    font-size: 12px;
    margin: 0 0 0 10px;
    padding: 0 5px;
    color: white;
    background: rgb(223, 30, 28);

    &::before {
      content: "-";
    }

    &::after {
      content: "%";
    }
  }

}
</style>