<template>
  <div v-if="show" id="popup">
    <basicbackground :styleData="styleData" @closeClick="closeClick">
      <div class="titleDiv" :style="styleData.titleDiv">组队成功</div>
      <img :style="styleData.prizeimg" :src="datas.prizeImg" />

      <div id="bottom-content">
        <div style="width: 100%; height: 2rem; overflow-y: scroll">
          <p class="p1">组队完成，恭喜您获得：</p>
          <p class="p2Class" :style="styleData.p2">{{ datas.prizeName }}</p>

          <p class="p5">
            已发放到您的账户
            <span :style="styleData.span">京东-我的-我的钱包-优惠券</span>
            中查看
          </p>
        </div>
        <div class="btnDivAll"><button class="btnLeftClass" :style="styleData.btnLeft" @click="goUseClick()">去使用</button></div>
      </div>
    </basicbackground>
  </div>
</template>
<script>
import basicbackground from './hdzxtbasicbackground.vue';

import apis1 from '../../../util/apis1.js';
import store from '../../../store/store';

import {goUseCoupon} from '../../../util/tools.js';

let { myprize } = 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,
     };
  },
  props: [],
  created() {},

  mounted() {
    this.show1 = false;
    this.show2 = false;
  },

  methods: {
    //去使用
    goUseClick() {
      goUseCoupon();
    },
    closeClick() {
      document.querySelector('body').removeAttribute('style');
      this.submit();
    }
  }
};
</script>
<style scoped lang="scss">
#popup {
  z-index: 23;
  .titleDiv {
    font-size: 0.4rem;
    left: 0.4rem;
    color: #ffffff;
    text-align: center;
    margin-top: 0.36rem;
  }
  .p2Class {
    display: block;
    color: #ff3333;
    font-size: 0.36rem;
    font-weight: bold;
    margin: 0.27rem 0 0.3rem;
    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;
  }
  #bottom-content {
    width: 5.6rem;
    height: 3.5rem;
    background-color: white;
    border-radius: 0.2rem;
    margin: 0.2rem auto 0;
    padding: 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;
  }
  #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>
