<template>
  <div v-if="show">
    <div class="deliverDiv">
      <div class="basicPopDiv">
        <div class="close-btn" @click="closeClick"></div>
        <div class="contentBox">
          <!-- <div class="msg1">恭喜您！</div> -->
          <div class="msg2">在{{deliverInfo.dayTime}}</div>
          <div class="msg3">获得奖品
            <span>{{deliverInfo.prizeName}}</span></div>
            <div class="msg4" v-if="deliverInfo.logisticsState == 0">
              当前奖品还未发货，请耐心等待
              <div class="msg5">
                (奖品发货后，请回到本活动查看快递单号)
              </div>
            </div>
            <div class="msg4" v-if="deliverInfo.logisticsState == 1 || deliverInfo.logisticsState == 9">
              您的奖品已发货啦
              <div class="msg6">
                快递单号：{{delivery.deliverName}} {{delivery.deliverNo}}
                <!-- <span @click="copyFun">复制</span> -->
                <span v-clipboard:copy="delivery.deliverNo"
          v-clipboard:success="copyFun"
          v-clipboard:error="onError">复制</span>
              </div>
            </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Vue from 'vue';
import {Toast } from 'vant';
Vue.use(Toast);
export default {
  data() {
    return {
      deliverInfo:{},
      delivery:{}
    };
  },
  created(){
    // console.log(this.data, 'this.data');
    this.deliverInfo = this.data
    // this.deliverInfo.logisticsJson = JSON.parse(this.deliverInfo.logisticsJson)
    this.delivery = JSON.parse(this.deliverInfo.logisticsJson);
    console.log(this.delivery,"this.delivery")
  },
  methods: {
    onError(){
      console.log("复制卡号失败～")
      this.$toast('复制卡号失败～');
    },
    copyFun(){
      console.log("复制卡号成功～")
      this.$toast('复制卡号成功～');
      // navigator.clipboard.writeText(this.delivery.deliverNo)
      //     .then(() => {
      //       this.$toast('复制快递单号成功～');
      //     })
      //     .catch(err => {
      //     });
    },
    closeClick() {
      this.submit();
    },
    //点击空白处关闭弹框
    // clickEmpty() {
    //   console.log('asasasasas')
    //   this.submit();
    // },
  },
};
</script>
<style lang="scss" scoped>
.deliverDiv {
  position: fixed;
  width: 100%;
  height: 100%;
  background: rgba($color: #000000, $alpha: 0.7);
  top: 0;
  bottom: 0;
  z-index: 202;

  .basicPopDiv {
    position: absolute;
    width: 6.43rem;
    height: 5rem;
    background-image: url("//img10.360buyimg.com/imgzone/jfs/t1/19190/37/22487/17844/66bc0b34F3f5df6ef/e074e9393be8b321.png");
    background-size: 100% 100%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    // padding: .2rem;
    font-size: .16rem;
    .close-btn {
      position: absolute;
      width: 0.45rem;
      height: 0.45rem;
      background: url("//img10.360buyimg.com/imgzone/jfs/t1/183690/31/37249/1097/64e2d8dcFb8273014/2bd869caeaf31168.png")
        no-repeat;
      background-size: 100% 100%;
      bottom: -0.8rem;
      left: 50%;
      transform: translateX(-50%);
    }
    .contentBox{
      width: 5.83rem;
      height: 3.25rem;
      background: #fff;
      border-radius: .3rem;
      padding-top: .25rem;
      margin: 0 auto;
      margin-top: 1.5rem;
      .msg2{
         width: 100%;
        text-align: center;
        font-size: .3rem;
        // font-weight: bold;
        // margin-top: .2rem;
      }
      .msg3{
         width: 100%;
        text-align: center;
        font-size: .3rem;
        margin-top: .2rem;
        span{
          color: red;
          font-size: .34rem;
        }
      }
      .msg4{
         width: 100%;
        text-align: center;
        font-size: .3rem;
        margin-top: .8rem;
      }
      .msg5{
         width: 100%;
        text-align: center;
        font-size: .22rem;
        margin-top: .15rem;
        color: #409EFF;
      }
      .msg6{
        font-size: .22rem;
        margin-top: .15rem;
        span{
          margin-left: 5px;
          color: #409EFF;
        }
      }
    }
  }
}
</style>
