<template>
  <div class="shopGiftBasicMessageDivAllC">
    <!-- {{templateId}}----{{giftType}} -->
    <div v-if="giftType == '1'">
      <tem566a v-if="templateId == '7498bc9d-0be3-480d-ae9d-59b8a074566a'" :styleData="styleData" :giftBagData="giftBagData" @btnClickEmit="btnClickEmit"></tem566a>
      <tem566b v-if="templateId == '7498bc9d-0be3-480d-ae9d-59b8a074566b'" :styleData="styleData" :giftBagData="giftBagData" @btnClickEmit="btnClickEmit"></tem566b>
      <tem566c v-if="templateId == '7498bc9d-0be3-480d-ae9d-59b8a074566c'" :styleData="styleData" :giftBagData="giftBagData" @btnClickEmit="btnClickEmit"></tem566c>
      <tem676f v-if="templateId == 'b2107433-4965-412c-9eb5-99a78a9c676f'" :styleData="styleData" :giftBagData="giftBagData" @btnClickEmit="btnClickEmit"></tem676f>
    </div>

    <div v-else-if="giftType == '3'">
      <tem577a v-if="templateId == '7498bc9d-0be3-480d-ae9d-59b8a074577a'" :styleData="styleData" :giftBagData="giftBagData" @btnClickEmit="btnClickEmit"></tem577a>
    </div>

    <div v-else-if="giftType == '4'">
      <tem599a v-if="templateId == '7498bc9d-0be3-480d-ae9d-59b8a074599a'" :styleData="styleData" :giftBagData="giftBagData" @btnClickEmit="btnClickEmit"></tem599a>
      <tem599b v-if="templateId == '7498bc9d-0be3-480d-ae9d-59b8a074599b'" :styleData="styleData" :giftBagData="giftBagData" @btnClickEmit="btnClickEmit"></tem599b>
      <tem7121 v-if="templateId == '3bdc29c9-60d7-4938-9db8-0ea149027121'" :styleData="styleData" :giftBagData="giftBagData" @btnClickEmit="btnClickEmit"></tem7121>
    </div>

    <div v-else-if="giftType == '2'">
      <temOpenCard
        v-if="dynamicEffect"
        :styleData="styleData"
        :giftBagData="giftBagData"
        :dynamicEffect="dynamicEffect"
        :isMember="isMember"
        @btnClickEmit="btnClickEmit"
      ></temOpenCard>
    </div>

    <div v-else><BICustomTem v-if="biGift" :styleData="styleData" :biGift="biGift" :isMember="isMember" @btnClickEmit="btnClickEmit"></BICustomTem></div>
  </div>
</template>

<script>
import { jumpGetCoupon, closeGiftPop } from '../../../util/shopGiftBag.js';
import api1 from '../../../util/apis1.js';
let { getTemplate, shopGiftMain, drawShopGift } = api1;

import store from '../../../store/store.js';
import tem566a from './temPlateDiv/tem566a.vue';
import tem566b from './temPlateDiv/tem566b.vue';
import tem566c from './temPlateDiv/tem566c.vue';
import tem676f from './temPlateDiv/tem676f.vue';

import tem577a from './temPlateDiv/tem577a.vue';
import temOpenCard from './temPlateDiv/openCardTem.vue';
import tem599a from './temPlateDiv/tem599a.vue';
import tem599b from './temPlateDiv/tem599b.vue';
import tem7121 from './temPlateDiv/tem7121_4.vue';
import BICustomTem from './temPlateDiv/BICustomTem.vue';

export default {
  props: ['isTemplate', 'datas', 'keyData', 'styleData', 'templateData', 'isWebClick', 'modifyContent'],
  components: {
    tem566a,
    tem566b,
    tem566c,
    tem676f,
    temOpenCard,
    tem577a,
    tem599a,
    tem599b,
    tem7121,
    BICustomTem
  },
  data() {
    return {
      isMember: 1, //是否是会员
      templateId: '',
      giftType: '', //礼包类型
      temData: {
        templateBg: '',
        topicImage: ''
      }, //模板数据
      prizeTypeArr: [
        {
          prizeType: '1',
          name: '京豆'
        },
        {
          prizeType: '101',
          name: '京券'
        },
        {
          prizeType: '102',
          name: '东券'
        },
        {
          prizeType: '4',
          name: '积分'
        }
      ],
      giftBagData: {
        gifyBagType: '1',
        prizeData: [],
        exposedGoods: []
      },

      dynamicEffect: null,
      biGift: null //千人千面数据
    };
  },
  created() {
    this.initData();
  },
  methods: {
     initData() {
      this.giftType = sessionStorage.getItem('giftType');
      this.isGiftTrue = sessionStorage.getItem('isGiftTrue');
      if (this.giftType == '1' || this.giftType == '2' || this.giftType == '3' || this.giftType == '4') {
        getTemplate(templatData => {
          let templatData1 = templatData.data;
          var datasAll = this.templateData;
          //如果有模板信息
          if (templatData1.basicJson) {
            let basicJson = JSON.parse(templatData1.basicJson);

            this.temData.templateBg = basicJson.noOpenImagePath;
            this.temData.topicImage = basicJson.noOpenImagePath;

            this.temData.cardTemplateBg = basicJson.openImagePath;
            this.temData.cardTopicImage = basicJson.openImagePath;

            this.temData.isSetOpen = basicJson.isSetOpen;
            this.temData.enterAnimateName = basicJson.enterAnimateName;
            this.temData.outAnimateName = basicJson.outAnimateName;
            this.temData.noOpenVipUrl = basicJson.noOpenVipUrl;
            this.temData.openVipUrl = basicJson.openVipUrl;

            this.temData.animateName = this.temData.enterAnimateName;

            // templatData1.topicWidth = 589;
            // templatData1.topicHeight = 681;

            // templatData1.topicWidth = 630;
            // templatData1.topicHeight = 900;

            templatData1.topicWidth = 650;
            templatData1.topicHeight = 1000;

            this.styleData.uiModalBody['width'] = templatData1.topicWidth / 100 + 'rem';
            this.styleData.uiModalBody['height'] = templatData1.topicHeight / 100 + 'rem';

            this.styleData.uiModalBody['left'] = `calc(50% - ${templatData1.topicWidth / 100 / 2}rem)`;

            this.styleData.uiModalBody['background-image'] = `url(${this.temData.topicImage})`;

            this.styleData.uiModalBody['top'] = `calc(50% - ${templatData1.topicHeight / 100 / 2}rem)`;

            this.dynamicEffect = this.temData;
            console.log(this.dynamicEffect, '111111111111');
          } else {

            this.temData.templateBg = templatData1.templateBg;
            this.temData.topicImage = templatData1.topicImage;
            this.styleData.uiModalBody['background-image'] = `url(${this.temData.topicImage})`;
            this.styleData.uiModalBody['width'] = templatData1.topicWidth / 100 + 'rem';
            this.styleData.uiModalBody['height'] = templatData1.topicHeight / 100 + 'rem';

            this.styleData.uiModalBody['left'] = `calc(50% - ${templatData1.topicWidth / 100 / 2}rem)`;
            this.styleData.uiModalBody['top'] = `calc(50% - ${templatData1.topicHeight / 100 / 2}rem)`;

            // this.styleData.uiModalBody['left'] = "50%";
            // this.styleData.uiModalBody['top'] = "50%";

            // this.styleData.uiModalBody['marginTop'] = "50%";
            // this.styleData.uiModalBody['top'] = "50%";

          }
          //奖品信息
          if (templatData1.templateJson) {
            var templateJson1 = JSON.parse(templatData1.templateJson);
            var mostSupportPrizeCount = templateJson1.data.prizeConfig.mostSupportPrizeCount;
            this.giftBagData.mostSupportPrizeCount = mostSupportPrizeCount;

            if (templateJson1.data.goodConfig && templateJson1.data.goodConfig.addSkuNum) {
              //加购礼包
              var addSkuNum = templateJson1.data.goodConfig.addSkuNum;
            }
          } else {
            this.giftBagData.mostSupportPrizeCount = 0;
          }
          this.templateId = sessionStorage.getItem('templateId');
          this.giftType = sessionStorage.getItem('giftType');

          this.styleDataNew = this.styleData;
          console.log(this.styleData.uiModalBody, 'this.uiModalBody');
          this.$forceUpdate();
          if (this.isTemplate) {
            if (this.templateData) {
              console.log(this.templateData, '预览数据');
              let shopGift = this.templateData.shopGift;
              if (shopGift.draw && shopGift.draw.prizeList && shopGift.draw.prizeList.length > 0) {
                for (var j = 0; j < shopGift.draw.prizeList.length; j++) {
                  for (var i = 0; i < this.prizeTypeArr.length; i++) {
                    if (this.prizeTypeArr[i].prizeType == shopGift.draw.prizeList[j].prizeType) {
                      shopGift.draw.prizeList[j].prizeTypeName = this.prizeTypeArr[i].name;
                    }
                  }
                }
                this.giftBagData.prizeData = shopGift.draw.prizeList;
              }
            } else {
              //没有真实数据
              console.log('奖品数量');
              for (var m = 0; m < addSkuNum; m++) {
                var obj = {
                  skuImg: 'https://img10.360buyimg.com/n1/jfs/t1/111877/7/13696/149040/5f227effE4515386e/6b3c7c925c6c54cf.jpg',
                  skuName: '演示商品1',
                  skuPrice: '9.9',
                  skuId: '20972513544'
                };
                obj.name = obj.name + m;
                obj.price = parseFloat(obj.price) - m;
                this.giftBagData.exposedGoods = this.giftBagData.exposedGoods.concat(obj);
              }
              for (var j = 0; j < this.giftBagData.mostSupportPrizeCount; j++) {
                var obj = {
                  prizeType: '',
                  beanNum: '',
                  prizeTypeName: '',
                  priceInfo: ''
                };
                let randomNum = parseInt(Math.random() * 4); //Math.ceil(Math.random()*10); //parseInt(Math.random()*1+1,4);
                let beanNum = parseInt(Math.random() * 100);
                let priceInfo = parseInt(Math.random() * 100);
                obj.prizeType = this.prizeTypeArr[randomNum].prizeType;
                obj.beanNum = beanNum;
                obj.priceInfo = priceInfo;

                this.giftBagData.prizeData = this.giftBagData.prizeData.concat(obj);
                for (var i = 0; i < this.prizeTypeArr.length; i++) {
                  if (this.prizeTypeArr[i].prizeType == this.giftBagData.prizeData[j].prizeType) {
                    obj.prizeTypeName = this.prizeTypeArr[i].name;
                  }
                }
                this.giftBagData.prizeData[j] = obj;
              }
              console.log(this.giftBagData, '奖品数据');
            }
          } else {
            //创建礼包成功
            shopGiftMain(shopGiftMain => {
              console.log(shopGiftMain, '真实数据shopGiftMain');
              let shopGiftDataAll = shopGiftMain.data;
              // memberUser  1是会员  0不是会员
              this.isMember = shopGiftDataAll.memberUser; // 是否已经是会员
              this.getPrizeData = {
                flag: shopGiftDataAll.flag,
                memberUser: shopGiftDataAll.memberUser,
                name: shopGiftDataAll.name,
                visitor: shopGiftDataAll.visitor,
                position:shopGiftDataAll.position
              };
              console.log(this.getPrizeData, 'this.getPrizeData');
              let giftType = shopGiftDataAll.shopGiftRule.giftType;
              sessionStorage.setItem('giftType', giftType);
              this.giftType = giftType;
              if (shopGiftDataAll.prizeInfoList && shopGiftDataAll.prizeInfoList.length > 0) {
                for (var j = 0; j < shopGiftDataAll.prizeInfoList.length; j++) {
                  for (var i = 0; i < this.prizeTypeArr.length; i++) {
                    if (this.prizeTypeArr[i].prizeType == shopGiftDataAll.prizeInfoList[j].prizeType) {
                      shopGiftDataAll.prizeInfoList[j].prizeTypeName = this.prizeTypeArr[i].name;
                    }
                  }
                }
                this.giftBagData.prizeData = shopGiftDataAll.prizeInfoList;
              }
              if (shopGiftDataAll.skuInfos && shopGiftDataAll.skuInfos.length > 0) {
                this.giftBagData.exposedGoods = shopGiftDataAll.skuInfos;
                // skuInfos
              }
              console.log(this.giftBagData, '真实数据');
            });
          }
        });
      } else {
        //千人千面没有预览
        if (!this.isTemplate) {
          shopGiftMain(shopGiftMain => {
            this.biGift = shopGiftMain.data.biGift;
            this.getPrizeData = {
              flag: shopGiftMain.data.flag,
              memberUser: shopGiftMain.data.memberUser,
              name: shopGiftMain.data.name,
              visitor: shopGiftMain.data.visitor,
              position:shopGiftMain.data.position,
            };
            // console.log(this.getPrizeData,'this.getPrizeData')
            console.log(this.biGift, '千人千面主接口1111111');
            this.$forceUpdate();
          });
        } else {
          let imageMessage = JSON.parse(sessionStorage.getItem('imageMessage'));
          console.log(imageMessage, 'imageMessage');
          this.biGift = {
            imgWidth: imageMessage.imgWidth,
            imgHigh: imageMessage.imgHigh,
            showImg: imageMessage.showImg
          };
        }
      }
    },

    btnClickEmit(data) {
      this.isGiftTrue = sessionStorage.getItem('isGiftTrue');
      console.log(this.isGiftTrue, '点击收下礼包');
      if (this.isTemplate) {
        // this.$toast('收下礼包成功');
        this.$toast('仅供预览');
        // closeGiftPop(this, () => {});
      } else {
        if (this.isGiftTrue == 'true' || this.isGiftTrue == true) {
          if (this.giftType == '2') {
            if (!this.temData.isSetOpen) {
              if (this.isMember == 1) {
                //是会员但是没有设置会员样式则不跳转直接关闭
                drawShopGift(this.getPrizeData, drawData => {
                  this.$toast('收下礼包成功');
                });
                // 关弹窗
                // 如果有链接 跳转链接
                closeGiftPop(this, () => {});
              } else {
                //不是会员且没有设置会员样式则打开非会员开卡样式
                // 如果有链接 跳转链接
                closeGiftPop(this, () => {});
                if (this.temData.noOpenVipUrl) {
                  jumpGetCoupon(this.temData.noOpenVipUrl, () => {});
                }
              }
            } else {
              //设置会员开卡样式
              if (this.isMember == 1) {
                //是会员但是没有设置会员样式则不跳转直接关闭
                drawShopGift(this.getPrizeData, drawData => {
                  this.$toast('收下礼包成功');
                });
                // 关弹窗
                // 如果有链接 跳转链接
                closeGiftPop(this, () => {});
                if (this.temData.openVipUrl) {
                  jumpGetCoupon(this.temData.openVipUrl, () => {});
                }
              } else {
                //不是会员且没有设置会员样式则打开非会员开卡样式
                // 如果有链接 跳转链接
                closeGiftPop(this, () => {});
                if (this.temData.noOpenVipUrl) {
                  jumpGetCoupon(this.temData.noOpenVipUrl, () => {});
                }
              }
            }
          } else if (this.giftType == '5') {
            drawShopGift(this.getPrizeData, drawData => {
              this.$toast('收下礼包成功');
            });
            closeGiftPop(this, () => {});
            if (this.biGift.url) {
              jumpGetCoupon(this.biGift.url, () => {});
            }
          } else {
            drawShopGift(this.getPrizeData, drawData => {
              // this.$toast('收下礼包成功');
            });
            closeGiftPop(this, () => {});
            //现在没有链接不跳转
          }
        }
        else {
          console.log('不进行任何操作');
          this.$toast('仅供预览');
        }
      }
    }
  }
};
</script>

<style lang="scss" scoped="scoped">
.shopGiftBasicMessageDivAllC {
  .ui-modal-body {
  }
}
</style>
