<template>
  <div class="countdownOver" :style="styleData.countdownOver" v-if="isShow" ref="countdownOver"
    @click="styleClick('click', 'countdownOver')" @mousemove="styleClick('mousemove', 'countdownOver')"
    @mouseout="styleClick('mouseout','countdownOver')">
    <!-- <div class="timeSty" v-if="new Date().getTime() >= dataAll.endTime">
      您来晚了，活动已经结束了！
    </div> -->
    <div class="timeSty" :style="styleData.timeSty" v-if="new Date().getTime() <= dataAll.endTime">
      <van-count-down class="countDownStyle1" :style="styleData.countDownStyle1"
        :time="dataAll.endTime - new Date().getTime()" format="DD 天 HH 时 mm 分 ss 秒" @finish="refresh">
        <template #default="timeData">
          <span :style="styleData.titles"> 距活动结束剩余：</span>
          <span :style="styleData.content">
            <span :style="styleData.acblockStyleStyle">{{
              timeData.days >= 10 ? timeData.days : "0" + timeData.days
            }}</span>
            <span :style="styleData.acInprogresscountDownStyle">天</span>
            <span :style="styleData.acblockStyleStyle">{{
              timeData.hours >= 10 ? timeData.hours : "0" + timeData.hours
            }}</span>
            <span :style="styleData.acInprogresscountDownStyle">时</span>
            <span :style="styleData.acblockStyleStyle">{{
              timeData.minutes >= 10 ? timeData.minutes : "0" + timeData.minutes
            }}</span>
            <span :style="styleData.acInprogresscountDownStyle">分</span>
            <span :style="styleData.acblockStyleStyle">{{
              timeData.seconds >= 10 ? timeData.seconds : "0" + timeData.seconds
            }}</span>
            <span :style="styleData.acInprogresscountDownStyle">秒</span>
          </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,
    };
  },
  watch: {
    timer: {
      handler(val) {
        if (val > this.dataAll.endTime) {
          console.log(val > this.dataAll.endTime, 2222222);
          this.isShow = false;
        }
      },
      deep: true,
    },
  },
  created() {
    this.publicData.$on("activityLoaded", (initDataAll, datas) => {
      if (new Date().getTime() > initDataAll.endTime) {
        this.isShow = false;
      } else {
        this.isShow = true;
      }
      this.dataAll.startTime = initDataAll.startTime;
      this.dataAll.endTime = initDataAll.endTime;
      console.log(123, new Date().getTime(), this.dataAll.endTime);
    });

    // this.initData();
  },
  mounted() {

    // let actStatus = sessionStorage.getItem("actStatus");
    // if (actStatus == 1 || actStatus == 2) {
    //   this.isShow = false;
    // } else {
    //   this.isShow = true;
    // }
  },
  methods: {
    styleClick(type, refName) {
      if (this.isWebClick) {
        //传值给B端
        let byValue = {
          modifyContent: this.modifyContent,
          refName: refName,
          styleData: this.styleData,
          c_this: this,
          styleDataOld: this.styleDataOld,
        };
        this.$emit("opertaionCom", type, byValue);
      }
    },
    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>
.countdownOver {
  margin-bottom: 0.3rem;
  .countDownStyle1 {
    color: #fff;
  }
  .timeSty {
    // width: 7.5rem;
    // height: 0.6rem;
    // background: #000;
    // display: flex;
    // justify-content: center;
    // align-items: center;
    // color: #999999;
    // font-size: 0.24rem;
  }
}
</style>
