<template>
  <div class="pkTime" :style="styleData.pkTime" v-if="isShow">
    <div :style="styleData.pkTime" class="timeSty" v-if="isShow">
      <van-count-down
        class="countDownStyle1"
        :time="dataAll.endTime - new Date().getTime()"
        format="DD 天 HH 时 mm 分 ss 秒"
        @finish="refresh"
      >
        <template #default="timeData">
          距投票结束剩余：
          <span class="block">{{
            timeData.days >= 10 ? timeData.days : "0" + timeData.days
          }}</span>
          <span class="colon">天</span>
          <span class="block">{{
            timeData.hours >= 10 ? timeData.hours : "0" + timeData.hours
          }}</span>
          <span class="colon">时</span>
          <span class="block">{{
            timeData.minutes >= 10 ? timeData.minutes : "0" + timeData.minutes
          }}</span>
          <span class="colon">分</span>
          <span class="block">{{
            timeData.seconds >= 10 ? timeData.seconds : "0" + timeData.seconds
          }}</span>
          <span class="colon">秒</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);
import apis1 from "../../../util/apis1.js";
let { initPage } = apis1;
import store from "../../../store/store";
export default {
  // props: ['datas', 'styleData', 'keyData'],
  props: [
    "isTemplate",
    "datas",
    "keyData",
    "styleData",
    "templateData",
    "isWebClick",
  ],
  data() {
    return {
      timer: new Date().getTime(),
      dataAll: {
        startTime: "",
        endTime: "",
      },
      activityStatus:'',
      isShow: false
    };
  },
  created() {
       
    this.publicData.$on("activityPkTime", (initDataAll, datas) => {
        this.activityStatus = sessionStorage.getItem("actStatus")
        this.dataAll.startTime = initDataAll.startTime;
        this.dataAll.endTime = initDataAll.endTime;
        if(this.activityStatus === '3' && new Date().getTime() <= this.dataAll.endTime){
          this.isShow = true
        } else {
          this.isShow =false
        }
    });
   
    
  },
  watch:{

  },
  methods: {
    async initData() {
      initPage((initdatas) => {
        this.dataAll.startTime = initdatas.data.startTime;
        this.dataAll.endTime = initdatas.data.endTime;
      });
    },
    refresh(){
        window.location.reload()
    }
  },
};
</script>

<style lang="scss" scoped>
.pkTime {
  .countDownStyle1 {
    color: #262626;
    .block {
      color: #ff426a;
      border-radius: 0.05rem;
      padding: 0.06rem 0.07rem;
    }
  }
  .timeSty {
    width: 7.5rem;
    height: 0.6rem;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #262626;
    font-size: 0.24rem;
  }
}
</style>
