<template>
  <div
    ref="basicMainVersion2"
    @click="styleClick('click', 'basicMainVersion2')"
    @mousemove="styleClick('mousemove', 'basicMainVersion2')"
    @mouseout="styleClick('mouseout')"
  >
    <div class="topDiv">
      <img
        :style="styleData.mainKvBgStyle"
        :src="styleData.mainKvBgStyle.imageUrl"
      />
      <img :src="mainKvBg1" :style="styleData.mainKvBgStyle1" v-if="showImg" />
      <div class="notice" v-if="showNotice">
        <van-notice-bar
          left-icon="volume-o"
          background="none"
          color="#fff"
          text="由于活动过于火爆，部分会员未领取到奖品。请所有签到累计15天及以上的会员在20号20点再次进入活动领取奖品，先到先得噢，给您带来的不便，尽请谅解！"
        />
      </div>

      <div v-if="isShowGoToShop" @click="goToShop" :style="styleData.goToShopStyle" v-lz-click="'4'">进店逛逛</div>

      <!-- //是否显示氛围定制 -->
      <div v-if="isShowAtm">
        <div v-if="isHelpShare" :style="styleData.shareAtmImgDivtyle">
          <img
            :style="styleData.atmImgtyle"
            :src="styleData.shareAtmImgDivtyle.imageUrl"
          />
        </div>
        <div v-else :style="styleData.atmImgDivtyle">
          <img
            :style="styleData.atmImgtyle"
            :src="styleData.atmImgDivtyle.imageUrl"
          />
        </div>
      </div>
      <!-- 是否显示个人信息 -->
      <div
        v-if="isShowUserMess && !isHelpShare"
        :style="styleData.userMessStyle"
      >
        <img :style="styleData.userImgStyle" :src="userImg" />
        <span>{{ nickName }}</span>
      </div>

      <div
        v-if="isShowUserMess && isHelpShare"
        :style="styleData.helpUserMessStyle"
      >
        <img :style="styleData.helpUserImgStyle" :src="userImg" />
      </div>

      <div v-if="isShowSuspendIcon" class="suspendIconStyle" :style="styleData.suspendIconStyle">
        <img @click="suspendIconClick" :style="styleData.suspendIconImage" :src='activityImageUrl' />
      </div>


      <div :key="timer">
        <component
          ref="dataRef"
          v-for="(value, key, index) in componentsData"
          :key="index"
          :is="key"
          :isTemplate="isTemplate"
          :styleData="value.styleData"
          :datas="value.datas"
          :keyData="value.keyData"
        ></component>
      </div>
    </div>
  </div>
</template>

<script>
import shopName from "../../basisComponent/shopName/shopNameVersion2.vue";
import signPrizeVersion2 from "../../basisComponent/signPrize/signPrizeVersion2.vue";

import Vue from "vue";
import dataJson from "../../../../src/data.json";
import dateUtil from "../../../util/dateUtil.js";
import apis1 from "../../../util/apis1.js";
import { getUrlQueryValueByKey,goToShopPage } from "../../../util/tools.js";
import { Toast, Notify, NoticeBar } from "vant";
Vue.use(Toast, Notify);
let { initPage,getInteractiveCity,storeGoodsPoint } = apis1;
import { callShare4MiniProgram } from "../../../util/share.js";
import store from "../../../store/store";
import bus from "../../../util/bus.js";
import { toastPopComService } from "../../../util/comCreate.js";
export default {
  props: ["isTemplate", "datas", "keyData", "styleData", "templateData", "isWebClick", "modifyContent"],
  components: { shopName, signPrizeVersion2 },
  data() {
    return {
      timer: new Date().getTime(),
      componentsData: {
        shopName: {
          isShow: true,
          styleData: {},
          datas: {},
          keyData: {
            shopNameStyle: "shopNameStyle",
            shopName: "shopName",
            shopLogo: "shopLogo",
          },
        },
        signPrizeVersion2: {
          styleData: {},
          datas: {},
          keyData: {},
        },
      },
      showImg: false, //判断主图大小
      mainKvBg: "", //主图图片
      mainKvBg1: "", //主图图片1
      bargainStartTime: "",
      bargainEndTime: "",
      showNotice: false,
      isShowGoToShop: false, //是否显示进店逛逛
      isShowUserMess: false, //是否显示用户信息
      nickName: "", //昵称
      userImg: "", //头像
      isHelpShare: false, //是否是助力人进入
      isShowAtm: false, //是否显示氛围样式
      styleDataOld: {},
      isShowSuspendIcon:false,//是否显示悬浮图标
      activityImageUrl:"",//悬浮图标图片
    };
  },
  created() {
    //深拷贝重置需要
    this.styleDataOld = JSON.parse(JSON.stringify(this.styleData));
    this.isShowShopName =
      this.datas.isShowShopName == false ? this.datas.isShowShopName : true;
    this.isShowShopImage = this.datas.isShowShopImage;
    this.isShowGoToShop = this.datas.isShowGoToShop == true ? true : false;
    this.isShowUserMess = this.datas.isShowUserMess == true ? true : false;
    // this.styleData.mainKvBgStyle.imageUrl = this.datas.topicImage;
    this.mainKvBg1 = this.datas.mainKvBg1;
    this.showImg = this.datas.showImg;
    var templateId = sessionStorage.getItem("templateId");
    var actStatus = sessionStorage.getItem("actStatus");
    if (templateId == "20201228083300ljqdsl02" && actStatus !== "1") {
      this.showNotice = true;
    } else {
      this.showNotice = false;
    }
    this.nickName = store.state.nickName;
    this.userImg = store.state.userImg;
    this.isHelpShare = store.state.shareUserId ? true : false;
    this.isShowAtm = this.datas.isShowAtm == true ? true : false;
  },
  mounted() {
    this.initData();
  },
  methods: {
    //悬浮图标点击
    suspendIconClick(){
      location.href = process.env.HUDONGCHENGPATH + store.state.activityId + "?activityId=67dfd244aacb438893a73a03785a48c7" + '&ID=' + store.state.activityId + '&adsource=tg_qrCode'

    },
    //进店逛逛
    goToShop(){
      storeGoodsPoint(4)
      goToShopPage(store.state.shopId)
    },
    //点击可修改位置的方法
    styleClick(type, refName) {
      if (this.isWebClick) {
        //传值给B端
        let byValue = {
          modifyContent: this.modifyContent,
          refName: refName,
          styleData: this.styleData,
          styleDataOld: this.styleDataOld,
          c_this: this,
        };
        this.$emit("opertaionCom", type, byValue);
      }
    },
    // datasAll
    initData() {
      var datasAll = this.templateData;
      let that = this;
      if (this.isTemplate == true) {
        this.$toast("活动预览，仅供查看");
        // console.log(datasAll,'datasAll***')
        if (datasAll) {
          //有数据的模板
          var initDataAll = datasAll.activity;
          initDataAll.nowTime = new Date().getTime();
          initDataAll.startTime = 1578470494;
          initDataAll.endTime = 1613878538000;
          initDataAll.nowTime = 1611388851000;
        } else {
          //没有模板的数据
          document.title = "活动模板";
          var initDataAll = {
            actName: "活动模板",
            topicImage: "",
            startTime: 1578470494,
            endTime: 1613878538000,
            nowTime: 1611388851000,
            shopName: "XXX京东自营官方旗舰店",
          };
        }

        console.log(initDataAll, "initDataAll");
        document.title = initDataAll.actName;
        if(sessionStorage.getItem('customizedStatus') == 2) {
          this.styleData.mainKvBgStyle.imageUrl = this.styleData.mainKvBgStyle.imageUrl;
        } else {
          this.styleData.mainKvBgStyle.imageUrl = initDataAll.topicImage
            ? initDataAll.topicImage
            : this.styleData.mainKvBgStyle.imageUrl;
          // this.mainKvBg = this.datas[this.keyData.mainKvBg];
        }
        // this.styleData.mainKvBgStyle.imageUrl = initDataAll.topicImage
        //   ? initDataAll.topicImage
        //   : this.styleData.mainKvBgStyle.imageUrl;
        // 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
        ) {
          //活动正常进行
          var actStatus = 3;
          sessionStorage.setItem("actStatus", 3); //缓存活动状态
        } else {
          var actStatus = 1;
          Toast("活动尚未开始");
          sessionStorage.setItem("actStatus", 1); //缓存活动状态
        }

        let index = 0;
        for (let i in this.componentsData) {
          var keyData = this.componentsData[i].keyData;
          if (i == "countDown") {
            this.componentsData[i].datas.startTime = initDataAll.startTime;
            this.componentsData[i].datas.endTime = initDataAll.endTime;
            this.componentsData[i].datas.activityStatus = actStatus; //活动状态 1 活动未开始 2 活动已结束 3 活动正常状态
          }
          if (i == "shopName") {
            this.componentsData[i].styleData.shopNameStyle =
              this.styleData.shopNameStyle;
            this.componentsData[i].styleData.isShowShopImageStyle =
              this.styleData.isShowShopImageStyle;
            this.componentsData[i].datas.shopName = initDataAll.shopName; //活动状态 1 活动未开始 2 活动已结束 3 活动正常状态
            this.componentsData[i].datas.isShowShopName = this.isShowShopName;
            this.componentsData[i].datas.isShowShopImage = this.isShowShopImage;
            this.componentsData[i].datas.shopLogo =
              "//img10.360buyimg.com/imgzone/jfs/t1/151906/35/20303/18489/603f1fd8Eba786774/591ba218facda6d3.png";
          }
          this.$refs.dataRef[index].initData(this.componentsData[i].datas);
          index = index + 1;
        }
        this.nickName = "测试数据";
        this.userImg =
          "https://img10.360buyimg.com/imgzone/jfs/t20782/85/568972117/2758/78eafc28/5b0fd507Ne2b074cc.png";
        // 活动加载完成，通知共享活动信息
        this.publicData.$emit("activityLoaded", {
          ...initDataAll,
          actStatus: actStatus,
        });
      } else {
        //进行接口请求
        initPage((initdatas) => {
          getInteractiveCity(interactiveCityData => {
            this.isShowSuspendIcon = this.datas.isShowSuspendIcon == true ? true : false;//是否显示悬浮图标
            let interactiveCity = interactiveCityData.data;
            if (interactiveCity.openStatus == true) {
              this.isShowSuspendIcon = true;
              this.activityImageUrl = interactiveCity.activityImageUrl;
            } else {
              this.isShowSuspendIcon = false;
            }
          });
          let initDataAll = initdatas.data;
          var logo = initdatas.data.shopLogo;
          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

          callShare4MiniProgram(
            title,
            content,
            url,
            logoUrl,
            (callBack) => {
              console.log("测试分享");
            },
            isHeader,
            mpIconUrl,
            shopid,
            userpin,
            jdactivityid
          );
          console.log(logo, shopid, 111111111);
          document.title = initDataAll.actName;
          that.bargainStartTime = initDataAll.startTime;
          that.bargainEndTime = initDataAll.endTime;
          this.publicData.$emit(
            "bargainTime",
            this.bargainStartTime,
            this.bargainEndTime
          );
          bus.$emit("shopLogo", logo);
          bus.$emit("shopId", shopid);
          if(sessionStorage.getItem('customizedStatus') == 2) {
            this.styleData.mainKvBgStyle.imageUrl = this.styleData.mainKvBgStyle.imageUrl;
          } else {
            this.styleData.mainKvBgStyle.imageUrl = initDataAll.topicImage
              ? initDataAll.topicImage
              : this.styleData.mainKvBgStyle.imageUrl;
            // this.mainKvBg = this.datas[this.keyData.mainKvBg];
          }
          // this.mainKvBg = this.datas[this.keyData.mainKvBg];

          if (new Date().getTime() > initDataAll.endTime) {
            var actStatus = 2;
            sessionStorage.setItem("actStatus", 2); //缓存活动状态
            // Toast("活动已结束");
            toastPopComService.create("活动已结束", (submit) => {
              toastPopComService.close();
            });
          } else if (
            new Date().getTime() >= initDataAll.startTime &&
            new Date().getTime() <= initDataAll.endTime
          ) {
            //活动正常进行

            var actStatus = 3;
            sessionStorage.setItem("actStatus", 3); //缓存活动状态
          } else {
            var actStatus = 1;
            sessionStorage.setItem("actStatus", 1); //缓存活动状态
            // Toast("活动尚未开始");
            toastPopComService.create("活动尚未开始", (submit) => {
              toastPopComService.close();
            });

            var timeDiff =
              parseInt(initDataAll.startTime - new Date().getTime()) + "";
            if (timeDiff.length < 9) {
              var timeDiff1 = timeDiff;
            }
            if (timeDiff.length < 9 && timeDiff > 0) {
              //定时刷新判断签到时间是否结束
              var a = setInterval(() => {
                //重新请求
                location.reload();
                clearInterval(a);
              }, parseInt(timeDiff1));
            }
          }

          // sessionStorage.setItem("actStatus", actStatus); //缓存活动状态

          let index = 0;
          for (let i in this.componentsData) {
            console.log(i, "iiiiiiiiiiiiiiii");
            var keyData = this.componentsData[i].keyData;
            if (i == "shopName") {
              this.componentsData[i].styleData.shopNameStyle =
                this.styleData.shopNameStyle;
              this.componentsData[i].styleData.isShowShopImageStyle =
                this.styleData.isShowShopImageStyle;
              this.componentsData[i].datas.shopName = initDataAll.shopName;
              this.componentsData[i].datas.shopLogo = initDataAll.shopLogo;
              this.componentsData[i].datas.isShowShopName = this.isShowShopName;
              this.componentsData[i].datas.isShowShopImage =
                this.isShowShopImage;
            }
            if (i == "signPrizeVersion2") {
              this.componentsData[i].styleData = this.styleData.acRuleStyle;
              this.componentsData[i].datas = this.datas;
              this.componentsData[i].keyData = this.keyData;
            }

            // that.$refs.dataRef[index].initData(this.componentsData[i].datas);
            // index = index + 1;
          }
          this.timer = new Date().getTime();

          // 活动加载完成，通知共享活动信息
          this.publicData.$emit("activityLoaded", {
            ...initDataAll,
            actStatus: actStatus,
          });
        });
      }
    },
  },
};
</script>

<style scoped>
.notice {
  position: absolute;
  width: 100%;
  top: 0;
}
.suspendIconStyle {
  z-index: 4999;
}
</style>
