<template>
  <div class="details" v-if="show" @click='clickEmpty()'>
    <div class="pop" @click='stopClickEmpty'>
      <div class="box">
         <div class="kuang"><div class="img" :style="{ 'background-image': 'url(' + jsonData.prizePicture + ')' }"></div></div>
        <div class="cardName">{{ jsonData.cardName }}</div>
        <div class="kaName">
          <span>卡号:</span>
          <div class="number">
            <div ref="textToCopy" class="test">{{ jsonData.cardNumber }}</div>
          </div>
        </div>
        <div class="copyMsg"  v-clipboard:copy="jsonData.cardNumber"
          v-clipboard:success="copyFun"
          v-clipboard:error="onError">复制</div>

        <div class="kaName1" v-if="this.jsonData.cardType == 1">
          <span>卡密:</span>
          <div class="number">
            <div class="test">{{ jsonData.cardPassword }}</div>
          </div>
        </div>

        <div class="instructions">
          <div class="span">礼品卡说明:</div>
          <div class="span">
            1、有效期：
            <span v-if="validNoEndTime == 0">{{ activityDate2 }}</span>
            <span v-if="validNoEndTime == 1">永久有效</span>
          </div>

          <div class="span">2、{{ jsonData.cardDesc }}</div>
        </div>
      </div>
      <div class="closeBtn" @click="closeBtn"></div>
    </div>
  </div>
</template>

<script>
import dateUtil from '../../../util/dateUtil.js';
export default {
  data() {
    return {
      jsonData: {},
      imgUrl: '',
      start: '',
      end: '',
      activityDate2: '',
      validNoEndTime: 0
    };
  },

  created() {
    console.log('jinlailelelel', this.jsonData);
    this.imgUrl = 'https://img10.360buyimg.com/n1/' + this.jsonData.prizePicture;
    this.validNoEndTime = this.jsonData.validNoEndTime;
    this.activityDate2 = dateUtil.dateChangeYYYY(new Date(this.jsonData.startTime), 1) + '至' + dateUtil.dateChangeYYYY(new Date(this.jsonData.endTime), 1);

    // var data = dateUtil.dateChangeYYYY(this.jsonData.startTime, 1);
    // this.start = data.year + "/" + data.month + "/" + data.day + ' ' + data.hours; ;

    //  var data1 = dateUtil.dateChangeYYYY(this.jsonData.endTime, 1);
    // this.end = data1.year + "/" + data1.month + "/" + data1.day ;
  },
  mounted() {},
  methods: {
    onError(){
      console.log("复制卡号失败～")
      this.$toast('复制卡号失败～');
    },
    copyFun(){
      console.log("复制卡号成功～")
      this.$toast('复制卡号成功～');
      // this.$copyText(this.jsonData.cardNumber).then(
	    //   e=>{
      //     this.$toast('复制卡号成功～');
	    //     console.log('复制成功：', e);
	    //   },
	    //   e=>{
	    //     console.log('复制失败：', e);
	    //   }
      // )
      //获取需要复制的文本内容。
      // const text = this.$refs.textToCopy.innerText;
      // // 创建一个临时的 textarea 元素。
      // const el = document.createElement('textarea');
      // // 将需要复制的文本内容赋值给 textarea 元素。
      // el.value = text;
      // //将 textarea 元素添加到页面中。
      // document.body.appendChild(el);
      // //选中 textarea 元素中的文本。
      // el.select();
      // // 执行复制命令，将选中的文本复制到剪贴板
      // document.execCommand('copy');
      // //从页面中移除 textarea 元素。
      // document.body.removeChild(el);
      // //弹出提示框，告知用户文本已复制成功。
      // this.$toast('复制卡号成功～');
      // navigator.clipboard.writeText(this.jsonData.cardNumber)
      //     .then(() => {
      //       this.$toast('复制卡号成功～');
      //     })
      //     .catch(err => {
      //     });
    },
    closeBtn() {
      this.submit();
    },
    //点击空白处关闭弹框
    clickEmpty(){
      this.submit();
    },
    //阻止冒泡
    stopClickEmpty(event){
      event.stopPropagation();
    },
  }
};
</script>

<style lang="scss" scoped="scoped">
.details {
  position: fixed;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  top: 0;
  z-index: 202;

  .pop {
    width: 6rem;
    height: 8.24rem;
    background-image: url(//img10.360buyimg.com/imgzone/jfs/t1/183338/23/18385/79738/61109180E22c23a60/43dc79760af42b09.png);
    background-size: 100%;
    position: absolute;
    top: calc(50% - 8.35rem / 2);
    left: calc(50% - 3rem);
    .box{
      width: 100%;
      height: 6.3rem;
      position: absolute;
      top: 1.6rem;
      overflow-y: scroll;
    }
    .kuang {
      width: 4.6rem;
      height: 1.6rem;
      // background: #ff5f00;
      // position: absolute;
      margin-left: calc(50% - 2.3rem);
      margin-top: .2rem;
      display: flex;
      justify-content: center;
      align-items: center;

      .img {
        width: 4.6rem;
        height: 1.6rem;
        background-size: 100%;
      }
    }

    .cardName {
      color: #e2231a;
      width: 100%;
      text-align: center;
      font-weight: bolder;
      margin-top: .15rem;
      font-size: 0.36rem;
    }

    .kaName {
      width: 4.6rem;
      // height: 0.48rem;
      // position: absolute;
      margin-left: calc(50% - 2.3rem);
      margin-top: .15rem;
      display:flex;
      // align-items: center;
      span {
        font-size: 0.3rem;
        display: block;
        line-height: 0.48rem;
        color: #ff9900;
        width: 1rem;
      }

      .number {
        // height: 100%;
        width: calc(100% - 1rem);
        background: #ffdb6e;
        // position: absolute;
        // right: 0;
        // top: 0;
        .test {
          width: 100%;
          // height: 100%;
          font-size: 0.3rem;
          line-height: 0.48rem;
          word-break: break-all;
          background: #ffdb6e;
          // padding-left: 0.2rem;
          // color: #ff5f00;
          // overflow: hidden;
          // text-overflow: ellipsis;
        }
      }
    }
    .copyMsg{
      font-size: .22rem;
        color: #409EFF;
        margin-right: calc(50% - 2.3rem);
      margin-top: .15rem;
      text-align: right;
    }
    .kaName1 {
      width: 4.6rem;
      // height: 0.48rem;
      margin-left: calc(50% - 2.3rem);
      margin-top: .15rem;
      display:flex;
      span {
        font-size: 0.3rem;
        display: block;
        line-height: 0.48rem;
        color: #ff9900;
        width: 1rem;
      }

      .number {
        height: 100%;
        width: 3.8rem;
        background: #ffdb6e;
        // position: absolute;
        // right: 0;
        // top: 0;

        .test {
          width: 100%;
          height: 100%;
          font-size: 0.3rem;
          line-height: 0.48rem;
          padding-left: 0.2rem;
          color: #ff5f00;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
    }

    .instructions {
      width: 4.6rem;
      // position: absolute;
      margin-left: calc(50% - 2.3rem);
      height: 2rem;
      margin-top: .15rem;
      // overflow-y: scroll;
      .span {
        font-size: 0.2rem;
        color: #a3a3a3;
        margin-top: 0.1rem;
      }

      .span:nth-of-type(3) {
        // display: -webkit-box;
        // -webkit-box-orient: vertical;
        // -webkit-line-clamp: 2;
        // overflow: hidden;
      }
    }

    .closeBtn {
      position: absolute;
      width: 0.6rem;
      height: 0.6rem;
      top: 0.65rem;
      right: 0.1rem;
    }
  }
}
</style>
