<template>
  <div class="count_down">
    <div class="countDown" v-show="detailData.clusterTime">
      <div class="countDownTop">
        <div>
          {{ day }}
          {{
            detailData.applyCount >= detailData.minPeopleCount ? '报名截止时间：' : showJietuanTime ? '报名截止倒计时' : '成团截止倒计时'
          }}
        </div>
        <div v-if="detailData.applyCount >= detailData.minPeopleCount">{{ detailData.periodOfValidity }}</div>
        <div class="countDownTime" 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>
          秒
        </div>
      </div>
      <!-- <div class="countDownTop" v-else>
        <div>{{day}}</div>
      </div> -->
      <div class="countDownBottom">
        <div>
          <div class="countDownBottomyellow" v-show="detailData.minPeopleCount">
            {{ detailData.clusterName }}
          </div>
          <span v-if="detailData.applyCount >= detailData.minPeopleCount"
            >已报名 {{ detailData.applyCount }}/{{ detailData.stockCount }}{{ detailData.unitName }}</span
          >
          <span v-else
            >最低成团数{{ detailData.minPeopleCount }}{{ detailData.unitName }}/已报名{{ detailData.applyCount
            }}{{ detailData.unitName }}</span
          >
          <!-- 已报名:<span>{{ detailData.applyCount }}</span><span>/{{ detailData.stockCount }}</span> -->
        </div>
        <div class="countDownAbout" @click="showPintuanAbout = true">关于拼团？</div>
      </div>
    </div>
    <van-popup v-model="showPintuanAbout" round>
      <div class="pintuan_about">
        <img class="about_img" src="@/assets/service/tip.png" alt="" />
        <p class="about_title">拼团规则说明</p>
        <p class="about_content">1、拼团展示默认为最近活动档期，选择其它档期请时刻注意成团动态。</p>
        <p class="about_content">2、在限时截止后，报名人数未达最低成团数，则结束本团活动，系统将在72小时内，全额退还！</p>
        <p class="about_content">3、报名人数达到最低成团要求后，则拼团成功，凡在报名截止时间内未达最大限团人数，则可放心参与。</p>
        <p class="about_content">4、已成团的活动，除特殊情况等不可抗拒因素外，活动如期举行。</p>
        <p class="about_know" @click="showPintuanAbout = false">我知道了</p>
      </div>
    </van-popup>
  </div>
</template>
<script>
export default {
  props: ['day', 'productId', 'packageArr', 'bindId', 'comboId'],
  data() {
    return {
      timeTamp: '',
      showJietuanTime: false,
      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, '/'))).format('YYYY/MM/DD HH:mm:ss')
            data.periodOfValidity = this.Moment(new Date(data.periodOfValidity.replace(/\-/g, '/'))).format('YYYY/MM/DD HH:mm:ss')
            console.log(data.clusterTime)
            // 添加商品已报名数量，过期请删除start
            if (this.$route.query.bindId == 3816) {
              data.applyCount = data.applyCount + 521
            }
            // 添加商品已报名数量，过期请删除end
            this.detailData = data
            let timer = setInterval(() => {
              this.timeDown() //倒计时
            }, 1000)
            this.$once('hook:beforeDestroy', () => {
              clearInterval(timer) //清理定时器
              console.log('清理定时器')
            })
          } else {
            this.$toast('获取成团状态失败')
          }
        })
    },
    //倒计时计算
    timeDown() {
      var nowTime = Date.parse(new Date())
      let timeTamp = ''
      var clusterTime =Date.parse(new Date(this.detailData.clusterTime.replace(/\-/g, "/"))); 
      var periodOfValidity =Date.parse(new Date(this.detailData.periodOfValidity.replace(/\-/g, "/"))); 
      if(this.detailData.clusterName=='已成团'||clusterTime<nowTime){
        timeTamp = periodOfValidity / 1000 - nowTime / 1000;
      this.showJietuanTime = true
      }else{
        timeTamp = clusterTime / 1000 - nowTime / 1000;
      this.showJietuanTime = false

      }
      // 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">
.countDown {
  height: 130px;
  width: 100%;
  background-color: #201e2b;
  .countDownTop {
    height: 50%;
    padding: 0 3vw;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #ffffff;
    font-size: 32px;
    .countDownTime {
      font-size: 24px;
      .countDownFont {
        line-height: 34px;
        color: #333333;
        border-radius: 5px;
        margin: 0 8px;
      }
      div {
        width: 34px;
        text-align: center;
        display: inline-block;
        background-color: #ffe9b1;
      }
    }
  }
  .countDownBottom {
    height: 50%;
    padding: 0 3vw;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #ffffff;
    font-size: 24px;
    .countDownBottomyellow {
      display: inline-block;
      height: 33px;
      margin-right: 12px;
      padding: 0 8px;
      color: #333333;
      font-size: 24px;
      background-color: #ffe9b1;
      border-radius: 4px;
    }
    .countDownBottomTime {
      font-size: 2.8vw;
      color: #ffffff;
      opacity: 0.85;
    }
    .countDownAbout {
      text-decoration: underline;
    }
  }
}
</style>