<template>
  <div class="eibs-tab">
    <c-row>
      <!-- =================顶部====================== -->
      <c-col :span="24">
        <c-col :span="8">
          <el-form-item label="参考号" prop="lidgrp.rec.ownref">
            <c-input
              v-model="model.lidgrp.rec.ownref"
              maxlength="16"
              placeholder="请输入Reference"
              disabled
            ></c-input>
          </el-form-item>
        </c-col>
        <c-col :span="4">
          <el-form-item label="" label-width="15px">
            <c-button size="small" type="primary;width:10%">i</c-button>
            <c-button size="small" type="primary"> 获取 </c-button>
          </el-form-item>
        </c-col>
        <c-col :span="11">
          <el-form-item label="摘要" prop="lidgrp.rec.nam">
            <c-input
              align="middle"
              v-model="model.lidgrp.rec.nam"
              maxlength="40"
              disabled
              placeholder="请输入Externally Displayed Name to Identify the Contract"
            ></c-input>
          </el-form-item>
        </c-col>
      </c-col>
      <!-- ====================左边======================= -->
      <c-col :span="11">
        <c-col :span="24">
          <el-form-item label="开证类型" prop="lidgrp.rec.isstyp">
            <c-select
              v-model="model.lidgrp.rec.isstyp"
              style="width: 100%"
              placeholder="请选择开证类型"
            >
              <el-option
                v-for="item in codeTable.isstyp"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </c-select>
          </el-form-item>
        </c-col>
        <el-col :span="24">
          <el-form-item label="信用证类型" prop="lidgrp.rec.lcrtyp">
            <c-select
              v-model="model.lidgrp.rec.lcrtyp"
              style="width: 100%"
              placeholder="请选择信用证类型"
            >
            <el-option
                v-for="item in codeTable.lcrtyp"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </c-select>
          </el-form-item>
        </el-col>

        <c-col :span="16">
          <el-form-item label="经办人" prop="litp1.usr.extkey">
            <c-input
              v-model="model.litp1.usr.extkey"
              maxlength="8"
              placeholder="请输入经办人"
              disabled
            ></c-input>
          </el-form-item>
        </c-col>

        <c-col :span="8">
          <el-form-item label="" label-width="15px">
            <c-button size="small" type="primary;width:10%">i</c-button>
          </el-form-item>
        </c-col>

        <c-col> &nbsp; </c-col>

        <c-col :span="12">
          <el-form-item label="信用证金额" prop="lidgrp.cbs.nom1.cur">
            <c-select
              disabled
              v-model="model.lidgrp.cbs.nom1.cur"
              style="width: 100%"
              placeholder="请选择Currency"
              @keyup.enter.native="nom1CurEvent"
            >
              <el-option
                v-for="item in codes.cur"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </c-select>
          </el-form-item>
        </c-col>
        <c-col :span="12">
          <el-form-item
            style="text-align: left"
            label-width="20px"
            prop="lidgrp.cbs.nom1.amt"
          >
            <c-input
              v-model="model.lidgrp.cbs.nom1.amt"
              style="text-align: left; width: 100%"
              placeholder="请输入信用证金额"
            ></c-input>
          </el-form-item>
        </c-col>
        <c-col :span="24">
          <el-form-item label="大写金额" prop="litp1.amt">
            <c-input
              v-model="model.litp1.amt"
              maxlength="76"
              placeholder="请输入大写金额"
              disabled
            ></c-input>
          </el-form-item>
        </c-col>
        <c-col :span="14">
          <el-form-item label="上下浮动限额 +/-" prop="lidgrp.rec.nomtop">
            <c-input
              v-model="model.lidgrp.rec.nomtop"
              maxlength="9"
              placeholder="请输入Amount Tolerance - Positive"
            ></c-input>
          </el-form-item>
        </c-col>
        <c-col :span="10" style="text-align: left">
          <el-form-item
            label="-"
            style="text-align: left; margin-left: 12px"
            label-width="20px"
            prop="lidgrp.rec.nomton"
          >
            <c-input
              v-model="model.lidgrp.rec.nomton"
              maxlength="9"
              placeholder="请输入Amount Tolerance - Negative"
            ></c-input>
          </el-form-item>
        </c-col>

        <c-col> &nbsp; </c-col>
        <el-col :span="24">
          <el-form-item label="最高金额限额" prop="lidgrp.rec.nomspc">
            <c-select
              v-model="model.lidgrp.rec.nomspc"
              style="width: 100%"
              placeholder="请选择最高金额限额"
            >
            </c-select>
          </el-form-item>
        </el-col>

        <c-col :span="14">
          <el-form-item label="信用证最大金额" prop="lidgrp.cbs.max.cur">
            <c-select
              v-model="model.lidgrp.cbs.max.cur"
              style="width: 100%"
              placeholder="请选择Currency"
              disabled
            >
              <el-option
                v-for="item in codes.cur"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </c-select>
          </el-form-item>
        </c-col>

        <c-col :span="10">
          <el-form-item label="" label-width="20px" prop="lidgrp.cbs.max.amt">
            <c-input
              v-model="model.lidgrp.cbs.max.amt"
              placeholder="请输入信用证最大金额"
              disabled
            ></c-input>
          </el-form-item>
        </c-col>

        <c-col :span="12">
          <el-form-item label="开证日期" prop="lidgrp.rec.opndat">
            <c-date-picker
              type="date"
              v-model="model.lidgrp.rec.opndat"
              style="width: 100%"
              placeholder="请选择Date L/C Opened/Issued"
            ></c-date-picker>
          </el-form-item>
        </c-col>
        <c-col :span="12">
          <el-form-item label="有效日期" prop="lidgrp.rec.expdat">
            <c-date-picker
              type="date"
              v-model="model.lidgrp.rec.expdat"
              value-format="yyyy-MM-dd"
              style="width: 100%"
              placeholder="请选择Date of Expiry"
            ></c-date-picker>
          </el-form-item>
        </c-col>
        <c-col :span="24">
          <el-form-item
            label="最迟货物装运日/服务提供日"
            prop="lidgrp.rec.shpdat"
          >
            <c-date-picker
              type="date"
              v-model="model.lidgrp.rec.shpdat"
              value-format="yyyy-MM-dd"
              style="width: 100%"
              placeholder="请选择Shipment Date"
            ></c-date-picker>
          </el-form-item>
        </c-col>
        <c-col :span="24">
          <el-form-item label="有效地点" prop="lidgrp.rec.expplc">
            <c-input
              type="textarea"
              :rows="3"
              v-model="model.lidgrp.rec.expplc"
              maxlength="35"
              show-word-limit
              placeholder="请输入Place of Expiry"
            ></c-input>
          </el-form-item>
        </c-col>
        <el-col :span="24">
          <el-form-item label="分批装运/分次服务" prop="lidgrp.rec.shppar">
            <c-select
              v-model="model.lidgrp.rec.shppar"
              style="width: 100%"
              placeholder="请选择分批装运/分次服务"
            >
            </c-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="转运" prop="lidgrp.rec.shptrs">
            <c-select
              v-model="model.lidgrp.rec.shptrs"
              style="width: 100%"
              placeholder="请选择转运"
            >
            </c-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="交易类型" prop="lidgrp.rec.jylx">
            <c-select
              v-model="model.lidgrp.rec.jylx"
              style="width: 100%"
              placeholder="请选择交易类型"
            >
              <el-option v-for="(item, idx) in codes.jylx" :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="通知行行号" prop="lidgrp.adv.pts.bankno">
            <c-input
              v-model="model.lidgrp.adv.pts.bankno"
              maxlength="8"
              placeholder="请输入通知行行号"
            ></c-input>
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item label="借据号" prop="lidgrp.rec.jjh">
            <c-input
              v-model="model.lidgrp.rec.jjh"
              maxlength="24"
              placeholder="请输入借据号"
            ></c-input>
          </el-form-item>
        </el-col>
      </c-col>
      <!-- ========================右边======================= -->
      <c-col :span="11" :offset="1">
        <c-col :span="24">
          <el-form-item
            label="申请人           参考号"
            prop="lidgrp.apl.pts.ref"
          >
            <c-input
              v-model="model.lidgrp.apl.pts.ref"
              maxlength="16"
              placeholder="请输入申请人           参考号"
            ></c-input>
          </el-form-item>
        </c-col>

        <c-col :span="16">
          <el-form-item label="Extkey" prop="lidgrp.apl.pts.extkey">
            <c-input
              id="extkey"
              v-model="model.lidgrp.apl.pts.extkey"
              maxlength="16"
              placeholder="请输入External Key of Address"
              @keyup.enter.native="
                showGridPromptDialog('lidgrp.apl.pts.extkey')
              "
            ></c-input>
          </el-form-item>
        </c-col>
        <c-col :span="8">
          <el-form-item label="" label-width="15px">
            <c-button size="small" type="primary;width:10%">i</c-button>
            <c-button size="small" type="primary" @click="onAplpDet">
              Details
            </c-button>
          </el-form-item>
        </c-col>
        <c-col :span="24">
          <el-form-item label="">
            <c-input
              type="textarea"
              v-model="model.lidgrp.apl.pts.adrblk"
              maxlength="35"
              :rows="5"
              show-word-limit
              placeholder="请输入Address Block"
            ></c-input>
          </el-form-item>
        </c-col>

        <c-col :span="24">
          <el-form-item label="申请人账号" prop="lidgrp.apl.pts.extact">
            <c-select
              v-model="model.lidgrp.apl.pts.extact"
              style="width: 100%"
              placeholder="请选择External Account"
            >
            </c-select>
          </el-form-item>
        </c-col>
        <c-col :span="24">
          <el-form-item label="申请人开户行" prop="lidgrp.apl.pta.issbchinf">
            <c-input
              v-model="model.lidgrp.apl.pta.issbchinf"
              maxlength="20"
              placeholder="请输入申请人开户行"
              @keyup.enter.native="
                showGridPromptDialog('lidgrp.apl.pta.issbchinf')
              "
            ></c-input>
          </el-form-item>
        </c-col>

        <el-col :span="24">
          <el-form-item
            label="通知行            参考号"
            prop="lidgrp.adv.pts.ref"
          >
            <c-input
              v-model="model.lidgrp.adv.pts.ref"
              maxlength="16"
              placeholder="请输入通知行            参考号"
            ></c-input>
          </el-form-item>
        </el-col>

        <c-col :span="16">
          <el-form-item label="Extkey" prop="lidgrp.adv.pts.extkey">
            <c-input
              v-model="model.lidgrp.adv.pts.extkey"
              maxlength="16"
              placeholder="请输入External Key of Address"
              @keyup.enter.native="
                showGridPromptDialog('lidgrp.adv.pts.extkey')
              "
            ></c-input>
          </el-form-item>
        </c-col>
        <c-col :span="8">
          <el-form-item label="" label-width="12px">
            <c-button size="small" type="primary;width:10%">i</c-button>
            <c-button size="small" type="primary" @click="onBenpDet">
              Details
            </c-button>
          </el-form-item>
        </c-col>

        <c-col :span="24">
          <el-form-item label="">
            <c-input
              type="textarea"
              v-model="model.lidgrp.adv.pts.adrblk"
              maxlength="35"
              :rows="5"
              show-word-limit
              placeholder="请输入Address Block"
            ></c-input>
          </el-form-item>
        </c-col>

        <c-col :span="24">
          <el-form-item
            label="受益人           参考号"
            prop="lidgrp.ben.pts.ref"
          >
            <c-input
              v-model="model.lidgrp.ben.pts.ref"
              maxlength="16"
              placeholder="请输入受益人           参考号"
            ></c-input>
          </el-form-item>
        </c-col>
        <c-col :span="16">
          <el-form-item label="Extkey" prop="lidgrp.ben.pts.extkey">
            <c-input
              v-model="model.lidgrp.ben.pts.extkey"
              maxlength="16"
              placeholder="请输入External Key of Address"
              @keyup.enter.native="
                showGridPromptDialog('lidgrp.ben.pts.extkey')
              "
            ></c-input>
          </el-form-item>
        </c-col>
        <c-col :span="8">
          <el-form-item label="" label-width="12px">
            <c-button size="small" type="primary;width:10%">i</c-button>
            <c-button size="small" type="primary" @click="onBenpDet">
              Details
            </c-button>
          </el-form-item>
        </c-col>
        <el-form-item label="">
          <c-input
            type="textarea"
            v-model="model.lidgrp.ben.pts.adrblk"
            maxlength="35"
            :rows="5"
            show-word-limit
            placeholder="请输入Address Block"
          ></c-input>
        </el-form-item>
        <c-col :span="24">
          <el-form-item label="受益人帐号" prop="lidgrp.ben.pts.extact">
            <c-input
              v-model="model.lidgrp.ben.pts.extact"
              maxlength="34"
              placeholder="请输入受益人帐号"
            ></c-input>
          </el-form-item>
        </c-col>
        <c-col :span="24"> </c-col>
        <c-col :span="24">
          <el-form-item label="受益人开户行" prop="lidgrp.ben.pts.issbchinf">
            <c-input
              v-model="model.lidgrp.ben.pts.issbchinf"
              maxlength="20"
              placeholder="请输入受益人开户行"
              @keyup.enter.native="
                showGridPromptDialog('lidgrp.ben.pts.issbchinf')
              "
            ></c-input>
          </el-form-item>
        </c-col>
      </c-col>
    </c-row>
  </div>
</template>
<script>
import Api from "~/service/Api";
import CommonProcess from "~/mixin/CommonProcess";
import CodeTable from "~/config/CodeTable";
import Event from "~/model/Ditopn/Event";

export default {
  inject: ["root"],
  props: ["model", "codes"],
  mixins: [CommonProcess],
  data() {
    return {
      codeTable: {
        lcrtyp: [
          {label: "不可撤销可转让", value: '1'},
          {label: "不可撤销不可转让", value: '2'},
        ],
        isstyp: [
          {label: "WE ISSUE", value: '1'},
          {label: "PLEASE ISSUE", value: '2'},
          {label: "ISSUE FOR OTHER BANK", value: '3'},
        ]
      }
    };
  },
  methods: {
    ...Event,
    mytypeChange() {
      if (this.model.didgrp.rec.mytype == "F") {
        this.model.didgrp.rec.tratyp = "";
        this.model.didgrp.rec.sdsrfs = "";
        this.model.didgrp.rec.shptrs = "";
        this.model.didgrp.rec.shpfro = "";
        this.model.didgrp.rec.shpto = "";
        this.model.didgrp.rec.shppro = "";
      }
    },
    nom1CurEvent() {
      const data = Utils.flatObject(this.model);
      Api.post(
        "ditopn/executeDefault/didgrp.cbs.nom1.cur",
        Utils.getRequestDataFn.call(this)
      ).then((res) => {
        if ((res.respCode = "AAAAAA")) {
          Utils.copyValueFromVO(this.model, res.data);
        }
      });
    },
  },
  created: function () {},
};
</script>
<style></style>
