<!-- 图片文字识别 -->
<template>
  <div class="evaluate3">
    <div class="bottom-main">
      <div class="top">
        <div>
          <div class="title">图片识别</div>
          <div class="box">
            <a-image :width="510" :height="340" :src="responseUrl" />
            <a-upload
              v-model:file-list="fileList"
              name="file"
              :action="uploadUrl"
              :headers="headers"
              :showUploadList="false"
              @change="handleChange"
              maxCount="100"
            >
              <a-button>
                <upload-outlined></upload-outlined>
                上传图片
              </a-button>
            </a-upload>
          </div>
        </div>
        <div>
          <div class="title">识别结果</div>
          <div class="box">
            <div class="bg bg1"></div>
            <div class="bg bg2"></div>
            <div class="bg bg3"></div>
            <div class="bg bg4"></div>
            <div class="top-left">
              <a-menu v-model:selectedKeys="menuOpenKeys2" mode="horizontal">
                <a-menu-item key="全文还原">
                  <template #icon>
                    <mail-outlined />
                  </template>
                  全文还原
                </a-menu-item>
                <a-menu-item key="识别结果">
                  <template #icon>
                    <mail-outlined />
                  </template>
                  识别结果
                </a-menu-item>
                <a-menu-item key="json返回">
                  <template #icon>
                    <mail-outlined />
                  </template>
                  json返回
                </a-menu-item>
              </a-menu>

              <div v-if="menuOpenKeys2[0] === '识别结果'" class="scene">
                <div>{{ imageResult }}</div>
              </div>
              <div v-if="menuOpenKeys2[0] === '全文还原'" class="scene">
                <div>{{ imageResult0 }}</div>
              </div>
              <div v-if="menuOpenKeys2[0] === 'json返回'" class="scene">
                <div>{{ imageResult1 }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- <div class="bottom">
        <a-button @click="checkImage()">检测</a-button>
      </div> -->
    </div>
  </div>
</template>
<script setup>
  import { ref, onMounted } from 'vue'
  import { paddleocr,algo } from '@/api/file'
  import { message } from 'ant-design-vue'
  import { useRouter } from 'vue-router'
  const router = useRouter()
  const uploadUrl = window.SITE_CONFIG.apiURL + '/upload'
  let fileList = ref([])
  // const responseUrl = ref('')
  const imageResult = ref('')
  const imageResult0 = ref('')
  const imageResult1 = ref('')
  const menuOpenKeys2 = ref(['全文还原'])
  // 图片初始化
  let responseUrl = ref('static/image/' + router.currentRoute.value.query.exampleImg)
  const imgType = router.currentRoute.value.query.exampleImg.split('.')[1]
  const handleChange = (info) => {
    debugger;
    if (info.file.status !== 'uploading') {
      console.log(info.file, info.fileList)
    }
    if (info.file.status === 'done') {
      message.success(`${info.file.name} file uploaded successfully`)
      debugger
      responseUrl.value = info.file.response.data
      // imgType.value = info.file.response.data.split('.')[1]
      if (responseUrl.value) {
        checkImage()
      }
    } else if (info.file.status === 'error') {
      message.error(`${info.file.name} file upload failed.`)
    }
  }
  const checkImage = () => {
    getUrlBase64(responseUrl.value, imgType.value, (base64) => {
      console.log('1111111', base64)
      const param = {
        company: router.currentRoute.value.query.company,
        algorithmName: router.currentRoute.value.query.algorithmName,
        data: base64.split('base64,')[1],
        type: router.currentRoute.value.query.type
      }
      algo(param).then((res) => {
        // wordValue.value = res.data
        console.log('1111', res.data)
        imageResult.value = res.data.data.text_data
        imageResult0.value = res.data.data.text_data
        imageResult1.value = res.data.data.text_data
      })
    })
  }
  const getUrlBase64 = (url, ext, callback) => {
    var canvas = document.createElement('canvas') //创建canvas DOM元素
    var ctx = canvas.getContext('2d')
    var img = new Image()
    img.crossOrigin = 'Anonymous'
    img.src = url
    img.onload = function () {
      canvas.height = img.height //指定画板的高度,自定义
      canvas.width = img.width //指定画板的宽度，自定义
      ctx.drawImage(img, 0, 0, img.width, img.height) //参数可自定义
      var dataURL = canvas.toDataURL('image/' + ext)
      callback.call(this, dataURL) //回掉函数获取Base64编码
      canvas = null
    }
  }
  onMounted(() => {
    checkImage()
  })
</script>
<style lang="less" scoped>
  .evaluate3 {
    width: 100%;
    display: flex;
    flex-direction: column;
    // background: rgba(0, 88, 225, 0.06);
    padding: 20px;
    :deep(.ant-menu-horizontal) {
      display: flex;
      justify-content: unset;
    }
    .bottom-main {
      display: block;
      .top {
        display: flex;
        height: 85%;
        background: unset;
        & > div:nth-of-type(1) {
          width: 510px;
          .ant-btn {
            width: 120px;
            height: 44px;
            font-size: 18px;
            color: #fff;
            background: #0b138b;
            border: none;
            border-radius: 6px;
            position: absolute;
            top: 270px;
            left: 350px;
          }
        }
        & > div:nth-of-type(2) {
          margin-left: 45px;
          flex: 1;
        }
        & > div > .title {
          font-size: 24px;
          font-weight: 600;
          margin-bottom: 20px;
        }
        & > div > .box {
          height: 340px;
          background: #fafafa;
          border-radius: 6px;
          position: relative;
          .bg {
            width: 58px;
            height: 54px;
            background: pink;
            position: absolute;
          }
          .bg1 {
            background: url('~@/assets/detailsAll/sf_bg1.png') no-repeat;
            background-size: 100%;
            top: 0;
            left: 0;
          }
          .bg2 {
            background: url('~@/assets/detailsAll/sf_bg2.png') no-repeat;
            background-size: 100%;
            top: 0;
            right: 0;
          }
          .bg3 {
            background: url('~@/assets/detailsAll/sf_bg3.png') no-repeat;
            background-size: 100%;
            bottom: 0;
            left: 0;
          }
          .bg4 {
            background: url('~@/assets/detailsAll/sf_bg4.png') no-repeat;
            background-size: 100%;
            bottom: 0;
            right: 0;
          }
        }
        :deep(.ant-image-img) {
          width: 100%;
          height: 100%;
          object-fit: contain;
        }
        .top-left {
          margin-left: 20px;
          width: 700px;
          padding-top: 20px;
          .scene {
            margin-top: 20px;
            margin-left: 20px;
            font-size: 18px;
            div {
              font-size: 18px;
            }
          }
        }
      }
      .bottom {
        display: flex;
        flex-direction: row;
        justify-content: center;
        background: unset;
        padding: 0;
        .ant-btn {
          margin-left: 20px;
          width: 100px;
          height: 40px;
          font-size: 18px;
          border-radius: 5px;
        }
      }
    }
  }
</style>
