<template>
	<div class="eibs-tab">
		<div class="dcl-wrap" v-if="model.cfagit.recgrp.dcl && model.cfagit.recgrp.dcl.length">
			<div class="dcl-left div-tags">
				<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="dcl-right">
				<!-- ==================================左边-外债编号================================ -->
				<c-col :span="12" style="padding-right: 20px">
					<c-col :span="24">
						<el-form-item :label="$t('gitopn.对外担保编号')" prop="cfagit.recgrp.dcl.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.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.wabachandate">
							<c-date-picker type="date" v-model="model.cfagit.recgrp.dcl[curActive].wabachandate" style="width: 100%" placeholder="请选择担保责任余额变动日期" value-format="yyyy-MM-dd" @change="onCfaCurDate"></c-date-picker>
						</el-form-item>
					</c-col>
					<c-col :span="24">
						<el-form-item :label="$t('gitopn.担保责任余额')" prop="cfagit.recgrp.dcl.basere">
							<c-input-currency v-model="model.cfagit.recgrp.dcl[curActive].basere" placeholder="请输入担保责任余额" @change="onCfaCurDate">
							</c-input-currency>
						</el-form-item>
					</c-col>

					<c-col :span="24">
						<el-form-item :label="$t('gitopn.备注')" prop="cfagit.recgrp.dcl.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.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.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>
			</div>
		</div>
	</div>
</template>
<script>
import event from "../event";

export default {
  inject: ["root"],
  props: ["model", "codes"],
  mixins: [event],
  data() {
    return {
      curActive: 0,
      currentFormData: {}
    };
  },
  methods: {
    handleActive(ind) {
      this.curActive = ind;
    }
  },
  created() {},
  watch: {}
};
</script>
<style 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-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;
}
</style>