<template>
  <div v-if="show" id="popup">
    <basicbackground :styleData="styleData" @closeClick="closeClick">
      <img :src="prizeResultData.datas[keyData.prizeUrl]" />
      <div v-if="grantType == 1" id="bottom-content">
         <div style="width: 100%; height: 2.2rem; overflow-y: scroll;margin-bottom:0.1rem">
           <p class="p1">恭喜您获得:</p>
           <p class="p2Class" v-if="prizeResultData.datas[keyData.prizeType] != 10">
            {{ prizeResultData.datas[keyData.prizeName] }}
          </p>
          <p class="p2Class" :style="styleData.p2" v-else>
            {{ prizeResultData.datas[keyData.prizeName]
            }}{{ prizeResultData.datas.miane }}
          </p>
          <div class="p3" style="text-align: left;" v-if="prizeResultData.datas[keyData.prizeType] == 3">
              <div>1)实物奖品系统不能自动发放，请<span style="color: #ff0000" v-if="needAddress == '1'">填写邮寄地址。也可在我的奖品中填写地址</span><span style="color: #ff0000" v-else>联系商家客服领取</span></div>
              <div>2）若超过活动规定时间仍未填写实物地址，将视为放弃奖品</div>
              <div>3)填写后实物奖品将在确认收货{{prizeResultData.confirmDay}}天后发放，若存在退货等行为，将取消获奖资格</div>
          </div>
          <div class="p3" style="text-align: left;" v-else>
            <div>你已获得领奖资格！奖品将在您确认收货{{prizeResultData.confirmDay}}天后，自动发放，您可在我的奖品中查看，若有退货等行为将无法获得奖品哦！</div>
          </div>
         </div>
         <div class="btnDivAll" :class="[isShowShare ? '' : 'resetbtnDivAll']">
            <button class="btnLeftClass" :style="styleData.btnLeft" v-lz-click="'2'" v-if="isShowShare" @click="shareClick()">
            立即分享
          </button>
          <button class="btnRight12Class" v-lz-click="'23'" :style="styleData.btnRight"
            v-if="prizeResultData.datas[keyData.prizeType] == 3 && needAddress == '1'" @click="buttonClick(prizeResultData.datas)">
            填写地址
          </button>
         <button class="btnRight12Class" v-lz-click="'4'" :style="styleData.btnRight" v-else @click="buttonClick(prizeResultData.datas)">
            进店逛逛
          </button>
         </div>
      </div>
      <div id="bottom-content" v-else>
        <div style="width: 100%; height: 2.2rem; overflow-y: scroll;margin-bottom:0.1rem">
          <p class="p1">恭喜您获得:</p>
          <!-- :style="styleData.p2" -->
          <p class="p2Class" v-if="prizeResultData.datas[keyData.prizeType] != 10">
            {{ prizeResultData.datas[keyData.prizeName] }}
          </p>

          <p class="p2Class" :style="styleData.p2" v-else>
            {{ prizeResultData.datas[keyData.prizeName]
            }}{{ prizeResultData.datas.miane }}
          </p>

          <div class="zhuanxiang" v-if="prizeResultData.datas[keyData.prizeType] == 5">
            <span class="spePrizeJdDiv">京东价:￥{{
                jsonData.skuInfos && jsonData.skuInfos[0].jingDongPrice
              }}</span>
            <span class="spePrizeZxDiv">专享价:￥{{
                jsonData.skuInfos && jsonData.skuInfos[0].promoPrice
              }}</span>
          </div>

          <p class="p5" v-if="prizeResultData.datas[keyData.prizeType] == 5">
            <span v-if="jsonData.perMinNum != 0">最少购买{{ jsonData.perMinNum }}件,</span>
            <span v-if="jsonData.perMaxNum != 0">最多购买{{ jsonData.perMaxNum }}件,</span>
            <span v-if="jsonData.perMaxNum != 0 || jsonData.perMinNum != 0">才享受优惠</span>
          </p>

          <p class="p5" v-if="prizeResultData.datas[keyData.prizeType] == 5">
            仅中奖人可享受优惠,仅可使用一次
          </p>

          <p class="p5" v-if="prizeResultData.datas[keyData.prizeType] == 2">
            已发放到您的账户
            <span :style="styleData.span">京东-我的-我的钱包-优惠券</span>
            中查看
          </p>

          <p class="p3" v-if="prizeResultData.datas[keyData.prizeType] == 1">
            京豆已放到您的账户中
            <span :style="styleData.span">京东-我的-京豆</span>
            中查看
          </p>
         <p class="p3" v-if="prizeResultData.datas[keyData.prizeType] == 4">
            积分已发放到您的账户中
            <span :style="styleData.span">店铺会员页</span>
            中查看
          </p>
          <p class="p3" v-if="prizeResultData.datas[keyData.prizeType] == 6">
            红包已发放到您的账户中
            <span :style="styleData.span">京东-我的-我的钱包-红包</span>
            中查看
          </p>
          <p class="p3" v-if="prizeResultData.datas[keyData.prizeType] == 7">
            礼品卡需手动兑换，请根据
            <span :style="styleData.span">兑换指引</span>
            前往兑换
          </p>
          <p class="p3" v-if="prizeResultData.datas[keyData.prizeType] == 8">
            京东E卡已发放到您的账户中
            <span :style="styleData.span">京东-我的-我的钱包-礼品卡</span>
            中查看
          </p>
          <p class="p4" v-if="prizeResultData.datas[keyData.prizeType] == 3">
            <span v-if="grantType == 1">
              <div>1)实物奖品系统不能自动发放，请<span style="color: #ff0000" v-if="needAddress == '1'">填写邮寄地址。也可在我的奖品中填写地址</span><span style="color: #ff0000" v-else>联系商家客服领取</span></div>
              <div>2）若超过活动规定时间仍未填写实物地址，将视为放弃奖品</div>
              <div>3)填写后实物奖品将在确认收货{{prizeResultData.confirmDay}}天后发放，若存在退货等行为，将取消获奖资格</div>
            </span>
            <span v-else>
              <span v-if="openDeliveryStatus" class="deliveryDateDiv2">发货时间:{{deliveryTime}}</span>
            <span>实物奖品系统不能自动发放，请<span style="color: #ff0000" v-if="needAddress == '1'">填写邮寄地址。也可在我的奖品中填写地址</span><span style="color: #ff0000" v-else>联系商家客服领取</span></span>
            </span>
          </p>
          <p class="p3" v-if="prizeResultData.datas.probationPrize">指定时间内回购指定正装，确认收货后，有机会额外领取回购礼</p>
          <p class="p12Class" :style="styleData.p12"  v-if="prizeResultData.datas[keyData.prizeType] == 12">
            1：权益非自动发放，需首先填写权益领取信息；</br>
            2：如放弃领取权益，活动结束权益不予补发
          </p>

        </div>
        <div class="btnDivAll" :class="[isShowShare ? '' : 'resetbtnDivAll']">
          <button class="btnLeftClass" :style="styleData.btnLeft" v-lz-click="'2'" v-if="isShowShare" @click="shareClick()">
            立即分享
          </button>

          <button class="btnRight12Class" v-if="
              prizeResultData.datas[keyData.prizeType] == 9 ||
              prizeResultData.datas[keyData.prizeType] == 10
            " @click="exchangeClick(prizeResultData.datas)">
            立即兑换
          </button>
          <button class="btnRight12Class" :style="styleData.btnRight12" v-if="
              prizeResultData.datas[keyData.prizeType] == 12
            " @click="getPrizeClick(prizeResultData.datas)">
            立即领取
          </button>

          <button class="btnRight12Class" :style="styleData.btnRight12" v-else-if="
              prizeResultData.datas[keyData.prizeType] == 2 && templateId == '202510043jdkjfxyldz01'
            " @click="toCouponBuy()">
            立即使用
          </button>

          <button class="btnRight12Class" v-lz-click="'23'" :style="styleData.btnRight"
            v-else-if="prizeResultData.datas[keyData.prizeType] == 3 && needAddress == '1'" @click="buttonClick(prizeResultData.datas)">
            填写地址
          </button>

          <button class="btnRight12Class" v-lz-click="'9'" v-else-if="prizeResultData.datas[keyData.prizeType] == 5"
            @click="buyGood(prizeResultData.datas)">
            立即购买
          </button>

          <button class="btnRight12Class" v-else-if="prizeResultData.datas[keyData.prizeType] == 7" @click="exchange()">
            如何兑换
          </button>

         <button class="btnRight12Class" v-lz-click="'4'" :style="styleData.btnRight" v-else @click="buttonClick(prizeResultData.datas)">
            进店逛逛
          </button>
        </div>
      </div>
    </basicbackground>
  </div>
</template>
<script>
import basicbackground from "./hdzxtbasicbackground.vue";
import {
  GiftPopComService,
} from "../../../util/comCreate.js";
import apis1 from "../../../util/apis1.js";
import store from "../../../store/store";
import {fillInInformationData,AddressPopComService} from '../../../util/hdzxtcomCreate.js';

import {
  goToShopPage,
  exchangePrize,
  newToSkuPage,
} from "../../../util/tools.js";
import { prizeShare } from "../../../js/share.js";
let { myprize,storeGoodsPoint,getDeliveryInfo } = apis1;
export default {
  components: { basicbackground },
  name: "acquirecoupon",
  components: {
    basicbackground,
  },
  data() {
    return {
      // timer:new Dtae().getTime(),
      p1text: "恭喜您获得:",
      check: "立即查看",
      p3text: "京豆已放到您的账户中，",
      p4text: "京东-我的-京豆",
      p5text: "中查看",
      p6text: "实物奖品需填写收货地址方可领取",
      show1: false,
      show2: false,
      keyData: {},
      jsonData: {}, //专享价的数据
      cardDate: {},
      isShowShare:true,
      needAddress: '',
      //面额
      mianeArray: [
        {
          name: 2,
          value: "1",
        },
        {
          name: 3,
          value: "5",
        },
        {
          name: 4,
          value: "20",
        },
        {
          name: 5,
          value: "50",
        },
        {
          name: 6,
          value: "100",
        },
        {
          name: 7,
          value: "年卡",
        },
        {
          name: 8,
          value: "月卡",
        },
        {
          name: 12,
          value: "季卡",
        },
        {
          name: 13,
          value: "半年卡",
        },
        {
          name: 14,
          value: "年卡",
        },
      ],
      openDeliveryStatus:false, // 是否开启发货时间设置
      deliveryTime:"", // 实物发货时间范围
      grantType:null,
      templateId:null,
    };
  },
  props: [],
  created() {
    this.templateId = sessionStorage.getItem('templateId');
    this.needAddress = sessionStorage.getItem('needAddress');
    let activityType = sessionStorage.getItem('activityType');
    if(activityType != '10076'){
      this.getDrawRuleData();
    }
  },

  mounted() {
    console.log(JSON.stringify(this.prizeResultData),'aaaaaaaaaaaaaaa')
    this.grantType = this.prizeResultData.grantType 
    this.initMethod();
    this.keyData = this.prizeResultData.keyData;
    // console.log(this.prizeResultData, "****prizeResultData******");
    // console.log(this.initDatas, "initDatas");
    // console.log(this.styleData, "styleData");
    if (this.initDatas.itemId) {
      for (var i = 0; i < this.mianeArray.length; i++) {
        // console.log(this.initDatas.itemId,'1111111111')
        if (this.initDatas.itemId == this.mianeArray[i].name) {
          // console.log(this.mianeArray[i].value,'2222222222')
          this.prizeResultData.datas.miane = this.mianeArray[i].value;
        }
      }
    }

    // console.log(this.initDatas.prizeJson);
    if (this.initDatas.prizeJson) {
      let jsonData = JSON.parse(this.initDatas.prizeJson);
      this.jsonData = jsonData;
      // console.log(this.jsonData, "jkjkjkjk");
    }

    switch (this.prizeResultData[this.keyData.prizeType]) {
      case "1":
        this.show1 = true;
        this.show2 = false;
        break;
      case "2":
        this.show1 = false;
        this.show2 = false;
        break;
      case "4":
        this.show1 = false;
        this.show2 = false;
        break;
      case "3":
        this.show2 = true;
        this.show1 = false;
        this.check = "填写邮寄地址";
        break;
    }
    // this.timer = new Date().getTime();
    if(sessionStorage.getItem('shopId')=='1000435043') {
      this.isShowShare = false
    }
    this.doFrontBuryPoint({code: this.prizeTypeCheckPonit(this.prizeResultData.datas[this.keyData.prizeType]),value: '',event: 'click'})
  },

  methods: {
    toCouponBuy(){
      console.log(this.initDatas.couponId,"this.initDatas.couponId");
      const couponIdStr = this.initDatas.couponId.toString();
      jmfe.toCouponBuy(couponIdStr)
    },
    // 获取实物发货时间
    getDrawRuleData(){
      getDeliveryInfo((getDrawRuleData) => {
        console.log(getDrawRuleData,'获取实物发货时间');
        this.openDeliveryStatus = getDrawRuleData.data.openDeliveryStatus;
        this.deliveryTime = getDrawRuleData.data.deliveryTime;
      });
    },
    initMethod() {
      myprize((prizedata) => {
        if (!prizedata.data[0].logisticsJson) {
        } else {
          this.cardDate = JSON.parse(prizedata.data[0].logisticsJson);
        }

        console.log(prizedata, "prizedata");
        console.log(this.cardDate);
        // sessionStorage.setItem("addressId", prizedata.data[0].addressId);
        // sessionStorage.setItem("prizeGrantId", prizedata.data[0].prizeGrantId);
      });
    },
    //立即分享
    shareClick() {
      console.log("立即分享");
      prizeShare(false, this, (callBackData) => {
        console.log(callBackData, "callBackData");
      });
    },
    buttonClick(prizeResultData) {
      console.log(111111);
      document.querySelector("body").removeAttribute("style");
      // console.log(this.initDatas[this.keyData.couponType]);
      // console.log(this.initDatas[this.keyData.discountType]);
      // console.log(this.keyData);
      if (prizeResultData[this.keyData.prizeType] == 3 && this.needAddress == '1') {
        //填写地址
        console.log(this.initDatas, "填写地址222");
        sessionStorage.setItem("addressId", this.initDatas.draw ? this.initDatas.draw.addressId : this.initDatas.addressId);
        sessionStorage.setItem("prizeGrantId", this.initDatas.draw ? this.initDatas.draw.id : this.initDatas.id);
        var datas = {
          isEditAddress: true,
          isAlLookAddress: false,
          grantType:this.grantType,
          prizeInfoId:this.initDatas.prizeInfoId
        };
        this.doFrontBuryPoint({code: 'tc-txdz',value: '',event: 'pop'})
        AddressPopComService.create(datas,this.styleData, (submit) => {
          AddressPopComService.close();
        });
        this.submit('link');
      } else {
        //查看
        let shopId = store.state.shopId;
        goToShopPage(shopId);
        // this.submit();
      }
    },
    //立即兑换plus会员卡，爱奇艺会员卡
    exchangeClick(prizeResultData) {
      console.log("立即兑换");
      exchangePrize();
    },

    //搜狐会员立即领取
    getPrizeClick(prizeResultData){
      console.log("立即领取-------");
       fillInInformationData.create(this.initDatas,this.styleData,submit => {
          fillInInformationData.close();
          if (submit) {
            itemDta.logisticsJson = JSON.stringify(submit);
          }
        });
        this.submit('link');
    },

    //立即购买商品
    buyGood(prizeResultData) {
      storeGoodsPoint(5)
      newToSkuPage(this.jsonData.skuInfos[0]);
    },

    //礼品卡如何兑换
    exchange() {
      this.initMethod();
      this.submit('link');
      document.querySelector("body").removeAttribute("style");
      // this.cardDate
      GiftPopComService.create(this.jsonData, (submit) => {
        GiftPopComService.close();
      });
    },

    closeClick() {
      document.querySelector("body").removeAttribute("style");
      this.submit();
    },
  },
};
</script>
<style scoped lang="scss">
#popup {
  z-index: 23;

  .p2Class{
    display: block;
    color:#ff3333;
    font-size: 0.36rem;
    font-weight: bold;
    // margin: 0.1rem 0 0 0;
    // margin-bottom: 0.1rem;
    text-align: center;
  }
  .p12Class{
    display: block;
    color:#8c8c8c;
    font-size: 0.22rem;
    margin: 0.27rem 0 0.3rem;
  }
  .btnLeftClass{
    width: 2.4rem;
    height: 0.9rem;
    line-height: 0.9rem;
    text-align: center;
    background: linear-gradient(to right,#f2270c,#ff6320);
    color: white;
    font-size: 0.3rem;
    border-radius: 0.1rem;
  }
  .btnRight12Class{
    width: 2.4rem;
    height: 0.9rem;
    line-height: 0.9rem;
    text-align: center;
    background:#ff9900;
    color: white;
    font-size: 0.3rem;
    border-radius: 0.1rem;
  }

  .spePrizeJdDiv {
    font-size: 0.24rem;
    color: #333333;
    display: block;
    margin-right: 0.15rem;
  }
  .spePrizeZxDiv {
    display: block;
    margin-left: 0.15rem;
    font-size: 0.24rem;
  }
  .p6 {
    font-size: 0.24rem;
  }
  .juan {
    width: 3.26rem;
    height: 1.89rem;
    /* background: red; */
    position: absolute;
    left: calc(50% - 3.26rem / 2);
    top: 3.4rem;
    background-image: url(//img10.360buyimg.com/imgzone/jfs/t1/162912/35/4657/17557/6012aefaEc773ad23/111383aa46e6c97e.png);
    background-size: 100%;
  }
  #couponType {
    background-color: #e2231a;
    color: #fbc768;
    width: 0.7rem;
    line-height: 0.34rem;
    font-size: 0.2rem;
    text-align: center;
    margin-top: 0.1rem;
    margin-left: -0.1rem;
    border-radius: 0.3rem 0.2rem 0.7rem;
  }
  .zhe {
    width: 3.26rem;
    height: 1.89rem;
    position: absolute;
    left: calc(50% - 3.26rem / 2);
    top: 3.4rem;
    background-image: url(//img10.360buyimg.com/imgzone/jfs/t1/154057/16/16657/8096/6018f3eaEef9ca0d0/19be3fdc679555b2.png);
    background-size: 100%;
  }
  img {
    height: 2rem;
    width: 2rem;
    margin: 1rem auto 0;
    display: block;
    /* background: red; */
  }
  .juanPrice {
    color: #ff9900;
    font-size: 0.53rem;
    /* background: red; */
    position: absolute;
    left: 0.9rem;
    top: 0.38rem;
  }
  span {
    color: #f2270c;
  }
  #bottom-content {
    width: 5.6rem;
    height: 3.5rem;
    background-color: white;
    border-radius: 0.2rem;
    margin: 0.2rem auto 0;
    padding: 0.2rem 0.3rem 0.25rem 0.3rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow-y: scroll;
  }
  #bottom-content .p1 {
    display: block;
    color: #262626;
    font-size: 0.24rem;
    font-weight: 500;
  }
  #bottom-content .p3 {
    font-size: 0.2rem;
    color: #b8b8b8;
    display: block;
    // margin: 0 0.24rem;
    text-align: center;
  }
  #bottom-content .p4 {
    font-size: 0.2rem;
    color: gray;
    display: flex;
    margin-top: 0.1rem;
    flex-direction: column;
    .deliveryDateDiv2{
      font-size: 0.2rem;
      color:#333333;
    }
  }
  #bottom-content .p5 {
    font-size: 0.2rem;
    color: #b8b8b8;
    display: block;
    margin: 0 0.24rem;
    text-align: center;
  }
  #bottom-content button {
    width: 2.4rem;
    height: 0.9rem;
    line-height: 0.9rem;
    text-align: center;
    // background-color: #ff9900;
    color: white;
    font-size: 0.3rem;
    border-radius: 0.1rem;
  }
  #bottom-content .fenxiang {
    width: 2.4rem;
    height: 0.9rem;
    line-height: 0.9rem;
    text-align: center;
    background: linear-gradient(90deg, #f2270c 0%, #ff6420 100%) !important;
    color: white;
    font-size: 0.3rem;
    border-radius: 0.1rem;
  }

  .btnDivAll {
    display: flex;
    width: 100%;
    justify-content: space-between;
  }
  .resetbtnDivAll{
    display: flex !important;
    width: 100% !important;
    justify-content: center !important;
  }
  .zhuanxiang {
    width: 100%;
    text-align: center;
    display: flex;
    justify-content: center;
  }
}
</style>
