<template>
	<div class="eibs-tab">
		<div :class="model.cfagit.recgrp.vrf.length > 1 ? 'vrf-wrap' : 'vrf-wrap1'" v-if="model.cfagit.recgrp.vrf && model.cfagit.recgrp.vrf.length">
			<div class="vrf-left div-tags" v-if="model.cfagit.recgrp.vrf.length > 1">
				<div class="vrf-item" v-for="(item, index) in model.cfagit.recgrp.vrf" :key="index" @click="handleActive(index)" :class="[curActive === index ? 'active-tag' : '']">
					履约信息{{ index + 1 }}
				</div>
			</div>
			<div :class="model.cfagit.recgrp.vrf.length > 1 ? 'vrf-right' : 'vrf-right1'">
				<c-col :span="24">
					<!-- ==================================左边-外债编号================================ -->
					<c-col :span="12" style="padding-right: 20px">
						<c-col :span="24">
							<el-form-item label="对外担保编号" :prop="`cfagit.recgrp.vrf.${curActive}.exguarancode`">
								<c-input v-model="model.cfagit.recgrp.vrf[curActive].exguarancode" disabled maxlength="28" placeholder="请输入对外担保编号"></c-input>
							</el-form-item>
						</c-col>
						<c-col :span="24">
							<el-form-item label="履约编号" :prop="`cfagit.recgrp.vrf.${curActive}.complianceno`">
								<c-input v-model="model.cfagit.recgrp.vrf[curActive].complianceno" disabled maxlength="4" placeholder="请输入履约编号"></c-input>
							</el-form-item>
						</c-col>
						<c-col :span="24">
							<el-form-item label="操作类型" :prop="`cfagit.recgrp.vrf.${curActive}.actiontype`">
								<c-select v-model="model.cfagit.recgrp.vrf[curActive].actiontype" disabled style="width: 100%" placeholder="请选择操作类型" dbCode="action" @change="changeActiontype(curActive)">
								</c-select>
							</el-form-item>
						</c-col>
						<c-col :span="24">
							<el-form-item label="担保人代码" :prop="`cfagit.recgrp.vrf.${curActive}.guarantorcode`" :rules="[{required: model.cfagit.recgrp.vrf[curActive].guarantorcode ? false : true, message: '必输项',trigger: ['blur', 'change'] }]">
								<c-input v-model="model.cfagit.recgrp.vrf[curActive].guarantorcode" disabled maxlength="12" placeholder="请输入担保人代码"></c-input>
							</el-form-item>
						</c-col>
						<c-col :span="24">
							<el-form-item label="银行业务参号" :prop="`cfagit.recgrp.vrf.${curActive}.buscode`" :rules="[{required: model.cfagit.recgrp.vrf[curActive].buscode ? false : true, message: '必输项',trigger: ['blur', 'change'] }]">
								<c-input v-model="model.cfagit.recgrp.vrf[curActive].buscode" :disabled="!isDisabled" maxlength="32" placeholder="请输入银行业务参号"></c-input>
							</el-form-item>
						</c-col>
						<c-col :span="24">
							<el-form-item label="受益人代码" :prop="`cfagit.recgrp.vrf.${curActive}.bencode`">
								<c-input v-model="model.cfagit.recgrp.vrf[curActive].bencode" :disabled="!isDisabled" maxlength="32" placeholder="请输入受益人代码"></c-input>
							</el-form-item>
						</c-col>
						<c-col :span="24">
							<el-form-item label="受益人中文名称" :prop="`cfagit.recgrp.vrf.${curActive}.bename`" :rules="[{ validator: validateBename, trigger: ['blur', 'change'] }]">
								<c-input v-model="model.cfagit.recgrp.vrf[curActive].bename" :disabled="!isDisabled" maxlength="90" placeholder="请输入受益人中文名称"></c-input>
							</el-form-item>
						</c-col>
						<c-col :span="24">
							<el-form-item label="受益人英文名称" :prop="`cfagit.recgrp.vrf.${curActive}.benamen`">
								<c-input v-model="model.cfagit.recgrp.vrf[curActive].benamen" :disabled="!isDisabled" maxlength="90" placeholder="请输入受益人英文名称"></c-input>
							</el-form-item>
						</c-col>
						<c-col :span="24">
							<el-form-item label="履约日期" :prop="`cfagit.recgrp.vrf.${curActive}.guperdate`" :rules="[{ required: model.cfagit.recgrp.vrf[curActive].guperdate ? false : true, validator: validateGuperdate, trigger: ['blur', 'change'] }]">
								<c-date-picker type="date" v-model="model.cfagit.recgrp.vrf[curActive].guperdate" :disabled="!isDisabled" style="width: 100%" placeholder="请选择履约日期" value-format="yyyy-MM-dd"></c-date-picker>
							</el-form-item>
						</c-col>
						<c-col :span="24">
							<c-col :span="12">
								<el-form-item label="履约金额" :prop="`cfagit.recgrp.vrf.${curActive}.gupercurr`" :rules="[{ required: model.cfagit.recgrp.vrf[curActive].gupercurr ? false : true, validator: validateGupercurr, trigger: ['blur', 'change'] }]">
									<c-select v-model="model.cfagit.recgrp.vrf[curActive].gupercurr" :disabled="!isDisabled" maxlength="3" placeholder="请输入履约币种" dbCode="curtxt"></c-select>
								</el-form-item>
							</c-col>
							<c-col :span="12">
								<el-form-item label="" :prop="`cfagit.recgrp.vrf.${curActive}.guperamount`" label-width="0" style="margin-left:5px;" :rules="[{ validator: validateGuperamount, trigger: ['blur', 'change'] }]">
									<c-input-currency v-model="model.cfagit.recgrp.vrf[curActive].guperamount" :disabled="!isDisabled" placeholder="请输入履约金额">
									</c-input-currency>
								</el-form-item>
							</c-col>
						</c-col>
						<c-col :span="24">
							<el-form-item label="购汇履约金额" :prop="`cfagit.recgrp.vrf.${curActive}.pguperamount`" :rules="[{ validator: validatePguperamount, trigger: ['blur', 'change'] }]">
								<c-input-currency v-model="model.cfagit.recgrp.vrf[curActive].pguperamount" :disabled="!isDisabled" placeholder="请输入购汇履约金额">
								</c-input-currency>
							</el-form-item>
						</c-col>
						<c-col :span="24">
							<el-form-item label="备注" :prop="`cfagit.recgrp.vrf.${curActive}.remark`">
								<c-input type="textarea" v-model="model.cfagit.recgrp.vrf[curActive].remark" :disabled="!isDisabled" maxlength="248" show-word-limit placeholder="请输入备注" :rows="5"></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="删除原因" :prop="`cfagit.recgrp.vrf.${curActive}.actiondesc`" :rules="[{ validator: validateActiondesc, trigger: ['blur', 'change'] }]">
								<c-input type="textarea" v-model="model.cfagit.recgrp.vrf[curActive].actiondesc" maxlength="128" show-word-limit placeholder="请输入删除原因" :rows="5" :disabled="disabledActiondesc" @change="changeActiondesc(curActive)"></c-input>
							</el-form-item>
						</c-col>
						<c-col :span="24">
							<el-form-item label="" :prop="`cfagit.recgrp.vrf.${curActive}.acp`" class="checkbox-left">
								<c-checkbox true-label="X" false-label="" v-model="model.cfagit.recgrp.vrf[curActive].acp" :disabled="model.cfagit.vrfflg == ''" @change="acpChange">确认</c-checkbox>
							</el-form-item>
						</c-col>
						<c-col :span="24">
							<el-form-item>
								<span v-if="this.model.cfagit.recgrp.vrf[curActive].sta == 'S'">已发送</span>
								<span v-if="this.model.cfagit.recgrp.vrf[curActive].sta == 'W'">待发送</span>
								<span v-if="this.model.cfagit.recgrp.vrf[curActive].sta == 'D'">已撤销</span>
								<span v-if="this.model.cfagit.recgrp.vrf[curActive].sta == 'G'">已删除</span>
								<span v-if="this.model.cfagit.recgrp.vrf[curActive].sta == 'P'">已作废</span>
								<span v-if="this.model.cfagit.recgrp.vrf[curActive].sta == 'E'">待修改</span>
							</el-form-item>
						</c-col>
					</c-col>
				</c-col>
			</div>
		</div>
	</div>
</template>
<script>
export default {
  inject: ["root"],
  props: ["model", "codes"],
  mixins: [],
  data() {
    return {
      curActive: 0,
      isDisabled: false
    };
  },
  computed: {
    disabledActiondesc() {
      let actiontype = this.model.cfagit.recgrp.vrf[this.curActive].actiontype;
      if (
        actiontype == "D" &&
        this.model.cfagit.recgrp.vrf[this.curActive].acp
      ) {
        return false;
      } else {
        if (this.model.cfagit.recgrp.vrf[this.curActive].acp) {
          this.model.cfagit.recgrp.vrf[this.curActive].actiondesc = "";
        }
        return true;
      }
      // this.changeActiondesc()
    }
  },
  methods: {
    handleActive(ind) {
      this.curActive = ind;
    },
    acpChange(val) {
      if (val == "X") {
        this.isDisabled = true;
        this.model.cfagit.recgrp.vrf[curActive].actiontype = "C";
      } else {
        this.isDisabled = false;
        this.model.cfagit.recgrp.vrf[curActive].actiontype = "A";
      }
    },
    // default
    changeActiontype(curActive) {
      if (!this.model.cfagit.recgrp.vrf[curActive].actiontype) {
        this.model.cfagit.recgrp.vrf[curActive].actiontype = "A";
      }
    },
    // changeActiondesc(curActive) {
    // 	let actiontype = this.model.cfagit.recgrp.vrf[curActive].actiontype;
    // 		if(actiontype == 'D' && this.model.cfagit.recgrp.vrf[curActive].acp) {
    // 				return;
    // 			}else{
    // 				if(this.model.cfagit.recgrp.vrf[curActive].acp) {
    // 					this.model.cfagit.recgrp.vrf[curActive].actiondesc = '';
    // 				}
    // 			}
    // },
    validateBename(rule, value, callback) {
      if (!value && !this.model.cfagit.recgrp.vrf[this.curActive].benamen) {
        return callback(new Error("受益人中文名称和英文名称至少填写一个！"));
      }
      callback();
    },
    validateGuperdate(rule, value, callback) {
      let valuedate = this.model.cfagit.recgrp.bas.contractdate;
      if (!value) {
        return callback(new Error("必输项"));
      } else {
        if (value < valuedate) {
          return callback(new Error("履约日期不能小于签约日期！"));
        }
      }
      callback();
    },
    validateActiondesc(rule, value, callback) {
      if (this.model.cfagit.recgrp.vrf[this.curActive].actiontype == "D") {
        if (!value) {
          return callback(new Error("必输项"));
        }
      }
      callback();
    },
    validatePguperamount(rule, value, callback) {
      if (Number(value) < 0) {
        return callback(new Error("购汇履约金额必须大于等于0！"));
      } else {
        if (
          Number(value) >
          Number(this.model.cfagit.recgrp.vrf[this.curActive].guperamount)
        ) {
          return callback(new Error("购汇履约金额必须小于等于履约金额！"));
        }
      }
      callback();
    },
    validateGuperamount(rule, value, callback) {
      if (!value) {
        return callback(new Error("必输项"));
      } else {
        if (Number(value) < 0) {
          return callback(new Error("履约金额必须大于等于0！"));
        } else {
          if (
            Number(value) > Number(this.model.cfagit.recgrp.bas.guaranamount)
          ) {
            return callback(new Error("履约金额不能大于保函金额！"));
          }
        }
      }
      callback();
    },
    validateGupercurr(rule, value, callback) {
      if (!value) {
        return callback(new Error("必输项"));
      } else {
        if (value != this.model.cfagit.recgrp.bas.guarancurr) {
          return callback(new Error("履约币种应等于签约币种！"));
        }
      }
      callback();
    }
  },
  created() {},
  watch: {}
};
</script>
<style scoped>
.vrf-wrap {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  border: 1px solid #f1f1f1;
  box-sizing: border-box;
  border-radius: 3px;
}

.vrf-wrap1 {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  box-sizing: border-box;
  border-radius: 3px;
}

.vrf-left {
  width: 120px;
  height: 100%;
  overflow: auto;
  padding: 10px 0 10px 10px;
  position: relative;
}

.div-tags {
  padding: 0 !important;
}

.vrf-item {
  width: 100%;
  height: 30px;
  text-align: center;
  line-height: 30px;
  cursor: pointer;
}

.vrf-right {
  width: calc(100% - 200px);
  height: 100%;
  border-left: 1px solid #f1f1f1;
  overflow-y: auto;
  box-sizing: border-box;
  padding: 10px 10px 10px 0;
}

.vrf-right1 {
  height: 100%;
  overflow-y: auto;
  box-sizing: border-box;
}
</style>