<template>
  <div>
    <div class="topDiv">
      <img :style="styleData.mainKvBgStyle" :src="mainKvBg" />
      <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="isShowSuspendIcon" class="suspendIconStyle" :style="styleData.suspendIconStyle"><img @click="suspendIconClick " :style="styleData.suspendIconImage" :src="activityImageUrl" /></div>
      <component
        ref="dataRef"
        v-for="(value, key, index) in componentsData"
        v-if="key == 'shopName'"
        :key="index"
        :is="key"
        :isTemplate="isTemplate"
        :styleData="value.styleData"
        :datas="value.datas"
        :keyData="value.keyData"
      ></component>
    </div>
  </div>
</template>

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

import Vue from 'vue';
import apis1 from '../../../util/apis1.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 { toastPopComService } from '../../../util/comCreate.js';
export default {
  props: ['isTemplate', 'datas', 'keyData', 'styleData', 'templateData'],
  components: { shopName },
  data() {
    return {
      componentsData: {
        shopName: {
          isShow: true,
          styleData: {},
          datas: {},
          keyData: {
            shopNameStyle: 'shopNameStyle',
            shopName: 'shopName',
            shopLogo: 'shopLogo'
          }
        }
      },
      showImg: false, //判断主图大小
      mainKvBg: '//img10.360buyimg.com/imgzone/jfs/t1/45810/27/3353/63166/5d109844Ef9ca3af6/8e7a9709762a3d43.png', //主图图片
      mainKvBg1: '//img10.360buyimg.com/imgzone/jfs/t1/45810/27/3353/63166/5d109844Ef9ca3af6/8e7a9709762a3d43.png', //主图图片1
      bargainStartTime: '',
      bargainEndTime: '',
      showNotice: false,
      isShowSuspendIcon: false, //是否显示悬浮图标
      activityImageUrl: '' //悬浮图标图片
    };
  },
  created() {
    this.isShowShopName = this.datas.isShowShopName == false ? this.datas.isShowShopName : true;
    this.isShowShopImage = this.datas.isShowShopImage;
    this.isShowSuspendIcon = this.datas.isShowSuspendIcon == true ? true : false; //是否显示悬浮图标

    // this.mainKvBg = this.datas.topicImage;
    // this.mainKvBg1 = this.datas.mainKvBg1;
    this.showImg = this.datas.showImg;
    var templateId = sessionStorage.getItem('templateId');
    var actStatus = sessionStorage.getItem('actStatus');
    console.log(templateId);
    if (templateId == '20201228083300ljqdsl02' && actStatus !== '1') {
      this.showNotice = true;
    } else {
      this.showNotice = false;
    }
  },
  mounted() {
    this.initData();
  },
  methods: {
    // datasAll
    //悬浮图标点击
    suspendIconClick(){
       location.href = process.env.HUDONGCHENGPATH + store.state.activityId + "?activityId=67dfd244aacb438893a73a03785a48c7" + '&ID=' + store.state.activityId + '&adsource=tg_qrCode'
       
    },
    initData() {
      var datasAll = this.templateData;

      // this.componentsData.countDown.styleData = this.styleData.countDownStyle;
      // this.componentsData.countDown.keyData = Object.assign(this.componentsData.countDown.keyData, this.keyData);

      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 = 1578470494;
          initDataAll.endTime = 1613878538000;
          initDataAll.nowTime = 1611388851000;
        } else {
          //没有模板的数据
          this.isShowSuspendIcon = false;
          document.title = '活动模板';
          var initDataAll = {
            actName: '活动模板',
            topicImage: '',
            startTime: 1578470494,
            endTime: 1613878538000,
            nowTime: 1611388851000,
            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) {
          //活动正常进行
          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.publicData.$emit('activityLoaded', { ...initDataAll, actStatus: actStatus });
      } else {
        //进行接口请求
        initPage(initdatas => {
          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 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
          );

          document.title = initDataAll.actName;

          that.bargainStartTime = initDataAll.startTime;
          that.bargainEndTime = initDataAll.endTime;
          this.publicData.$emit('bargainTime', this.bargainStartTime, this.bargainEndTime);
          // this.mainKvBg = initDataAll.topicImage ? initDataAll.topicImage : this.datas.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) {
            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;
              this.componentsData[i].datas.shopLogo = initDataAll.shopLogo;
              this.componentsData[i].datas.isShowShopName = this.isShowShopName;
              this.componentsData[i].datas.isShowShopImage = this.isShowShopImage;
            }

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

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

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