<template>
  <div class="eibs-tab">

    <!-- ==================上================ -->
    <c-col :span="24">
      <c-col :span="12" style="padding-right: 20px">
        <c-col :span="24">
          <el-form-item label="单据编号" prop="bddgrp.rec.ownref">
            <c-input disabled v-model="model.bddgrp.rec.ownref" maxlength="16" placeholder="请输入单据参考号"></c-input>
          </el-form-item>
        </c-col>

        <c-col :span="24">
          <div class="custom-box-wrap">
            <div style="width: 280px;">
              <el-form-item label="索款金额" prop="bddgrp.cbs.max.cur">
                <c-select disabled v-model="model.bddgrp.cbs.max.cur" style="width:100%" dbCode="CURTXT" :isShowKeyAndLabel="true" placeholder="请选择币种">
                </c-select>
              </el-form-item>
            </div>
            <div style="width: calc(100% - 280px);">
              <el-form-item label-width="5px" prop="bddgrp.cbs.max.amt">
                <c-input-currency disabled v-model="model.bddgrp.cbs.max.amt" placeholder="请输入索款金额"></c-input-currency>
              </el-form-item>
            </div>
          </div>
        </c-col>

        <c-col :span="24">
          <div class="custom-box-wrap">
            <div style="width: 280px;">
              <el-form-item label="索款余额" prop="bddgrp.cbs.opn1.cur">
                <c-select disabled v-model="model.bddgrp.cbs.opn1.cur" maxlength="3" dbCode="CURTXT" :isShowKeyAndLabel="true" placeholder="请选择币种"></c-select>
              </el-form-item>
            </div>
            <div style="width: calc(100% - 280px);">
              <el-form-item label-width="5px" prop="bddgrp.cbs.opn1.amt">
                <c-input-currency disabled v-model="model.bddgrp.cbs.opn1.amt" placeholder="请输入索款余额"></c-input-currency>
              </el-form-item>
            </div>
          </div>
        </c-col>

        <c-col :span="24">
          <el-form-item label="到单日期" prop="bddgrp.rec.rcvdat">
            <c-date-picker disabled type="date" v-model="model.bddgrp.rec.rcvdat" style="width:100%" placeholder="请选择到单日期"></c-date-picker>
          </el-form-item>
        </c-col>

        <c-col :span="24">
          <el-form-item label="远期起算日" prop="bddgrp.rec.stadat">
            <c-date-picker disabled type="date" v-model="model.bddgrp.rec.stadat" style="width:100%" placeholder="请选择远期起算日"></c-date-picker>
          </el-form-item>
        </c-col>

        <!--c-col :span="24">
          <el-form-item label="单据到期日" prop="bddgrp.rec.matdat">
            <c-date-picker disabled type="date" v-model="model.bddgrp.rec.matdat" style="width:100%" placeholder="请选择单据到期日"></c-date-picker>
          </el-form-item>
        </c-col-->

        <c-col :span="24">
          <el-form-item label="远期期限" prop="bddgrp.rec.tenmaxday">
            <c-input disabled v-model="model.bddgrp.rec.tenmaxday" placeholder="请输入远期期限"></c-input>
          </el-form-item>
        </c-col>

        <c-col :span="24">
          <el-form-item label="单据类型" prop="bddgrp.rec.docflg">
            <c-select disabled v-model="model.bddgrp.rec.docflg" style="width:100%" dbCode="BRDTYP" :isShowKeyAndLabel="false" uil="CN" placeholder="请选择单据类型">
            </c-select>
          </el-form-item>
        </c-col>
        <c-col :span="24">
          <el-form-item label="单据状态" prop="bddgrp.rec.docsta">
            <c-select disabled v-model="model.bddgrp.rec.docsta" style="width:100%" dbCode="STADOC" :isShowKeyAndLabel="false" uil="CN" placeholder="请选择单据状态">
            </c-select>
          </el-form-item>
        </c-col>
        <c-col :span="24">
          <div class="custom-box-wrap">
            <div style="width: 280px;">
              <el-form-item label="承兑金额" prop="bddgrp.cbs.max.cur">
                <c-select disabled dbCode="curtxt" isShowKeyAndLabel style="width: 100%" v-model="model.bddgrp.cbs.max.cur">
                </c-select>
              </el-form-item>
            </div>

            <div style="width: calc(100% - 280px);">
              <el-form-item label-width="5px" prop="cdamt">
                <c-input-currency disabled placeholder="请输入承兑金额" style="width: 100%" v-model="model.cdamt"></c-input-currency>
              </el-form-item>
            </div>
          </div>
        </c-col>

        <c-col :span="24">
          <el-form-item label="承兑到期日" prop="newmatdat">
            <c-date-picker type="date" v-model="model.newmatdat" style="width:100%" placeholder="请输入承兑到期日" @change="newmatdatChange"></c-date-picker>
          </el-form-item>
        </c-col>
      </c-col>

      <c-col :span="12" style="padding-left: 20px">
        <c-col :span="24">
          <el-form-item label="信用证编号" prop="didgrp.rec.ownref">
            <c-input disabled v-model="model.didgrp.rec.ownref" maxlength="16" placeholder="请输入信用证参考号"></c-input>
          </el-form-item>
        </c-col>

        <c-col :span="24">
          <div class="custom-box-wrap">
            <div style="width: 280px;">
              <el-form-item label="信用证余额" prop="didgrp.cbs.opn1.cur">
                <c-select disabled dbCode="curtxt" isShowKeyAndLabel placeholder="请选择信用证金额" style="width: 100%" v-model="model.didgrp.cbs.opn1.cur">
                </c-select>
              </el-form-item>
            </div>
            <div style="width: calc(100% - 280px);">
              <el-form-item label-width="5px" prop="didgrp.cbs.opn1.amt">
                <c-input-currency disabled :currency="model.didgrp.cbs.opn1.cur" @keyup.enter.native="$event.target.blur()" placeholder="请输入信用证金额" style="width: 100%" v-model="model.didgrp.cbs.opn1.amt"></c-input-currency>
              </el-form-item>
            </div>
          </div>
        </c-col>

        <c-col :span="24">
          <el-form-item label="信用证到期日" prop="didgrp.rec.expdat">
            <c-date-picker disabled type="date" v-model="model.didgrp.rec.expdat" style="width:100%" placeholder="请选择到期日"></c-date-picker>
          </el-form-item>
        </c-col>

        <c-col :span="24">
					<!-- <c-ptap10 :model="model" :argadr="{grp: 'bddgrp',rol: 'apl'}" :label="{labelRef: '申请人参考号',labelNam: '名称'}" :disabledDetail="true" :disabledRef="true" :disabledNam="true"></c-ptap10> -->
          <el-card class="box-card">
            <c-col :span="24">
              <el-form-item label="申请人客户号" label-width="120px" prop="didgrp.apl.pts.extkey">
                <c-input disabled v-model="model.didgrp.apl.pts.extkey"></c-input>
              </el-form-item>
            </c-col>
            <c-col :span="24">
              <el-form-item label="名称" label-width="120px" prop="didgrp.apl.pts.cnnam">
                <c-input disabled v-model="model.didgrp.apl.pts.cnnam"></c-input>
              </el-form-item>
            </c-col>
          </el-card>
				</c-col>

				<c-col :span="24">
					<!-- <c-ptap10 :model="model" :argadr="{grp: 'bddgrp',rol: 'ben'}" :label="{labelRef: '受益人参考号',labelNam: '名称'}" :disabledDetail="true" :disabledRef="true" :disabledNam="true"></c-ptap10> -->
          <el-card class="box-card">
            <c-col :span="24">
              <el-form-item label="受益人客户号" label-width="120px" prop="didgrp.ben.pts.extkey">
                <c-input disabled v-model="model.didgrp.ben.pts.extkey"></c-input>
              </el-form-item>
            </c-col>
            <c-col :span="24">
              <el-form-item label="名称" label-width="120px" prop="didgrp.ben.pts.cnnam">
                <c-input disabled v-model="model.didgrp.ben.pts.cnnam"></c-input>
              </el-form-item>
            </c-col>
          </el-card>
				</c-col>

				<c-col :span="24">
					<!-- <c-ptap10 :model="model" :argadr="{grp: 'bddgrp', rol: 'prb'}" :label="{labelRef: '交单行参考号',labelNam: '名称'}" :disabledDetail="true" :disabledRef="true" :disabledNam="true"></c-ptap10> -->
          <el-card class="box-card">
					<c-col :span="24">
						<el-form-item label="交单行参考号" label-width="120px" prop="bddgrp.prb.pts.ref">
							<c-input disabled maxlength="16" v-model="model.bddgrp.prb.pts.ref"></c-input>
						</el-form-item>
					</c-col>
					<c-col :span="24">
						<el-form-item label="名称" label-width="120px" prop="bddgrp.prb.pts.jigomc">
							<c-input disabled maxlength="40" v-model="model.bddgrp.prb.pts.jigomc"></c-input>
						</el-form-item>
					</c-col>
					</el-card>
				</c-col>
      </c-col>
    </c-col>

    <!-- ============下================ -->
    <c-col :span="24">
      <!-- ==================左边================ -->
      <c-col :span="12" style="padding-right: 20px">
        <c-col :span="24">
          <el-form-item label="说明" prop="strinf">
            <c-input type="textarea" :rows="10" v-model="model.strinf" maxlength="49950" show-word-limit ></c-input>
          </el-form-item>
        </c-col>
      </c-col>
    </c-col>

  </div>
</template>
<script>
import event from "../event";
import moment from 'moment';
import BigNumber from 'bignumber.js';

export default {
  inject: ["root"],
  props: ["model", "codes"],
  mixins: [event],
  data() {
    return {};
  },
  methods: {},
  created() {},
  watch: {
    "model.newmatdat": { 
      handler(newVal, oldVal) {
        let res="";
        if (this.model.newmatdat!=null&&this.model.newmatdat!=""){
            if (this.model.liaall && this.model.liaall.liaallg) {
              for (var i = 0; i < this.model.liaall.liaallg.length; i++) {
                if (this.model.liaall.liaallg[i].cbtpfx == "AKZ") {
                    if(this.model.liaall.liaallg[i].oldamt==0){
                        if(this.model.liaall.liaallg[i].amt!=0){
                          res = this.model.liaall.liaallg[i].cur +" "+this.model.liaall.liaallg[i].amt + " will be settled on "+this.model.newmatdat;
                        }
                    }
                    else{
                       if(this.model.liaall.liaallg[i].amt==0){
                         if (moment(this.model.newmatdat).diff(moment(this.model.oldbddgrp.rec.matdat), 'days') != 0){
                            res =  "Maturity for "+this.model.liaall.liaallg[i].cur+" "+new BigNumber(this.model.liaall.liaallg[i].oldamt).toFormat(2)+ " has been changed from " + this.model.oldbddgrp.rec.matdat +" to "+this.model.newmatdat;
                         }
                       }
                       else{
                         res = "The tenor for "+this.model.liaall.liaallg[i].cur+" "+this.model.liaall.liaallg[i].oldamt+  " has been changed to "+this.model.liaall.liaallg[i].cur+" "+this.model.newmatdat +" to be settled on "+this.model.oldbddgrp.rec.matdat;
                       }
                    }
                  break;
                }
              }
           }
        }
        res = res +"\n"+"At the new maturity date we will settle the relevant payment";
        this.model.strinf  = res;
      },
      immediate: true
    }
  },
};
</script>
<style scoped lang="less">
.box-card {
  margin-bottom: 10px;
  /deep/ .el-form-item--mini.el-form-item,
  .el-form-item--small.el-form-item {
    margin-bottom: 10px;
  }
  /deep/ .el-card__body {
    padding: 10px 10px 0px 0px;
  }
}
</style>