<template>
  <div>
    <div class="countDownDiv" :style="styleData[keyData.countMainStyle]">
      <div class="countDownDivAll" :style="styleData[keyData.countDownDivAll]" v-if="dataAll[keyData.activityStatus] == 1">
        <van-count-down
          :time="dataAll[keyData.startTime] - new Date().getTime()"
          format="DD 天 HH 时 mm 分 ss 秒"
          :style="styleData.countDownStyle1"
          v-if="dataAll[keyData.activityStatus] == 1"
        >
          <template #default="timeData">
            距离开始还有
            <span class="block" :style="styleData[keyData.blockStyle]">{{ timeData.days >= 10 ? timeData.days : '0' + timeData.days }}</span>
            <span class="colon" :style="styleData[keyData.colonStyle]">天</span>
            <span class="block" :style="styleData[keyData.blockStyle]">{{ timeData.hours >= 10 ? timeData.hours : '0' + timeData.hours }}</span>
            <span class="colon" :style="styleData[keyData.colonStyle]">时</span>
            <span class="block" :style="styleData[keyData.blockStyle]">{{ timeData.minutes >= 10 ? timeData.minutes : '0' + timeData.minutes }}</span>
            <span class="colon" :style="styleData[keyData.colonStyle]">分</span>
            <span class="block" :style="styleData[keyData.blockStyle]">{{ timeData.seconds >= 10 ? timeData.seconds : '0' + timeData.seconds }}</span>
            <span class="colon" :style="styleData[keyData.colonStyle]">秒</span>
          </template>
        </van-count-down>
      </div>

      <div :style="styleData[keyData.countDownDiv0]" v-if="dataAll[keyData.activityStatus] == 2">
        <div class="countDownDiv1" :style="styleData[keyData.countDownDiv]"><span>活动已结束</span></div>
      </div>

      <!-- <div class="" :style="styleData[keyData.countDownDiv2]" v-if="dataAll[keyData.activityStatus] == 3"></div> -->
    </div>

    <div v-if="isShowAcInprogress" :style="styleData[keyData.acInprogressStyle]">
      <van-count-down :style="styleData[keyData.acInprogresscountDownStyle]" :time="dataAll[keyData.endTime] - new Date().getTime()" format="DD 天 HH 时 mm 分 ss 秒">
        <template #default="timeData">
          距活动结束还有:
          <span class="block" :style="styleData[keyData.acblockStyleStyle]">{{ timeData.days >= 10 ? timeData.days : '0' + timeData.days }}</span>
          <span class="colon" :style="styleData[keyData.colonStyle]">天</span>
          <span class="block" :style="styleData[keyData.acblockStyleStyle]">{{ timeData.hours >= 10 ? timeData.hours : '0' + timeData.hours }}</span>
          <span class="colon" :style="styleData[keyData.colonStyle]">时</span>
          <span class="block" :style="styleData[keyData.acblockStyleStyle]">{{ timeData.minutes >= 10 ? timeData.minutes : '0' + timeData.minutes }}</span>
          <span class="colon" :style="styleData[keyData.colonStyle]">分</span>
          <span class="block" :style="styleData[keyData.acblockStyleStyle]">{{ timeData.seconds >= 10 ? timeData.seconds : '0' + timeData.seconds }}</span>
          <span class="colon" :style="styleData[keyData.colonStyle]">秒</span>
        </template>
      </van-count-down>
    </div>

    <div class="countDownDivAll" :style="styleData[keyData.countDownDivAll]" v-if="dataAll[keyData.startTime] - new Date().getTime() > 0 && dataAll[keyData.activityStatus] == 4">
      <van-count-down :time="dataAll[keyData.startTime] - new Date().getTime()" format="DD 天 HH 时 mm 分 ss 秒" :style="styleData.countDownStyle1">
        <template #default="timeData">
          距离开奖还有
          <span class="block" :style="styleData[keyData.blockStyle]">{{ timeData.days >= 10 ? timeData.days : '0' + timeData.days }}</span>
          <span class="colon" :style="styleData[keyData.colonStyle]">天</span>
          <span class="block" :style="styleData[keyData.blockStyle]">{{ timeData.hours >= 10 ? timeData.hours : '0' + timeData.hours }}</span>
          <span class="colon" :style="styleData[keyData.colonStyle]">时</span>
          <span class="block" :style="styleData[keyData.blockStyle]">{{ timeData.minutes >= 10 ? timeData.minutes : '0' + timeData.minutes }}</span>
          <span class="colon" :style="styleData[keyData.colonStyle]">分</span>
          <span class="block" :style="styleData[keyData.blockStyle]">{{ timeData.seconds >= 10 ? timeData.seconds : '0' + timeData.seconds }}</span>
          <span class="colon" :style="styleData[keyData.colonStyle]">秒</span>
        </template>
      </van-count-down>
    </div>
  </div>
</template>

<script>
import dataJson from '../../../../src/data.json';
import Vue from 'vue';
import { CountDown } from 'vant';
Vue.use(CountDown);

export default {
  props: ['datas', 'styleData', 'keyData'],
  data() {
    return {
      dataAll: {},
      isShowAcInprogress: false //是否显示活动进行中的活动结束倒计时
    };
  },

  watch: {
    datas() {
      this.initData();
    }
  },
  mounted() {
    this.signStartTime = this.dataAll[this.keyData.startTime];
  },
  created() {
    var activityType = sessionStorage.getItem('activityType');
    if (this.dataAll[this.keyData.activityStatus] == 3) {
      this.isShowAcInprogress = this.datas.isShowAcInprogress == true ? true : false;
    }
    this.publicData.$on('isKe', res => {
      if (res) {
        this.isShowAcInprogress = false;
      } else {
        this.isShowAcInprogress = true;
      }
    });
  },
  methods: {
    async initData(data) {
      console.log('倒计时', data);
      this.dataAll = data;
    }
  }
};
</script>

<style lang="scss" scoped>
.a {
  position: absolute;
  opacity: 0.5;
  background: rgba($color: #e7437d, $alpha: 0.5);
  background: rgba(0, 0, 0, 0.5);
}
</style>
