<template>
  <div :key="timer" class="countdowNew">
    <div v-if="dataAll[keyData.activityStatus] != 3">
      <div
        class="countDownDiv"
        :style="styleData.countDownStyle[keyData.countMainStyle]"
      >
        <div
          class="countDownDivAll"
          :style="styleData.acInprogressStyle"
          v-if="dataAll[keyData.activityStatus] == 1"
        >
          <van-count-down
            class="countDownStyle1"
            :time="dataAll[keyData.startTime] - new Date().getTime()"
            format="DD 天 HH 时 mm 分 ss 秒"
            :style="styleData.acInprogresscountDownStyle"
            v-if="dataAll[keyData.activityStatus] == 1"
          >
            <template #default="timeData">
              <span :style="styleData.countDownTitle">距活动开始还有：</span>
              <span class="backC">
                <span
                  class="block"
                  :style="styleData.acblockStyleStyle"
                  >{{
                    timeData.days >= 10 ? timeData.days : "0" + timeData.days
                  }}</span
                >
                <span
                  class="colon"
                  :style="styleData.colonStyle"
                  >天</span
                >
                <span
                  class="block"
                  :style="styleData.acblockStyleStyle"
                  >{{
                    timeData.hours >= 10 ? timeData.hours : "0" + timeData.hours
                  }}</span
                >
                <span
                  class="colon"
                  :style="styleData.colonStyle"
                  >时</span
                >
                <span
                  class="block"
                  :style="styleData.acblockStyleStyle"
                  >{{
                    timeData.minutes >= 10
                      ? timeData.minutes
                      : "0" + timeData.minutes
                  }}</span
                >
                <span
                  class="colon"
                  :style="styleData.colonStyle"
                  >分</span
                >
                <span
                  class="block"
                  :style="styleData.acblockStyleStyle"
                  >{{
                    timeData.seconds >= 10
                      ? timeData.seconds
                      : "0" + timeData.seconds
                  }}</span
                >
                <span
                  class="colon"
                  :style="styleData.colonStyle"
                  >秒</span
                >
              </span>
            </template>
          </van-count-down>
        </div>

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

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

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

    <div v-else>
      <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 :style="styleData.countDownTitle">距活动结束还有：</span>
            <span class="backC">
              <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
              >
            </span>
          </template>
        </van-count-down>
      </div>
    </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: {},
      isShowAcInprogress: false, //是否显示活动进行中的活动结束倒计时
    };
  },

  watch: {
    datas() {
      this.initData();
    },
  },
  mounted() {
    this.signStartTime = this.dataAll[this.keyData.startTime];
    console.log(this.signStartTime);
  },
  created() {
    this.publicData.$on("activityLoaded", (initDataAll, datas) => {
      this.initDataAll = initDataAll;
      this.initData();
    });
    this.initData();
  },
  methods: {
    async initData(data) {
      var datasAll = this.templateData;
      let that = this;

      if (this.isTemplate == true) {
        if (this.isWebClick) {
        } else {
          // this.$toast('活动预览，仅供查看');
        }
        // console.log(datasAll,'datasAll***')
        if (datasAll) {
          //有数据的模板
          var initDataAll = datasAll.activity;
          // initDataAll.nowTime = new Date().getTime();
          initDataAll.startTime = new Date().getTime() - 3600 * 24 * 4000;
          initDataAll.endTime = new Date().getTime() + 3600 * 24 * 1000;
          initDataAll.nowTime = new Date().getTime();
        } else {
          //没有模板的数据
          document.title = "活动模板";
          var initDataAll = {
            actName: "活动模板",
            topicImage: "",
            startTime: new Date().getTime() - 3600 * 24 * 4000,
            endTime: new Date().getTime() + 3600 * 24 * 1000,
            nowTime: new Date().getTime(),
            shopName: "XXX京东自营官方旗舰店",
          };
        }

        console.log(initDataAll, "initDataAll");
        document.title = initDataAll.actName;
        this.mainKvBg = initDataAll.topicImage
          ? initDataAll.topicImage
          : this.datas[this.keyData.mainKvBg];
        // this.mainKvBg = this.datas[this.keyData.mainKvBg];
        that.bargainStartTime = initDataAll.startTime; //砍价开始时间
        that.bargainEndTime = initDataAll.endTime; //砍价结束时间

        this.publicData.$emit(
          "bargainTime",
          this.bargainStartTime,
          this.bargainEndTime
        );
        if (initDataAll.nowTime > initDataAll.endTime) {
          var actStatus = 2;
          Toast("活动已结束");
          sessionStorage.setItem("actStatus", 2); //缓存活动状态
        } else if (
          initDataAll.nowTime >= initDataAll.startTime &&
          initDataAll.nowTime <= initDataAll.endTime
        ) {
          console.log("活动正常进行");
          //活动正常进行
          var actStatus = 3;
          sessionStorage.setItem("actStatus", 3); //缓存活动状态
          this.isShowAcInprogress =
            this.datas.isShowAcInprogress == true ? true : false;
        } else {
          var actStatus = 1;
          Toast("活动尚未开始");
          sessionStorage.setItem("actStatus", 1); //缓存活动状态
        }
        this.dataAll = initDataAll;
        this.dataAll[this.keyData.activityStatus] = actStatus;
        console.log(this.dataAll, "asdasd");
      } else {
        //进行接口请求
        // initPage((initdatas) => {
        // let initDataAll = initdatas.data;
        let initDataAll = this.initDataAll;
        if (initDataAll) {
          var title = initDataAll.shareTitle;
          var content = initDataAll.shareTitle;
          var url = location.href;
          var mpIconUrl = initDataAll.shareImage;
          var logoUrl = initDataAll.shareImage;
          var isHeader = true; //false 头部分享 true 按钮分享
          var shopid = store.state.shopId;
          var userpin = store.state.userPin;
          var jdactivityid = store.state.jdActivityId; //'1356071125718585346' //store.state.activityId

          that.bargainStartTime = initDataAll.startTime;
          that.bargainEndTime = initDataAll.endTime;

          if (new Date().getTime() > initDataAll.endTime) {
            var actStatus = 2;
            sessionStorage.setItem("actStatus", 2); //缓存活动状态
          } else if (
            new Date().getTime() >= initDataAll.startTime &&
            new Date().getTime() <= initDataAll.endTime
          ) {
            //活动正常进行
            var actStatus = 3;
            sessionStorage.setItem("actStatus", 3); //缓存活动状态
          } else {
            var actStatus = 1;
            console.log(actStatus, "88888888888888");
            sessionStorage.setItem("actStatus", 1); //缓存活动状
          }

          this.dataAll = initDataAll;
          this.dataAll[this.keyData.activityStatus] = actStatus;
          console.log(this.dataAll, "this.dataAll1111111");

          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;
            }
          });
          this.timer = new Date().getTime();
        }
        // });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.countdowNew {
  .a {
    position: absolute;
    opacity: 0.5;
    background: rgba($color: #e7437d, $alpha: 0.5);
    background: rgba(0, 0, 0, 0.5);
  }
}
.backC {
  padding: 0 0.18rem;
  background: #6d262e;
  opacity: 0.7;
  border-radius: 0.19rem;
}
</style>
