<template>
	<div class="eibs-tab">
		<div :class="model.cfagit.recgrp.dcl.length > 1 ? 'dcl-wrap' : 'dcl-wrap1'" v-if="model.cfagit.recgrp.dcl && model.cfagit.recgrp.dcl.length">
			<div class="dcl-left div-tags" v-if="model.cfagit.recgrp.dcl.length > 1">
				<div class="dcl-item" v-for="(item, index) in model.cfagit.recgrp.dcl" :key="index" @click="handleActive(index)" :class="[curActive === index ? 'active-tag' : '']">
					{{ index + 1 }}
				</div>
			</div>
			<div :class="model.cfagit.recgrp.dcl.length > 1 ? 'dcl-right' : 'dcl-right1'">
				<c-col :span="24">
					<!-- ==================================左边-外债编号================================ -->
					<c-col :span="12" style="padding-right: 20px">
						<c-col :span="24">
							<el-form-item :label="$t('gitopn.对外担保编号')" :prop="`cfagit.recgrp.dcl.${curActive}.exguarancode`">
								<c-input v-model="model.cfagit.recgrp.dcl[curActive].exguarancode" maxlength="28" placeholder="请输入对外担保编号" disabled></c-input>
							</el-form-item>
						</c-col>
						<c-col :span="24">
							<el-form-item :label="$t('gitopn.操作类型')" :prop="`cfagit.recgrp.dcl.${curActive}.actiontype`">
								<c-select v-model="model.cfagit.recgrp.dcl[curActive].actiontype" style="width: 100%" placeholder="请选择操作类型" dbCode="action" disabled>
								</c-select>
							</el-form-item>
						</c-col>
						<c-col :span="24">
							<el-form-item
                :label="$t('gitopn.担保责任余额变动日期')" 
								:prop="`cfagit.recgrp.dcl.${curActive}.wabachandate`"
                :rules="[
									{required: true, message: '必输项',trigger: ['blur', 'change']},
                  {
                    validator: validatePrepayerscale,
                    trigger: ['blur', 'change']
                  }
                ]">
								<c-date-picker :disabled="disabled" type="date" v-model="model.cfagit.recgrp.dcl[curActive].wabachandate" 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="$t('gitopn.担保责任余额')"
								:prop="`cfagit.recgrp.dcl.${curActive}.basere`"
								:rules="[{ validator: validatePrepayerbasere, trigger: ['blur', 'change'] }]"
							>
								<c-input-currency :disabled="disabled" v-model="model.cfagit.recgrp.dcl[curActive].basere" class="amtInputRight" placeholder="请输入担保责任余额">
								</c-input-currency>
							</el-form-item>
						</c-col>

						<c-col :span="24">
							<el-form-item :label="$t('gitopn.备注')" :prop="`cfagit.recgrp.dcl.${curActive}.remark`">
								<c-input type="textarea" v-model="model.cfagit.recgrp.dcl[curActive].remark" 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="$t('gitopn.删除原因')" :prop="`cfagit.recgrp.dcl.${curActive}.actiondesc`">
								<c-input type="textarea" v-model="model.cfagit.recgrp.dcl[curActive].actiondesc" maxlength="248" show-word-limit placeholder="请输入删除原因" :rows="5" disabled></c-input>
							</el-form-item>
						</c-col>
						<c-col :span="24">
							<el-form-item label="" :prop="`cfagit.recgrp.dcl.${curActive}.acp`" class="checkbox-left">
								<c-checkbox true-label="X" false-label="" v-model="model.cfagit.recgrp.dcl[curActive].acp" disabled>确认</c-checkbox>
							</el-form-item>
						</c-col>
					</c-col>
				</c-col>
			</div>
		</div>
	</div>
</template>
<script>

export default {
  inject: ["root"],
 	props: {
		model: {
      type: Object,
      default: undefined,
		},
		codes: {},
		disabled: {
			type: Boolean,
			default: false,
		}
	},
  mixins: [],
  data() {
    return {
      curActive: 0,
      currentFormData: {}
    };
  },
  methods: {
    handleActive(ind) {
      this.curActive = ind;
		},
		validatePrepayerscale(rule,value,callback){
      if(this.model.chgdat) {
        if(new Date(value).getTime() !== new Date(this.model.chgdat).getTime()){
          return callback(new Error('原计划中指定的修改责任余额日期与担保责任余额变动日期不一致'))
        }
      }
			callback()
		},
		validatePrepayerbasere(rule,value,callback){
			if (this.model.cfagit.recgrp.dcl[this.curActive].basere == null){
				return callback(new Error('必输项'))
			} else if(this.model.cfagit.recgrp.dcl[this.curActive].basere < 0) {
        return callback(new Error('责任担保余额必须大于等于0'))
      }
      if(this.model.cfagit.recgrp.bas.guaranamount) {
        if (Number(this.model.cfagit.recgrp.dcl[this.curActive].basere) > Number(this.model.cfagit.recgrp.bas.guaranamount)){
          return callback(new Error('责任担保余额不能大于保函金额'))
        }
      }
			callback()
		}

  },
  created() {},
  watch: {}
};
</script>
<style lang="less" scoped>
.dcl-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;
}

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

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

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

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

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

.dcl-right1 {
  height: 100%;
  overflow-y: auto;
  box-sizing: border-box;
} 

.amtInputRight{
  /deep/ .el-input__inner{
    text-align: left;
  }
}
</style>