<template>
  <div class="eibs-tab">
    <!-- <c-row class="infrow" style="margin-top: 50px"> -->
    <!-- ============================顶部================================ -->
    <c-row>
    <c-col :span="24">
      <c-col :span="12">
        <el-form-item label="Reference" prop="ledgrp.rec.ownref">
          <c-input
            v-model="model.ledgrp.rec.ownref"
            maxlength="16"
            placeholder="请输入Reference"
            :disabled="true"
          ></c-input>
        </el-form-item>
      </c-col>
      <c-col :span="11" :offset="1">
        <el-form-item label="Name" prop="ledgrp.rec.nam">
          <c-input
            text-align="middle"
            v-model="model.ledgrp.rec.nam"
            maxlength="40"
            placeholder="请输入"
            disabled
          >
          </c-input>
        </el-form-item>
      </c-col>
    </c-col>
      </c-row>

        <!-- ========================上半部分的左边=========================== -->
    <c-row>
    <c-col :span="12">
      <!-- L/C Amount -->
      <c-col :span="24">
        <c-col :span="11">
          <el-form-item label="L/C Amount" prop="ledgrp.cbs.nom1.cur">
            <c-select
              v-model="model.ledgrp.cbs.nom1.cur"
              style="width: 100%"
              placeholder="请选择币种"
              :code="codes.curtxt1"
              disabled
            >
            </c-select>
          </el-form-item>
        </c-col>
        <c-col :span="8">
          <el-form-item label="" label-width="5px" prop="ledgrp.cbs.nom1.amt">
            <c-input-currency
              v-model="model.ledgrp.cbs.nom1.amt"
              style="text-align: left; width: 100%"
              class="m-input-currency"
              placeholder="请输入信用证金额"
              @keyup.enter.native="$event.target.blur()"
              disabled
            ></c-input-currency>
            <!-- @keyup.enter.native="$event.target.blur()" :回车触发失去焦点发生的事件 -->
          </el-form-item>
        </c-col>

        <c-col :span="5">
          <c-checkbox
            v-model="model.letp0.aammod.addamtflg"
            style="margin-left: 10px"
            disabled
            >Add. Amount</c-checkbox
          >
        </c-col>
      </c-col>

                <!-- Open Amount -->
      <c-col :span="24">
        <c-col :span="11">
        <el-form-item label="Open Amount" prop="ledgrp.cbs.opn1.cur">
          <c-select
            v-model="model.ledgrp.cbs.opn1.cur"
            maxlength="3"
            placeholder="请选择币种"
            disabled
            :code="codes.curtxt1"
          ></c-select>
        </el-form-item>
      </c-col>
      <c-col :span="8">
        <el-form-item label="" label-width="5px" prop="ledgrp.cbs.opn1.amt">
          <c-input
            v-model="model.ledgrp.cbs.opn1.amt"
            style="text-align: left; width: 100%"
            class="m-input-currency"
            placeholder="请输入Balance"
            disabled
          ></c-input>
        </el-form-item>
      </c-col>
      <c-col :span="5">
        <c-checkbox v-model="model.ledgrp.rec.revflg"
        style="margin-left: 10px"
        disabled
          >Revolving L/C</c-checkbox
        >
      </c-col>
      </c-col>

      <c-row>
        <c-col :span="19">
          <el-form-item label="Available with" prop="ledgrp.avbnam">
            <c-input
              v-model="model.ledgrp.avbnam"
              maxlength="40"
              placeholder="请输入Available with"
              disabled
            ></c-input>
          </el-form-item>
        </c-col>
      </c-row>

      <c-col :span="24">
        <c-col :span="19">
        <el-form-item label="Available by" prop="ledgrp.rec.avbby">
          <c-select
            v-model="model.ledgrp.rec.avbby"
            style="width: 100%"
            placeholder="请选择Available by [AVBBY0]"
            disabled
            :code="codes.avbby"
          >
          </c-select>
        </el-form-item>
      </c-col>
        <c-col :span="5">
      <c-checkbox v-model="model.ledgrp.rec.redclsflg"
        style="margin-left: 10px"
        disabled
        >Red/Green Clause</c-checkbox
      >
    </c-col>
      </c-col>
      
      <c-col :span="24">
        <c-col :span="12">
      <el-form-item label="Date Issued" prop="ledgrp.rec.opndat">
        <c-date-picker
          type="date"
          v-model="model.ledgrp.rec.opndat"
          style="width: 100%"
          placeholder="请选择Date Issued"
          value-format="yyyy-MM-dd"
          disabled
        ></c-date-picker>
      </el-form-item>
    </c-col>
    <c-col :span="12">
      <el-form-item label="Shipment Date" prop="ledgrp.rec.shpdat">
        <c-date-picker
          type="date"
          v-model="model.ledgrp.rec.shpdat"
          style="width: 100%"
          placeholder="请选择Shipment Date"
          value-format="yyyy-MM-dd"
          disabled
        ></c-date-picker>
      </el-form-item>
    </c-col>
      </c-col>

    <c-col :span="24">
      <c-col :span="12">
      <el-form-item label="Date/Place of Expiry" prop="ledgrp.rec.expdat">
        <c-date-picker
          type="date"
          v-model="model.ledgrp.rec.expdat"
          style="width: 100%"
          placeholder="请选择Date/Place of Expiry"
          value-format="yyyy-MM-dd"
          disabled
        ></c-date-picker>
      </el-form-item>
    </c-col>
        <c-col :span="12">
      <el-form-item label="" label-width="5px" prop="ledgrp.rec.expplc">
        <c-input
          v-model="model.ledgrp.rec.expplc"
          maxlength="29"
          placeholder="请输入Date/Place of Expiry"
          value-format="yyyy-MM-dd"
          disabled
        ></c-input>
      </el-form-item>
    </c-col>
    </c-col>

        <c-col :span="24">
      <el-form-item label="Form of L/C" prop="ledgrp.rec.lcrtyp">
        <c-select
          v-model="model.ledgrp.rec.lcrtyp"
          style="width: 100%"
          placeholder="请选择Form of L/C"
          disabled
          :code="codes.lcrtyp"
        >
        </c-select>
      </el-form-item>
    </c-col>
      
    </c-col>

        <!-- ========================上半部分的右边======================= -->
    <c-col :span="11" :offset="1">
          <c-col :span="24">
      <el-form-item label="Applicant Ref." prop="ledgrp.apl.pts.ref">
        <c-input
          v-model="model.ledgrp.apl.pts.ref"
          maxlength="16"
          placeholder="请输入Applicant"
          disabled
        ></c-input>
      </el-form-item>
    </c-col>
        <c-col :span="24">
      <el-form-item label="" prop="ledgrp.apl.pts.nam">
        <c-input
          v-model="model.ledgrp.apl.pts.nam"
          maxlength="40"
          placeholder="请输入Name of Party"
          disabled
        ></c-input>
      </el-form-item>
    </c-col>

        <c-col :span="24">
      <el-form-item label="Iss. Bank Original LC No" prop="ledgrp.iss.pts.ref">
        <c-input
          v-model="model.ledgrp.iss.pts.ref"
          maxlength="16"
          placeholder="请输入Iss. Bank"
          disabled
        ></c-input>
      </el-form-item>
    </c-col>
        <c-col :span="24">
      <el-form-item label="" prop="ledgrp.iss.pts.nam">
        <c-input
          v-model="model.ledgrp.iss.pts.nam"
          maxlength="40"
          placeholder="请输入Name of Party"
          disabled
        ></c-input>
      </el-form-item>
    </c-col>

        <c-col :span="24">
      <el-form-item label="Beneficiary Ref." prop="ledgrp.ben.pts.ref">
        <c-input
          v-model="model.ledgrp.ben.pts.ref"
          maxlength="16"
          placeholder="请输入Beneficiary"
          disabled
        ></c-input>
      </el-form-item>
    </c-col>
        <c-col :span="24">
      <el-form-item label="" prop="ledgrp.ben.pts.nam">
        <c-input
          v-model="model.ledgrp.ben.pts.nam"
          maxlength="40"
          placeholder="请输入Name of Party"
          disabled
        ></c-input>
      </el-form-item>
    </c-col>
        <c-col :span="24">
      <el-form-item label="Confirmation text" prop="letp0.cnftxt">
        <c-input
          v-model="model.letp0.cnftxt"
          maxlength="40"
          placeholder="请输入Confirmation text"
          disabled
        ></c-input>
      </el-form-item>
    </c-col>
    </c-col>
          
    </c-row>

          <!-- ========================下半部分======================= -->
    <c-row>
    <c-col :span="12">
      <c-col :span="24">
        <el-form-item label="Narrative" prop="letcanf.strinf">
          <c-fullbox>
            <c-input
              type="textarea"
              v-model="model.letcanf.strinf"
              maxlength="1750"
              :rows="5"
              show-word-limit
              placeholder="请输入Narrative"
            ></c-input>
            <template slot="footer">
              <!-- @click="onCanletButtxmsel" -->
              <c-button
                size="small"
                type="primary"
                icon="el-icon-search"
                @click="showGridPromptDialog('letcanp.canlet.buttxmsel', null, null,{TXT: 'letcanf.strinf'}, {TXT: false},'doxpDialog')"
              >
                ...
              </c-button>
            </template>
          </c-fullbox>
        </el-form-item>
      </c-col>
      <c-col :span="18" :offset="6">
        <c-checkbox v-model="model.sndmsg">Send Message</c-checkbox>
      </c-col>
    </c-col>
          
    </c-row>

    <!--
      <c-col :span="12">
      <el-form-item label="Drag  Drop Sender" prop="letp0.recget.sdamod.dadsnd">
        <c-input
          v-model="model.letp0.recget.sdamod.dadsnd"
          placeholder="请输入Drag  Drop Sender"
        ></c-input>
      </el-form-item>
    </c-col>

    <c-col :span="12">
      <el-form-item label="Reference" prop="ledgrp.rec.ownref">
        <c-input
          v-model="model.ledgrp.rec.ownref"
          maxlength="16"
          placeholder="请输入Reference"
        ></c-input>
      </el-form-item>
    </c-col>

    <c-col :span="12">
      <el-form-item label="Name" prop="ledgrp.rec.nam">
        <c-input
          v-model="model.ledgrp.rec.nam"
          maxlength="40"
          placeholder="请输入Name"
        ></c-input>
      </el-form-item>
    </c-col>

    <c-col :span="12">
      <el-form-item label="L/C Amount" prop="ledgrp.cbs.nom1.cur">
        <c-input
          v-model="model.ledgrp.cbs.nom1.cur"
          maxlength="3"
          placeholder="请输入L/C Amount"
        ></c-input>
      </el-form-item>
    </c-col>

    <c-col :span="12">
      <el-form-item label="Balance" prop="ledgrp.cbs.nom1.amt">
        <c-input
          v-model="model.ledgrp.cbs.nom1.amt"
          placeholder="请输入Balance"
        ></c-input>
      </el-form-item>
    </c-col>

    <c-col :span="12">
      <c-checkbox v-model="model.letp0.aammod.addamtflg"
        >Add. Amount</c-checkbox
      >
    </c-col>

    <c-col :span="12">
      <el-form-item label="Applicant" prop="ledgrp.apl.pts.ref">
        <c-input
          v-model="model.ledgrp.apl.pts.ref"
          maxlength="16"
          placeholder="请输入Applicant"
        ></c-input>
      </el-form-item>
    </c-col>

    <c-col :span="12">
      <el-form-item label="Open Amount" prop="ledgrp.cbs.opn1.cur">
        <c-input
          v-model="model.ledgrp.cbs.opn1.cur"
          maxlength="3"
          placeholder="请输入Open Amount"
        ></c-input>
      </el-form-item>
    </c-col>

    <c-col :span="12">
      <el-form-item label="Balance" prop="ledgrp.cbs.opn1.amt">
        <c-input
          v-model="model.ledgrp.cbs.opn1.amt"
          placeholder="请输入Balance"
        ></c-input>
      </el-form-item>
    </c-col>

    <c-col :span="12">
      <c-checkbox v-model="model.ledgrp.rec.revflg">Revolving Flag</c-checkbox>
    </c-col>

    <c-col :span="12">
      <el-form-item label="Name of Party" prop="ledgrp.apl.pts.nam">
        <c-input
          v-model="model.ledgrp.apl.pts.nam"
          maxlength="40"
          placeholder="请输入Name of Party"
        ></c-input>
      </el-form-item>
    </c-col>

    <c-col :span="12">
      <el-form-item label="Available with" prop="ledgrp.avbnam">
        <c-input
          v-model="model.ledgrp.avbnam"
          maxlength="40"
          placeholder="请输入Available with"
        ></c-input>
      </el-form-item>
    </c-col>

    <c-col :span="12">
      <el-form-item label="Iss. Bank" prop="ledgrp.iss.pts.ref">
        <c-input
          v-model="model.ledgrp.iss.pts.ref"
          maxlength="16"
          placeholder="请输入Iss. Bank"
        ></c-input>
      </el-form-item>
    </c-col>

    <c-col :span="12">
      <el-form-item label="Available by [AVBBY0]" prop="ledgrp.rec.avbby">
        <c-select
          v-model="model.ledgrp.rec.avbby"
          style="width: 100%"
          placeholder="请选择Available by [AVBBY0]"
        >
        </c-select>
      </el-form-item>
    </c-col>

    <c-col :span="12">
      <c-checkbox v-model="model.ledgrp.rec.redclsflg"
        >Red/Green Clause</c-checkbox
      >
    </c-col>

    <c-col :span="12">
      <el-form-item label="Name of Party" prop="ledgrp.iss.pts.nam">
        <c-input
          v-model="model.ledgrp.iss.pts.nam"
          maxlength="40"
          placeholder="请输入Name of Party"
        ></c-input>
      </el-form-item>
    </c-col>

    <c-col :span="12">
      <el-form-item label="Date Issued" prop="ledgrp.rec.opndat">
        <c-date-picker
          type="date"
          v-model="model.ledgrp.rec.opndat"
          style="width: 100%"
          placeholder="请选择Date Issued"
        ></c-date-picker>
      </el-form-item>
    </c-col>

    <c-col :span="12">
      <el-form-item label="Shipment Date" prop="ledgrp.rec.shpdat">
        <c-date-picker
          type="date"
          v-model="model.ledgrp.rec.shpdat"
          style="width: 100%"
          placeholder="请选择Shipment Date"
        ></c-date-picker>
      </el-form-item>
    </c-col>

    <c-col :span="12">
      <el-form-item label="Beneficiary" prop="ledgrp.ben.pts.ref">
        <c-input
          v-model="model.ledgrp.ben.pts.ref"
          maxlength="16"
          placeholder="请输入Beneficiary"
        ></c-input>
      </el-form-item>
    </c-col>

    <c-col :span="12">
      <el-form-item label="Date/Place of Expiry" prop="ledgrp.rec.expdat">
        <c-date-picker
          type="date"
          v-model="model.ledgrp.rec.expdat"
          style="width: 100%"
          placeholder="请选择Date/Place of Expiry"
        ></c-date-picker>
      </el-form-item>
    </c-col>

    <c-col :span="12">
      <el-form-item label="Date/Place of Expiry" prop="ledgrp.rec.expplc">
        <c-input
          v-model="model.ledgrp.rec.expplc"
          maxlength="29"
          placeholder="请输入Date/Place of Expiry"
        ></c-input>
      </el-form-item>
    </c-col>

    <c-col :span="12">
      <el-form-item label="Name of Party" prop="ledgrp.ben.pts.nam">
        <c-input
          v-model="model.ledgrp.ben.pts.nam"
          maxlength="40"
          placeholder="请输入Name of Party"
        ></c-input>
      </el-form-item>
    </c-col>

    <c-col :span="12">
      <el-form-item label="Form of L/C" prop="ledgrp.rec.lcrtyp">
        <c-select
          v-model="model.ledgrp.rec.lcrtyp"
          style="width: 100%"
          placeholder="请选择Form of L/C"
        >
        </c-select>
      </el-form-item>
    </c-col>

    <c-col :span="12">
      <el-form-item label="Confirmation text" prop="letp0.cnftxt">
        <c-input
          v-model="model.letp0.cnftxt"
          maxlength="40"
          placeholder="请输入Confirmation text"
        ></c-input>
      </el-form-item>
    </c-col>

    <c-col :span="12">
      <el-form-item label="Narrative" prop="letcanf.strinf">
        <c-input
          type="textarea"
          v-model="model.letcanf.strinf"
          maxlength="50"
          show-word-limit
          placeholder="请输入Narrative"
        ></c-input>
      </el-form-item>
    </c-col>

    <c-col :span="12">
      <c-button
        size="small"
        type="primary"
        icon="el-icon-search"
        @click="onCanletButtxmsel"
      >
        ...
      </c-button>
    </c-col>

    <c-col :span="12">
      <c-checkbox v-model="model.sndmsg">Send Message</c-checkbox>
    </c-col>
      -->
  </div>
</template>
<script>
import Api from '~/service/Api'
import commonProcess from '~/mixin/commonProcess'
import CodeTable from '~/config/CodeTable'
import Event from '~/model/Letcan/Event'
import Utils from '~/utils'
import Ptap from '~/views/Public/Ptap'

export default {
  components: { 'c-ptap': Ptap },
  inject: ['root'],
  props: ['model', 'codes'],
  mixins: [commonProcess],
  data() {
    return {
      // watch:{
      //     ownref(newValue){
      //         this.model.ledgrp.rec.ownref = newValue;
      //     }
      // }
    }
  },
  methods: {
    ...Event,
  },
  created: function () {},
}

// let vm = new Vue({
// el="#ownref",date:{}
// });
</script>
<style></style>