<template>
  <div class="eibs">
    <!-- ======================= 左边 ========================= -->

    <c-col :span="12" style="padding-right: 20px">
      <el-col :span="24">
        <el-form-item label="Reference(20)" prop="lidgrp.rec.ownref" style="width: 100%">
          <c-fullbox>
            <c-input v-model="model.lidgrp.rec.ownref" maxlength="16" disabled placeholder=""></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="
                  (this.model.lidgrp.rec.dkflg !== 'X' && this.model.lidgrp.apl.pts.ptainr == '') ||
                  (this.model.lidgrp.rec.dkflg === 'X' && this.model.lidgrp.apo.pts.ptainr == '')
                "
                @click="onLitpButgetref">
                获取
              </c-button>
            </template>
          </c-fullbox>
        </el-form-item>
      </el-col>

      <c-col :span="24">
        <el-form-item label="Form of L/C(40A)" prop="lidgrp.rec.lcrtyp">
          <c-select
            v-model="model.lidgrp.rec.lcrtyp"
            placeholder="请选择信用证类型"
            style="width: 100%"
            dbCode="lcrtyp"
            :filterKey="['I', 'IT']">
          </c-select>
        </el-form-item>
      </c-col>

      <c-col :span="24" class="custom-box-wrap">
        <el-form-item label="Nominal Amount(32B)" prop="lidgrp.cbs.nom1.cur">
          <c-select-cur
            v-model="model.lidgrp.cbs.nom1.cur"
            style="width: 115px"
            placeholder="请选择币种"
            dbCode="curtxt"
            sort="SRT"
            @change="onNom1curChange">
          </c-select-cur>
        </el-form-item>

        <div class="box-3">
          <el-form-item label-width="5px" prop="lidgrp.cbs.nom1.amt">
            <c-input-currency
              v-model="model.lidgrp.cbs.nom1.amt"
              :currency="model.lidgrp.cbs.nom1.cur"
              style="width: 100%"
              placeholder="请输入金额"
              @change="onNom1amtChange">
            </c-input-currency>
          </el-form-item>
        </div>

        <div class="box-2">
          <c-checkbox
            v-model="model.swiadd.addamtflg"
            true-label="X"
            false-label=""
            class="checkbox-left"
            @change="onAddamtflgChange">
            Add.Amount
          </c-checkbox>
        </div>
      </c-col>
      <c-col :span="24" class="custom-box-wrap" v-if="model.swiadd.addamtflg == 'X'">
        <el-form-item label="Additional Amount" prop="lidgrp.cbs.max2.cur">
          <c-select-cur
            v-model="model.lidgrp.cbs.max2.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="lidgrp.cbs.max2.amt">
            <c-input-currency
              v-model="model.lidgrp.cbs.max2.amt"
              :currency="model.lidgrp.cbs.max2.cur"
              style="width: 100%"
              placeholder="请输入金额"
              @change="onMax2amtChange">
            </c-input-currency>
          </el-form-item>
        </div>
      </c-col>
      <c-col :span="24" class="custom-box-wrap" v-if="model.swiadd.addamtflg == 'X'">
        <el-form-item label="Open Add.Amount" prop="lidgrp.cbs.opn2.cur">
          <c-select-cur
            v-model="model.lidgrp.cbs.opn2.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="lidgrp.cbs.opn2.amt">
            <c-input-currency
              v-model="model.lidgrp.cbs.opn2.amt"
              :currency="model.lidgrp.cbs.opn2.cur"
              style="width: 100%"
              placeholder="请输入金额"
              disabled>
            </c-input-currency>
          </el-form-item>
        </div>
      </c-col>
      <c-col :span="24" v-if="model.swiadd.addamtflg == 'X'">
        <el-form-item label="Covered(39C)" prop="lidgrp.blk.addamtcov">
          <c-mul-row-input
            type="textarea"
            v-model="model.lidgrp.blk.addamtcov"
            :rows="4"
            :cols="35"
            :autosize="{ minRows: 4, maxRows: 4 }"
            show-word-limit
            :charmod="2"
            placeholder="请输入"></c-mul-row-input>
        </el-form-item>
      </c-col>
      <c-col :span="24" class="custom-box-wrap">
        <el-form-item label="Amount Tolerance(39A) +/-" prop="lidgrp.rec.nomtop">
          <c-input
            v-model.number="model.lidgrp.rec.nomtop"
            style="width: 115px"
            maxlength="2"
            placeholder="请输入"
            @change="onNomtopChange"></c-input>
        </el-form-item>
        <div class="box-3">
          <el-form-item label-width="5px" prop="lidgrp.rec.nomton">
            <c-input v-model.number="model.lidgrp.rec.nomton" maxlength="2" placeholder="请输入"></c-input>
          </el-form-item>
        </div>
        <div class="box-2">
          <c-checkbox
            true-label="X"
            false-label="N"
            v-model="model.lidgrp.rec.dkflg"
            style="float: right; text-align: center"
            >代开信用证</c-checkbox
          >
        </div>
      </c-col>
      <c-col :span="24" class="custom-box-wrap">
        <div class="box-1">
          <div style="width: 100%">
            <el-form-item label="Amount Specification" prop="lidgrp.rec.nomspc">
              <c-select
                v-model="model.lidgrp.rec.nomspc"
                style="width: 100%"
                disabled
                placeholder="请选择"
                dbCode="nomspc">
              </c-select>
            </el-form-item>
          </div>
        </div>
        <div class="box-2">
          <c-checkbox
            v-if="this.model.needcusVisible === '1'"
            :disabled="
              (typeof this.model.trnInfo !== 'undefined' && this.model.trnInfo.sptHldflg === 'X') ||
              this.model.needcusEnable !== 'Y'
            "
            true-label="X"
            false-label=""
            class="checkbox-left"
            v-model="model.lidgrp.rec.needcuscomopn"
            >需客户确认</c-checkbox
          >
        </div>
      </c-col>

      <c-col :span="24" class="custom-box-wrap">
        <el-form-item label="Maximum Amount" prop="lidgrp.cbs.max.cur">
          <c-select-cur
            disabled
            v-model="model.lidgrp.cbs.max.cur"
            style="width: 115px"
            placeholder="请选择币种"
            dbCode="curtxt"
            sort="SRT">
          </c-select-cur>
        </el-form-item>
        <div class="box-3">
          <el-form-item label-width="5px" prop="lidgrp.cbs.max.amt">
            <c-input-currency
              disabled
              v-model="model.lidgrp.cbs.max.amt"
              :currency="model.lidgrp.cbs.max.cur"
              style="width: 100%"
              placeholder="请输入金额">
            </c-input-currency>
          </el-form-item>
        </div>
      </c-col>

      <c-col :span="24">
        <el-form-item label="Confirm. Instructions(49)" prop="lidgrp.rec.cnfdet">
          <c-select v-model="model.lidgrp.rec.cnfdet" style="width: 100%" placeholder="请选择保兑指示" dbCode="cnfflg">
          </c-select>
        </el-form-item>
      </c-col>
      <c-col :span="24">
        <el-form-item label="Applicable Rules(40E)" prop="lidgrp.rec.apprul">
          <c-select
            v-model="model.lidgrp.rec.apprul"
            style="width: 100%"
            placeholder="请选择适用规则"
            dbCode="apprus"
            @change="onApprulChange"></c-select>
        </el-form-item>
      </c-col>
      <c-col :span="24">
        <el-form-item
          label="Other Applicable Rules"
          prop="lidgrp.rec.apprultxt"
          :rules="[
            { required: model.lidgrp.rec.apprul == 'OTHR', message: '必输项' },
            { max: 35, message: '长度不能超过35' },
          ]">
          <c-input
            v-model="model.lidgrp.rec.apprultxt"
            maxlength="35"
            :disabled="model.lidgrp.rec.apprul != 'OTHR'"
            placeholder="请输入其他适用规则"></c-input>
        </el-form-item>
      </c-col>

      <c-col :span="24">
        <el-form-item label="Country or Region Code" prop="litp.payeecountcode">
          <c-business-cty
            customModifykey="ctycod"
            v-model="model.litp.payeecountcode"
            placeholder="请选择国家/地区代码"
            @handleChange="changeDialog"></c-business-cty>
        </el-form-item>
      </c-col>
      <c-col :span="24">
        <el-form-item
          label="对手行代码"
          prop="lidgrp.rec.oppbnk"
          v-if="typeof this.model.trnInfo !== 'undefined' && this.model.trnInfo.zmqflg === 'X'">
          <!--自贸区标志 -->
          <c-input v-model="model.lidgrp.rec.oppbnk" disabled maxlength="12" placeholder="请输入对手行代码"></c-input>
        </el-form-item>
      </c-col>
    </c-col>

    <!-- ======================右边====================== -->
    <c-col :span="12" style="padding-left: 20px">
      <c-col :span="24">
        <el-form-item label="L/C Issued on(31C)" prop="lidgrp.rec.opndat">
          <c-date-picker
            type="date"
            v-model="model.lidgrp.rec.opndat"
            style="width: 100%"
            placeholder="请选择日期"
            value-format="yyyy-MM-dd"></c-date-picker>
        </el-form-item>
      </c-col>
      <c-col :span="24">
        <el-form-item label="L/C Expiring on(31D)" prop="lidgrp.rec.expdat">
          <c-date-picker
            type="date"
            v-model="model.lidgrp.rec.expdat"
            style="width: 100%"
            placeholder="请选择日期"></c-date-picker>
        </el-form-item>
      </c-col>
      <c-col :span="24">
        <el-form-item label="in (Place)/ counters of(31D)" prop="lidgrp.rec.expplc">
          <c-mul-row-input
            type="textarea"
            v-model="model.lidgrp.rec.expplc"
            :rows="1"
            :cols="29"
            :autosize="{ minRows: 1, maxRows: 1 }"
            show-word-limit
            :charmod="2"
            placeholder="请输入交单地点"></c-mul-row-input>
        </el-form-item>
      </c-col>
      <c-col :span="24">
        <el-form-item label="Latest Shipment Date(44C)" prop="lidgrp.rec.shpdat">
          <c-date-picker
            type="date"
            :disabled="model.lidgrp.blk.shpper != '' && model.lidgrp.blk.shpper != null"
            v-model="model.lidgrp.rec.shpdat"
            style="width: 100%"
            placeholder="请选择日期"></c-date-picker>
        </el-form-item>
      </c-col>
      <c-col :span="24">
        <el-form-item label="Shipment Period(44D)" prop="lidgrp.blk.shpper">
          <c-mul-row-input
            type="textarea"
            :disabled="model.lidgrp.rec.shpdat != null && model.lidgrp.rec.shpdat != ''"
            v-model="model.lidgrp.blk.shpper"
            :rows="6"
            :cols="65"
            :autosize="{ minRows: 2, maxRows: 2 }"
            show-word-limit
            :charmod="2"
            placeholder="请输入装运期"></c-mul-row-input>
        </el-form-item>
      </c-col>
      <c-col :span="24">
        <el-form-item label="Period for presentation in Days(48)" prop="lidgrp.rec.prepers18">
          <c-input
            v-model="model.lidgrp.rec.prepers18"
            style="width: 100%"
            placeholder="请输入提交期限（天）"></c-input>
        </el-form-item>
      </c-col>
      <c-col :span="24">
        <el-form-item label="" prop="lidgrp.rec.prepertxts18">
          <c-mul-row-input
            type="textarea"
            v-model="model.lidgrp.rec.prepertxts18"
            :rows="1"
            :cols="35"
            :autosize="{ minRows: 1, maxRows: 1 }"
            show-word-limit
            :charmod="2"
            placeholder="请输入描述"></c-mul-row-input>
        </el-form-item>
      </c-col>
      <c-col :span="24">
        <el-form-item label="Partial Shipment(43P)" prop="lidgrp.rec.shppars18">
          <c-select
            v-model="model.lidgrp.rec.shppars18"
            style="width: 100%"
            placeholder="请选择分批装运条款"
            dbCode="shppal">
          </c-select>
        </el-form-item>
      </c-col>
      <c-col :span="24">
        <el-form-item label="Transhipment(43T)" prop="lidgrp.rec.shptrss18">
          <c-select
            v-model="model.lidgrp.rec.shptrss18"
            style="width: 100%"
            placeholder="请选择转运条款"
            dbCode="shppal">
          </c-select>
        </el-form-item>
      </c-col>

      <c-col :span="8" class="">
        <el-form-item label=" " prop="lidgrp.rec.rmbflg" label-width="180px" style="float: left">
          <c-checkbox
            v-model="model.lidgrp.rec.rmbflg"
            class="checkbox-left"
            true-label="X"
            false-label=""
            disabled
            @change="rmbflgChange"
            >Reimbursement Information</c-checkbox
          >
        </el-form-item>
      </c-col>
      <c-col :span="8" class="centerLable">
        <el-form-item label="" class="checkbox-left" prop="lidgrp.rec.revflg">
          <c-checkbox v-model="model.lidgrp.rec.revflg" disabled>Revolving L/C</c-checkbox>
        </el-form-item>
      </c-col>
    </c-col>
  </div>
</template>
<script>
import event from "../event";
import BigNumber from "bignumber.js";

export default {
  inject: ["root"],
  props: ["model", "codes"],
  mixins: [event],
  data() {
    return {};
  },
  methods: {
    initOvwp1() {
      this.onNom1curChange();
      this.onNom1amtChange();
      this.onNomtopChange();
      this.onShpdatChange();
      this.onExpdatChange();
      this.onApprulChange();
      this.onAddamtflgChange();
      this.onMax2amtChange();
      this.onAplChange();
    },
    changeDialog() {
      if (this.model.litp.payeecountcode != null && this.model.litp.payeecountcode != "") {
        this.model.lidgrp.rec.countrycod = this.model.litp.payeecountcode;
      }
    },
    rmbflgChange() {
      if (this.model.lidgrp.rec.rmbflg == null || this.model.lidgrp.rec.rmbflg == "") {
        this.model.lidgrp.blk.rmbcha = "";
      }
    },

    open(val) {
      if (
        val === "" &&
        !(
          this.model.lidgrp.cbs.max2.amt == "0.000" &&
          this.model.lidgrp.cbs.opn2.amt == "0.000" &&
          this.model.lidgrp.blk.addamtcov === ""
        )
      ) {
        this.$confirm("是否确定要删除此合同的附加金额？", "提示", {
          confirmButtonText: "是",
          cancelButtonText: "否",
          type: "warning",
          showClose: false,
        })
          .then(() => {
            //yes的执行在这里写
            this.model.lidgrp.cbs.max2.amt = "0.000";
            this.model.lidgrp.blk.addamtcov = "";
            this.model.lidgrp.cbs.opn2.amt = "0.000";
            this.$message({
              type: "success",
              message: "删除成功!",
            });
          })
          .catch(() => {
            //No的功能在这里写
            this.model.swiadd.addamtflg = "X";
            this.$message({
              type: "info",
              message: "已取消删除",
            });
          });
      }
    },
    getBigNumber() {
      // 配置BigNumber计算规则为保留两位小数，并向上舍入
      var BN = BigNumber.clone();
      BN.config({ DECIMAL_PLACES: 2, ROUNDING_MODE: 2 });
      return BN;
    },
    onNom1curChange() {
      const res = this.model.lidgrp;
      this.model.lidgrp.cbs.max.cur = this.model.lidgrp.cbs.nom1.cur;
      this.model.lidgrp.cbs.max2.cur = this.model.lidgrp.cbs.nom1.cur;
      this.model.lidgrp.cbs.opn2.cur = this.model.lidgrp.cbs.nom1.cur;
      this.model.lidgrp.rec.rptcur = this.model.lidgrp.cbs.nom1.cur;
      this.model.lidgrp.rec.nam = `${res.rec.stacty}.${res.apl.pts.adrblk.substring(0, 16)} ${res.cbs.nom1.cur} ${
        res.cbs.nom1.amt
      }`;
    },
    onNom1amtChange() {
      if (Number(this.model.lidgrp.rec.nomtop) !== 0) {
        var BN = this.getBigNumber();
        let rate = BN(this.model.lidgrp.rec.nomtop).plus(100);
        this.model.lidgrp.cbs.max.amt = BN(this.model.lidgrp.cbs.nom1.amt).multipliedBy(rate).div(100).toFixed(2);
      } else {
        this.model.lidgrp.cbs.max.amt = this.model.lidgrp.cbs.nom1.amt;
      }
    },
    onNomtopChange() {
      if (Number(this.model.lidgrp.rec.nomtop) !== 0) {
        var BN = this.getBigNumber();
        let rate = BN(this.model.lidgrp.rec.nomtop).plus(100);
        this.model.lidgrp.cbs.max.amt = BN(this.model.lidgrp.cbs.nom1.amt).multipliedBy(rate).div(100).toFixed(2);
      } else {
        this.model.lidgrp.cbs.max.amt = this.model.lidgrp.cbs.nom1.amt;
      }
    },

    onShpdatChange() {
      if (
        this.model.lidgrp.rec.shpdat != null &&
        this.model.lidgrp.rec.shpdat != "" &&
        this.model.lidgrp.rec.expdat != null &&
        this.model.lidgrp.rec.expdat != ""
      ) {
        let date1 = Date.parse(this.model.lidgrp.rec.shpdat);
        let date2 = Date.parse(this.model.lidgrp.rec.expdat);
        let dateSpan = Math.abs(date2 - date1);
        this.model.lidgrp.rec.prepers18 = Math.floor(dateSpan / (24 * 3600 * 1000));
      }
    },
    onExpdatChange() {
      if (
        this.model.lidgrp.rec.shpdat != null &&
        this.model.lidgrp.rec.shpdat != "" &&
        this.model.lidgrp.rec.expdat != null &&
        this.model.lidgrp.rec.expdat != ""
      ) {
        let date1 = Date.parse(this.model.lidgrp.rec.shpdat);
        let date2 = Date.parse(this.model.lidgrp.rec.expdat);
        let dateSpan = Math.abs(date2 - date1);
        this.model.lidgrp.rec.prepers18 = Math.floor(dateSpan / (24 * 3600 * 1000));
      }
    },
    onApprulChange() {
      if (this.model.lidgrp.rec.apprul != "OTHR") {
        this.model.lidgrp.rec.apprultxt = "";
      }
    },
    onAddamtflgChange() {
      if (this.model.swiadd.addamtflg == "X") {
        this.model.lidgrp.cbs.max2.cur = this.model.lidgrp.cbs.nom1.cur;
        this.model.lidgrp.cbs.opn2.cur = this.model.lidgrp.cbs.nom1.cur;
      } else {
        this.model.lidgrp.cbs.max2.cur = "";
        this.model.lidgrp.cbs.max2.amt = "0.00";
        this.model.lidgrp.cbs.opn2.cur = "";
        this.model.lidgrp.cbs.opn2.amt = "0.00";
        this.model.lidgrp.blk.addamtcov = "";
      }
    },
    onMax2amtChange() {
      if (Number(this.model.lidgrp.cbs.max2.amt) > 0) {
        this.model.lidgrp.cbs.opn2.amt = this.model.lidgrp.cbs.max2.amt;
        this.model.lidgrp.blk.addamtcov = `${this.model.lidgrp.cbs.opn2.cur} ${this.model.lidgrp.cbs.max2.amt} `;
      } else {
        this.model.lidgrp.cbs.opn2.amt = "0.00";
        this.model.lidgrp.blk.addamtcov = "";
      }
    },
  },

  computed: {},
};
</script>
<style>
.marginLable {
  padding-left: 160px;
}
</style>