<!--  公共二维码dialog组件

1.引入方式

  <batchQrCodeDialog ref="batchQrCodeDialog" :batchQrCodeDialogData="batchQrCodeDialogData"></batchQrCodeDialog>

  import batchQrCodeDialog from "@/components/batchQrCodeDialog/batchQrCodeDialog.vue";

  components: {
    batchQrCodeDialog
  },

2.必要参数
  codeList:[],
  batchQrCodeDialogData:{},

3.必要方法

  //二维码组件开关
  open(type,id,name){
    if(this.codeList.length>0){
      let list = [];
      this.codeList.forEach((item)=>{
        list.push({
          code:item.subId,              //参数
          name:item.subName             //名称
        })
      })
      this.$set(this,'batchQrCodeDialogData',{
        title:'二维码批量下载',                                       //弹窗名称(非必传)
        type:'1',                                                     //二维码类型 用于区分二维码功能类型
        codeList:list                                                 //二维码数据
      });
      this.$nextTick(function () {
        this.$refs['batchQrCodeDialog'].initialize();
      })
    }else{
      this.msgError('请勾选实验室')
    }
  },

-->

<template>
  <div>
    <!--添加/编辑弹窗-->
    <el-dialog class="batch-qr-code-dialog" :title="batchQrCodeDialogData.title?batchQrCodeDialogData.title:'二维码批量下载'"
               :modal-append-to-body="false"
               :show-close="false" :close-on-click-modal="false" :close-on-press-escape="false"
               :visible.sync="dialogType" v-if="dialogType" width="1210px">
      <div class="for-code-max-box scrollbar-box">
        <div class="for-code-box" v-for="(item,index) in codeList" :key="item.code">
          <vue-qr v-if="dialogType" :ref="'qr'+item.code" class="batch-qr-code-dialog-vue-qr" :text="item.parameter"
                  :size="200"></vue-qr>
          <canvas class="batch-qr-code-dialog-vue-qr-canvas" :id="item.code" :ref="'canvas'+item.code" width="300"
                  :height="item.codeName?240:200"></canvas>
        </div>
      </div>
      <div slot="footer" class="dialog-footer dialog-footer-box">
        <p class="dialog-footer-button-null"></p>
        <p class="dialog-footer-button-info" @click="buttonClick(2)">取消</p>
        <p class="dialog-footer-button-primary" @click="buttonClick(1)">批量下载</p>
        <p class="dialog-footer-button-null"></p>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import vueQr from 'vue-qr'
  import saveAs from 'file-saver'
  import JSZip from 'jszip'

  export default {
    name: 'batchQrCodeDialog',
    components: {
      vueQr
    },
    props: {
      batchQrCodeDialogData: {}
    },
    data() {
      return {
        dialogType: false,
        vueQrCodeData: null,
        vueQrImgType: false,
        identification: localStorage.getItem('codeOnlineAdd'),            //二维码规则 服务器域名,需与微信后台开发配置内一致.
        codeList: []
      }
    },
    created() {

    },
    mounted() {

    },
    methods: {
      //初始化
      initialize() {
        let self = this
        this.$nextTick(()=>{
          let list = []
          this.batchQrCodeDialogData.codeList.forEach((item) => {
            list.push({
              code: item.code,
              parameter: this.identification + '?code=' + item.code + '&type=' + this.batchQrCodeDialogData.type,
              codeName: item.name,
              roomName: item.roomName
            })
          })
          this.$set(this, 'codeList', list)
          this.$set(this, 'dialogType', true)
          this.$nextTick(function() {
            // DOM 更新了
            setTimeout(function() {
              self.codeList.forEach((item) => {
                //获取二维码数据
                let imgbase64 = self.$refs['qr' + item.code][0].imgUrl
                let img = new Image()
                img.src = imgbase64
                //获取canvas容器
                let myCanvas = document.getElementById(item.code).getContext('2d')
                //清空画布-设置背景白色
                myCanvas.fillStyle = '#FFFFFF'
                myCanvas.clearRect(0, 0, 300, 240)
                myCanvas.fillRect(0, 0, 300, 240)
                //绘制二维码
                // myCanvas.drawImage(img, 50, 0)
                myCanvas.drawImage(img, 50, 35)
                //设置水印
                myCanvas.font = 'bold 14px \'Fira Sans\''
                myCanvas.fillStyle = 'rgba(0,0,0,1)' //水印颜色
                myCanvas.textAlign = 'center'
                //绘制水印
                let list = [];
                for(let i=0;i<item.codeName.length;i++){
                  if(i == 0 || i == 15){
                    list.push(item.codeName[i])
                  }else{
                    if(i<15){
                      list[0] = list[0]+item.codeName[i];
                    }else{
                      list[1] = list[1]+item.codeName[i];
                    }
                  }
                }
                if(item.roomName){
                  if(!list[1]){
                    let name = list[0] +' ('+item.roomName+')'
                    // myCanvas.fillText(name, (300/2), 215) //左下
                    myCanvas.fillText(name, (300/2), 30) //左下
                  }else{
                    let name = list[1] +' ('+item.roomName+')'
                    // myCanvas.fillText(list[0], (300/2), 210) //左下
                    // myCanvas.fillText(name, (300/2), 225) //左下
                    myCanvas.fillText(list[0], (300/2), 25) //左下
                    myCanvas.fillText(name, (300/2), 40) //左下
                  }
                }else{
                  if(!list[1]){
                    let name = list[0]
                    // myCanvas.fillText(name, (300/2), 215) //左下
                    myCanvas.fillText(name, (300/2), 30) //左下
                  }else{
                    let name = list[1]
                    // myCanvas.fillText(list[0], (300/2), 210) //左下
                    // myCanvas.fillText(name, (300/2), 225) //左下
                    myCanvas.fillText(list[0], (300/2), 25) //左下
                    myCanvas.fillText(name, (300/2), 40) //左下
                  }
                }
              })
            }, 100)
          })
        })
      },
      buttonClick(type) {
        if (type == 1) {
          // 初始化一个zip打包对象
          let zip = new JSZip()
          this.codeList.forEach((item,index) => {
            let canvas = this.$refs['canvas' + item.code][0];
            let name = item.roomName?item.codeName+' ('+item.roomName+')':item.codeName;
            const base64Img = canvas.toDataURL('image/png')
            // 这个images文件目录中创建一个base64数据为imgData的图像，图像名是index序号 + item.codeName实验室名称 + '.gif'
            // zip.file((index+1)+'_'+item.codeName+'.gif', base64Img.replace(/^data:image\/(png|jpg);base64,/, ""), { base64: true })
            zip.file((index+1)+'_'+name+'.png', base64Img.replace(/^data:image\/(png|jpg);base64,/, ""), { base64: true })
          })
          // 把打包内容异步转成blob二进制格式
          zip.generateAsync({ type: 'blob' }).then(function(content) {
            // content就是blob数据，这里以 实验室二维码.zip 名称下载
            // 使用了FileSaver.js
            saveAs(content, '实验室二维码.zip')
          })
          this.msgSuccess('操作成功')
          this.$set(this, 'dialogType', false)
          if(this.$parent.$refs['table-box']){
            this.$parent.$refs['table-box'].clearSelection();
            this.$parent.codeList = [];
          }else if(this.$parent.$parent.$refs['table-box']){
            this.$parent.$parent.$refs['table-box'].clearSelection();
            this.$parent.$parent.codeList = [];
          }else if(this.$parent.$parent.$parent.$refs['table-box']){
            this.$parent.$parent.$parent.$refs['table-box'].clearSelection();
            this.$parent.$parent.$parent.codeList = [];
          }
        } else {
          this.$set(this, 'dialogType', false)
        }
      }
    }
  }
</script>

<style scoped lang="scss">
  .batch-qr-code-dialog {
    z-index: 10000;
    font-weight: 500;
    overflow: hidden;
    .for-code-max-box {
      max-height: 500px;
      .for-code-box {
        display: inline-block;
        .batch-qr-code-dialog-vue-qr {
          position: absolute;
          z-index: -10;
          opacity: 0;
          display: block !important;
          height: 200px;
          width: 200px;
          margin: 20px auto 27px;
        }
        .batch-qr-code-dialog-vue-qr-canvas {
          display: block !important;
        }
      }
    }
    ::v-deep .el-dialog__body {
      padding: 0;
    }
  }
</style>
