<template>
<div v-if="show">
    <basicbackground @closeClick="closeClick">
    <div id="bottom-content">
        <p class="p5">大连泊源科技有限公司测试店铺</p>
        <img :src="prizeResultData.datas[keyData.prizeUrl]" />
        <p class="p1">恭喜您获得:</p>
        <p class="p2">{{ prizeResultData.datas[keyData.prizeName] }}</p>
        <p class="p3" v-if="prizeResultData.datas[keyData.prizeType] == 1">
          京豆已放到您的账户中
          <span>京东-我的-京豆</span>
          中查看
        </p>
        <p class="p4" v-if="prizeResultData.datas[keyData.prizeType] == 3">实物奖品系统不能自动发货，请<span>填写邮寄地址</span></p>
        <button v-lz-click="'23'" @click="buttonClick(prizeResultData.datas)">{{ prizeResultData.datas[keyData.prizeType] == 3 ? '填写邮寄地址' : '立即查看' }}</button>
      </div>
    </basicbackground>
  </div>
</template>
<script>
import basicbackground from './basicbackground.vue';
import { AddressPopComService } from '../../../util/comCreate.js';
export default {
  components: { basicbackground },
  name: 'acquirecoupon',
  components: {
    basicbackground
  },
  data() {
    return {
      check: '立即查看',
      show1: false,
      show2: false,
      keyData: {}
    };
  },
  props: [],
  created() {},

  mounted() {
    this.keyData = this.prizeResultData.keyData;
    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;
    }
  },

  methods: {
    buttonClick(prizeResultData) {
       document.querySelector('body').removeAttribute('style')
      // console.log(prizeResultData);
      // console.log(this.initDatas);
      // console.log(this.keyData.prizeType);
      // console.log(this.initDatas,'this.initDatas')
      if (prizeResultData[this.keyData.prizeType] == 3) {
        //填写地址
        console.log(this.initDatas,'填写地址');
        sessionStorage.setItem('addressId', this.initDatas.addressId);
        sessionStorage.setItem('prizeGrantId', this.initDatas.id);
        AddressPopComService.create(submit => {
          AddressPopComService.close();
        });
        this.submit();
      }
    },
    closeClick() {
      document.querySelector('body').removeAttribute('style')
      this.submit();
    }
  }
};
</script>
<style scoped>
img {
  height: 2.93rem;
  width: 2.38rem;
  /* position: fixed; */
  /* top: 3.5rem; */
  /* margin: auto;
  left: 0;
  right: 0; */
}
#bottom-content {
  height: 6.3rem;
  width: 5.63rem;
  background-color: white;
  border-radius: 0.2rem;
  position: fixed;
  margin: auto;
  left: 0;
  right: 0;
  top: 3.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}
#bottom-content .p1 {
  display: block;
  color: #ff9900;
  font-size: 0.26rem;
  margin-top: 0.1rem;
}
#bottom-content .p2 {
  display: block;
  /* line-height: 0rem; */
  color: #e2231a;
  font-size: 0.53rem;
  font-weight: bolder;
}
#bottom-content .p3 {
  font-size: 0.2rem;
  color: #b8b8b8;
  display: block;
}
#bottom-content .p4 {
  font-size: 0.05rem;
  color: gray;
  display: block;
  /* margin-top: 0.5rem; */
}
#bottom-content .p5{
  font-size: 0.1rem;
  color: #ff9900;
}
#bottom-content button {
  margin: 0 auto;
  margin-top: 0.3rem;
  width: 4.85rem;
  height: 0.93rem;
  background-color: #e2231a;
  color: white;
  font-size: 0.4rem;
  border-radius: 0.1rem;
  border: 1px solid red;
}
span {
  color: red;
}
</style>
