<template>
  <div class="eibs">
      <c-col :span="24" style="padding-top: 20px">
        <!-- ====================左边======================= -->
        <c-col :span="12" style="padding-right: 20px;">
          <c-col :span="24" >
            <el-form-item
                    label="Reference"
                    prop="oldledgrp.rec.ownref"
                    style="width: 100%"
            >
              <c-fullbox>
                <c-input
                        v-model="model.oldledgrp.rec.ownref"
                        maxlength="16"
                        placeholder=""
                        style="width: 98%"
                        :disabled="true"
                >
                </c-input>
                <template slot="footer">
                  <c-button
                          style="margin: 0 0"
                          size="small"
                          type="primary"
                          disabled
                  >
                    Get Ref
                  </c-button>
                </template>
              </c-fullbox>
            </el-form-item>
          </c-col>
          <!-- Form of L/C -->
          <c-col :span="24">
            <el-form-item label="Form of L/C" prop="oldledgrp.rec.lcrtyp">
              <c-select
                      v-model="model.oldledgrp.rec.lcrtyp"
                      style="width: 100%"
                      placeholder=""
                      :filterKey="['I','IT']" dbCode="LCRTYP"
                      disabled
              >
              </c-select>
            </el-form-item>
          </c-col>

          <!-- responsible user -->
          <c-col :span="24" >
              <el-form-item label="Responsible User" prop="oldledgrp.rec.ownusr">
                <c-fullbox>
                  <c-input
                          v-model="model.oldledgrp.rec.ownusr"
                          maxlength="8"
                          placeholder=""
                          disabled
                  ></c-input>
                </c-fullbox>
              </el-form-item>
          </c-col>

          <!-- nominal amount -->
          <c-col :span="24" class="custom-box-wrap">
                <el-form-item label="Nominal Amount" prop="oldledgrp.cbs.nom1.cur">
                  <c-select-cur v-model="model.oldledgrp.cbs.nom1.cur" style="width: 115px" placeholder="" dbCode="curtxt" sort="SRT"
                            disabled
                  >
                  </c-select-cur>
                </el-form-item>
              <div class="box-3">
                <el-form-item label-width="5px" prop="oldledgrp.cbs.nom1.amt">
                  <c-input-currency v-model="model.oldledgrp.cbs.nom1.amt" :currency="model.oldledgrp.cbs.nom1.cur"   @keyup.enter.native="$event.target.blur()"
                                    disabled
                                    style="width:100%" placeholder="">
                  </c-input-currency>
                </el-form-item>
              </div>
            <div class="box-2">
              <c-checkbox v-model="model.letp.addamtflg" true-label="X" false-label=""
                          disabled
                          @change="openAddAmount" class="checkbox-left">
                Add. Amount
              </c-checkbox>
            </div>
          </c-col>

          <!-- Additional Amount, 附加金额-->
          <div v-if="model.letp.addamtflg == 'X'">
            <c-col :span="24">
              <c-col :span="13">
                <el-form-item label="Additional Amount" prop="oldledgrp.cbs.max2.cur">
                  <c-select v-model="model.oldledgrp.cbs.max2.cur" style="width:100%" disabled>
                  </c-select>
                </el-form-item>
              </c-col>
              <c-col :span="11">
                <el-form-item label="" label-width="5px" prop="oldledgrp.cbs.max2.amt">
                  <c-input-currency v-model="model.oldledgrp.cbs.max2.amt" :currency="model.oldledgrp.cbs.max2.cur" placeholder="" disabled></c-input-currency>

                </el-form-item>
              </c-col>
            </c-col>

            <c-col :span="24">
              <c-col :span="13">
                <el-form-item label="Open Add. Amount" prop="oldledgrp.cbs.opn2.cur">
                  <c-select v-model="model.oldledgrp.cbs.opn2.cur" style="width:100%" placeholder="" disabled>
                  </c-select>
                </el-form-item>
              </c-col>
              <c-col :span="11">
                <el-form-item label="" label-width="5px" prop="oldledgrp.cbs.opn2.amt">
                  <c-input-currency v-model="model.oldledgrp.cbs.opn2.amt" :currency="model.oldledgrp.cbs.opn2.cur" placeholder="" disabled></c-input-currency>
                </el-form-item>
              </c-col>
            </c-col>

            <c-col :span="24">
              <el-form-item label="Additional Amounts Covered" prop="oldledgrp.blk.addamtcov">
                <c-input type="textarea"
                         v-model="model.oldledgrp.blk.addamtcov" maxlength="140" disabled show-word-limit
                         placeholder="" rows="4" >

                </c-input>
              </el-form-item>
            </c-col>
          </div>

          <!-- Amount Tolerance +/- -->
          <c-col :span="24" >
            <c-col :span="13">
              <el-form-item label="Amount Tolerance +/-" prop="oldledgrp.rec.nomtop">
                <c-input
                        v-model.number="model.oldledgrp.rec.nomtop"
                        maxlength="2"
                        placeholder=""
                        style="min-width: 100px"
                        @keyup.enter.native="$event.target.blur()"
                        class="m-input-currency"
                        disabled
                ></c-input>
              </el-form-item>
            </c-col>
            <c-col :span="11">
              <el-form-item label-width="5px" prop="oldledgrp.rec.nomton">
                <c-input
                        v-model.number="model.oldledgrp.rec.nomton"
                        maxlength="2"
                        placeholder=""
                        style="min-width: 100px"
                        @keyup.enter.native="$event.target.blur()"
                        class="m-input-currency"
                        disabled
                ></c-input>
              </el-form-item>
            </c-col>
          </c-col>

          <c-col :span="24">
              <el-form-item label="Amount Specification" prop="oldledgrp.rec.nomspc">
                <c-select
                        v-model="model.oldledgrp.rec.nomspc"
                        placeholder="Amount Specification"
                        dbCode="NOMSPC"
                        disabled
                >
                </c-select>
              </el-form-item>
          </c-col>

          <!-- Maximum Amount -->
          <c-col :span="13">
            <el-form-item label="Maximum Amount" prop="oldledgrp.cbs.max.cur">
              <c-select-cur
                      v-model="model.oldledgrp.cbs.max.cur"
                      style="width: 100%"
                      placeholder=""
                      dbCode="curtxt" sort="SRT"
                      disabled
              >
              </c-select-cur>
            </el-form-item>
          </c-col>
          <c-col :span="11">
            <el-form-item label="" label-width="5px" prop="oldledgrp.cbs.max.amt">
              <c-input-currency
                      disabled
                      :value="model.oldledgrp.cbs.max.amt"
                      placeholder=""
                      class="m-input-currency"
              ></c-input-currency>
            </el-form-item>
          </c-col>
          <!-- Additional Amount, 附加金额-->
          <div v-if="model.swiadd.addamtflg == 'X'">
            <c-col :span="24">
              <c-col :span="13">
                <el-form-item label="Additional Amount" prop="oldledgrp.cbs.max2.cur">
                  <c-select v-model="model.oldledgrp.cbs.max2.cur" style="width:100%" disabled>
                  </c-select>
                </el-form-item>
              </c-col>
              <c-col :span="11">
                <el-form-item label="" label-width="5px" prop="oldledgrp.cbs.max2.amt">
                  <c-input-currency v-model="model.oldledgrp.cbs.max2.amt"
                                    :currency="model.oldledgrp.cbs.max2.cur"
                                    disabled
                                    placeholder=""></c-input-currency>

                </el-form-item>
              </c-col>
            </c-col>

            <c-col :span="24">
              <c-col :span="13">
                <el-form-item label="Open Add. Amount" prop="oldledgrp.cbs.opn2.cur">
                  <c-select v-model="model.oldledgrp.cbs.opn2.cur" style="width:100%" placeholder="" disabled>
                  </c-select>
                </el-form-item>
              </c-col>
              <c-col :span="11">
                <el-form-item label="" label-width="5px" prop="oldledgrp.cbs.opn2.amt">
                  <c-input-currency v-model="model.oldledgrp.cbs.opn2.amt" :currency="model.oldledgrp.cbs.opn2.cur" placeholder="" disabled></c-input-currency>
                </el-form-item>
              </c-col>
            </c-col>

            <c-col :span="24">
              <el-form-item label="Additional Amounts Covered" prop="oldledgrp.blk.addamtcov">
                <c-input type="textarea"
                         v-model="model.oldledgrp.blk.addamtcov" maxlength="140"
                         disabled
                         show-word-limit
                         placeholder="" rows="4" >

                </c-input>
              </el-form-item>
            </c-col>
          </div>

          <!-- in (place)/counters of -->
          <c-col :span="24">
            <el-form-item label="in (Place)/ counters of" prop="oldledgrp.rec.expplc">
              <c-input
                      v-model="model.oldledgrp.rec.expplc"
                      maxlength="29"
                      placeholder=""
                      disabled
              ></c-input>
            </el-form-item>
          </c-col>
          <!-- Confirmation Instruct.Received -->
          <c-col :span="24">
            <el-form-item label="Confirmation Instruct.Received" prop="oldledgrp.rec.cnfdet">
              <c-select
                      v-model="model.oldledgrp.rec.cnfdet"
                      style="width: 100%"
                      placeholder=""
                      dbCode="CNFFLG"
                      disabled
              >
              </c-select>
            </el-form-item>
          </c-col>
          <!-- Applicable rules -->
          <c-col :span="24">
            <el-form-item label="Applicable rules" prop="oldledgrp.rec.apprul">
              <c-select
                      v-model="model.oldledgrp.rec.apprul"
                      style="width: 100%"
                      placeholder=""
                      dbCode="APPRL1" sort="SRT"
                      disabled
              >
              </c-select>
            </el-form-item>
          </c-col>
          <!-- Other Applicable rules -->
          <c-col :span="24">
            <el-form-item label="Other Applicable rules" prop="oldledgrp.rec.apprultxt">
              <c-input
                      v-model="model.oldledgrp.rec.apprultxt"
                      maxlength="35"
                      placeholder=""
                      disabled
              ></c-input>
            </el-form-item>
          </c-col>

          <!-- country or region code -->
          <c-col :span="24">
            <el-form-item  prop="oldledgrp.rec.stacty" label="Country or region Code">
              <c-select
                      v-model="model.oldledgrp.rec.stacty"
                      style="width: 100%"
                      placeholder=""
                      dbCode="CTYTXT"
                      disabled
              >
              </c-select>
            </el-form-item>
          </c-col>

        </c-col>

        <!-- ========================右边======================= -->
        <c-col :span="12" style="padding-left: 20px;">
          <c-col :span="24">
            <div  style="width:100%;">
              <el-form-item
                      prop="oldledgrp.rec.preadvdt"
											label="Date Pre-advised"
              >
                <c-date-picker
                        disabled
                        type="date"
                        v-model="model.oldledgrp.rec.preadvdt"
                        style="min-width: 130px"
                        value-format="yyyy-MM-dd"
                        placeholder=""
                >
                </c-date-picker>
              </el-form-item>
            </div>
          </c-col>

          <!-- Issued on -->
          <c-col :span="24">
            <div >
                <el-form-item label="Issued on" prop="oldledgrp.rec.opndat">
                  <c-date-picker
                          type="date"
                          v-model="model.oldledgrp.rec.opndat"
                          style="min-width: 130px"
                          value-format="yyyy-MM-dd"
                          placeholder=""
                          disabled
                  >
                  </c-date-picker>
                </el-form-item>
            </div>
          </c-col>
          <!-- shipment date -->
          <c-col :span="24">
            <div style="width: 100%;display: flex;align-items: center;justify-content: flex-start;">
              <div   style="width: 100%;">
                <el-form-item label="Shipment Date" prop="oldledgrp.rec.shpdat">
                  <c-date-picker
                          type="date"
                          v-model="model.oldledgrp.rec.shpdat"
                          style="min-width: 130px"
                          placeholder=""
                          value-format="yyyy-MM-dd"
                          disabled
                  >
                  </c-date-picker>
                </el-form-item>
              </div>
            </div>

          </c-col>

          <!-- expiring on -->
          <c-col :span="24">
            <el-form-item label="Expiring on" prop="oldledgrp.rec.expdat">
              <c-date-picker
                      type="date"
                      v-model="model.oldledgrp.rec.expdat"
                      style="width: 100%;min-width: 130px"
                      value-format="yyyy-MM-dd"
                      placeholder="please select a date"
                      disabled
              >
              </c-date-picker>
            </el-form-item>
          </c-col>
          <!-- Shipment Period -->
          <c-col :span="24">
            <el-form-item label="Shipment Period" prop="oldledgrp.blk.shpper">
              <!-- maxlength 65*6, view-lines 4 -->
              <c-input
                      type="textarea"
                      v-model="model.oldledgrp.blk.shpper"
                      :rows="4"
                      maxlength="390"
                      show-word-limit
                      placeholder=""
                      disabled
              ></c-input>
            </el-form-item>
          </c-col>

          <!-- 交单期限 Days of Presentation period-->
          <c-col :span="24">
            <el-form-item label="Presentation Period" prop="oldledgrp.rec.prepers18">
              <c-fullbox>
                <c-input
                        v-model.number="model.oldledgrp.rec.prepers18"
                        maxlength="3"
                        placeholder=""
                        disabled
                ></c-input>
                <template slot="footer">
                  <!-- @click="onPreperButtxmsel" -->
                  <c-button
                          size="small"
                          type="primary"
                          icon="el-icon-more"
                          @click="showGridPromptDialog('letp.preper.buttxmsel', null, null,{TXT: 'oldledgrp.rec.prepers18'}, {TXT: false},'doxpDialog')"
                          disabled
                  >
                  </c-button>
                </template>
              </c-fullbox>
            </el-form-item>
          </c-col>

          <!-- Presentation period text -->
          <c-col :span="24">
            <el-form-item
                    label=""
                    prop="oldledgrp.rec.prepertxts18"
            >
              <c-input
                      v-model="model.oldledgrp.rec.prepertxts18"
                      maxlength="35"
                      placeholder=""
                      disabled
              ></c-input>
            </el-form-item>
          </c-col>

          <!-- Partial shipment -->
          <c-col :span="24">
            <el-form-item label="Partial shipment" prop="oldledgrp.rec.shppars18">
              <c-select
                      v-model="model.oldledgrp.rec.shppars18"
                      style="width: 100%"
                      placeholder=""
                      dbCode="SHPPA1"
                      disabled
              >
              </c-select>
            </el-form-item>
          </c-col>
          <!-- Transshipment -->
          <c-col :span="24">
            <el-form-item label="Transhipment" prop="oldledgrp.rec.shptrss18">
              <c-select
                      v-model="model.oldledgrp.rec.shptrss18"
                      style="width: 100%"
                      placeholder=""
                      dbCode="SHPTRS"
                      disabled
              >
              </c-select>
            </el-form-item>
          </c-col>


          <!-- Revolving L/C -->
          <c-col :span="12">
            <el-form-item class="checkbox-left">
            <c-checkbox v-model="model.oldledgrp.rec.revflg" disabled true-label="X" false-label="">Revolving L/C</c-checkbox>
            </el-form-item>
          </c-col>

          <!-- Non-Bank Issuer -->
          <c-col :span="12">
            <el-form-item class="checkbox-left">
            <c-checkbox v-model="model.oldledgrp.rec.nonban" disabled true-label="X" false-label=""> Non-Bank Issuer</c-checkbox>
            </el-form-item>
          </c-col>

          <!-- Test Key Unconfirmity -->
          <c-col :span="12">
            <el-form-item class="checkbox-left">
            <c-checkbox v-model="model.oldledgrp.rec.teskeyunc" disabled true-label="X" false-label="">Test Key Unconfirmity</c-checkbox>
            </el-form-item>
          </c-col>

        </c-col>

      </c-col>

  </div>
</template>
<script>
import event from "../event";

export default {
  inject: ['root'],
  props: ['model', 'codes'],
  mixins: [event],
  data() {
    return {}
  },
  computed:{
/*    maxcur(){
      this.model.oldledgrp.cbs.max.cur = this.model.oldledgrp.cbs.nom1.cur
      return this.model.oldledgrp.cbs.max.cur
    },
    maxamt() {
      this.model.oldledgrp.cbs.max.amt = parseFloat(this.model.oldledgrp.cbs.nom1.amt * (1 + this.model.oldledgrp.rec.nomtop / 100)).toFixed(2)
      return this.model.oldledgrp.cbs.max.amt
    },

    max2cur(){
      this.model.oldledgrp.cbs.max2.cur = this.model.oldledgrp.cbs.max.cur
      return this.model.oldledgrp.cbs.max2.cur
    },
    opn2cur(){
      this.model.oldledgrp.cbs.opn2.cur = this.model.oldledgrp.cbs.max.cur
      return this.model.oldledgrp.cbs.opn2.cur
    },

    opn2amt(){
      this.model.oldledgrp.cbs.opn2.amt = parseFloat(this.model.oldledgrp.cbs.max2.amt).toFixed(3)
      return this.model.oldledgrp.cbs.opn2.amt
    },

    getBlkAddamtcov(){
      this.model.oldledgrp.blk.addamtcov = this.model.oldledgrp.cbs.opn2.cur + " " +this.model.oldledgrp.cbs.opn2.amt
      return this.model.oldledgrp.blk.addamtcov
    }*/
  },
}
</script>
<style>

</style>