<template>
  <el-dialog title="核销工具二维码" :visible.sync="show" width="600px" :before-close="close" class="hexiaoBox">
    <div v-loading="loading" class="links-block">
      <div class="links__body">
        <div class="links__body--url">{{ link }}</div>
        <div class="links__body--btn">
          <el-button v-clipboard:text="link" v-show="link" type="text"><i class="iconfont icon-lianjie font-14"></i> 复制链接</el-button>
        </div>
      </div>
      <div class="link__divider"></div>
      <div class="links__qr">
        <div style="text-align:center; background: #FFFFFF;width: 129px;height: 131px;padding-top:6px;border-radius: 2px;">
          <vue-qr v-if="sourceType" id="qrImg" :text="src" :size="130" :margin="5"></vue-qr>
          <el-image v-else id="qrImg" class="imgs" lazy :src="src" @click.native="onView(false)">
            <div slot="placeholder" style="display:flex;align-items:center;justify-content:center;width:100%;height:100%;">
              <i class="el-icon-picture-outline" style="font-size:30px"></i>
            </div>
          </el-image>
        </div>
        <div class="testBtn">
          <i class="iconfont icon-xiazai downIcon"></i>
          <el-button type="text" v-show="src" @click="download">
            <span style="fontSize:14px;">小程序二维码下载</span>
          </el-button>
        </div>
      </div>
    </div>
  </el-dialog>
</template>
<script>
import VueQr from 'vue-qr';
import { api as viewerApi } from 'v-viewer';
import 'viewerjs/dist/viewer.css';
export default {
  name: 'links',
  components: {
    VueQr
  },
  props: {
    show: {
      type: Boolean,
      default: false
    },
    link: {
      type: String,
      default: ''
    },
    src: {
      type: String,
      default: ''
    },
    imageName: {
      type: String,
      default: ''
    },
    sourceType: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      loading: false
    };
  },
  watch: {
    show(val) {
      if (val) {
        // console.log(this.src);
      }
    }
  },
  methods: {
    // 点击预览
    onView(isH5) {
      let qrImg = '';
      if (isH5) {
        const qrWrap = document.getElementById('qrWrap');
        qrImg = qrWrap && qrWrap.childNodes[0].src;
      } else {
        qrImg = this.src + '?imageMogr2/thumbnail/500x500';
      }
      viewerApi({
        images: [qrImg],
        options: {
          toolbar: false,
          navbar: false,
          title: false,
          zIndex: 9999
        }
      });
    },
    close() {
      this.$emit('update:show', false);
    },
    download() {
      if (this.sourceType) {
        this.downloadImg();
      } else {
        this.downloadCodeImg(this.src);
      }
    },
    downloadImg() {
      const qrcode = document.getElementById('qrImg');
      let img = qrcode.getElementsByTagName('img')[0];
      let link = document.createElement('a');
      let url = img.getAttribute('src');
      link.setAttribute('href', url);
      link.setAttribute('download', `核销工具二维码.png`);
      link.click();
    },
    downloadCodeImg(url) {
      let image = new Image(); //创建图片对象
      image.setAttribute('crossOrigin', 'anonymous'); //设置允许跨域
      image.src = url; //赋值src
      image.onload = () => {
        //等待图片加载完成创建canvas
        let canvas = document.createElement('canvas');
        //将图片绘制到canvas画布上
        canvas.width = image.width;
        canvas.height = image.height;
        let ctx = canvas.getContext('2d');
        ctx.drawImage(image, 0, 0, image.width, image.height);
        //获取图片文件格式  jpg/jpeg/png
        let ext = image.src.substring(image.src.lastIndexOf('.') + 1).toLowerCase();
        //导出画布快照  此时已越过跨域限制成功取到图片数据
        let dataURL = canvas.toDataURL('image/' + ext);
        //创建a标签
        const a = document.createElement('a');
        // 赋值a标签download属性值，标明该a标签提供下载功能，同时该属性指定了下载时的文件名称
        a.download = '核销工具二维码.png';
        //赋值a标签下载地址，即canvas导出的画布快照 base64格式的图片地址
        a.href = dataURL;
        //添加a标签到dom中
        document.body.appendChild(a);
        //触发a标签点击事件 触发下载
        a.click();
        //下载完成 删除多余的a标签  保持页面原有元素不动
      };
    }
  }
};
</script>
<style lang="scss" scoped>
.testBtn {
  display: flex;
}
.downIcon {
  font-size: 20px;
  color: #2f54eb;
  margin-right: 4px;
}
.m-r-3 {
  margin-right: 3px;
}
.links__body {
  // border: 1px solid #ddd;
  flex: 1;
  font-size: 14px;
  &--url {
    width: 258px;
    height: 119px;
    overflow-x: hidden;
    overflow-y: auto;
    word-break: break-all;
    padding: 42px 32px 2px 24px;
    line-height: 17px;
    font-size: 12px;
  }
  &--btn {
    text-align: center;
    line-height: 1;
    padding-bottom: 19px;
  }
}
.links__body--btn {
  padding-bottom: 19px;
}
.links__qr {
  padding: 16px 43px 19px 34px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.link__divider {
  margin-top: 28px;
  width: 1px;
  height: 143px;
  border: 1px solid #e4e7ed;
}
.links-block {
  display: flex;
  // margin: 10px 0 10px;
  width: 522px;
  height: 200px;
  background: #f5f7fa;
  border-radius: 2px;
  margin-bottom: 36px;
}
.link-title {
  display: flex;
  align-items: center;
  font-weight: 500;
  color: #303133;
  line-height: 20px;
  margin-top: 20px;
  i {
    font-size: 20px;
    margin-right: 8px;
  }
}
.imgs {
  display: inline-block;
  width: 119px;
  height: 120px;
  cursor: pointer;
}
</style>
