<template>
  <div class="eibs-tab">
    <div :class="model.recgrp.tgdpp.length > 1 ? 'dcl-wrap' : 'dcl-wrap1'"
      v-if="model.recgrp.tgdpp && model.recgrp.tgdpp.length">
      <div class="dcl-left div-tags" v-if="model.recgrp.tgdpp.length > 1">
        <div class="dcl-item" v-for="(item, index) in model.recgrp.tgdpp" :key="index"
          :class="[curActive === index ? 'active-tag' : '']">
          利率信息({{ index + 1 }})
        </div>
      </div>
      <div v-for="(item, index) in model.recgrp.tgdpp" :key="index+'1'" v-show="curActive == index"
        :class="model.recgrp.tgdpp.length > 1 ? 'dcl-right' : 'dcl-right1'">
        <c-col :span="24">
          <c-col :span="12" class="col-left">
            <c-col :span="24">
              <el-form-item label="明细主键" :prop="`recgrp.tgdpp.${curActive}.seqno`">
                <c-fullbox>
                  <c-input v-model="model.recgrp.tgdpp[curActive].seqno" style="width: 100%" placeholder="请输入明细主键"
                    disabled></c-input>
                </c-fullbox>
              </el-form-item>
            </c-col>
            <c-col :span="24">
              <el-form-item label="明细操作类型" :prop="`recgrp.tgdpp.${curActive}.listopertype`">
                <c-select v-model="model.recgrp.tgdpp[curActive].listopertype" dbCode="action" style="width: 100%" placeholder="请输入操作类型"
                  disabled>
                </c-select>
              </el-form-item>
            </c-col>
            <c-col :span="24">
              <el-form-item label="利率衍生品类型" :prop="`recgrp.tgdpp.${curActive}.ratederitype`">
                <c-select v-model="model.recgrp.tgdpp[curActive].ratederitype" dbCode="dertxt" style="width: 100%" placeholder="请输入">
                </c-select>
              </el-form-item>
            </c-col>
            <c-col :span="24">
              <c-col :span="12">
                <el-form-item label="换入币种" prop="`recgrp.tgdpp.${curActive}.incurrency`">
                  <c-select v-model="model.recgrp.tgdpp[curActive].incurrency" style="width: 100%" placeholder="请输入" dbCode="curtxt" sort="SRT">
                  </c-select>
                </el-form-item>
              </c-col>
              <c-col :span="12">
                <el-form-item label="换入名义本金金额" prop="`recgrp.tgdpp.${curActive}.inamt`">
                  <c-input-currency v-model="model.recgrp.tgdpp[curActive].inamt" placeholder="请输入金额"></c-input-currency>
                </el-form-item>
              </c-col>
            </c-col>
            <c-col :span="24">
              <el-form-item label="换入价格" :prop="`recgrp.tgdpp.${curActive}.inprice`">
                <c-input-currency v-model="model.recgrp.tgdpp[curActive].inprice"></c-input-currency>
              </el-form-item>
            </c-col>
            <c-col :span="24">
              <el-form-item label="换入利率基准" :prop="`recgrp.tgdpp.${curActive}.inrate`">
                <c-select v-model="model.recgrp.tgdpp[curActive].inrate" dbCode="rmb129" style="width: 100%" placeholder="请输入">
                </c-select>
              </el-form-item>
            </c-col>
            <c-col :span="24">
              <el-form-item label="近端汇率" :prop="`recgrp.tgdpp.${curActive}.nearrate`">
                <c-input v-model="model.recgrp.tgdpp[curActive].nearrate"></c-input>
              </el-form-item>
            </c-col>
            <c-col :span="24">
              <el-form-item label="远端汇率" :prop="`recgrp.tgdpp.${curActive}.disrate`">
                <c-input v-model="model.recgrp.tgdpp[curActive].disrate"></c-input>
              </el-form-item>
            </c-col>
          </c-col>
          <c-col :span="12" class="col-right">
            <c-col :span="24">
              <c-col :span="12">
                <el-form-item label="换出币种" prop="`recgrp.tgdpp.${curActive}.outcurrency`">
                  <c-select v-model="model.recgrp.tgdpp[curActive].outcurrency" style="width: 100%" placeholder="请输入" dbCode="curtxt" sort="SRT">
                  </c-select>
                </el-form-item>
              </c-col>
              <c-col :span="12">
                <el-form-item label="换出名义本金金额" prop="`recgrp.tgdpp.${curActive}.outamt`">
                  <c-input-currency v-model="model.recgrp.tgdpp[curActive].outamt" placeholder="请输入金额"></c-input-currency>
                </el-form-item>
              </c-col>
            </c-col>
            <c-col :span="24">
              <el-form-item label="换出价格" :prop="`recgrp.tgdpp.${curActive}.outprice`">
                <c-input-currency v-model="model.recgrp.tgdpp[curActive].outprice"></c-input-currency>
              </el-form-item>
            </c-col>
            <c-col :span="24">
              <el-form-item label="换出利率基准" :prop="`recgrp.tgdpp.${curActive}.outrate`">
                <c-select v-model="model.recgrp.tgdpp[curActive].outrate" dbCode="rmb129" style="width: 100%" placeholder="请输入">
                </c-select>
              </el-form-item>
            </c-col>
            <c-col :span="24">
              <el-form-item label="交易日" :prop="`recgrp.tgdpp.${curActive}.tradate`">
                <c-date-picker type="date" v-model="model.recgrp.tgdpp[curActive].tradate" style="width:100%"
                  placeholder="请输入"></c-date-picker>
              </el-form-item>
            </c-col>
            <c-col :span="24">
              <el-form-item label="起息日" :prop="`recgrp.tgdpp.${curActive}.startdate`">
                <c-date-picker type="date" v-model="model.recgrp.tgdpp[curActive].startdate" style="width:100%"
                  placeholder="请输入"></c-date-picker>
              </el-form-item>
            </c-col>
            <c-col :span="24">
              <el-form-item label="到期日" :prop="`recgrp.tgdpp.${curActive}.enddate`">
                <c-date-picker type="date" v-model="model.recgrp.tgdpp[curActive].enddate" style="width:100%"
                  placeholder="请输入"></c-date-picker>
              </el-form-item>
            </c-col>
            <c-col :span="24">
              <el-form-item label="付息频率" :prop="`recgrp.tgdpp.${curActive}.frequency`">
                <c-select v-model="model.recgrp.tgdpp[curActive].frequency" dbCode="freque" style="width: 100%" placeholder="请输入">
                </c-select>
              </el-form-item>
            </c-col>
          </c-col>
        </c-col>
      </div>

    </div>
  </div>
</template>
<script>
  import Api from "~/service/Api";
  export default {
    inject: ["root"],
    props: ["model", "codes"],
    mixins: [],
    data() {
      return {
        curActive: 0,
        currentFormData: {},
        bopcodDialogTableVisible: false,
        tableList: [],
        tableColumn: [
          { label: "交易代码", prop: "cod" },
          { label: "描述", prop: "txt" }
        ],
        dbcode: "",
      };
    },
    mounted() {

    },
    methods: {


    },
    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-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;
    background-color: rgba(102, 83, 242, 0.1);
  }

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

  .dcl-item {
    width: 100%;
    height: 60px;
    text-align: center;
    line-height: 25px;
    cursor: pointer;
    padding: 5px 5px;
    border: 1px solid #f1f1f1;
    box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.1);
    font-size: 14px;
  }

  .active-tag {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: #ffffff;
    border: 1px solid #f1f1f1;
  }

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

  .dcl-right1 {
    height: 100%;
    box-sizing: border-box;
  }
</style>