<template>
  <div class="eibs">
      <c-col :span="24">
        <!-- ====================左边======================= -->
        <c-col :span="12" style="padding-right: 20px;">
          <c-col :span="24" >
            <el-form-item
                    label="Reference"
                    prop="ledgrp.rec.ownref"
                    style="width: 100%"
            >
              <c-fullbox>
                <c-input
                        v-model="model.ledgrp.rec.ownref"
                        maxlength="16"
                        placeholder=""
                        style="width: 98%"
                        :disabled="true"
                >
                </c-input>
                <template slot="footer">
                  <c-button
                          style="margin: 0 10px 0 10px; padding: 0 12px; height: 32px"
                          size="small"
                          type="primary"
                          icon="el-icon-search">
                  </c-button>

                  <c-button
                          style="margin: 0 0"
                          size="small"
                          type="primary"
                          :disabled="
                    model.ledgrp.ben.pts.adrblk && !model.ledgrp.rec.ownref? false: true"
                          @click="onLetpButgetref('LETDRW')"
                  >
                    获取
                  </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="ledgrp.rec.lcrtyp" :rules="[{required:model.ledgrp.rec.opndat!=null&&model.ledgrp.rec.opndat!='',message:'This field is mandatory'}]">
              <c-select
                      v-model="model.ledgrp.rec.lcrtyp"
                      style="width: 100%"
                      placeholder=""
                      :filterKey="['I','IT']" dbCode="LCRTYP"
              >
              </c-select>
            </el-form-item>
          </c-col>

          <!-- responsible user -->
          <c-col :span="24" >
              <el-form-item label="Responsible User" prop="letp.usr.extkey">
                <c-fullbox>
                  <c-input
                          v-model="model.letp.usr.extkey"
                          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="ledgrp.cbs.nom1.cur">
                  <c-select-cur v-model="model.ledgrp.cbs.nom1.cur" style="width: 115px" @change="nom1curChange" placeholder="" dbCode="curtxt" sort="SRT">
                  </c-select-cur>
                </el-form-item>
              <div class="box-3">
                <el-form-item label-width="5px" prop="ledgrp.cbs.nom1.amt">
                  <c-input-currency v-model="model.ledgrp.cbs.nom1.amt" :currency="model.ledgrp.cbs.nom1.cur"
                                    @keyup.enter.native="$event.target.blur()"
                                    style="width:100%"
                                    @change="nom1AmtChange"
                                    placeholder="">
                  </c-input-currency>
                </el-form-item>
              </div>
            <div class="box-2">
              <c-checkbox v-model="model.letp.addamtflg" true-label="X" false-label=""    @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="ledgrp.cbs.max2.cur">
                  <c-select v-model="max2cur" style="width:100%" disabled>
                  </c-select>
                </el-form-item>
              </c-col>
              <c-col :span="11">
                <el-form-item label="" label-width="5px" prop="ledgrp.cbs.max2.amt">
                  <c-input-currency v-model="model.ledgrp.cbs.max2.amt" :currency="max2cur" placeholder="" @change="addMax2Change"></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="ledgrp.cbs.opn2.cur">
                  <c-select v-model="opn2cur" style="width:100%" placeholder="" disabled>
                  </c-select>
                </el-form-item>
              </c-col>
              <c-col :span="11">
                <el-form-item label="" label-width="5px" prop="ledgrp.cbs.opn2.amt">
                  <c-input-currency v-model="model.ledgrp.cbs.opn2.amt"  :currency="opn2cur" placeholder="" disabled></c-input-currency>
                </el-form-item>
              </c-col>
            </c-col>

            <c-col :span="24">
              <el-form-item label="Additional Amounts Covered" prop="ledgrp.blk.addamtcov">
                <c-input type="textarea"
                         v-model="model.ledgrp.blk.addamtcov" maxlength="140" 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="ledgrp.rec.nomtop">
                <c-input
                        v-model.number="model.ledgrp.rec.nomtop"
                        maxlength="2"
                        @change="nomtopChange"
                        placeholder=""
                        style="min-width: 100px"
                        @keyup.enter.native="$event.target.blur()"
                        class="m-input-currency"
                ></c-input>
              </el-form-item>
            </c-col>
            <c-col :span="11">
              <el-form-item label-width="5px" prop="ledgrp.rec.nomton">
                <c-input
                        v-model.number="model.ledgrp.rec.nomton"
                        maxlength="2"
                        @change="nomtonChange"
                        placeholder=""
                        style="min-width: 100px"
                        @keyup.enter.native="$event.target.blur()"
                        class="m-input-currency"
                ></c-input>
              </el-form-item>
            </c-col>
          </c-col>

          <c-col :span="24">
              <el-form-item label="Amount Specification" prop="ledgrp.rec.nomspc">
                <c-select
                        v-model="model.ledgrp.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="ledgrp.cbs.max.cur">
              <c-select-cur
                      v-model="maxcur"
                      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="ledgrp.cbs.max.amt">
              <c-input-currency
                      disabled
                      v-model="model.ledgrp.cbs.max.amt"
                      :currency="maxcur"
                      placeholder=""
                      class="m-input-currency"
              ></c-input-currency>
            </el-form-item>
          </c-col>

          <!-- Confirmation Instruct.Received -->
          <c-col :span="24">
            <el-form-item label="Confirmation Instruct.Received" prop="ledgrp.rec.cnfdet">
              <c-select
                      v-model="model.ledgrp.rec.cnfdet"
                      style="width: 100%"
                      placeholder=""
                      dbCode="CNFFLG"
              >
              </c-select>
            </el-form-item>
          </c-col>
          <!-- Applicable rules -->
          <c-col :span="24">
            <el-form-item label="Applicable Rules" prop="ledgrp.rec.apprul">
              <c-select
                      v-model="model.ledgrp.rec.apprul"
                      style="width: 100%"
                      placeholder=""
                      dbCode="APPRL1" sort="SRT"
                      @change="apprulChange"
              >
              </c-select>
            </el-form-item>
          </c-col>
          <!-- Other Applicable rules -->
          <c-col :span="24">
            <el-form-item :rules="[{required:model.ledgrp.rec.apprul === 'OTHR',message:'This field is mandatory',trigger:'change'}]" label="Other Applicable Rules" prop="ledgrp.rec.apprultxt">
              <c-input
                      v-model="model.ledgrp.rec.apprultxt"
                      maxlength="35"
                      placeholder=""
                      :disabled="model.ledgrp.rec.apprul === 'OTHR' ? false : true"
              ></c-input>
            </el-form-item>
          </c-col>

          <!-- Partial Shipment -->
          <c-col :span="24">
            <el-form-item label="Partial Shipment" prop="ledgrp.rec.shppars18">
              <c-select
                      v-model="model.ledgrp.rec.shppars18"
                      style="width: 100%"
                      placeholder=""
                      dbCode="SHPPA1"

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

        </c-col>

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

          <!-- Issued on -->
          <c-col :span="24">
            <div >
                <el-form-item label="Issued on" prop="ledgrp.rec.opndat">
                  <c-date-picker
                          type="date"
                          v-model="model.ledgrp.rec.opndat"
                          style="min-width: 130px"
                          value-format="yyyy-MM-dd"
                          placeholder=""
                  >
                  </c-date-picker>
                </el-form-item>
            </div>
          </c-col>


          <!-- expiring on -->
          <c-col :span="24">
            <el-form-item label="Expiring on" prop="ledgrp.rec.expdat">
              <c-date-picker
                      type="date"
                      v-model="model.ledgrp.rec.expdat"
                      style="width: 100%;min-width: 130px"
                      value-format="yyyy-MM-dd"
                      placeholder="please select a date"
              >
              </c-date-picker>
            </el-form-item>
          </c-col>

          <!-- in (place)/counters of -->
          <c-col :span="24">
            <el-form-item label="in (Place)/ counters of" prop="ledgrp.rec.expplc">
              <c-input
                      v-model="model.ledgrp.rec.expplc"
                      maxlength="29"
                      placeholder=""
              ></c-input>
            </el-form-item>
          </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="ledgrp.rec.shpdat">
                  <c-date-picker
                          type="date"
                          v-model="model.ledgrp.rec.shpdat"
                          style="min-width: 130px"
                          placeholder=""
                          value-format="yyyy-MM-dd"
                          :disabled="model.ledgrp.blk.shpper!==''"
                  >
                  </c-date-picker>
                </el-form-item>
              </div>
            </div>

          </c-col>

          <!-- Shipment Period -->
          <c-col :span="24">
            <el-form-item label="Shipment Period" prop="ledgrp.blk.shpper">
              <!-- maxlength 65*6, view-lines 4 -->
              <c-input
                      type="textarea"
                      v-model="model.ledgrp.blk.shpper"
                      :rows="4"
                      maxlength="390"
                      show-word-limit
                      placeholder=""
                      :disabled="model.ledgrp.rec.shpdat!=null&&model.ledgrp.rec.shpdat!==''"
              ></c-input>
            </el-form-item>
          </c-col>

          <!-- 交单期限 Days of Presentation period-->
          <c-col :span="24">
            <el-form-item label="Presentation Period" prop="ledgrp.rec.prepers18">
              <c-fullbox>
                <c-input
                        v-model.number="model.ledgrp.rec.prepers18"
                        maxlength="3"
                        placeholder=""
                ></c-input>
              </c-fullbox>
            </el-form-item>
          </c-col>

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

          <!-- country or region code -->
          <c-col :span="24">
            <el-form-item  prop="ledgrp.rec.stacty" label="Country or Region Code">
              <c-select
                      v-model="model.ledgrp.rec.stacty"
                      style="width: 100%"
                      placeholder=""
                      dbCode="CTYTXT"
              >
              </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.ledgrp.rec.revflg" 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.ledgrp.rec.nonban" 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.ledgrp.rec.teskeyunc" 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";
import Api from "~/service/Api"
import BigNumber from "bignumber.js";

export default {
  // components: { 'c-ptap': Ptap },
  inject: ['root'],
  props: ['model', 'codes'],
  mixins: [event],
  data() {
    return {}
  },
  computed:{
    maxcur(){
      this.model.ledgrp.cbs.max.cur = this.model.ledgrp.cbs.nom1.cur;

      // 默认将将max的值赋值给opn1
      this.model.ledgrp.cbs.opn1.cur =  this.model.ledgrp.cbs.max.cur ;

      // 默认将信用证 nom1的币种，赋值给单据的max的币种
      this.model.bedgrp.cbs.max.cur =  this.model.ledgrp.cbs.nom1.cur;

      return this.model.ledgrp.cbs.max.cur
    },

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

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

  },
}
</script>
<style>

</style>