<template>
  <div class="eibs">
    <!-- 顶部 -->
    <c-col :span="24">
      <c-col :span="12" style="padding-right: 20px;">
        <el-form-item
            label="信用证编号"
            prop="ledgrp.rec.ownref"
            style="width: 100%"
        >
          <c-fullbox>
            <c-input
                v-model="model.ledgrp.rec.ownref"
                maxlength="16"
                placeholder="请输入信用证编号"
                style="width: 95%"
                :disabled="true"
            ></c-input>
            <template slot="footer">
              <c-button
                  style="margin: 0 10px 0 0; padding: 0 12px"
                  size="small"
                  type="primary"
                  icon="el-icon-info"
              >

              </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="onLitpButgetref"
              >
                获取
              </c-button>
            </template>
          </c-fullbox>
        </el-form-item>
      </c-col>

      <c-col :span="12" style="padding-left: 20px;">
        <el-form-item label="简略信息" prop="ledgrp.rec.nam">
          <c-input
              v-model="model.ledgrp.rec.nam"
              maxlength="40"
              placeholder="请输入"
              disabled
          ></c-input>
        </el-form-item>
      </c-col>
    </c-col>

    <!-- left -->
    <c-col :span="12" style="padding-right: 20px;">
      <c-col :span="24">
        <el-form-item label="信用证类型" prop="ledgrp.rec.lcrtyp">
          <c-select
              v-model="model.ledgrp.rec.lcrtyp"
              style="width: 100%"
              placeholder="请选择信用证类型"
              :code="codes.lcrtyp"
          >
          </c-select>
        </el-form-item>
      </c-col>

      <c-col :span="24">
        <c-col :span="19">
          <el-form-item
              label="客户经理"
              prop="letp.usr.extkey"
              style="width: 100%"
          >
            <c-fullbox>
              <c-input
                  v-model="model.letp.usr.extkey"
                  maxlength="8"
                  placeholder="请输入客户经理"
                  disabled
              ></c-input>
              <template slot="footer">
                <c-button
                    style="margin-left: 10px; padding: 0 10px"
                    size="small"
                    icon="el-icon-search"
                    type="primary"
                >
                </c-button>
              </template>
            </c-fullbox>
          </el-form-item>
        </c-col>
        <c-col :span="5">
          <c-checkbox
              :disabled="true"
              v-model="model.ledgrp.rec.collflg"
              style="margin-left: 10px"
          >担保信用证
          </c-checkbox
          >
        </c-col>
      </c-col>

      <c-col :span="24">
        <c-col :span="12">
          <el-form-item label="信用证金额" prop="ledgrp.cbs.nom1.cur">
            <c-select
                v-model="model.ledgrp.cbs.nom1.cur"
                style="width: 100%"
                placeholder="请选择币种"
                :code="codes.curtxt1"
            >
            </c-select>
          </el-form-item>
        </c-col>

        <c-col :span="7">
          <el-form-item label="" label-width="20px" prop="ledgrp.cbs.nom1.amt">
            <c-input-currency
                v-model="model.ledgrp.cbs.nom1.amt"
                style="text-align: left; width: 100%"
                placeholder="请输入金额"
                @keyup.enter.native="$event.target.blur()"
            ></c-input-currency>
          </el-form-item>
        </c-col>

        <c-col :span="5">
          <c-checkbox
              v-model="model.letp.aamp.aammod.addamtflg"
              style="margin-left: 10px"
          >附加金额
          </c-checkbox
          >
        </c-col>
      </c-col>

      <c-col :span="24">
        <c-col :span="12">
          <el-form-item label="溢短装" prop="ledgrp.rec.nomtop">
            <c-input
                v-model.number="model.ledgrp.rec.nomtop"
                maxlength="2"
                style="width: 100%"
                placeholder="请输入金额上浮"
                @keyup.enter.native="$event.target.blur()"
                class="m-input-currency"
            ></c-input>
          </el-form-item>
        </c-col>
        <c-col :span="7">
          <el-form-item label="" label-width="20px" prop="ledgrp.rec.nomton">
            <c-input
                v-model.number="model.ledgrp.rec.nomton"
                maxlength="2"
                style="width: 100%"
                placeholder="请输入金额下浮"
                @keyup.enter.native="$event.target.blur()"
                class="m-input-currency"
            ></c-input>
          </el-form-item>
        </c-col>
        <c-col :span="5">
          <c-checkbox
              v-model="model.ledgrp.rec.inctrf"
              disabled
              style="margin-left: 10px"
          >Incoming Transfer
          </c-checkbox
          >
        </c-col>
      </c-col>

      <c-col :span="24">
        <c-col :span="19">
          <el-form-item label="金额限额表述" prop="ledgrp.rec.nomspc">
            <c-select
                v-model="model.ledgrp.rec.nomspc"
                style="width: 100%"
                placeholder="请输入金额限额表述"
                :code="codes.nomspc"
                :disabled="true"
            >
            </c-select>
          </el-form-item>
        </c-col>
        <c-col :span="5">
          <c-checkbox v-model="resflg" style="margin-left: 10px"
          >保留合同
          </c-checkbox
          >
        </c-col>
      </c-col>

      <c-col :span="24">
        <c-col :span="12">
          <el-form-item label="最大金额" prop="ledgrp.cbs.max.cur">
            <c-select
                v-model="maxcur"
                style="width: 100%"
                placeholder="请选择币种"
                disabled
                :code="codes.curtxt1"
            >
            </c-select>
          </el-form-item>
        </c-col>

        <c-col :span="12">
          <el-form-item label="" label-width="20px" prop="ledgrp.cbs.max.amt">
            <c-input
                v-model="maxamt"
                placeholder="请输入金额"
                class="m-input-currency"
                disabled
            ></c-input>
          </el-form-item>
        </c-col>
      </c-col>

      <c-col :span="24">
        <c-col :span="12">
          <el-form-item label="开证日期" prop="ledgrp.rec.opndat">
            <c-date-picker
                type="date"
                v-model="model.ledgrp.rec.opndat"
                style="width: 100%"
                placeholder="请选择日期"
            ></c-date-picker>
          </el-form-item>
        </c-col>
        <c-col :span="12">
          <el-form-item
              label="预通知日期"
              label-width="130px"
              prop="ledgrp.rec.preadvdt"
          >
            <c-date-picker
                type="date"
                v-model="model.ledgrp.rec.preadvdt"
                style="width: 100%"
                placeholder="请选择日期"
                disabled
            ></c-date-picker>
          </el-form-item>
        </c-col>
      </c-col>

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

        <c-col :span="12">
          <el-form-item
              label="复核日期"
              label-width="130px"
              prop="ledgrp.rec.advdat"
          >
            <c-date-picker
                type="date"
                v-model="model.ledgrp.rec.advdat"
                style="width: 100%"
                placeholder="请选择日期"
                disabled
            ></c-date-picker>
          </el-form-item>
        </c-col>
      </c-col>

      <c-col :span="24">
        <el-form-item label="生效日期" prop="ledgrp.rec.expdat">
          <c-date-picker
              type="date"
              v-model="model.ledgrp.rec.expdat"
              style="width: 100%"
              placeholder="请选择日期"
          ></c-date-picker>
        </el-form-item>
      </c-col>

      <c-col :span="24">
        <el-form-item label="生效地点" prop="ledgrp.rec.expplc">
          <c-input
              v-model="model.ledgrp.rec.expplc"
              maxlength="29"
              placeholder="请选择地点"
          ></c-input>
        </el-form-item>
      </c-col>

      <c-col :span="24">
        <el-form-item
            label="收到的承兑指示"
            prop="ledgrp.rec.cnfdet"
        >
          <c-select
              v-model="model.ledgrp.rec.cnfdet"
              style="width: 100%"
              placeholder="请选择内容"
              :code="codes.cnfflg1"
          >
          </c-select>
        </el-form-item>
      </c-col>

      <c-col :span="24">
        <el-form-item label="适用规则" prop="ledgrp.rec.apprul">
          <c-select
              v-model="model.ledgrp.rec.apprul"
              style="width: 100%"
              placeholder="请选择适用规则"
              :code="codes.apprul1"
              @change="apprulChange"
          >
          </c-select>
        </el-form-item>
      </c-col>

      <c-col :span="24">
        <el-form-item
            label="其他适用规则"
            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>
      <c-col :span="24">
        <el-form-item label="分批装运" prop="ledgrp.rec.shppar">
          <c-select
              v-model="model.ledgrp.rec.shppar"
              style="width: 100%"
              placeholder="请选择"
              :code="codes.shptrss18"
          >
          </c-select>
        </el-form-item>
      </c-col>

      <c-col :span="24">
        <el-form-item label="转运" prop="ledgrp.rec.shptrss18">
          <c-select
              v-model="model.ledgrp.rec.shptrss18"
              style="width: 100%"
              placeholder="请选择"
              :code="codes.shptrss18"
          >
          </c-select>
        </el-form-item>
      </c-col>
    </c-col>

    <!-- right -->
    <c-col :span="12" style="padding-left: 20px;">
      <c-ptap
          :model="model"
          :argadr="{
          title: '受益人',
          grp: 'ledgrp',
          rol: 'ben',
        }"
          :disabled="true"
          @keyup.enter.native="
                queryGridEtyPromptDialogData('BEN', 'C')
              "
      >
      </c-ptap>

      <c-ptap
          :model="model"
          :argadr="{
          title: '开证行',
          grp: 'ledgrp',
          rol: 'iss',
        }"
          :disabled="true"
          @keyup.enter.native="
                queryGridEtyPromptDialogData('ISS', 'B')
              "
      >
      </c-ptap>

      <c-ptap
          :model="model"
          :argadr="{
          title: '申请人',
          grp: 'ledgrp',
          rol: 'apl',
        }"
          :disabled="true"
          @keyup.enter.native="
                queryGridEtyPromptDialogData('APL', 'C')
              "
      >
      </c-ptap>

      <c-col :span="12">

        <c-checkbox v-model="model.ledgrp.rec.revflg" class="checkbox-left" style="margin: 0px 0 10px 120px">
          循环信用证
        </c-checkbox>

      </c-col>

      <!-- Authorization to Debit -->
      <c-col :span="12">
        <c-checkbox v-model="dbtflg" style="margin: 0px 0 10px 100px">借记授权</c-checkbox>
      </c-col>

      <c-col :span="12">

        <c-checkbox v-model="nonban" class="checkbox-left" style="margin: 0px 0 10px 120px">非银行开证</c-checkbox>

      </c-col>

      <!-- Test Key Unconfirmity -->
      <c-col :span="12">
        <c-checkbox v-model="teskeyunc" style="margin: 0px 0 10px 120px">测试密钥不确定</c-checkbox>
      </c-col>
    </c-col>
  </div>
</template>
<script>
import event from "../event"
import Ptap from "~/views/Public/Ptap";

export default {
  components: {"c-ptap": Ptap},
  inject: ["root"],
  props: ["model", "codes"],
  mixins: [event],
  data() {
    return {};
  },

 watch:{
    "model.ledgrp":{
     immediate: true,
     deep: true,
     handler(val,oldval){
      const res = this.model.ledgrp
       if(res.cbs.nom1.cur !== "" || res.cbs.nom1.amt !== "" || res.apl.pts.adrblk !== "" || res.rec.stacty !== "" ){
        this.model.ledgrp.rec.nam = (res.cbs.nom1.cur.concat(" ").concat(res.cbs.nom1.amt).concat(" ").concat(res.rec.stacty).concat(".").concat(res.ben.pts.nam)).substring(0,40);
       }
     }
   },
 "model.ledgrp.iss":{
     immediate: true,
     deep: true,
     handler(val,oldval){
      if(this.model.ledgrp.iss.pts !==""){
        this.getstacty()
      }
    }
    },
      //国家地区
    async getstacty() {
    let params = {
      ptainr: this.model.ledgrp.iss.pts.ptainr
    }
    let res = await Api.post('/service/letrsv/stacty', params);
    if (res.respCode == SUCCESS) {
      this.model.ledgrp.rec.stacty = res.data;
    }
    }
   },
  computed: {
    flag() {
      return this.model.mtabut.coninf.usr.extkey == "";
    },
    resflg: {
      get() {
        return this.model.ledgrp.rec.resflg != "";
      },
      set(val) {
        this.model.ledgrp.rec.resflg = val ? "X" : "";
      },
    },
    dbtflg: {
      get() {
        return this.model.ledgrp.rec.dbtflg != "";
      },
      set(val) {
        this.model.ledgrp.rec.dbtflg = val ? "X" : "";
      },
    },
    nonban: {
      get() {
        return this.model.ledgrp.rec.nonban != "";
      },
      set(val) {
        this.model.ledgrp.rec.nonban = val ? "X" : "";
      },
    },
    teskeyunc: {
      get() {
        return this.model.ledgrp.rec.teskeyunc != "";
      },
      set(val) {
        this.model.ledgrp.rec.teskeyunc = val ? "X" : "";
      },
    },

    maxcur() {
      this.model.ledgrp.cbs.max.cur = this.model.ledgrp.cbs.nom1.cur
      return this.model.ledgrp.cbs.max.cur
    },
    maxamt() {
      this.model.ledgrp.cbs.max.amt = parseFloat(this.model.ledgrp.cbs.nom1.amt * (1 + this.model.ledgrp.rec.nomtop / 100)).toFixed(2)
      return this.model.ledgrp.cbs.max.amt
    }

  },
  methods: {
    apprulChange(v) {
      if (v !== "OTHR") {
        this.model.ledgrp.rec.apprultxt = "";
      }
    },
  },
  created: function () {
  },
  async getstacty() {
    let params = {
      ptainr: this.model.ledgrp.iss.pts.ptainr
    }
    let res = await Api.post('/service/letopn/stacty', params);
    if (res.respCode == SUCCESS) {
      this.model.ledgrp.rec.stacty = res.data;
    }
    }
};
</script>
<style>
.marginLable {
  padding-left: 160px;
}
</style>