<template>
  <div class="dialogSty">
    <!--    <el-dropdown-item   @click.native="onClick"   size="mini" plain>{{row.wqpxxfqptm || '-'}}</el-dropdown-item>-->
<!--    <el-link type="primary" @click.native="onClick">{{row.wqpxxfqptm || '-'}}</el-link>-->
    <el-dialog title='气瓶二维码' :visible.sync='ewmVisible' width='346px' center style="z-index: 9999;">
      <template slot="title">
        <div class="titleSty">员工二维码</div>
        <div class="titleSty" style="margin-top: 10px;">员工姓名: {{dialogForm.name}}</div>
      </template>
      <div style="text-align: center;">
<!--        <vue-qr-->
<!--          :text="qrcodeText"-->
<!--          ref="eipqrcode"-->
<!--          :correctLevel="3"-->
<!--          :size="250"-->
<!--          :margin="10"-->
<!--          colorDark=”#000″-->
<!--          colorLight=”white”-->
<!--          backgroundColor=”white”-->

<!--          backgroundDimming=”white”-->
<!--          :logoSrc="require('@/assets/qpxx/qpxx-01.png')"-->
<!--          :logoScale=".2"-->
<!--          :logoMargin="5"-->
<!--          logoBackgroundColor=”white”-->
<!--        ></vue-qr>-->
        <canvas ref='eipqrcode' class='qr-canvas'></canvas>
      </div>
      <div style='text-align: center; color: #5875EB;cursor: pointer;' @click="downloadPersonQr">下载二维码</div>
      <div class="left-circle"></div>
      <div class="right-circle"></div>
    </el-dialog>
  </div>
</template>
<script>
import QRCode from 'qrcode'
import VueQr from 'vue-qr'
export default {
  components: { VueQr },
  props: {
    // row: { type: Object },
    // column: { type: Object },
    // index: { type: String },
    // desc: { type: String }
  },
  data: () => ({
    ewmVisible: false,
    qrcodeText: "测试二维码" ,//二维码内容（扫码识别后需要访问的网址）
    dialogForm:{
      name:''
    }
  }),

  methods: {
    show(type,row){
      console.log('row',row);
      this.ewmVisible = true;
      this.dialogForm.name =type=='yhgl'?row.fXm:row.wygxxfxm;
      let qrcode = type=='yhgl'?row.fEwm:row.wygxxfewm;
      setTimeout(() => {
        QRCode.toCanvas(this.$refs.eipqrcode, qrcode)
      }, 200);
    },
    downloadPersonQr(){
      let base64Img =  this.$refs.eipqrcode.toDataURL('image/jpg');
      //创建下载标签，然后设置链接和图片名称
      let a = document.createElement('a')
      a.href = base64Img
      a.download = '二维码'+Date.now()
      a.click()
      //销毁元素
      a.remove();
    },

  }
}
</script>

<style scoped lang='scss'>
.dialogSty{
  position:relative;
  ::v-deep.el-dialog{
    border-radius: 20px!important;
  }
  ::v-deep.el-dialog__header{
    padding-top: 40px;
  }
  ::v-deep .el-dialog__body{
    border-top: 1px dashed #dcdfe6;
  }
  .qr-canvas{
    width: 160px !important;
    height: 160px !important;
  }
  .left-circle{
    position: absolute;
    top: 99px;
    left: 0px;
    width: 8px;
    height: 16px;
    border: 1px solid #7d7b7bdb;
    background-color: #7d7b7bdb;
    /* border-radius的顺序是 左上 右上 右下 左下 */
    /* 半圆朝左，右边上下角是圆的，左边上下角的宽度设置为0 */
    /* div盒子宽度为高度的一半 */
    /* 右上和右下的宽度与高度取50或者100都没问题 */
    border-radius: 0 100px 100px 0;
  }
  .right-circle{
    position: absolute;
    top: 99px;
    right: 0px;
    width: 8px;
    height: 16px;
    border: 1px solid #7d7b7bdb;
    background-color: #7d7b7bdb;
    /* border-radius的顺序是 左上 右上 右下 左下 */
    /* 半圆朝左，右边上下角是圆的，左边上下角的宽度设置为0 */
    /* div盒子宽度为高度的一半 */
    /* 右上和右下的宽度与高度取50或者100都没问题 */
    border-radius:  100px 0 0 100px ;
  }
}
.titleSty{
  font-family: '苹方 中等', '苹方', sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 18px;
  color: #2B3950;
}

</style>
