<template>
  <view @click="handleClick">
    <view class="sale-pic">
      <image class="sale-img" :src="item.img" mode=""></image>
      <text v-if="endTime > 0" class="sale-text"
        >限时优惠：
        <template v-if="saleTime.d">{{ saleTime.d }}天</template>
        {{ saleTime.h }}:{{ saleTime.m }}:{{ saleTime.s }}
      </text>
    </view>
    <text class="sale-title">{{ item.name }}</text>
    <view class="sale-sub">
      <text class="sale-label">&yen;</text>
      <text class="sale-price">{{ item.price }}</text>
      <text
        v-if="
          Number(item.SourcePrice) &&
          Number(item.price) < Number(item.SourcePrice)
        "
        class="sale-origin"
        >&yen; {{ item.SourcePrice }}</text
      >
    </view>
  </view>
</template>

<script>
export default {
  props: {
    item: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      endTime: 0,
      saleTime: {
        d: 0,
        h: 0,
        m: 0,
        s: 0,
      },
    };
  },
  created() {
    this.endTime = (this.item.end_timestamp || 0) - parseInt(Date.now() / 1000);
    if (this.endTime > 0) {
      this.runCd();
    }
  },
  methods: {
    handleClick(e) {
      this.$emit("click", e);
    },
    runCd() {
      clearTimeout(this.cdTimer);
      const saleTime = {
        d: parseInt(this.endTime / 24 / 60 / 60),
        h: parseInt((this.endTime % (24 * 60 * 60)) / 60 / 60),
        m: parseInt((this.endTime % (60 * 60)) / 60),
        s: this.endTime % 60,
      };

      if (saleTime.h < 10) saleTime.h = `0${saleTime.h}`;
      if (saleTime.m < 10) saleTime.m = `0${saleTime.m}`;
      if (saleTime.s < 10) saleTime.s = `0${saleTime.s}`;

      this.saleTime = saleTime;

      if (this.endTime > 0) {
        this.cdTimer = setTimeout(() => {
          this.endTime--;
          this.runCd();
        }, 1000);
      }
    },
  },
};
</script>

<style lang="scss">
.sale-pic,
.sale-img {
  position: relative;
  width: 256rpx;
  height: 256rpx;
  display: block;
}
.sale-text {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  font-size: 22rpx;
  font-weight: 500;
  color: #ffffff;
  height: 36rpx;
  background: linear-gradient(95deg, #fc5e94 0%, rgba(252, 94, 148, 0.47) 100%);
  line-height: 36rpx;
  text-align: center;
}

.sale-title {
  font-size: 24rpx;
  font-weight: 500;
  color: #292d3b;
  line-height: 34rpx;
  height: 68rpx;
  display: block;
  white-space: normal;
  margin: 8rpx 0;
}
.sale-sub {
  color: #08c2c3;
  line-height: 34rpx;
  display: block;
  font-family: unidreamledregular, Helvetica Neue, Helvetica, Arial,
    Hiragino Sans GB, Hiragino Sans GB W3, Microsoft YaHei UI, Microsoft YaHei,
    WenQuanYi Micro Hei, sans-serif;
  .sale-label {
    font-size: 24rpx;
    margin-right: 5rpx;
    font-weight: bolder;
  }
  .sale-price {
    font-size: 32rpx;
  }
  .sale-origin {
    font-size: 20rpx;
    font-weight: 400;
    color: #a6a7ac;
    text-decoration: line-through;
    margin-left: 10rpx;
  }
}
</style>
