<template>
  <div class="countdownFixed" v-if="isShow" :style="styleData.kvPosition">
    <div :style="styleData.timeSty" class="timeSty ends" v-if="new Date().getTime() >= dataAll.endTime">
      您来晚了，活动已经结束了
    </div>
    <div :style="styleData.timeSty" class="timeSty times" v-else-if="new Date().getTime() < dataAll.startTime">
      <van-count-down
        class="countDownStyle1"
        :time="dataAll.startTime - 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="block1">{{
            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: "",
      },
      isShow: false,
    };
  },
  created() {
    this.publicData.$on("activityLoaded", (initDataAll, datas) => {
      this.dataAll.startTime = initDataAll.startTime;
      this.dataAll.endTime = initDataAll.endTime;
      this.isShow = true;
    });
    // this.initData();
  },
  methods: {
    async initData() {
      initPage((initdatas) => {
        this.dataAll.startTime = initdatas.data.startTime;
        this.dataAll.endTime = initdatas.data.endTime;
        this.publicData.$emit("activityLoaded", initdatas.data);
      });
    },
    refresh(){
        window.location.reload()
    }
  },
};
</script>

<style lang="scss" scoped>
.countdownFixed {
  .countDownStyle1 {
    font-size: 0.21rem;
    color: #ff426a;
    .block {
      background: #fff;
      border-radius: 0.05rem;
      padding: 0.06rem 0.07rem;
    }
    .block1 {
      background: #ff426a;
      border-radius: 0.05rem;
      padding: 0.06rem 0.07rem;
      color: #fff;
    }
  }
  .timeSty {
    width: 7.5rem;
    border-radius: 0 0 0.2rem 0.2rem;
    height: 0.5rem;
    background-color: rgba(000, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-size: 0.24rem;
    position:absolute;
  }
}
</style>
