<template>
  <div
    class="van-popup-read van-popup-read-bottom"
    style="
      background: rgba(0, 0, 0, 0.7);
      z-index: 2008;
      height: 100vh;
      display: -webkit-box;
      -webkit-box-pack: center;
      -webkit-box-align: center;
    "
    v-if="isShow"
    @click="clickEmpty()"
  >
    <div class="van-popup-read van-popup-read-center" @click="stopClickEmpty" style="background: transparent; z-index: 2008">
      <div class="prize-bg">
        <div style="padding-top: 0.6rem">
          <div
            style="
              font-size: 0.48rem;
              color: rgb(255, 51, 51);
              text-align: center;
            "
          >
            {{ message }}
          </div>
          <div
            style="
              font-size: 0.36rem;
              color: rgb(255, 51, 51);
              text-align: center;
              margin: 0.1rem auto 0px;
              width: 4.2rem;
            "
          >
            {{ messageInfo }}
          </div>
          <img
            :src="img_path"
            alt=""
            style="
              width: 2.6rem;
              height: 2.6rem;
              display: block;
              margin: 0px auto;
            "
          />
          <div style="font-size: 0.36rem; color: rgb(102, 102, 102); text-align: center; margin: 0.2rem auto 0px; width: 4.2rem;" v-show="thank">谢谢参与</div>
          <div
            style="
              font-size: 0.22rem;
              color: rgb(102, 102, 102);
              text-align: center;
              width: 95%;
              margin: 0.2rem auto 0px;
            "
          >
            <div v-show="!thank">
              已放到您的账户中，可在
              <span style="color: rgb(252, 60, 44)">个人中心</span>
              中查看
            </div>
            <div v-show="thank">{{ prizeInfo }}</div>
          </div>
          <div class="common-btn" v-lz-click="'4'" @click="toShop()">进店逛逛</div>
        </div>
      </div>
      <div class="close-prizeDialog-btn" @click="close()"></div>
    </div>
  </div>
</template>
<script>
import api1 from '../../../util/apis1.js'
let {storeGoodsPoint} = api1
import store from '../../../store/store';
import { goToShopPage } from '../../../util/tools.js';
export default {
  name: 'gradeDialog',
  data() {
    return {
      isShow: true, //组件是否显示
      thank: false,
      grade: 0,
      img_path: '',
      message: '',
      messageInfo: '',
      prizeInfo: '',
      acRulePopComData: {
        styleData: {},
        datas: {},
        keyData: {}
      }
    };
  },
  created() {
    this.initData();
  },
  methods: {
    initData() {
      if (this.data.isDraw == false) {
        this.img_path = 'https://img10.360buyimg.com/imgzone/jfs/t1/61441/16/16477/12556/5dde6780Eb18aa6ad/e45e59abdfbc8b6e.png';
        this.prizeInfo = '中奖不是最终的追求，重要的是开心咯';
        this.thank = true;
      } else {
        this.message = '恭喜你获得';
        this.prizeInfo = this.data.prizeName;
        this.messageInfo = this.data.prizeName;
        this.img_path = this.data.showImg;
      }
    },
    close() {
      this.isShow = false;
      this.submit();
    },
    //点击空白处关闭弹框
    clickEmpty() {
      this.isShow = false;
      this.submit();
    },
    //阻止冒泡
    stopClickEmpty(event) {
      event.stopPropagation();
    },
    toShop() {
      let shopId = store.state.shopId;
      storeGoodsPoint(4)
      goToShopPage(shopId);
    }
  }
};
</script>
<style scoped>
.van-popup-read {
  position: fixed;
  max-height: 100%;
  overflow-y: auto;
  background-color: rgb(211, 31, 70);
  -webkit-transition: -webkit-transform 0.3s;
  transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  transition: transform 0.3s, -webkit-transform 0.3s;
  -webkit-overflow-scrolling: touch;
  /* pointer-events: none; */
}
.van-popup-read-bottom {
  bottom: 0;
  left: 0;
  width: 100%;
}
.van-popup-read-center {
  top: 50%;
  left: 50%;
  -webkit-transform: translate3d(-50%, -50%, 0);
  transform: translate3d(-50%, -50%, 0);
  /* pointer-events: none; */
}
.prize-bg {
  background: url(https://img10.360buyimg.com/imgzone/jfs/t1/99707/8/3245/11055/5dde64a9Ef4661137/89626937979de3e5.png) no-repeat;
  background-size: 100%;
  width: 5.5rem;
  height: 5.8rem;
  position: relative;
}
.prize-bg .common-btn {
  width: 4rem;
  height: 1rem;
  background: #fd4215;
  border-radius: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0.36rem;
  color: #fff;
  position: absolute;
  bottom: -0.5rem;
  left: 50%;
  transform: translateX(-50%);
}
.close-prizeDialog-btn {
  background: url(https://img10.360buyimg.com/imgzone/jfs/t1/49543/21/16850/1595/5ddd2064E43cbdd22/cc16b630ad69506b.png) no-repeat;
  background-size: 100%;
  width: 0.8rem;
  height: 0.8rem;
  margin: 0.8rem auto 0;
  /* pointer-events: none; */
}
.close-btn {
  width: 0.45rem;
  height: 0.45rem;
  position: absolute;
  right: 1rem;
  top: 3.2rem;
}
</style>
