<template>
  <el-row :gutter="20">
    <el-col :span="12" class="place">
      <el-row class="small-title">
        <h2>图像锐化增强</h2>
      </el-row>
      <el-row style="color: gray; font-size: small;">
        <p>V1 主要针对文档图片，去阴影效果较好</p>
      </el-row>
      <el-row style="color: gray; font-size: small;">
        <h4>支持jpg, png, bmp, pdf等文件格式</h4>
      </el-row>
      <div class="common-layout">
        <el-container>
          <el-input type="file" v-model="fileName" @change="uploadImg"></el-input>
          <el-button type="primary" @click="predict" :loading="loading">Predict</el-button>
        </el-container>
      </div>
      <div v-show="is_pdf">
        <el-row>
          <el-button-group>
            <el-button type="primary" :icon="ArrowLeft" @click="prePage">上一页</el-button>
            <el-button type="primary" @click="nextPage">
              下一页<el-icon class="el-icon--right">
                <ArrowRight />
              </el-icon>
            </el-button>
          </el-button-group>
          <div class="page-tool-item">{{ state.pageNum }}/{{ state.numPages }}</div>
          <el-container>
            <el-input type="number" v-model="pdf_page"></el-input>
            <el-button type="primary" @click="SetPdfPage" plain>页面跳转</el-button>
          </el-container>
        </el-row>
      </div>
      <el-row>
        <img id="show-img" class="show-area" />
      </el-row>
      <canvas id="canvas" style="display: none;"></canvas>
    </el-col>
    <el-col :span="12" class="place">
      <el-row class="small-title">
        <h2 style="margin-right: 100;">推理结果展示</h2>
        <el-button type="danger" @click="submitBug" disabled>提交bug</el-button>
      </el-row>
      <el-row style="color: gray; font-size: small;">
        <p></p>
      </el-row>
      <el-row style="color: gray; font-size: small;">
        <h4></h4>
      </el-row>
      <div>
        <h4></h4>
        <h4></h4>
      </div>
      <el-row class="small-title">
        <h4></h4>
        <h4></h4>
      </el-row>
      <el-row>
        <img id="res-img" class="show-area" />
        <section> 耗时：{{ predictTime }} ms</section>
      </el-row>
    </el-col>
  </el-row>
</template>

<script lang="ts" setup>
import { IMMagicColor, SubmitBug } from '../../../../api/api'
import { reactive, ref } from 'vue'
import { onMounted } from "vue";
import {
  ArrowLeft,
  ArrowRight,
} from '@element-plus/icons-vue'
import { createLoadingTask } from "vue3-pdfjs/esm"; // 获得总页数

import { storeToRefs } from 'pinia'
import { useServerIpStore } from '../../../../store/ServerIp';
import { useServerPortStore } from '../../../../store/ServerPort';

const si = useServerIpStore();
const { server_ip } = storeToRefs(si);
const sp = useServerPortStore();
const { server_port } = storeToRefs(sp);

const api = "/v1/image_process/magic_color";

let loadingTask: any;
const pdf_page = ref(1);
const pdf_img: any = ref("")

const state = reactive({
  source: "", //预览pdf文件地址
  pageNum: 1, //当前页面
  numPages: 0, // 总页数
});

function dataURLtoBlob(dataURL: any) {
  var arr = dataURL.split(','),
    mime = arr[0].match(/:(.*?);/)[1],
    bstr = atob(arr[1]),
    n = bstr.length,
    u8arr = new Uint8Array(n);
  while (n--) {
    u8arr[n] = bstr.charCodeAt(n);
  }
  return new Blob([u8arr], { type: mime });
}

function getPdfImage(index: number) {
  loadingTask.promise.then((pdf: any) => {
    state.numPages = pdf.numPages;
    pdf.getPage(index).then((page: any) => {
      const viewport = page.getViewport({ scale: 4.0 })
      canvas.value.height = viewport.height;
      canvas.value.width = viewport.width;
      const destWidth = 398;
      canvas.value.style.width = destWidth + 'px';
      canvas.value.style.height = destWidth * (viewport.height / viewport.width) + 'px';
      const ctx = canvas.value.getContext('2d');
      page.render({
        canvasContext: ctx,
        viewport,
      });
      canvas.value.toBlob(function (blob) {
        pdf_img.value = dataURLtoBlob(canvas.value.toDataURL('images/png', 1.0))
        const showImg = document.getElementById("show-img") as HTMLImageElement;
        showImg.src = canvas.value.toDataURL('images/png', 1.0);
        showImg.onload = () => {
          console.log(canvas.value.toDataURL('images/png', 1.0))
        }
      });
    })
  });
}

function SetPdfPage() {
  if (pdf_page.value >= 1 && pdf_page.value <= state.numPages) {
    console.log(pdf_page.value)
    state.pageNum = Number(pdf_page.value);
    getPdfImage(state.pageNum);
  } else {
    console.log(pdf_page.value)
    alert('输入的pdf页面无效！')
  }
}

function prePage() {
  if (state.pageNum > 1) {
    state.pageNum -= 1;
    getPdfImage(state.pageNum);
  }
}

function nextPage() {
  if (state.pageNum < state.numPages) {
    state.pageNum += 1;
    getPdfImage(state.pageNum);
  }
}

// 构建 File 对象
function blobToFile(blob: any, fileName: any) {
  blob.lastModifiedDate = new Date();
  blob.name = fileName;
  return blob;
}

async function convertCanvasToFile(canvas: HTMLCanvasElement, fileName: any) {
  // 将 Canvas 转为 Blob 对象
  const blob = await new Promise(resolve => canvas.toBlob(blob => {
    resolve(blob);
  }, pdf_img.value.type, 1.0));
  // 手动构造 File 对象
  let file = null;
  try {
    file = new File([pdf_img.value], fileName, { type: pdf_img.value.type });
  } catch (e) {
    // Safari 浏览器不支持直接通过 new File() 创建文件对象，需要手动构造
    const rawFile = blobToFile(blob, fileName);
    file = Object.assign(rawFile, { lastModifiedDate: new Date(), name: fileName });
  }
  return file;
}

let loading = ref(false)
const fileName = ref(null);
let bugId = ref("");
let predictTime = ref(0)
const is_pdf = ref(false);
const canvas = ref(null as unknown as HTMLCanvasElement);
const res_image: any = ref();

onMounted(async () => {
  canvas.value = document.getElementById("canvas") as HTMLCanvasElement;
  res_image.value = document.getElementById("res-img") as HTMLImageElement;
});

const uploadImg = () => {
  const reader = new FileReader();
  const showImg = document.getElementById("show-img") as HTMLImageElement;
  const predictImg = document.getElementById("predict-img") as HTMLImageElement;
  const inputElement = document
    .getElementsByClassName("el-input")[0]
    .getElementsByTagName("input")[0];

  try {
    const file = inputElement.files![0];
    reader.onload = () => {
      const post_ = file.name.substring(file.name.lastIndexOf("."), file.name.length).toLowerCase();
      if (post_ == ".pdf") {
        state.pageNum = 1;
        // state.scale = 4;
        state.source = URL.createObjectURL(file);
        is_pdf.value = true
        loadingTask = createLoadingTask(state.source);
        getPdfImage(state.pageNum);
      } else
        if (post_ == ".jpg" || post_ == ".png" || post_ == ".bmp" || post_ == ".jpeg") {
          showImg.src = URL.createObjectURL(file);
          is_pdf.value = false
        } else {
          alert('不支持的文件格式！')
          fileName.value = null
        }
    };
    reader.readAsDataURL(file);
  } catch (err) {
    console.error(err);
  }
};

const predict = () => {
  if (fileName.value == undefined) {
    alert('请上传图片！')
    return;
  }
  const showImg = document.getElementById("show-img") as HTMLImageElement;
  const predictImg = document.getElementById("predict-img") as HTMLImageElement;
  const inputElement = document
    .getElementsByClassName("el-input")[0]
    .getElementsByTagName("input")[0];
  const file = inputElement.files![0];

  loading.value = !loading.value
  var data = new FormData();

  if (is_pdf.value) {
    const file: any = convertCanvasToFile(canvas.value, "pdf.png").then(result => {
      data.append('image', result);
      IMMagicColor(api, data).then(res => {
        res_image.value.src = res.data.image
        predictTime.value = res.data.cost
        bugId.value = res.response_id;
        loading.value = !loading.value
      }).catch(function (err) {
        loading.value = !loading.value;
        bugId.value = ""
        predictTime.value = 0
      });
    })
  } else {
    data.append('image', file);

    IMMagicColor(api, data).then(res => {
      res_image.value.src = res.data.image
      predictTime.value = res.data.cost
      bugId.value = res.response_id;
      loading.value = !loading.value
    }).catch(function (err) {
      loading.value = !loading.value;
      bugId.value = ""
      predictTime.value = 0
    });
  }
}

const submitBug = async () => {
  if (bugId.value == undefined || bugId.value == "") {
    alert('请先预测结果！')
    return;
  }

  SubmitBug(api, bugId.value).then(res => {
    console.log(res.code, res.data)
  }).catch(function (err) {
    console.log(err)
  });
};
</script>

<style scoped>
.place {
  margin-right: auto;
  margin-left: auto;
  border-right: solid 1px #ccc;
}

.show-area {
  width: 100%;
}

.small-title {
  justify-content: space-between;
  align-items: center;
}

.page-tool-item {
  padding: 8px 15px;
  padding-left: 10px;
  cursor: pointer;
}
</style>
