<template>
  <div>
    <!-- 二期放开 -->
    <!-- <div v-if="value.cutPriceMsg">{{ value.cutPriceMsg }}</div> -->
    <!-- 二期放开 -->
    <div v-if="showActivity" class="purchaseInfo">
      <img src="https://appsync.lkbang.net/FiU7CWyyRwvaq2e4MtrlkywIwGPA" class="backgroundImage" />
      <p class="text">抢购</p>
      <div class="time">
        {{ value.activityShowInfo.activityTimeInfo.activityText }}
        <p v-if="showCountDown">{{ time }}</p>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState } from '../shopCartModules';
export default {
  props: {
    value: {
      type: Object,
      default: () => {}
    },
    index: Number,
    idx: Number
  },
  data() {
    return {
      time: '',
      showCountDown: false
    };
  },
  computed: {
    ...mapState(['timeArray']),
    activityTime: function() {
      return this.timeArray[this.idx][this.index];
    },
    showActivity: function() {
      return (
        this.value.activityShowInfo &&
        this.value.activityShowInfo.activityTimeInfo &&
        this.value.activityShowInfo.discountType === 11
      );
    }
  },
  watch: {
    activityTime: {
      immediate: true,
      deep: true,
      handler(v) {
        this.showCountDown = v > 0;
        if (v <= 0) return;
        const times = v / 1000;
        let h = parseInt((times / 60 / 60) % 24);
        h = h < 10 ? `0${h}` : h;
        let m = parseInt((times / 60) % 60);
        m = m < 10 ? `0${m}` : m;
        let s = parseInt(times % 60);
        s = s < 10 ? `0${s}` : s;
        this.time = `${h}:${m}:${s}`;
      }
    }
  }
};
</script>
<style lang="less" scoped>
.purchaseInfo {
  display: flex;
  align-items: center;
  color: #ec1500;
  margin-top: 8px;
  background: url('../../../assets/images/cart/countDown.png') no-repeat center;
  .backgroundImage {
    height: 16px;
    width: 30px;
  }
  .text {
    font-size: 10px;
    position: relative;
    left: -26px;
    z-index: 2;
    color: #fff;
  }
  .time {
    font-size: 10px;
    margin-left: -20px;
    display: flex;
  }
}
</style>
