<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 id="qrImg" :text="src" :size="102" :margin="5"></vue-qr>
        </div>
        <el-button class="links__qr--btn" v-show="src" type="text" icon="iconfont icon-icon_yunxiazai fz14 mr4" @click="downloadImg">二维码下载</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: ''
    }
  },
  data() {
    return {
      loading: false,

      miniprogram: {
        link: '',
        url: ''
      }
    };
  },
  watch: {
    show(val) {
      if (val) {
        console.log(this.src);
      }
    }
  },
  methods: {
    close() {
      this.$emit('update:show', false);
    },

    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();
    }
  }
};
</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;
  }
}
</style>
