<template>
  <view class="act-item" @click="handleClick">
    <image class="act-cover" :src="activity.img" mode="widthFix"></image>
    <image
      v-if="activity.status === 0"
      class="act-label"
      src="@/assets/activity/label-notstarted.png"
      mode=""
    ></image>
    <image
      v-else-if="activity.status === 1"
      class="act-label"
      src="@/assets/activity/label-progress.png"
      mode=""
    ></image>
    <image
      v-else-if="activity.status === 2"
      class="act-label"
      src="@/assets/activity/label-end.png"
      mode=""
    ></image>
    <view class="act-content">
      <view v-if="activity.title" class="act-desc">{{ activity.title }}</view>
      <view class="act-title">
        奖品价值：<text class="color"
          >{{
            activity.unit === "元" || activity.unit === "￥"
              ? `&yen; ${activity.price}`
              : `${activity.price}${activity.unit}`
          }}&nbsp;({{ activity.num }}件商品)
        </text>
      </view>
      <view v-if="activity.status === 1" class="act-cd"
        >距离开奖仅剩：{{ timeStr }}</view
      >
      <view v-else class="act-cd">开奖时间：{{ activity.open_time }}</view>
    </view>
  </view>
</template>

<script>
export default {
  name: "ActivityItem",
  props: {
    activity: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      timeStr: "",
    };
  },
  created() {
    this.runCd();
  },
  beforeDestroy() {
    clearTimeout(this.timer);
  },
  methods: {
    handleClick() {
      this.$emit("click", this.activity);
    },
    runCd() {
      clearTimeout(this.timer);
      if (this.activity.status !== 1) {
        return;
      }
      const time =
        new Date(this.activity.open_time.replace(/-/g, "/")).getTime() -
        Date.now();

      if (time <= 0) {
        this.$emit("end");
        return;
      }

      let str = "";
      let d = parseInt(time / (1000 * 60 * 60 * 24));

      if (time > 1000 * 60 * 60) {
        d = parseInt(time / (1000 * 60 * 60 * 24));
        if (d > 0) {
          str += `${d}天`;
        }
        d = parseInt((time % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        str += `${d}小时`;
      }

      d = parseInt((time % (1000 * 60 * 60)) / (1000 * 60));
      str += `${d}分`;

      if (time <= 1000 * 60 * 60) {
        d = parseInt(time / 1000);
        str += `${d}秒`;
      }

      this.timeStr = str;

      this.timer = setTimeout(
        () => {
          this.runCd();
        },
        time <= 1000 * 60 * 60 ? 1000 : 1000 * 60
      );
    },
  },
};
</script>

<style lang="scss">
.act-item {
  position: relative;
  margin: 24rpx 0;
  background: #fff;
  border-radius: 10rpx;

  .act-cover {
    width: 100%;
    height: 240rpx;
    border-top-left-radius: 10rpx;
    border-top-right-radius: 10rpx;
  }

  .act-label {
    width: 92rpx;
    height: 92rpx;
    position: absolute;
    left: 0;
    top: 0;
  }

  .act-content {
    padding: 16rpx;
    color: #292d3b;

    .color {
      color: #08c2c3;
    }

    .act-title {
      height: 40rpx;
      font-size: 28rpx;
      line-height: 40rpx;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      margin-bottom: 8rpx;
      // letter-spacing: 0.5rpx;
    }

    .act-cd {
      height: 34rpx;
      font-size: 28rpx;
      // color: #9496a5;
      line-height: 34rpx;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      margin: 8rpx 0;
      // letter-spacing: 0.5rpx;
    }

    .act-desc {
      font-weight: 500;
      // height: 40rpx;
      font-size: 28rpx;
      line-height: 40rpx;
      // white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      // margin-top: 4rpx;
      margin-bottom: 8rpx;
      white-space: wrap;
      display: -webkit-box;
      word-break: break-all;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      letter-spacing: 0.3rpx;
      font-weight: 600;
    }
  }
}
</style>
