<template>
  <div class="data_package_count_down">
    <div v-if="detailData.applyCount >= detailData.minPeopleCount || timeTamp * 1 < 0">{{ detailData.periodOfValidity }}</div>
    <template v-else>
      <div class="countDownFont">{{ showTime.day }}</div>
      天
      <div class="countDownFont">{{ showTime.hour }}</div>
      时
      <div class="countDownFont">{{ showTime.minute }}</div>
      分
      <div class="countDownFont">{{ showTime.second }}</div>
      秒
    </template>
  </div>
</template>
<script>
export default {
  props: ['day', 'productId', 'packageArr', 'bindId', 'comboId'],
  data() {
    return {
      timeTamp: '',
      showTime: {
        day: '',
        hour: '',
        minute: '',
        second: '',
      },
      showPintuanAbout: false,
      detailData: '',
    }
  },
  watch: {
    bindId(oldVal, newVal) {
      this.getDateInfoById()
    },
    comboId(oldVal, newVal) {
      this.getDateInfoById()
    },
  },
  mounted() {
    // console.log(this.detailData)
    // console.log(this.packageArr)
    this.getDateInfoById()
  },
  methods: {
    // 根据选择的档期显示成团状态
    getDateInfoById() {
      const productId = this.productId
      const bindId = this.bindId
      const comboId = this.comboId
      // console.log(productId, bindId, comboId)
      this.yxAxios
        .get(`${this.yanxueUrl}/api/Product/DateInfo/ById?productId=${productId}&bindId=${bindId}&comboId=${comboId}`)
        .then((res) => {
          // console.log(res.data)
          if (res.data.status == 1) {
            let data = res.data.data
            // console.log(data.clusterTime)
            data.clusterTime = this.Moment(new Date(data.clusterTime.replace(/\-/g, '/')))
              .add(1, 'days')
              .subtract(1, 'seconds')
              .format('YYYY/MM/DD HH:mm:ss')
            data.periodOfValidity = this.Moment(new Date(data.periodOfValidity.replace(/\-/g, '/')))
              .add(1, 'days')
              .subtract(1, 'seconds')
              .format('YYYY/MM/DD HH:mm:ss')
            console.log(data.clusterTime)
            this.detailData = data
            let timer = setInterval(() => {
              this.timeDown() //倒计时
            }, 1000)
            this.$once('hook:beforeDestroy', () => {
              clearInterval(timer) //清理定时器
              console.log('清理定时器')
            })
          } else {
            this.$toast('获取成团状态失败')
          }
        })
    },
    //倒计时计算
    timeDown() {
      var clusterTime = Date.parse(new Date(this.detailData.clusterTime))
      // var clusterTime = Date.parse(new Date(this.detailData.clusterTime.replace(/\-/g, "/"))) + 60 * 60 * 24 * 1000;
      var nowTime = Date.parse(new Date())
      let timeTamp = clusterTime / 1000 - nowTime / 1000
      // console.log(timeTamp)
      this.timeTamp = timeTamp
      // console.log(timeTamp)
      let k = this.calculateDiffTime(timeTamp)
      // console.log(k)
    },
    calculateDiffTime(timeDiff) {
      var day = parseInt(timeDiff / 86400)
      var hour = parseInt((timeDiff % 86400) / 3600)
      var minute = parseInt(((timeDiff % 86400) % 3600) / 60)
      var second = parseInt((((timeDiff % 86400) % 3600) % 60) % 60)

      this.showTime = {
        day,
        hour,
        minute,
        second,
      }
      day = day ? day + '天' : ''
      hour = hour ? hour + '时' : ''
      minute = minute ? minute + '分' : ''
      second = second ? second + '秒' : ''
      return day + hour + minute + second
    },
  },
}
</script>
<style lang="scss">
.data_package_count_down {
  display: inline-block;
  vertical-align: middle;
  font-size: 24px;
  margin-left: 10px;
  .countDownFont {
    display: inline-block;
    width: 34px;
    height: 34px;
    color: #ffe9b1;
    background: #000;
    line-height: 34px;
    border-radius: 6px;
    margin: 0 10px;
    vertical-align: middle;
    text-align: center;
  }
}
</style>
