<!--  -->
<template>
  <el-row :gutter="20" class="page">
    <el-col :span="10" class="place">
      <el-row class="small-title">
        <h2>通用表格识别</h2>
      </el-row>
      <el-row style="color: gray; font-size: small;">
        <p>支持识别图片/PDF格式文档中的表格内容，包括有线表格、无线表格、合并单元格表格，同时支持单张图片内的多个表格内容识别，返回各表格的表头表尾内容、单元格文字内容及其行列位置信息。</p>
      </el-row>
      <el-row style="color: gray; font-size: small;">
        <h4>支持jpg, png, bmp, pdf等文件格式,点击灰色区域或者直接拖拽文件至灰色区域上传文件</h4>
      </el-row>
      <el-row>
        <ShowImage :show-src-image=true />
      </el-row>
      <el-row style="height: 200px; width: 100%; position: relative;">
        <FileUpload />
      </el-row>
      <OcrLangList />
      <el-row style="position: absolute;">
        <PdfPreview />
        <el-button type="primary" @click="predict" :loading="loading">Predict</el-button>
      </el-row>
    </el-col>
    <el-col :span="14" 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 class="demo-collapse">
        <el-collapse v-model="activeName" accordion>
          <el-collapse-item title="JSON识别结果" name="1">
            <li v-for="(item, index) in jsonArr" :key="index">
              <el-scrollbar height="600px">
                {{ item }}
              </el-scrollbar>
            </li>
          </el-collapse-item>
          <el-collapse-item title="识别结果" name="2">
            <el-scrollbar height="700px">
              <li v-for="(item, index) in htmlArr" :key="index">
                <el-scrollbar height="auto" style="overflow-y: auto;overflow-x: auto;">
                  <div style="display: flex;">
                    <span v-html="item"></span>
                  </div>
                </el-scrollbar>
              </li>
            </el-scrollbar>
          </el-collapse-item>
        </el-collapse>
      </div>
      <el-row>
        <section> 耗时：{{ predictTime }} ms.</section>
      </el-row>
    </el-col>
  </el-row>
</template>

<script lang='ts' setup>
import { reactive, ref, onMounted } from 'vue'
import { TableRec, SubmitBug } from '../../../../api/api'
import { storeToRefs } from 'pinia'
import { useOcrLangStore } from '../../../../store/OcrLang';
import { useBugIdStore } from '../../../../store/BugID';
import { useServerStore } from '../../../../store/Server';
import { useCanvasImgStore } from '../../../../store/CanvasImg';

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

const si = useServerStore();
const { server_ip, server_port, api_table_rec } = storeToRefs(si);

const ol = useOcrLangStore();
const { ocr_lang } = storeToRefs(ol);

const my_canvas = useCanvasImgStore();
const { input_file } = storeToRefs(my_canvas);

const bi = useBugIdStore();
const { bug_id } = storeToRefs(bi);

let loading = ref(false)
let predictTime = ref(0)
const fileName = ref(null as unknown as string);
const activeName = ref('2')

let jsonArr: any = ref([])
let htmlArr: any = ref([])

const predict = async () => {
  fileName.value = ''
  fileName.value = input_file.value?.name
  if (fileName.value == undefined || fileName.value == '') {
    alert('请上传图片！')
    return;
  }
  if (ocr_lang.value == undefined || ocr_lang.value == "") {
    alert('请先指定语言！')
    return;
  }

  loading.value = true

  var data = new FormData();
  data.append('lang', ocr_lang.value);
  data.append('image', input_file.value);
  // console.log('is_pdf' + is_pdf.value)
  // console.log(file)
  TableRec(api_table_rec.value, data).then(res => {
    bug_id.value = res.response_id;
    predictTime.value = res.data.cost;
    jsonArr.value.splice(0);
    let tmp_json = res.data.json_items;
    for (let i = 0; i < tmp_json.length; i++) {
      jsonArr.value.push(JSON.stringify(tmp_json[i], null, 4));
    }

    htmlArr.value.splice(0);
    let tmp_html = res.data.html_items;
    for (let i = 0; i < tmp_html.length; i++) {
      htmlArr.value.push(tmp_html[i]);
    }
    loading.value = false
  }).catch(function (err) {
    loading.value = false
    bug_id.value = ""
    predictTime.value = 0
  });
};


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

//   SubmitBug(api, bug_id.value).then(res => {
//     console.log(res.code, res.data)
//   }).catch(function (err) {
//     console.log(err)
//     // loading.value = !loading.value;
//   });
// };

onMounted(async () => {
  console.log('table rec mounted')
  input_file.value = undefined
})
</script>

<style scoped lang="less">
.small-title {
  justify-content: space-between;
  align-items: center;
}

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

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