<template>
  <div class="count_down">
    <div class="countDown" v-show="detailData.clusterTime ">
      <div class="countDownTop">
        <div>{{day}} {{detailData.applyCount>=detailData.minPeopleCount?'报名截止时间：':'团期截止倒计时'}}</div>
        <div v-if="detailData.applyCount>=detailData.minPeopleCount||timeTamp * 1 < 0">{{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: "",
      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.mgop({
        api: 'mgop.sz.hswsy.DateInfoById', // 必须
        host: 'https://mapi.zjzwfw.gov.cn/',
        dataType: 'JSON',
        type: 'GET',
        appKey: 'fuxgnukl+2001895516+edccpx', // 必须
        headers: {
          //   'isTestUrl': '1'
        },
        data: {
          "productId": productId,
          "bindId": bindId,
          "comboId": comboId,
        },
        onSuccess: res => {
          console.log('套餐列表:', res.data.data);
          if (res.data.data) {
            this.detailData = res.data.data
            let timer = setInterval(() => {
              this.timeDown(); //倒计时
            }, 1000);
            this.$once("hook:beforeDestroy", () => {
              clearInterval(timer); //清理定时器
              console.log('清理定时器')
            });
          }
        },
        onFail: err => {
          console.log('err', err)
        }
      });
    },
    //倒计时计算
    timeDown () {
      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>