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

      <!-- =================================左边================================= -->
      <c-col :span="12" class="col-left">
        <!-- S0000198 : 信用证编号 -->
        <c-col :span="24">
          <c-form-item label="信用证编号" prop="lidgrp.rec.ownref">
            <c-fullbox>
              <c-input
                  v-model="model.lidgrp.rec.ownref"
                  maxlength="16"
                  placeholder=""
                  style="width: 100%"
                  disabled
              ></c-input>
              <template slot="footer">
                <c-button
                    style="margin: 0 0 0 10px; padding: 0 12px"
                    size="small"
                    type="primary"
                >
                  <i class="el-icon-info"></i>
                </c-button>
              </template>
            </c-fullbox>
          </c-form-item>
        </c-col>
        <!-- S0000195 : 到期日 -->
        <c-col :span="24">
          <el-form-item label="生效日期" prop="lidgrp.rec.expdat">
            <c-date-picker
                type="date"
                v-model="model.lidgrp.rec.expdat"
                style="width: 100%"
                placeholder="请输入生效日期"
                value-format="yyyy-MM-dd"
                disabled
            ></c-date-picker>
          </el-form-item>
        </c-col>

        <!-- S0000196 : 单据参考号 -->
        <c-col :span="24">
          <c-form-item label="单据编号" prop="brdgrp.rec.ownref">
            <c-fullbox>
              <c-input
                  v-model="model.brdgrp.rec.ownref"
                  maxlength="16"
                  placeholder=""
                  disabled
              ></c-input>
              <template slot="footer">
                <c-button
                    style="margin: 0 0 0 10px; padding: 0 12px"
                    size="small"
                    type="primary"
                >
                  <i class="el-icon-info"></i>
                </c-button>
              </template>
            </c-fullbox>
          </c-form-item>
        </c-col>
        <!-- S0000197 : 单据金额 -->
        <c-col :span="24">
          <c-col :span="13">
            <el-form-item label="单据金额" prop="brdgrp.cbs.max.cur">
              <c-select
                  v-model="model.brdgrp.cbs.max.cur"
                  style="width: 100%"
                  placeholder="请选择单据金额币种"
                  :code="codes.curtxt1"
                  disabled
              >
              </c-select>
            </el-form-item>
          </c-col>

          <c-col :span="11">
            <c-form-item label="" label-width="5px" prop="brdgrp.cbs.max.amt">
              <c-input
                  v-model="model.brdgrp.cbs.max.amt"
                  placeholder=""
                  class="m-input-currency"
                  :disabled="model.mhtyp=='R'"
              ></c-input>
            </c-form-item>
          </c-col>
        </c-col>

        <!-- S0000199 : 单据余额 -->
        <c-col :span="24">
          <c-col :span="13">
            <c-form-item label="单据余额" prop="brdgrp.cbs.opn1.cur">
              <c-select
                  v-model="model.brdgrp.cbs.opn1.cur"
                  style="width: 100%"
                  placeholder="请选择单据余额币种"
                  :code="codes.curtxt1"
                  disabled
              ></c-select>
            </c-form-item>
          </c-col>

          <c-col :span="11">
            <c-form-item label="" label-width="5px" prop="brdgrp.cbs.opn1.amt">
              <c-input
                  v-model="model.brdgrp.cbs.opn1.amt"
                  placeholder=""
                  class="m-input-currency"
                  disabled
              ></c-input>
            </c-form-item>
          </c-col>
        </c-col>

        <!-- S0000200 : 到单日期 -->
        <c-col :span="12">
          <el-form-item label="收入日期" prop="brdgrp.rec.rcvdat">
            <c-date-picker
                type="date"
                v-model="model.brdgrp.rec.rcvdat"
                style="width: 100%"
                placeholder="请输入"
                value-format="yyyy-MM-dd"
                disabled
            ></c-date-picker>
          </el-form-item>
        </c-col>
        <!-- S0000202 : 通知到单日期 -->
        <c-col :span="12">
          <el-form-item label="通知日期" prop="brdgrp.rec.advdat">
            <c-date-picker
                type="date"
                v-model="model.brdgrp.rec.advdat"
                style="width: 100%"
                placeholder="请选择日期"
                value-format="yyyy-MM-dd"
                disabled
            ></c-date-picker>
          </el-form-item>
        </c-col>
        <!-- S0000080 : Maturity Date -->
        <c-col :span="24">
          <el-form-item label="到期日期" prop="brdgrp.rec.matdat">
            <c-date-picker
                type="date"
                v-model="model.brdgrp.rec.matdat"
                style="width: 100%"
                placeholder="请选择日期"
                value-format="yyyy-MM-dd"
                :disabled="model.brdgrp.blk.matper!=''||model.brdgrp.rec.docflg=='P'"
            ></c-date-picker>
          </el-form-item>
        </c-col>
        <!-- SG000232 : Start Date -->
        <c-col :span="24">
          <el-form-item label="开始日期" prop="brdgrp.rec.stadat">
            <c-date-picker
                type="date"
                v-model="model.brdgrp.rec.stadat"
                style="width: 100%"
                placeholder="请选择日期"
                value-format="yyyy-MM-dd"
                disabled
            ></c-date-picker>
          </el-form-item>
        </c-col>
        <!-- S0000206 : 单据类型 -->
        <c-col :span="16">
          <el-form-item label="单据类型" prop="brdgrp.rec.docflg">
            <c-select
                v-model="model.brdgrp.rec.docflg"
                style="width: 100%"
                placeholder="请输入单据类型"
                :code="codes.docflg"
                disabled
            >
            </c-select>
          </el-form-item>
        </c-col>
        <!-- SG000233 : Tenor -->
        <c-col :span="8">
          <c-form-item
              label="期限（天）"
              label-width="100px"
              prop="brdgrp.rec.tenmaxday"
          >
            <c-input
                v-model="model.brdgrp.rec.tenmaxday"
                placeholder="请输入天数"
                disabled
            ></c-input>
          </c-form-item>
        </c-col>
        <!-- S0000207 : 单据状态 -->
        <c-col :span="24">
          <el-form-item label="单据状态" prop="brdgrp.rec.docsta">
            <c-select
                v-model="model.brdgrp.rec.docsta"
                style="width: 100%"
                placeholder="请选择状态"
                :code="codes.docsta1"
                disabled
            >
            </c-select>
          </el-form-item>
        </c-col>
        <!-- S0000084 : Document Type -->
        <c-col :span="24">
          <el-form-item label="单据类型" prop="brdgrp.rec.docflg">
            <c-select
                v-model="model.brdgrp.rec.docflg"
                style="width: 100%"
                placeholder="请选择单据类型"
                :code="codes.docflg"
            >
            </c-select>
          </el-form-item>
        </c-col>
        <!-- S0000086 : Document Amount -->
        <c-col :span="24">
          <c-col :span="13">
            <el-form-item label="单据金额" prop="brdgrp.cbs.max.cur">
              <c-select
                  v-model="model.brdgrp.cbs.max.cur"
                  style="width: 100%"
                  placeholder=""
                  :code="codes.curtxt1"
              >
              </c-select>
            </el-form-item>
          </c-col>
          <c-col :span="11">
            <c-form-item label="" label-width="5px" prop="brdgrp.cbs.max.amt">
              <c-input
                  v-model="model.brdgrp.cbs.max.amt"
                  placeholder=""
                  class="m-input-currency"
                  :disabled="model.mhtyp=='R'"
              ></c-input>
            </c-form-item>
          </c-col>
        </c-col>

        <!-- =====================================当单据金额Document Amount没变时隐藏====================================================== -->
        <c-col :span="24">
          <c-col :span="13">
            <span v-text="model.oridoclab" data-path=".oridoclab"
                  class="span_oridoclab"
                  v-show="model.brdgrp.cbs.max.amt!=model.oldbrdgrp.cbs.max.amt"> </span>
          </c-col>
          <c-col :span="11">
            <c-form-item label="" label-width="5px" prop="oldbrdgrp.cbs.max.amt">
              <c-input v-model="model.oldbrdgrp.cbs.max.amt" placeholder=""
                       class="m-input-currency"
                       style="width: 100%"
                       disabled
                       v-show="model.brdgrp.cbs.max.amt!=model.oldbrdgrp.cbs.max.amt"
              ></c-input>
            </c-form-item>
          </c-col>
        </c-col>

        <!-- S0000006 : 附加金额 -->
        <c-col :span="24">
          <c-col :span="13">
            <el-form-item label="提取附加金额" prop="brdgrp.cbs.opn2.cur">
              <c-select
                  v-model="opn2cur"
                  style="width: 100%"
                  placeholder="请选择币种"
                  :code="codes.curtxt1"
              >
              </c-select>
            </el-form-item>
          </c-col>

          <c-col :span="11">
            <c-form-item label="" label-width="5px" prop="brdgrp.cbs.max2.amt">
              <c-input
                  v-model="model.brdgrp.cbs.max2.amt"
                  class="m-input-currency"
                  placeholder=""
                  :disabled="model.mhtyp=='R'"
              ></c-input>
            </c-form-item>
          </c-col>
        </c-col>

        <!-- =====================================当附加金额没变时隐藏====================================================== -->
        <c-col :span="24">
          <c-col :span="13">
            <span v-text="model.oriaddlab" data-path=".oriaddlab"
                  class="span_oridoclab"
                  v-show="model.brdgrp.cbs.max2.amt!=model.oldbrdgrp.cbs.max2.amt"> </span>
          </c-col>
          <c-col :span="11">
            <c-form-item label="" label-width="5px" prop="oldbrdgrp.cbs.max2.amt">
              <c-input v-model="model.oldbrdgrp.cbs.max2.amt" :placeholder="$t('other.please_enter')+'Balance'"
                       class="m-input-currency"
                       style="width: 100%"
                       disabled
                       v-show="model.brdgrp.cbs.max2.amt!=model.oldbrdgrp.cbs.max2.amt"></c-input>
            </c-form-item>
          </c-col>
        </c-col>

        <!-- S0000081 : Presentation Date -->
        <c-col :span="12">
          <el-form-item label="交单日期" prop="brdgrp.rec.predat">
            <c-date-picker
                type="date"
                v-model="model.brdgrp.rec.predat"
                style="width: 100%"
                placeholder="请选择日期"
                value-format="yyyy-MM-dd"
            ></c-date-picker>
          </el-form-item>
        </c-col>
        <!-- S0000082 : Received on -->
        <c-col :span="12">
          <el-form-item label="收入日期" prop="brdgrp.rec.rcvdat">
            <c-date-picker
                type="date"
                v-model="model.brdgrp.rec.rcvdat"
                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="到期日期" prop="brdgrp.rec.matdat">
            <c-date-picker
                type="date"
                v-model="model.brdgrp.rec.matdat"
                style="width: 100%"
                placeholder="请选择到期日"
                value-format="yyyy-MM-dd"
                :disabled="model.brdgrp.blk.matper!=''||model.brdgrp.rec.docflg=='P'"
            ></c-date-picker>
          </el-form-item>
        </c-col>
        <!-- S0000083 : Shipped on -->
        <c-col :span="24">
          <el-form-item label="装运日期" prop="brdgrp.rec.shpdat">
            <c-date-picker
                type="date"
                v-model="model.brdgrp.rec.shpdat"
                style="width: 100%"
                placeholder="请选择日期"
                value-format="yyyy-MM-dd"
            ></c-date-picker>
          </el-form-item>
        </c-col>
        <!-- SG000365 : Transaction Type -->
        <c-col :span="12">
          <el-form-item label="交易类型" prop="mhtyp">
            <c-select
                v-model="model.mhtyp"
                style="width: 100%"
                placeholder="请输入交易类型"
                :code="codes.mhtyp"
            >
            </c-select>
          </el-form-item>
        </c-col>
        <c-col :span="12">
          <c-form-item label="信笺日" prop="days">
            <c-input
                v-model="model.days"
                placeholder="请输入天数"
            ></c-input>
          </c-form-item>
        </c-col>
        <!-- S0000079 : Maturity Period -->
        <c-col :span="24">
          <c-form-item label="到期期限" prop="brdgrp.blk.matper">
            <c-input
                type="textarea"
                v-model="model.brdgrp.blk.matper"
                maxlength="65"
                show-word-limit
                placeholder="请输入到期期限"
                :disabled="model.brdgrp.rec.matdat!=null&&model.brdgrp.rec.matdat!=''||model.brdgrp.rec.docflg=='P'"
            ></c-input>
          </c-form-item>
        </c-col>
        <!-- SF000369 : Applicant Reference -->
        <c-col :span="12">
          <c-form-item label="申请人参考号" prop="lidgrp.rec.aplref">
            <c-input
                v-model="model.lidgrp.rec.aplref"
                maxlength="16"
                placeholder="请输入申请人参考号"
            ></c-input>
          </c-form-item>
        </c-col>
        <c-col :span="12">
          <c-checkbox
              style="float: right; text-align: center"
              v-model="model.brdgrp.rec.dscinsflg"
              :disabled="model.brdgrp.blk.docdisflg!=''"
          >输入单据、不符点、指示和运输信息
          </c-checkbox
          >
        </c-col>
        <c-col :span="24">
          <c-form-item
              label="本信用证下前手图纸"
              prop="lidgrp.rec.utlnbr"
          >
            <c-input
                v-model="model.lidgrp.rec.utlnbr"
                :placeholder="
                $t('other.please_enter') + 'Count of Received Document Sets'
              "
                disabled
            ></c-input>
          </c-form-item>
        </c-col>
      </c-col>

      <!-- =================================右边=============================== -->
      <c-col :span="12" class="col-right">

        <!-- S0000192 : 信用证余额 -->
        <c-col :span="13">
          <c-form-item label="信用证余额" prop="lidgrp.cbs.opn1.cur">
            <c-select
                :code="codes.curtxt1"
                v-model="model.lidgrp.cbs.opn1.cur"
                style="width: 100%"
                :placeholder="$t('other.please_enter') + '币种'"
                disabled
            ></c-select>
          </c-form-item>
        </c-col>
        <c-col :span="11">
          <c-form-item label="" label-width="5px" prop="lidgrp.cbs.opn1.amt">
            <c-input
                v-model="model.lidgrp.cbs.opn1.amt"
                placeholder=""
                disabled
            ></c-input>
          </c-form-item>
        </c-col>

        <c-col :span="24">
          <c-form-item label="" prop="brdgrp.rec.nam">
            <c-input
                v-model="model.brdgrp.rec.nam"
                maxlength="40"
                placeholder="请输入"
                disabled
            ></c-input>
          </c-form-item>
        </c-col>
        <c-col :span="24">
          <c-ptsmsg
              :model="model"
              :argadr="{ title: '申请人', grp: 'brdgrp', rol: 'apl' }"
              disabled
          >
          </c-ptsmsg>
        </c-col>
        <c-col :span="24">
          <c-ptsmsg
              :model="model"
              :argadr="{ title: '受益人', grp: 'brdgrp', rol: 'ben' }"
              disabled
          >
          </c-ptsmsg>
        </c-col>
        <c-col :span="24">
          <c-ptsmsg
              :model="model"
              :argadr="{
              title: '交单行',
              grp: 'brdgrp',
              rol: 'prb',
            }"
              disabled1
          >
          </c-ptsmsg>
        </c-col>


        <!-- S0000078 : Presented by -->
        <c-col :span="24">
          <el-form-item label="交单行" prop="brdgrp.rec.docprbrol">
            <c-select
                v-model="model.brdgrp.rec.docprbrol"
                style="width: 100%"
                placeholder="请选择交单行"
                :code="codes.docprbrol"
            >
            </c-select>
          </el-form-item>
        </c-col>
        <c-col :span="24">
          <c-ptap
              :model="model"
              :argadr="{
              title: '',
              grp: 'brdgrp',
              rol: 'prb',
            }"
              @keyup.enter.native="
                queryGridEtyPromptDialogData('PRB', 'C')
              "
              :disabled="this.flag2"
              :disabledExtkey="this.flag"
              :isAdrblk="true"
              :noRef="true"
          >
          </c-ptap>
        </c-col>
        <!-- SF000087 : Payer -->
        <c-col :span="24">
          <el-form-item label="付款人" prop="brdgrp.rec.payrol">
            <c-select
                v-model="model.brdgrp.rec.payrol"
                style="width: 100%"
                placeholder="请输入付款人"
                :code="codes.payrol1"
            >
            </c-select>
          </el-form-item>
        </c-col>
        <c-col :span="24">
          <c-ptap
              :model="model"
              :argadr="{
              title: '',
              grp: 'brtp',
              rol: 'oth',
            }"
              :disabled="this.flag3"
              :disabledExtkey="this.flag4"
              :isAdrblk="true"
              :noRef="true"
          >
          </c-ptap>
        </c-col>
      </c-col>
    </c-row>
  </div>
</template>
<script>
import Api from "~/service/Api";
import CodeTable from "~/config/CodeTable";
import event from '../event'
import Ptap1 from "~/views/Public/Ptap1";
import Ptap from "~/views/Public/Ptap";
import Ptsmsg from "~/views/Public/Ptsmsg";

export default {
  components: {
    "c-ptap1": Ptap1,
    "c-ptap": Ptap,
    "c-ptsmsg": Ptsmsg,
  },
  inject: ["root"],
  props: ["model", "codes"],
  mixins: [event],
  data() {
    return {
      flag: true,
      flag2: true,
      flag3: true,
      flag4: true,
    };
  },
  watch: {
    "model.brdgrp.rec.docprbrol": function () {
      if (this.model.brdgrp.rec.docprbrol == 'ADV') {
        this.flag = true;
      } else if (this.model.brdgrp.rec.docprbrol == 'BEN') {
        this.flag = true;
      } else if (this.model.brdgrp.rec.docprbrol == 'PRB') {
        this.flag = false;
      }

    },

    "model.brdgrp.prb.pts.extkey": {
      immediate: true,
      handler(val, oldVal) {
        if (this.model.brdgrp.prb.pts.extkey != '') {
          this.flag2 = true;
        } else {
          this.flag2 = false;
        }
      }
    },

    "model.brdgrp.rec.payrol": function () {
      if (this.model.brdgrp.rec.payrol == 'APL') {
        this.flag4 = true;
      } else if (this.model.brdgrp.rec.payrol == 'OTH') {
        this.flag4 = false;
      }

    },

    "model.brtp.oth.pts.extkey": {
      immediate: true,
      handler(val, oldVal) {
        if (this.model.brtp.oth.pts.extkey != '') {
          this.flag3 = true;
        } else {
          this.flag3 = false;
        }
      }
    },
  },
  methods: {},
  created: function () {
  },
  computed: {
    opn2cur() {
      this.model.brdgrp.cbs.opn2.cur = this.model.brdgrp.cbs.max.cur
      return this.model.brdgrp.cbs.opn2.cur
    }
  }

};
</script>
<style>
.span_oridoclab {
  margin-right: 30px;
  height: 24px;
  color: #606266;
  line-height: 24px;
  font-size: 12px;
  float: right;
  text-align: right;
}
</style>