<template>
  <!-- OCR 单据智能识别 -->
  <el-dialog
    custom-class="ocr-invoices-dialog"
    :visible.sync="show"
    :show-close="false"
    width="80%"
    top="10vh"
  >
    <div slot="title" class="ocr-title">
      <span style="font-weight: bold;">OCR智能识别</span>
      <div>
        <c-button type="primary" @click="save">保存</c-button>
        <c-button type="primary" @click="close">关闭</c-button>
      </div>
    </div>
    <div class="invoices-recognition">
      <div class="invoices-area">
        <div class="file-name">{{ fileName }}</div>
        <iframe class="pdf-file" :src="fileUrl" type="application/pdf" />
      </div>
      <div class="recognition-area">
        <el-form
          v-model="invoicesData"
          label-width="100px"
          label-position="right"
        >
          <el-col :span="24">
            <el-form-item label="">
              <c-select v-model="invoicesData.type">
                <el-option v-for="(item, idx) in invoicesTypeOptions" :key="idx" :label="item.label" :value="item.value"></el-option>
              </c-select>
            </el-form-item>
          </el-col> 
          <el-col :span="24">
            <el-form-item label="发票日期">
                <c-input type="textarea" v-model="invoicesData.date"></c-input>
            </el-form-item>
          </el-col> 
          <el-col :span="24">
            <el-form-item label="发票金额">
                <c-input type="textarea" v-model="invoicesData.amount"></c-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="是否正本">
                <c-select v-model="invoicesData.original" style="width: 100%;">
                  <el-option v-for="(item, idx) in invoicesOriginalOptions" :key="idx" :label="item.label" :value="item.value"></el-option>
                </c-select>
            </el-form-item>
          </el-col>
        </el-form>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import invoicePdf from "~/assets/invoice.pdf";

export default {
  name: "OcrInvoicesRecognition",
  data() {
    return {
      show: false,
      fileName: "KZ3500220597AA-001.pdf",
      // fileUrl: "/invoice.pdf",
      fileUrl: "assets/invoice.pdf",
      invoicesTypeOptions: [
        { label: "商业发票", value: "SYFP" },
        { label: "个人发票", value: "GRFP" },
      ],
      invoicesOriginalOptions: [
        { label: "是", value: 1 },
        { label: "否", value: 0 },
      ],
      invoicesData: {
        type: "SYFP",
        date: "5 DEC 2021",
        amount: "USD 223000.00",
        original: 1
      }
    }
  },
  methods: {
    save() {
      this.close();
    },
    close() {
      this.show = false
    }
  }
}
</script>

<style>
.ocr-invoices-dialog {
  height: 85%;
  display: flex;
  flex-direction: column;
  margin-bottom: unset;
}
.ocr-invoices-dialog .el-dialog__header, .ocr-invoices-dialog .el-dialog__body {
  padding: 0;
}
.ocr-invoices-dialog .el-dialog__body {
  flex: 1;
}
</style>

<style scoped>
.ocr-title {
  display: flex;
  justify-content: space-between;
  padding: 5px 10px 5px 20px;
  border-bottom: 1px solid #dadbdd;
}
.invoices-recognition {
  height: 100%;
  display: flex;
  background-color: #f6fbff;
  padding: 20px;
  box-sizing: border-box;
}
.invoices-area {
  width: 50%;
  border-right: 1px solid #babec1;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  padding: 0 10px;
}
.recognition-area {
  width: 50%;
  border-left: 1px solid #babec1;
  box-sizing: border-box;
}

.invoices-area .file-name {
  padding-bottom: 10px;
  text-align: center;
}
.invoices-area .pdf-file {
  flex: 1;
}
</style>