<template>
    <div class="import-box">


      <div id="uploadImage" class="upload-img">
        <div class="upload-list" v-if="fileRaw" model="singer" style="display: inline-block;vertical-align: middle;float: left;">
            <a>
              <el-image
                :src="getShowImage(fileRaw)"
                :z-index="999999"
              />
            </a>
            <a href="javascript:void(0);" class="del" @click="clear"><i class="el-icon-error"></i></a>

        </div>
        <div class="el-upload el-upload--picture" style="vertical-align: middle;display: inline-block;float:left">
          <button
            type="button"
            class=" avatar-uploader"
            @keydown.enter.prevent
            v-show="!fileRaw"
            @click="$refs.uploadBtn.click()"
          >
            <i class="el-icon-plus avatar-uploader-icon"></i>
            <input
              ref="uploadBtn"
              type="file"
              @change="handleFileChange1"
              size="mini"
              style="width: 200px;"
              v-show="false"
            />
          </button>
        </div>
      </div>
      <canvas ref="canvas" style="display: none"></canvas>
<!--      <div>
        <p>解析结果: {{ showDecodedText }}</p>
      </div>-->
      <el-button type="primary" plain class="button-sty" @click="searchEvent" icon="el-icon-search">查询
      </el-button>
    </div>
</template>
<script>
import jsqr from "jsqr";
import axios from "axios";

export default {
  data() {
    return {
      showDialog: true,
      fileRaw: false,
      decodedText: null,
      showDecodedText:null,
      imageUrl: "", // 图片链接
      downloadStatus: "", // 下载状态
    };
  },
  methods: {
    clear() {
      // this.$refs.uploadBtn.select();
      // document.selection.clear();
      // const selection = window.getSelection();
      // if (selection.rangeCount > 0) {
      //   selection.removeAllRanges(); // 清除所有选择范围
      // }
      this.$nextTick(()=>{
        this.fileRaw = false;
        this.decodedText = null;
        this.showDecodedText = null;
        this.imageUrl = "";
        this.downloadStatus = "";
        this.showDialog= true;
      })
    },
    getShowImage(file, fileName) {
      fileName = fileName || file.name;
      if (this.$commonFileUtil.isPictureFile(fileName)) {
        return file.showUrl || file.url;
      } else {
        return this.$commonFileUtil.getFileIconRequire(fileName);
      }
    },
    createFile(rawFile) {
      let name = rawFile.name;
      let index = name.lastIndexOf(".");

      let getFileSuffix = this.$commonFileUtil.getFileSuffix;
      let fileSuffix = getFileSuffix(name);
      let fileName
        = index >= 0 ? name.substring(0, index).toString() : name.toString();
      let file = {
        name: rawFile.name,
        size: rawFile.size,
        raw: rawFile,
        showUrl: URL.createObjectURL(rawFile),
        fileName: fileName,
        fileSuffix: fileSuffix,
      };
      return file;
    },
    handleClose() {
      this.showDialog = false;
      this.$emit("update:visiable", false);
    },
    dialogPrimary() {
      this.handleClose();
      this.$emit("confirm");
    },
    handleFileChange1(event) {
      const file = event.target.files[0];
      if (file) {
        this.fileRaw = this.createFile(file);
      } else {
        this.fileRaw = false;
      }
    },
    searchEvent(){
      if(!this.fileRaw){
        this.$baseAlert("请选择文件")
        return
      }
      this.handleFileChange(this.fileRaw.raw,{
        callback:(code)=>{
          this.$emit("callback",code)
        }
      });
    },
    fileChange(event) {
      const file = event.target.files[0];
      if (file) {
        this.fileRaw = this.createFile(file);
        this.handleFileChange(file);
      } else {
        this.fileRaw = false;
      }
    },

    async convertUrlToFile() {
      // 如果 imageUrl 为空，则提示用户输入图片链接
      if (!this.imageUrl) {
        this.showDecodedText = "请输入图片链接"; // 设置提示信息
        return; // 结束函数执行
      }

      try {
        // 使用 axios 发起 GET 请求以获取图片数据
        const response = await axios({
          url: this.imageUrl, // 请求的 URL
          method: "GET", // 请求方法为 GET
          responseType: "blob", // 指定响应数据类型为 Blob (二进制大对象)
        });

        // 将获取到的 Blob 数据转换为 File 对象
        const file = new File([response.data], "image.jpg", {
          type: "image/jpeg",
        });

        // 模拟一个 input 的 change 事件，将生成的 File 对象传递给 handleFileChange 方法
        this.handleFileChange({ target: { files: [file] } });
      } catch (error) {
        // 处理请求失败或其他错误，并显示错误信息
        this.showDecodedText = "图片处理失败: " + error.message;
        this.$baseAlert("图片处理失败: " + error.message);
      }
    },
    // 处理文件上传事件
    handleFileChange(file,option) {
      if (!file) {
        this.decodedText = null;
        this.showDecodedText = null
        return;
      }
      // 获取上传的第一个文件

      /* const file = event.target.files[0];
      let a = 2; */

      // 如果文件存在，则进行处理
      if (file) {
        // 创建一个 FileReader 对象，用于读取文件内容
        const reader = new FileReader();

        // 设置 FileReader 的 onload 事件处理函数
        // 当 FileReader 读取完成时，会调用此函数
        reader.onload = () => {
          // 创建一个 Image 对象，用于显示图片
          const img = new Image();

          // 设置 Image 的 onload 事件处理函数
          // 当图片加载完成时，会调用此函数
          img.onload = () => {
            // 调用 decodeQRCode 函数，解析二维码
            this.decodeQRCode(img,option);
          };

          // 设置 Image 的 src 属性为 FileReader 读取的结果
          // 即将文件内容转换为 Data URL，作为图片的源
          img.src = reader.result;
        };

        // 调用 FileReader 的 readAsDataURL 方法，读取文件内容
        // 并将其转换为 Data URL
        reader.readAsDataURL(file);
      }
    },
    decodeQRCode(image,option) {
      // 获取 canvas 元素，该元素应该在模板中定义并使用 ref 绑定
      const canvas = this.$refs.canvas;
      // 获取 canvas 的 2D 绘图上下文，用于在 canvas 上绘制图像
      const context = canvas.getContext("2d");
      // 设置 canvas 的宽度为图像的宽度
      canvas.width = image.width;
      // 设置 canvas 的高度为图像的高度
      canvas.height = image.height;
      // 将图像绘制到 canvas 上，从 (0, 0) 位置开始绘制
      context.drawImage(image, 0, 0);

      // 获取 canvas 上指定区域的图像数据，这里获取整个 canvas 的图像数据
      const imageData = context.getImageData(0, 0, canvas.width, canvas.height);
      // 使用 jsQR 库解码图像数据，获取二维码信息
      const code = jsqr(imageData.data, canvas.width, canvas.height);

      // 判断是否成功解码二维码
      if (code) {
        // 如果解码成功，将解码后的数据存储到 decodedText 属性中
        this.decodedText = code.data;
        this.showDecodedText = code.data;
        option.callback && option.callback(code.data)
      } else {
        // 如果解码失败，设置 decodedText 属性为错误信息
        this.decodedText = null;
        this.showDecodedText = "未能解析二维码";
        this.$baseAlert("未能解析二维码");
      }
    },
  },
};
</script>
<style scoped></style>
