<template>
<div class="show-code" style="display: block;">
  <div class="cover" @click="onClose"></div>
  <div class="main">
    <div class="tit">
        EDS扫码付
        <a href="javascript:void(0);" @click="onClose">
            <img src="@/assets/img/close.png" alt="">
        </a>
    </div>
    <div class="code-pic">
  <div id="qrcodeImg" title="http://shoppay.edsmall.com/index.html#/">
    <canvas width="100" height="100" style="display: none;"></canvas>
    <img style="display: block;" :src="code"></div>
    <p>扫一扫进入EDS扫码付手机端</p>
  </div>
    <div class="web">
      <span>EDS动态收款码生成网址：</span>
      <span><input type="text" name="code-webside" id="code-webside" :value="data.payAddress"></span>
      <span><a href="javascript:void(0);" @click="handleCopy">复制链接</a></span>
    </div>
  </div>
</div>
</template>

<script>
import QRCode from 'qrcode'

 export default {
   data(){
     return {
       code: ''
     }
   },
   props:['data'],
    created(){
      let e = this

      if(!!this.data.payAddress){
        this.getQRcode()
      }
    },
    methods: {
      // onShow(){
      //   this.show = true
      // },
      onClose(){
        this.$emit("handleShowCode")
        // this.show = false
      },
      handleCopy(){
        var ele = document.getElementById("code-webside");
        ele.select();
        document.execCommand("Copy");
        if (document.execCommand("Copy")) {
            // console.log('复制成功')
            this.$message.success('复制成功')
        } else {
           this.$message.error('复制失败');
            // console.log('复制失败')
        }
      },
      getQRcode(){
        let e = this
        QRCode.toDataURL(e.data.payAddress)
          .then(url => {
            this.code = url
            // console.log(url)
          })
          .catch(err => {
            console.error(err)
          })
      }
    }
  }

</script>

<style scoped>
.show-code {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 99;
}
.show-code .cover {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,.6);
}
.show-code .main {
  width: 790px;
  height: 60%;
  position: absolute;
  left: 20%;
  top: 20%;
  background: #fff;
}
.show-code .tit {
  padding: 15px;
  background: rgba(239, 239, 239, 1);
}
.show-code .tit a {
  float: right;
  margin-top:-5px;
}
img {
  border: none;
}
.show-code .code-pic {
  text-align: center;
}
.show-code .code-pic img {
  width: 200px;
  height: 200px;
  /* padding: 20px; */
  border: 1px solid #dcdcdc;
  border-radius: 8px;
  margin: 20px auto;
}
.show-code .code-pic p {
  margin-bottom: 20px;
  font-size: 18px;
}
.show-code .web {
  padding: 20px;
  font-size: 18px;
  overflow: hidden;
  text-align: center;
}
.show-code span {
  display: inline-block;
  vertical-align: middle;
  line-height: 48px;
  margin-left: -5px;
}
.show-code .web input {
  width: 350px;
  padding: 15px 10px;
  border: 1px solid #dcdcdc;
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
}
.show-code .web a {
  padding: 15px;
  color: #fff;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
  /* background: linear-gradient(#f13c23, #fb5808); */
  background-color: #409EFF;
}
</style>
