<template>
  <div class="eibs-tab">
    <div :class="model.recgrp.tgbpp.length > 1 ? 'dcl-wrap' : 'dcl-wrap1'"
      v-if="model.recgrp.tgbpp && model.recgrp.tgbpp.length">
      <div class="dcl-left div-tags" v-if="model.recgrp.tgbpp.length > 1">
        <div class="dcl-item" v-for="(item, index) in model.recgrp.tgbpp" :key="index"
          :class="[curActive === index ? 'active-tag' : '']">
          远期信息({{ index + 1 }})
        </div>
      </div>
      <div v-for="(item, index) in model.recgrp.tgbpp" :key="index+'1'" v-show="curActive == index"
        :class="model.recgrp.tgbpp.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.tgbpp.${curActive}.seqno`">
                <c-fullbox>
                  <c-input v-model="model.recgrp.tgbpp[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.tgbpp.${curActive}.listopertype`">
                <c-select v-model="model.recgrp.tgbpp[curActive].listopertype" dbCode="action" style="width: 100%" placeholder="请输入操作类型"
                  disabled>
                </c-select>
              </el-form-item>
            </c-col>
            <c-col :span="24">
              <div class="custom-box-wrap">
                <div style="width: 280px;">
                  <el-form-item label="买入币种及金额" prop="`recgrp.tgbpp.${curActive}.buycurrencycode`">
                    <c-select v-model="model.recgrp.tgbpp[curActive].buycurrencycode" style="width: 100%" disabled
                      placeholder="请选择币种" dbCode="curtxt" sort="SRT">
                    </c-select>
                  </el-form-item>
                </div>
                <div style="width: calc(100% - 280px);">
                  <el-form-item label-width="5px" prop="`recgrp.tgbpp.${curActive}.buyamt`">
                    <c-input-currency v-model="model.recgrp.tgbpp[curActive].buyamt"
                      :currency="model.recgrp.tgbpp[curActive].buycurrencycode" style="width:100%" placeholder="请输入" disabled>
                    </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="`recgrp.tgbpp.${curActive}.sellcurrencycode`">
                    <c-select v-model="model.recgrp.tgbpp[curActive].sellcurrencycode" style="width: 100%" disabled
                      placeholder="请选择币种" dbCode="curtxt" sort="SRT">
                    </c-select>
                  </el-form-item>
                </div>
                <div style="width: calc(100% - 280px);">
                  <el-form-item label-width="5px" prop="`recgrp.tgbpp.${curActive}.sellamt`">
                    <c-input-currency v-model="model.recgrp.tgbpp[curActive].sellamt"
                      :currency="model.recgrp.tgbpp[curActive].sellcurrencycode" style="width:100%" placeholder="请输入" disabled>
                    </c-input-currency>
                  </el-form-item>
                </div>
              </div>
            </c-col>

          </c-col>

          <c-col :span="12" class="col-right">
            <c-col :span="24">
              <el-form-item label="价格(汇率)" :prop="`recgrp.tgbpp.${curActive}.price`">
                <c-input-currency v-model="model.recgrp.tgbpp[curActive].price" disabled></c-input-currency>
              </el-form-item>
            </c-col>
            <c-col :span="24">
              <el-form-item label="交易日" :prop="`recgrp.tgbpp.${curActive}.tradedate`">
                <c-date-picker type="date" v-model="model.recgrp.tgbpp[curActive].tradedate" style="width:100%" disabled
                  placeholder="请输入"></c-date-picker>
              </el-form-item>
            </c-col>
            <c-col :span="24">
              <el-form-item label="到期日" :prop="`recgrp.tgbpp.${curActive}.enddate`">
                <c-date-picker type="date" v-model="model.recgrp.tgbpp[curActive].enddate" style="width:100%" disabled
                  placeholder="请输入"></c-date-picker>
              </el-form-item>
            </c-col>
            <c-col :span="24">
              <el-form-item label="结算日" :prop="`recgrp.tgbpp.${curActive}.settledate`">
                <c-date-picker type="date" v-model="model.recgrp.tgbpp[curActive].settledate" style="width:100%" disabled
                  placeholder="请输入"></c-date-picker>
              </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>