<template>
  <div v-if="show" id="popup">
    <basicbackground @closeClick="closeClick">
      <img :src="prizeResultData.datas[keyData.prizeUrl]" />

      <div id="bottom-content">
        <div
          style="
            width: 100%;
            height: 2rem;
            overflow-y: scroll;
          "
        >
          <p class="p1">恭喜您获得:</p>
          <p class="p2" v-if="prizeResultData.datas[keyData.prizeType] != 10">
            {{ prizeResultData.datas[keyData.prizeName] }}
          </p>
          <p class="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>京东-我的-我的钱包-优惠券</span>
            中查看
          </p>

          <p class="p3" v-if="prizeResultData.datas[keyData.prizeType] == 1">
            京豆已放到您的账户中
            <span>京东-我的-京豆</span>
            中查看
          </p>
          <p class="p3" v-if="prizeResultData.datas[keyData.prizeType] == 4">
            积分已发放到您的账户中
            <span>店铺会员页</span>
            中查看
          </p>
          <p class="p3" v-if="prizeResultData.datas[keyData.prizeType] == 6">
            红包已发放到您的账户中
            <span>京东-我的-我的钱包-红包</span>
            中查看
          </p>
          <p class="p3" v-if="prizeResultData.datas[keyData.prizeType] == 7">
            礼品卡需手动兑换，请根据
            <span>兑换指引</span>
            前往兑换
          </p>
          <p class="p3" v-if="prizeResultData.datas[keyData.prizeType] == 8">
            京东E卡已发放到您的账户中
            <span>京东-我的-我的钱包-礼品卡</span>
            中查看
          </p>
          <p class="p4" v-if="prizeResultData.datas[keyData.prizeType] == 3">
            <span v-if="openDeliveryStatus" class="deliveryDateDiv5">实物发货时间:{{deliveryTime}}</span>

            <span style="color: gray">实物奖品系统不能自动发放，请<span style="color: #ff0000" v-if="needAddress == '1'">填写邮寄地址</span><span style="color: #ff0000" v-else>联系商家客服领取</span></span>
          </p>
        </div>
        <div class="btnDivAll">
          <button class="fenxiang" v-lz-click="'2'" @click="shareClick()">立即分享</button>

          <button
            v-if="
              prizeResultData.datas[keyData.prizeType] == 9 ||
              prizeResultData.datas[keyData.prizeType] == 10
            "
            @click="exchangeClick(prizeResultData.datas)"
          >
            立即兑换
          </button>

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

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

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

          <button
            v-lz-click="'4'"
            v-else
            @click="buttonClick(prizeResultData.datas)"
          >
            进店逛逛
          </button>
        </div>
      </div>
    </basicbackground>
  </div>
</template>
<script>
import basicbackground from "./basicbackground.vue";
import {
  AddressPopComService,
  GiftPopComService,
} from "../../../util/comCreate.js";
import apis1 from '../../../util/apis1.js';
import store from "../../../store/store";
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:{},
      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:"", // 实物发货开始时间
    };
  },
  props: [],
  created() {
    this.needAddress = sessionStorage.getItem('needAddress');
     this.getDrawRuleData();
  },

  mounted() {

    this.initMethod()
    this.keyData = this.prizeResultData.keyData;
    console.log(this.prizeResultData, "****prizeResultData******");
    console.log(this.initDatas,'initDatas')
    console.log(this.prizeResultData[this.keyData.prizeUrl],'sssssssssssssssssssssssssss');
    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();
  },

  methods: {
    // 获取实物发货时间
    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) {
      document.querySelector("body").removeAttribute("style");
      // console.log(prizeResultData);
      // 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.addressId);
        sessionStorage.setItem('prizeGrantId', this.initDatas.id);
        var datas = {
          isEditAddress: true,
          isAlLookAddress: false,
        };
        AddressPopComService.create(datas, (submit) => {
          AddressPopComService.close();
        });
        this.submit();
      } else {
        //查看
        let shopId = store.state.shopId;
        goToShopPage(shopId);
        this.submit();
      }
    },
    //立即兑换plus会员卡，爱奇艺会员卡
    exchangeClick(prizeResultData) {
      console.log("立即兑换");
      exchangePrize();
    },

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

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

    closeClick() {
      document.querySelector("body").removeAttribute("style");
      this.submit();
    },
  },
};
</script>
<style scoped lang="scss">
#popup {
  z-index: 23;
  .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;
  }
  #bottom-content {
    width: 5.6rem;
    height: 3.5rem;
    background-color: white;
    border-radius: 0.2rem;
    margin: 0.2rem auto 0;
    padding: 0.3rem 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 .p2 {
    display: block;
    /* line-height: 0rem; */
    color: #f2270c;
    font-size: 0.36rem;
    font-weight: bold;
    margin: 0.1rem 0 0.1rem;
    text-align: center;
  }
  #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: block;
    margin-top: 0.1rem;
    .deliveryDateDiv5{
      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;
  }
  span {
    color: #f2270c;
  }
  .btnDivAll {
    display: flex;
    width: 100%;
    justify-content: space-between;
  }
  .zhuanxiang {
    width: 100%;
    text-align: center;
    display: flex;
    justify-content: center;
  }
}
</style>
