<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="nidgrp.rec.ownref">
						<c-fullbox>
							<c-input v-model="model.nidgrp.rec.ownref" maxlength="16" placeholder="请输入保函编号" disabled></c-input>
							<template slot="footer">
								<!-- <c-button style="margin: 0 10px 0 10px; padding: 0 12px" size="small" type="primary">
                  <i class="el-icon-info" style="font-size:15px"></i>
                </c-button> -->
								<!-- 保函形式和保函类型以及收益人为空的时候灰显 -->
								<c-button :disabled="model.nidgrp.ben.pts.ptainr=='' || model.nidgrp.rec.hndtyp==''" style="margin: 0 0" size="small" type="primary" @click="queryOwnref">获取</c-button>
							</template>
						</c-fullbox>
					</el-form-item>
				</c-col>

				<!-- <c-col :span="24">
          <el-form-item label="记账机构" prop="nidgrp.rec.bchkeyinr">
            <c-select v-model="model.nidgrp.rec.bchkeyinr" style="width: 100%" placeholder="请选择记账机构" disabled>
              <el-option v-for="item in markOrgList" :key="item.inr" :value="item.inr" :label="item.bchname">
              </el-option>
            </c-select>
          </el-form-item>
        </c-col> -->

				<c-col :span="24">
					<el-form-item label="经办柜员" prop="nitp.usr.extkey" style="width: 100%">
						<c-fullbox>
							<c-input v-model="model.nitp.usr.extkey" maxlength="8" placeholder="请输入经办柜员" disabled></c-input>
							<template slot="footer">
								<!-- <c-button style="padding: 0 12px" size="small" type="primary" icon="el-icon-search">
                </c-button> -->
							</template>
						</c-fullbox>
					</el-form-item>
				</c-col>

				<c-col :span="24">
					<div class="custom-box-wrap">
						<div style="width: 280px;">
							<el-form-item label="保函金额" prop="nidgrp.cbs.max.cur">

								<c-select v-model="model.nidgrp.cbs.max.cur" style="width: 100%" placeholder="请选择保函金额" @change="change2122Rmbflg">
									<el-option v-for="item in codes.curtxtList" :key="item.id" :label="item.txt" :value="item.cod"></el-option>
								</c-select>
							</el-form-item>
						</div>
						<div style="width: calc(100% - 280px);">
							<el-form-item label-width="5px" prop="nidgrp.cbs.max.amt">
								<c-input-currency v-model="model.nidgrp.cbs.max.amt" style="width:100%;" placeholder="请输入保函金额" @change="calcName" :currency="model.nidgrp.cbs.max.cur"></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="nidgrp.cbs.opn1.cur">
								<c-select disabled v-model="model.nidgrp.cbs.opn1.cur" style="width: 100%" placeholder="请选择保函余额币种">
									<el-option v-for="item in codes.curtxtList" :key="item.id" :label="item.txt" :value="item.cod"></el-option>
								</c-select>
							</el-form-item>
						</div>
						<div style="width: calc(100% - 280px);">
							<el-form-item label-width="5px" prop="nidgrp.cbs.opn1.amt">
								<c-input-currency disabled v-model="model.nidgrp.cbs.opn1.amt" style="width:100%;" placeholder="请输入" :currency="model.nidgrp.cbs.opn1.cur"></c-input-currency>
							</el-form-item>
						</div>
					</div>
				</c-col>

				<!-- <c-col :span="24">
					<el-form-item label="保函开立类型" prop="nidgrp.rec.hndtyp">
						<c-select v-model="model.nidgrp.rec.hndtyp" style="width: 100%" placeholder="请选择保函开立类型">
							<el-option v-for="item in hndtypList" :key="item.id" :label="item.txt" :value="item.cod">
							</el-option>
						</c-select>
					</el-form-item>
				</c-col> -->

				<c-col :span="24">
					<el-form-item label="保函种类" prop="nidgrp.rec.gartyp">
						<c-select v-model="model.nidgrp.rec.gartyp" style="width: 100%" placeholder="请选择保函种类" sort="SRT" dbCode="TYPGAR" @change="changeGartyp" :filterKey="['A','B','C','D','1','J','G','W','Z','V','2','Y','4','5','6']">
						</c-select>
					</el-form-item>
				</c-col>

				<!-- 当保函种类选择F时，特殊保函类型显示，否则不显示 -->
				<!-- <c-col :span="24" v-if="model.nidgrp.rec.gartyp == 'F'">
          <el-form-item label="特殊保函类型" prop="nidgrp.rec.segtyp">
            <c-select disabled v-model="model.nidgrp.rec.segtyp" style="width: 100%" placeholder="请选择特殊保函类型" dbCode="segtyp">
            </c-select>
          </el-form-item>
        </c-col> -->

				<!-- <c-col :span="24">
					<el-form-item label="面函标题" prop="nitp.lettername">
						<c-input v-model="model.nitp.lettername" maxlength="60" 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="nidgrp.blk.apprul">
								<!-- 切换apprul时，清空的apprultxt数值 -->
								<c-select v-model="model.nidgrp.blk.apprul" style="width: 100%" placeholder="请选择适用规则" dbCode="apprul" :isShowKeyAndLabel="true" :filterKey="['NONE','OTHR','UCPR','URDG']" @change="changeApprul">
								</c-select>
							</el-form-item>
						</div>
						<div style="width: calc(100% - 280px);">
							<el-form-item label-width="5px" prop="nidgrp.blk.apprultxt">
								<c-input v-model="model.nidgrp.blk.apprultxt" maxlength="35" placeholder="请输入申请条款" :disabled="model.nidgrp.blk.apprul!='OTHR'"></c-input>
							</el-form-item>
						</div>
					</div>
				</c-col>

				<!-- <c-col :span="24">
					<el-form-item label="保函文本格式" prop="nidgrp.rec.gtxinr">
						<c-select v-model="model.nidgrp.rec.gtxinr" style="width: 100%" placeholder="请选择保函文本格式" dbCode="gtxinr" @change="changeAtxinr">
							<el-option v-for="item in codes.atxinrList" :key="item.value" :label="item.label" :value="item.value">
							</el-option>
						</c-select>
					</el-form-item>
				</c-col> -->

				<!-- <c-col :span="24">
          <el-form-item label="分离式保函" prop="nidgrp.rec.fenlishi">
            <c-select :disabled="
                  model.nidgrp.rec.hndtyp != 'OC' &&
                  model.nidgrp.rec.hndtyp != 'OL'
                " v-model="model.nidgrp.rec.fenlishi" style="width: 100%" placeholder="请选择分离式保函种类" dbCode="fenlsh"></c-select>
          </el-form-item>
        </c-col> -->

                 <c-col v-if="model.zmqflg == 'X'" :span="24" >
                   <el-form-item label="对手行代码" prop="nidgrp.rec.oppbnk" style="width: 100%" >
                     <c-input v-model="model.nidgrp.rec.oppbnk" placeholder="请输入对手行代码" ></c-input>
                   </el-form-item>
                 </c-col>

				<c-col :span="24">
					<c-ptap :argadr="{title: '申请人', grp: 'nidgrp', rol: 'apl'}" :haveAdrLabel="true" :isAdrblk="false" :model="model" ptytyp="B,F,C">
					</c-ptap>
				</c-col>

				<c-col :span="24">
					<c-ptap :argadr="{
							title: '反担保行', grp: 'nidgrp', rol: 'con'}" :disabled="true" :isAdrblk="true" :haveAdrLabel="true" :model="model" ptytyp="B">
					</c-ptap>
				</c-col>

			</c-col>
			<!-- ============右边================= -->
			<c-col :span="12" style="padding-left: 20px">
				<!-- <c-col :span="24">
          <el-form-item label="客户委托我行日期" prop="nidgrp.rec.orddat">
            <c-date-picker type="date" v-model="model.nidgrp.rec.orddat" style="width: 100%" placeholder="请选择客户委托我行日期"></c-date-picker>
          </el-form-item>
        </c-col> -->
				<c-col :span="24">
					<el-form-item label="开立日期" prop="nidgrp.rec.opndat">
						<c-date-picker type="date" v-model="model.nidgrp.rec.opndat" style="width: 100%" placeholder="请选择开立日期" @change="changeOpndat">
						</c-date-picker>
					</el-form-item>
				</c-col>
				<c-col :span="24">
					<el-form-item label="通知日期" prop="nidgrp.rec.credat">
						<c-date-picker type="date" v-model="model.nidgrp.rec.credat" style="width: 100%" placeholder="请选择通知日期">
						</c-date-picker>
					</el-form-item>
				</c-col>
				<!-- </c-col> -->
				<c-col :span="24">
					<div class="custom-box-wrap">
						<div style="width: calc(100% - 120px);">
							<el-form-item label="保函效期" prop="nidgrp.rec.expdat">
								<c-date-picker :disabled="model.nidgrp.rec.expflg == 'X'" type="date" v-model="model.nidgrp.rec.expdat" style="width: 100%" placeholder="请选择保函效期" @change="compareData"></c-date-picker>
							</el-form-item>
						</div>
						<div style="width: 100px;margin-left: 20px;display: flex;align-items: flex-start;">
							<el-form-item label="" prop="nidgrp.rec.expflg" class="checkbox-left" label-width="5px">
								<c-checkbox v-model="model.nidgrp.rec.expflg" true-label="X" false-label="">保函效期敞口</c-checkbox>
							</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="nidgrp.rec.liadat">
								<c-date-picker type="date" v-model="model.nidgrp.rec.liadat" style="width: 100%" placeholder="请选择反担保有效期">
								</c-date-picker>
							</el-form-item>
						</div>
						<div style="width: calc(100% - 280px);">
							<el-form-item label="" prop="nidgrp.rec.expflg" class="checkbox-left" label-width="5px">
								<c-checkbox v-model="model.nidgrp.rec.liaflg" true-label='X' false-label='' :disabled="
								model.nidgrp.rec.hndtyp != 'OC' ||
								model.nidgrp.rec.expflg == 'X'
							">反担保敞口</c-checkbox>
							</el-form-item>
						</div>
					</div>
				</c-col> -->

				<!-- <c-col :span="24">
					<el-form-item label="基础贸易是/否跨境贸易" prop="nidgrp.rec.iscrotra">
						<c-select :disabled="model.nidgrp.rec.hndtyp != 'OT' || model.nidgrp.rec.gartyp == 'F'" v-model="model.nidgrp.rec.iscrotra" style="width: 100%" placeholder="请选择是否跨境贸易" dbCode="ISCROT">
						</c-select>
					</el-form-item>
				</c-col> -->

				<!-- <c-col :span="24">
					<el-form-item label="抵押标志" prop="nidgrp.rec.guaflg">
						<c-select v-model="model.nidgrp.rec.guaflg" style="width: 100%" placeholder="请选择抵押标志" dbCode="guaflg">
						</c-select>
					</el-form-item>
				</c-col> -->

				<!-- <c-col :span="24">
					<c-col :span="model.nidgrp.cbs.max.cur == 'CNY' ? 24 : 0" v-if="model.nidgrp.cbs.max.cur == 'CNY'">
						<el-form-item label="" prop="nidgrp.rec.cmtflg" class="checkbox-left">
							<c-checkbox true-label="X" false-label="" v-model="model.nidgrp.rec.cmtflg" @change="change2122Rmbflg">跨境人民币保函</c-checkbox>
						</el-form-item>
					</c-col>
				</c-col> -->
				<c-col :span="24">
					<c-col :span="24">
						<el-form-item label="担保类型" prop="nidgrp.rec.cfaguatyp">
							<c-select v-model="model.nidgrp.rec.cfaguatyp" style="width: 100%" placeholder="请选择对外担保类型" dbCode="CFAGUT" isShowKeyAndLabel></c-select>
						</el-form-item>
					</c-col>
				</c-col>
				<c-col :span="24" class="centerLable" v-if="model.nidgrp.cbs.max.cur == 'CNY'">
					<el-form-item label="" prop="nidgrp.rec.cmtflg" class="checkbox-left">
						<c-checkbox true-label="X" false-label="" v-model="model.nidgrp.rec.cmtflg" @change="change2122Rmbflg">跨境人民币保函</c-checkbox>
					</el-form-item>
				</c-col>
				<!-- <c-col :span="8" class="centerLable">
						<el-form-item label="" prop="nitp.dzbhflg" class="checkbox-left">
							<c-checkbox disabled v-model="model.nitp.dzbhflg">电子保函标志</c-checkbox>
						</el-form-item>
					</c-col> -->
				<!-- <c-col :span="model.nidgrp.cbs.max.cur == 'CNY' ? 12 : 24">
						<el-form-item label="" prop="nidgrp.rec.cxmflg" class="checkbox-left">
							<c-checkbox v-model="model.nidgrp.rec.cxmflg" true-label="Y" false-label="N">生成查询码</c-checkbox>
						</el-form-item>
					</c-col> -->

				<!-- <c-col :span="24">
					<el-form-item label="国家地区代码" prop="nidgrp.payeecountcode">
						<c-select v-model="model.nidgrp.payeecountcode" isShowKeyAndLabel style="width: 100%" placeholder="请选择国家地区代码">
							<el-option v-for="item in model.bopCtyList" :key="item.cod" :value="item.cod" :label="`${item.cod} - ${item.txt}`">
							</el-option>
						</c-select>
					</el-form-item>
				</c-col> -->

				<!-- <c-col :span="24" class="centerLable">
          <el-form-item>
            <c-button size="small" type="primary" disabled style="color: white; ">
              显示文本
            </c-button>
          </el-form-item>
        </c-col>
        <c-col :span="24" class="centerLable">
          <el-form-item>
            <c-button size="small" type="primary" disabled>
              协议签署
            </c-button>
          </el-form-item>
        </c-col> -->

				<c-col :span="24">
					<div class="custom-box-wrap">
						<div style="width: calc(100% - 120px);">
							<el-form-item label="保函文本语言种类" prop="nidgrp.rec.giduil">
								<c-select v-model="model.nidgrp.rec.giduil" style="width: 100%" placeholder="请选择保函文本语言种类" dbCode="uiltxt" :filterKey="['CN','EN']">
									<el-option v-for="item in giduilList" :key="item.id" :label="item.codeName" :value="item.codeValue">
									</el-option>
								</c-select>
							</el-form-item>
						</div>
						<div style="width: 100px;margin-left: 20px;display: flex;align-items: flex-start;">
							<el-form-item label="" prop="nidgrp.rec.teskeyunc" class="checkbox-left" label-width="5px">
								<c-checkbox true-label="X" false-label="" v-model="model.nidgrp.rec.teskeyunc">印押不符
								</c-checkbox>
							</el-form-item>
						</div>
					</div>
				</c-col>

				<c-col :span="24">
					<el-form-item label="合同号" prop="nidgrp.rec.orcref">
						<c-input v-model="model.nidgrp.rec.orcref" maxlength="100" placeholder="请输入合同号"></c-input>
					</el-form-item>
				</c-col>

				<c-col :span="24">
					<c-ptap :argadr="{title: '受益人', grp: 'nidgrp', rol: 'ben'}" :disabled="true" :haveAdrLabel="true" :isAdrblk="false" :requiredExtkey="true" :model="model" ptytyp="C">
					</c-ptap>
				</c-col>

				<c-col :span="24">
					<c-ptap :argadr="{title: '担保行', grp: 'nidgrp', rol: 'iss'}" :haveAdrLabel="true" :isAdrblk="true" @handleChange="setIssBankChange" :model="model" ptytyp="B">
					</c-ptap>
				</c-col>

			</c-col>
		</c-col>
	</div>
</template>
<script>
import event from "../event";
import Default from "../model/default";
export default {
  inject: ["root"],
  props: ["model", "codes"],
  mixins: [event, Default],
  data() {
    return {
      // markOrgList: [],
      // hndtypList: [],
      // atxinrList: [{ value: "<NILTXT>", label: "空白文本" }],
      giduilList: [],
      curtxtList: []
    };
  },
  computed: {},
  methods: {},
  mounted() {
    // this.queryOrgList(),
    this.getResponsibleUser();
    // this.getHndtypData();
    this.getGidUil();
  }
};
</script>
<style scoped>
.el-textarea .el-textarea__inner {
  height: 100px;
}
</style>