<template>
  <div class="erweim">
    <el-image ref="imgViewRef" :src="props.url" :preview-src-list="[props.url]" fit="scale-down" :id="props.id" />
    <!-- <br /> -->
    <div>
      <span @click="onChangeimg"><el-icon>
          <ZoomIn />
        </el-icon>放大预览</span>
      <span @click="onloadewm1()"><el-icon>
          <Download />
        </el-icon>下载二维码</span>
    </div>
  </div>

</template>

<script setup>
import { defineProps, ref } from 'vue'
const props = defineProps({
  id: {
    type: String,
    default: 'htmlsmewmcs'
  },
  url: {
    type: String,
    default: ''
  },
  filename: {
    type: String,
    default: ''
  }

})
const imgViewRef = ref()
//点击下载二维码
function onloadewm1() {
  var a = document.createElement('a');      // 创建一个a节点插入的document
  var event = new MouseEvent('click')          // 模拟鼠标click点击事件
  a.download = props.filename;                  // 设置a节点的download属性值
  a.href = props.url;                                     // 将图片的src赋值给a节点的href
  a.dispatchEvent(event)
  a.remove(); // 下载之后把创建的元素删除
}

//预览图片
function onChangeimg() {


  imgViewRef.value.showViewer = true;

}

</script>

<style scoped>
.erweim {
  text-align: center;
  margin-right: 10px;

  >img {
    width: 148px;
    height: 148px;
    display: block;
    border: 1px solid var(--el-color-primary);
  }

  >div span {
    cursor: pointer;
    color: var(--el-color-primary);
    margin-right: 10px;
  }
}

.bigrwmbox {
  margin: auto;
}

::v-deep .el-image-viewer__close {
  position: absolute !important;
  top: unset !important;
  right: 39% !important;
  bottom: 30px !important;
  transform: translateX(-50%) !important;
  padding: 0 23px;
  background-color: var(--el-text-color-regular);
  border-color: #fff;
  border-radius: 22px;
}
</style>
