<template>
  <el-row :gutter="20" class="page">
    <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>
        <ShowImage :show-src-image=true />
      </el-row>
      <el-row style="height: 200px; width: 100%; position: relative;">
        <FileUpload />
      </el-row>
      <el-row style="color: gray; font-size: small;">
        <h4>支持jpg, png, bmp, pdf等文件格式,点击灰色区域或者直接拖拽文件至灰色区域上传文件</h4>
      </el-row>
      <el-row style="position: absolute;">
        <PdfPreview />
        <el-button type="primary" @click="predict" :loading="loading">Predict</el-button>
      </el-row>
    </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>
      <div style="margin-top: 43px;">
        <ShowImage :show-src-image=false />
      </div>
      <section> 耗时：{{ predictTime }} ms</section>
    </el-col>
  </el-row>
</template>

<script lang="ts" setup>
import { IMMagicColor, SubmitBug } from '../../../../api/api'
import { ref, onMounted } from 'vue'

import FileUpload from '../../../../components/FileUpload.vue'
import ShowImage from '../../../../components/ShowImage.vue'
import PdfPreview from '../../../../components/PdfPreview.vue'

import { storeToRefs } from 'pinia'
import { useServerStore } from '../../../../store/Server';
import { useCanvasImgStore } from '../../../../store/CanvasImg';

const si = useServerStore();
const { server_ip, server_port, api_magic_color } = storeToRefs(si);
const my_canvas = useCanvasImgStore();
const { input_file, res_image } = storeToRefs(my_canvas);

let loading = ref(false)
const fileName = ref(null as unknown as string);
let bugId = ref("");
let predictTime = ref(0)

const predict = () => {
  fileName.value = ''
  fileName.value = input_file.value?.name
  if (fileName.value == undefined || fileName.value == '') {
    alert('请上传图片！')
    return;
  }
  loading.value = !loading.value
  var data = new FormData();

  data.append('image', input_file.value);

  IMMagicColor(api_magic_color.value, 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
  });
}

onMounted(async () => {
  console.log('magic color mounted')
  input_file.value = undefined
})

// 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;
}

.page {
  height: 100%;
  width: 100%;
}

.small-title {
  justify-content: space-between;
  align-items: center;
}
</style>
