<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 class="pdf-file">
          <el-scrollbar :style="{ height: imgContainerHeight + 'px' }">
            <div style="height: 100%;display: flex;justify-content: center;">
              <img :src="fileUrl" alt="单据" style="display: block;" />
            </div>
          </el-scrollbar>
        </div>
      </div>
      <div class="recognition-area">
        <el-scrollbar :style="{ height: imgContainerHeight + 'px' }">
          <el-form
            v-model="formData"
            label-width="100px"
            label-position="right"
          >
            <c-col :span="24">
              <el-form-item label="">
                <c-select v-model="formData.type" @change="fileTypeChangeEvent">
                  <el-option
                    v-for="(item, idx) in fileType"
                    :key="idx"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </c-select>
              </el-form-item>
            </c-col>
            <!-- 商业发票 -->
            <c-col :span="24" v-if="formData.type === 'commercial_invoice'">
              <c-col :span="24">
                <el-form-item label="发票日期">
                  <c-input type="textarea" v-model="formData.invoices.date"></c-input>
                </el-form-item>
              </c-col>
              <c-col :span="24">
                <el-form-item label="发票金额">
                  <c-input type="textarea" v-model="formData.invoices.amount"></c-input>
                </el-form-item>
              </c-col>
              <c-col :span="24">
                <el-form-item label="是否正本">
                  <c-select v-model="formData.invoices.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>
              </c-col>
            </c-col>
            <!-- 提货单 -->
            <c-col :span="24" v-if="formData.type === 'bill_of_lading'">
              <c-col :span="24">
                <el-form-item label="发货人">
                  <c-input type="textarea" v-model="formData.lading.shipper"></c-input>
                </el-form-item>
              </c-col>
              <c-col :span="24">
                <el-form-item label="收货人">
                  <c-input type="textarea" v-model="formData.lading.consignee"></c-input>
                </el-form-item>
              </c-col>
              <c-col :span="24">
                <el-form-item label="通知地址">
                  <c-input type="textarea" v-model="formData.lading.address"></c-input>
                </el-form-item>
              </c-col>
              <c-col :span="24">
                <el-form-item label="船舶">
                  <c-input type="textarea" v-model="formData.lading.vessel"></c-input>
                </el-form-item>
              </c-col>
              <c-col :span="24">
                <el-form-item label="装货港">
                  <c-input type="textarea" v-model="formData.lading.loading"></c-input>
                </el-form-item>
              </c-col>
              <c-col :span="24">
                <el-form-item label="卸货港">
                  <c-input type="textarea" v-model="formData.lading.loading"></c-input>
                </el-form-item>
              </c-col>
              <c-col :span="24">
                <el-form-item label="托运人的货物描述">
                  <c-input type="textarea" v-model="formData.lading.description"></c-input>
                </el-form-item>
              </c-col>
              <c-col :span="24">
                <el-form-item label="毛重">
                  <c-input type="textarea" v-model="formData.lading.gross_weight"></c-input>
                </el-form-item>
              </c-col>
              <c-col :span="24">
                <el-form-item label="据称重量">
                  <c-input type="textarea" v-model="formData.lading.said_to_weigh"></c-input>
                </el-form-item>
              </c-col>
            </c-col>
            <!-- 海运货物证书 -->
            <c-col :span="24" v-if="formData.type === 'marine_cargo_certificate'">
              <c-col :span="24">
                <el-form-item label="证书号码">
                  <c-input type="textarea" v-model="formData.marine.certificate"></c-input>
                </el-form-item>
              </c-col>
              <c-col :span="24">
                <el-form-item label="预约保险单编号">
                  <c-input type="textarea" v-model="formData.marine.policy"></c-input>
                </el-form-item>
              </c-col>
              <c-col :span="24">
                <el-form-item label="帐号">
                  <c-input type="textarea" v-model="formData.marine.account"></c-input>
                </el-form-item>
              </c-col>
              <c-col :span="24">
                <el-form-item label="被保险人">
                  <c-input type="textarea" v-model="formData.marine.assured"></c-input>
                </el-form-item>
              </c-col>
              <c-col :span="24">
                <el-form-item label="保险金额">
                  <c-input type="textarea" v-model="formData.marine.sum_insured"></c-input>
                </el-form-item>
              </c-col>
              <c-col :span="24">
                <el-form-item label="航次">
                  <c-input type="textarea" v-model="formData.marine.voyage"></c-input>
                </el-form-item>
              </c-col>
              <c-col :span="24">
                <el-form-item label="参考编号">
                  <c-input type="textarea" v-model="formData.marine.reference"></c-input>
                </el-form-item>
              </c-col>
              <c-col :span="24">
                <el-form-item label="航班号">
                  <c-input type="textarea" v-model="formData.marine.airline"></c-input>
                </el-form-item>
              </c-col>
              <c-col :span="24">
                <el-form-item label="出发日期">
                  <c-input type="textarea" v-model="formData.marine.departing"></c-input>
                </el-form-item>
              </c-col>
              <c-col :span="24">
                <el-form-item label="达到日期">
                  <c-input type="textarea" v-model="formData.marine.arrival"></c-input>
                </el-form-item>
              </c-col>
              <c-col :span="24">
                <el-form-item label="空运单编号">
                  <c-input type="textarea" v-model="formData.marine.airway"></c-input>
                </el-form-item>
              </c-col>
            </c-col>
          </el-form>
        </el-scrollbar>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import bill_of_ladingPdf from "~/assets/demo-files/bill_of_lading.pdf";
import commercial_invoicePdf from "~/assets/demo-files/commercial_invoice.pdf";
import marine_cargo_certificatePdf from "~/assets/demo-files/marine_cargo_certificate.pdf";

export default {
  name: "OcrRecognition",
  data() {
    return {
      show: false,
      fileName: "KZ3500220597AA-001.pdf",
      // fileUrl: "/invoice.pdf",
      // fileUrl: require("~/assets/demo-files/bill_of_lading.png"),
      fileUrl: require("~/assets/demo-files/commercial_invoice.png"),
      // fileUrl: require("~/assets/demo-files/marine_cargo_certificate.png"),
      imgContainerHeight: 0,
      fileType: [
        { label: "商业发票", value: "commercial_invoice" },
        { label: "提货单", value: "bill_of_lading" },
        { label: "海运货物证书", value: "marine_cargo_certificate" },
      ],
      invoicesOriginalOptions: [
        { label: "是", value: 1 },
        { label: "否", value: 0 },
      ],
      formData: {
        type: 'commercial_invoice',
        invoices: {
          date: '5 DEC 2021',
          amount: "USD 223000.00",
          original: 1
        },
        lading: {
          shipper: 'HAMERSLEY IRON PTY.LIMITED\rA.B.N. 49 004 558 276',
          consignee: 'TO ORDER',
          address: '',
          vessel: 'BULK INGENUITY',
          loading: 'DAMPIER, WESTERN\rAUSTRALIA',
          discharge: 'MAIN PORT(S), CHINA',
          description: 'NO MARKS IN BULK',
          gross_weight: 'SP10L',
          said_to_weigh: '81,599\rWMT'
        },
        marine: {
          certificate: '01-M0549399-CAN',
          policy: '01-M0542662-0CP',
          account: '01-5120005-H0K0792',
          assured: 'ELECTRONIC SCIENTIFIC ENGINEERING LIMITED',
          sum_insured: 'USD 24.530.00',
          voyage: 'From Hong Kong Alrport to Belling Capltal\rInternatlonal AlrportP.R.China',
          reference: 'C411121104',
          airline: 'CX368',
          departing: '02-Dec-2021',
          arrival: '05-Dec-2021',
          airway: 'HKAE-002054'
        }
      }
    };
  },
  watch: {
    show(newVal, oldVal) {
      if (!this.imgContainerHeight) {
        if (newVal) {
          this.$nextTick(() => {
            const ele = this.$el.querySelector(
              ".invoices-recognition .invoices-area .pdf-file"
            );
            this.imgContainerHeight = ele.clientHeight;
          });
        }
      }
    },
  },
  methods: {
    save() {
      this.$emit("confirm");
      this.close();
    },
    close() {
      this.show = false;
    },
    fileTypeChangeEvent(val) {
      this.fileUrl = require(`~/assets/demo-files/${val}.png`)
    }
  },
};
</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;
}
.ocr-invoices-dialog .el-scrollbar__wrap {
  overflow-x: auto;
}
</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 {
  height: 100%;
  width: 50%;
  border-right: 1px solid #babec1;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  padding: 0 10px;
  overflow: hidden;
}
.recognition-area {
  height: 100%;
  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>
