<template>
  <div ref="basicMainNew" @click="styleClick('click', 'basicMainNew')" @mousemove="styleClick('mousemove', 'basicMainNew')" @mouseout="styleClick('mouseout')">
    <div :style="styleDataNew.mainKvBgStyle">
      <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"
        :modifyContent="modifyContent"
      ></component>
    </div>
  </div>
</template>

<script>
import shopName from '../../basisComponent/shopName/shopName.vue';
import sigPrizeNew from '../../basisComponent/signPrize/sigPrizeNew.vue';

import Vue from 'vue';
import styleJson from './basicMain.json';
import dataJson from '../../../../src/data.json';
import dateUtil from '../../../util/dateUtil.js';
import apis1 from '../../../util/apis1.js';
import { getUrlQueryValueByKey } from '../../../util/tools.js';
import { Toast, Notify, NoticeBar } from 'vant';
Vue.use(Toast, Notify);
let { initPage, getInteractiveCity } = 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, sigPrizeNew },
  data() {
    return {
      timer: new Date().getTime(),
      componentsData: {
        shopName: {
          isShow: true,
          styleData: {},
          datas: {},
          keyData: {
            shopNameStyle: 'shopNameStyle',
            shopDivClassStyle: 'shopDivClassStyle',
            shopName: 'shopName',
            shopLogo: 'shopLogo'
          }
        },
        sigPrizeNew: {
          styleData: {},
          datas: {
            isSign: true,
            isPrize: true
          },
          keyData: {
            signIcon: 'signIcon',
            prizeIcon: 'prizeIcon',
            signPrizeDiv: 'signPrizeDiv',
            imageSignStyle: 'imageSignStyle',
            imagePrizeStyle: 'imagePrizeStyle',
            shareFriendStyle: 'shareFriendStyle'
          }
        }
      },
      showImg: false, //判断主图大小
      mainKvBg: '', //主图图片
      mainKvBg1: '', //主图图片1
      topDivClass: false,
      bargainStartTime: '',
      bargainEndTime: '',
      showNotice: false,
      styleDataNew: {},
      isShowSuspendIcon: false, //是否显示悬浮图标
      activityImageUrl: '', //悬浮图标图片
      styleDataOld: {}
    };
  },
  created() {
    //深拷贝重置需要
    this.styleDataOld = JSON.parse(JSON.stringify(this.styleData));
    //如果父组件传递过来的样式数据则使用样式数据否则使用默认数据
    this.styleDataNew = this.styleData; //父组件传递过来的样式数据

    this.isShowShopName = this.datas.isShowShopName == false ? this.datas.isShowShopName : true;
    this.topDivClass = this.datas.topDivClass;
    this.isShowShopImage = this.datas.isShowShopImage;
    this.showImg = this.datas.showImg;
    var templateId = sessionStorage.getItem('templateId');
    var actStatus = sessionStorage.getItem('actStatus');
    this.isShowSuspendIcon = this.datas.isShowSuspendIcon == true ? true : false; //是否显示悬浮图标
    console.log(templateId);
    if (templateId == '20201228083300ljqdsl02' && actStatus !== '1') {
      this.showNotice = true;
    } else {
      this.showNotice = false;
    }
  },
  mounted() {
    this.initData();
    console.log(this.datas, '2222222222');
  },
  methods: {
    //悬浮图标点击
    suspendIconClick() {
      // HUDONGCHENGPATH:"'https://lzkj-yc.isvjcloud.com/wxAssemblePage/activity/67dfd244aacb438893a73a03785a48c7?activityId=67dfd244aacb438893a73a03785a48c7&adsource=tg_qrCode'"

      location.href =
        process.env.HUDONGCHENGPATH + store.state.activityId + '?activityId=67dfd244aacb438893a73a03785a48c7' + '&ID=' + store.state.activityId + '&adsource=tg_qrCode';
    },
    //点击可修改位置的方法
    styleClick(type, refName) {
      if (this.isWebClick) {
        //传值给B端
        let byValue = {
          modifyContent: this.modifyContent,
          refName: refName,
          styleData: this.styleDataNew,
          c_this: this,
          styleDataOld: this.styleDataOld
        };
        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) {
          //有数据的模板
          this.isShowSuspendIcon = false;
          var initDataAll = datasAll.activity;
          initDataAll.nowTime = new Date().getTime();
          initDataAll.startTime = new Date().getTime() - 3600 * 24 * 1000;
          initDataAll.endTime = new Date().getTime() + 3600 * 24 * 1000;
          // initDataAll.nowTime = 1611388851000;
        } else {
          this.isShowSuspendIcon = false;
          //没有模板的数据
          document.title = '活动模板';
          var initDataAll = {
            actName: '活动模板',
            topicImage: '',
            startTime: new Date().getTime(),
            endTime: new Date().getTime() + 3600 * 24 * 1000,
            nowTime: new Date().getTime() - 3600 * 24 * 1000,
            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; //砍价结束时间
        if (sessionStorage.getItem('customizedStatus') == 2) {
          this.styleData.mainKvBgStyle.backgroundImage = this.styleData.mainKvBgStyle.backgroundImage;
        } else {
          this.styleData.mainKvBgStyle.backgroundImage = initDataAll.topicImage ? 'url(' + initDataAll.topicImage + ')' : this.styleData.mainKvBgStyle.backgroundImage;
          // this.mainKvBg = this.datas[this.keyData.mainKvBg];
        }
        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.styleDataNew.shopNameStyle;
            this.componentsData[i].styleData.shopDivClassStyle = this.styleDataNew.shopDivClassStyle;
            this.componentsData[i].styleData.isShowShopImageStyle = this.styleDataNew.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';
            bus.$emit('shopLogo', this.componentsData[i].datas.shopLogo);
          }
          if (i == 'sigPrizeNew') {
            this.componentsData[i].styleData.signPrizeDiv = this.styleDataNew.signPrizeDiv;
            this.componentsData[i].styleData.imageSignStyle = this.styleDataNew.imageSignStyle;
            this.componentsData[i].styleData.imagePrizeStyle = this.styleDataNew.imagePrizeStyle;

            this.componentsData[i].styleData.shareFriendStyle = this.styleDataNew.shareFriendStyle;
            this.componentsData[i].styleData.imageShopStyle = this.styleDataNew.imageShopStyle;
            this.componentsData[i].datas = this.datas;
          }
          this.$refs.dataRef[index].initData(this.componentsData[i].datas);
          index = index + 1;
        }
        // 活动加载完成，通知共享活动信息
        this.publicData.$emit('activityLoaded', {
          ...initDataAll,
          actStatus: actStatus
        });
        // this.timer = new Date().getTime();
        this.$forceUpdate();
      } else {
        //进行接口请求
        initPage(initdatas => {
          console.log(initdatas, 2222222222);
          // 互动城icon
          // getInteractiveCity((interactiveCityData) => {
          //   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);
          bus.$emit('initdata', initdatas);
          bus.$emit('shopName', initDataAll.shopName);
          // this.mainKvBg = initDataAll.topicImage
          //   ? initDataAll.topicImage
          //   : this.datas.mainKvBg;
          console.log(sessionStorage.getItem('customizedStatus'), 111111111111);
          if (sessionStorage.getItem('customizedStatus') == 2) {
            this.styleData.mainKvBgStyle.backgroundImage = this.styleData.mainKvBgStyle.backgroundImage;
          } else {
            this.styleData.mainKvBgStyle.backgroundImage = initDataAll.topicImage ? 'url(' + initDataAll.topicImage + ')' : this.styleData.mainKvBgStyle.backgroundImage;
            // 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) {
            var keyData = this.componentsData[i].keyData;
            if (i == 'shopName') {
              this.componentsData[i].styleData.shopNameStyle = this.styleDataNew.shopNameStyle;
              this.componentsData[i].styleData.shopDivClassStyle = this.styleDataNew.shopDivClassStyle;
              this.componentsData[i].styleData.isShowShopImageStyle = this.styleDataNew.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 == 'sigPrizeNew') {
              this.componentsData[i].styleData.signPrizeDiv = this.styleDataNew.signPrizeDiv;
              this.componentsData[i].styleData.imageSignStyle = this.styleDataNew.imageSignStyle;
              this.componentsData[i].styleData.imagePrizeStyle = this.styleDataNew.imagePrizeStyle;

              this.componentsData[i].styleData.shareFriendStyle = this.styleDataNew.shareFriendStyle;
              this.componentsData[i].styleData.imageShopStyle = this.styleDataNew.imageShopStyle;
              this.componentsData[i].datas = this.datas;
            }

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

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

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