<template>
  <el-dialog title="链接信息" :visible.sync="show" width="600px" :before-close="close">
    <div v-loading="loading" class="links-block">
      <div class="links__body">
        <div class="links__body--url">{{ src }}</div>
        <div class="links__body--btn">
          <el-button v-clipboard:text="src" v-show="src" type="text" icon="iconfont icon-lianjie fz14">复制链接</el-button>
        </div>
      </div>
      <div class="link__divider"></div>
      <div class="links__qr">
        <div style="text-align:center">
          <vue-qr v-if="sourceType" id="qrImg" :text="src" :size="102" :margin="5"></vue-qr>
          <img v-else :src="src" class="imgs" />
        </div>
        <el-button class="links__qr--btn" v-show="src" type="text" icon="iconfont icon-icon_yunxiazai fz14 mr4" @click="download">二维码下载</el-button>
      </div>
    </div>
  </el-dialog>
</template>
<script>
import VueQr from 'vue-qr';

export default {
  name: 'links',
  components: {
    VueQr
  },
  props: {
    show: {
      type: Boolean,
      default: false
    },
    src: {
      type: String,
      default: ''
    },
    imageName: {
      type: String,
      default: ''
    },
    sourceType: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      loading: false,

      miniprogram: {
        link: '',
        url: ''
      }
    };
  },
  watch: {
    show(val) {
      if (val) {
        console.log(this.src);
      }
    }
  },
  methods: {
    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', `${this.imageName}.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 = this.imageName;
        //赋值a标签下载地址，即canvas导出的画布快照 base64格式的图片地址
        a.href = dataURL;
        //添加a标签到dom中
        document.body.appendChild(a);
        //触发a标签点击事件 触发下载
        a.click();
        //下载完成 删除多余的a标签  保持页面原有元素不动
      };
    }
  }
};
</script>
<style lang="scss" scoped>
.links__body {
  // border: 1px solid #ddd;
  flex: 1;
  &--url {
    height: 138px;
    overflow-x: hidden;
    overflow-y: auto;
    word-break: break-all;
    padding: 13px 16px 0 16px;
    line-height: 17px;
    font-size: 12px;
  }
  &--btn {
    text-align: center;
    line-height: 1;
  }
}
.links__qr {
  padding: 22px 30px 10px 24px;
  text-align: center;
  &--btn {
    margin: 18px 0 0;
  }
}
.link__divider {
  margin-top: 19px;
  height: 130px;
  width: 1px;
  background-color: #ebecf0;
}
.links-block {
  display: flex;
  background: #f7f8fa;
  margin: 10px 0 10px;
}
.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 {
  width: 102px;
  height: 105px;
}
</style>
