<template>
  <div v-if="show" id="popup">
    <basicbackground :styleData="styleData" @closeClick="closeClick">
      <div class="top-content">
        <div>恭喜您获得</div>
        <div class="p2Class" :style="styleData.p2" v-if="prizeResultData.datas[keyData.prizeType] != 10">
          {{ prizeResultData.datas[keyData.prizeName] }}
        </div>

        <div class="p2Class" :style="styleData.p2" v-else>
          {{ prizeResultData.datas[keyData.prizeName]
            }}{{ prizeResultData.datas.miane }}
        </div>
      </div>
      <img :src="prizeResultData.datas[keyData.prizeUrl]" />
      <p class="p4" v-if="prizeResultData.datas[keyData.prizeType] == 3 && needAddress == '0'">
            实物奖品系统不能自动发放，请<span style="color: #ff0000">联系商家客服领取</span>
      </p>
      <div id="bottom-content">
        <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" v-if="
              prizeResultData.datas[keyData.prizeType] == 12
            " @click="getPrizeClick(prizeResultData.datas)">
            立即领取
          </button>

          <button class="btnRight12Class" v-lz-click="'23'" 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'" v-else @click="buttonClick(prizeResultData.datas)">
            进店逛逛
          </button>
        </div>
      </div>
    </basicbackground>
  </div>
</template>
<script>
import basicbackground from "./hdzxtbasicbackground10015FlyDBP.vue";
import {
  GiftPopComService,
} from "../../../util/comCreate.js";
import apis1 from "../../../util/apis1.js";
import store from "../../../store/store";
import { fillInInformationData, AddressPopComService705 } from '../../../util/hdzxtcomCreate.js';

import {
  goToShopPage,
  exchangePrize,
  newToSkuPage,
} from "../../../util/tools.js";
import { prizeShare } from "../../../js/share.js";
let { myprize, storeGoodsPoint } = 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: "年卡",
        },
      ],
    };
  },
  props: [],
  created() {
    this.needAddress = sessionStorage.getItem('needAddress');
   },

  mounted() {
    this.initMethod();
    console.log(JSON.stringify(this.prizeResultData), 'aaaaaaaaaaaaaaa')

    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(prizeResultData.datas[keyData.prizeType]),value: '',event: 'click'})
  },

  methods: {
    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(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,
        };
        AddressPopComService705.create(datas, this.styleData, (submit) => {
          AddressPopComService705.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");
      GiftPopComService.create(this.cardDate, (submit) => {
        GiftPopComService.close();
      });
    },

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

  .p2Class {
    display: block;
    color: #f7d9bb;
    font-size: 0.36rem;
    text-align: center;
  }
  .p12Class {
    display: block;
    color: #8c8c8c;
    font-size: 0.22rem;
    margin: 0.27rem 0 0.3rem;
  }
  .btnLeftClass {
    width: 1.88rem;
    height: 0.51rem;
    color: #111010;
    font-size: 0.31rem;
    background-image: url("//img10.360buyimg.com/imgzone/jfs/t1/157506/40/40673/924/652f7358Fa086e3c1/e464b9891a6ef13d.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 0.15rem;
  }
  .btnRight12Class {
    width: 1.88rem;
    height: 0.51rem;
    color: #543708;
    font-size: 0.31rem;
    background-image: url("//img10.360buyimg.com/imgzone/jfs/t1/173326/2/40737/2164/652f7211Fe7604b58/e5eb7fa26e4b1e83.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 0.15rem;
  }
  .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 auto;
    display: block;
  }
  .juanPrice {
    color: #ff9900;
    font-size: 0.53rem;
    /* background: red; */
    position: absolute;
    left: 0.9rem;
    top: 0.38rem;
  }
  #bottom-content {
    width: 5.6rem;
    height: 0.51rem;
    margin: 0.3rem auto 0;
    padding: 0 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: block;
    margin-top: 0.5rem;
  }
  #bottom-content .p5 {
    font-size: 0.2rem;
    color: #b8b8b8;
    display: block;
    margin: 0 0.24rem;
    text-align: center;
  }
  span {
    color: #f2270c;
  }
  .btnDivAll {
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
  }
  .resetbtnDivAll {
    display: flex !important;
    width: 100% !important;
    justify-content: center !important;
  }
  .zhuanxiang {
    width: 100%;
    text-align: center;
    display: flex;
    justify-content: center;
  }
}
.top-content {
  color: #f7d9bb;
  font-size: 0.48rem;
  text-align: center;
}
</style>
