<template>
  <div class="eibs-tab">
    <div :class="model.recgrp.tgfpp.length > 1 ? 'dcl-wrap' : 'dcl-wrap1'"
      v-if="model.recgrp.tgfpp && model.recgrp.tgfpp.length">
      <div class="dcl-left div-tags" v-if="model.recgrp.tgfpp.length > 1">
        <div class="dcl-item" v-for="(item, index) in model.recgrp.tgfpp" :key="index"
          :class="[curActive === index ? 'active-tag' : '']">
          期货信息({{ index + 1 }})
        </div>
      </div>
      <div v-for="(item, index) in model.recgrp.tgfpp" :key="index+'1'" v-show="curActive == index"
        :class="model.recgrp.tgfpp.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.tgfpp.${curActive}.seqno`">
                <c-fullbox>
                  <c-input v-model="model.recgrp.tgfpp[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.tgfpp.${curActive}.listopertype`">
                <c-select v-model="model.recgrp.tgfpp[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.tgfpp.${curActive}.tradedate`">
                <c-date-picker type="date" v-model="model.recgrp.tgfpp[curActive].tradedate" style="width:100%" disabled
                  placeholder="请输入"></c-date-picker>
              </el-form-item>
            </c-col>
          </c-col>
          <c-col :span="12" class="col-right">
            <c-col :span="24">
              <el-form-item label="合约金额" :prop="`recgrp.tgfpp.${curActive}.contractamt`"> 
                <c-input-currency v-model="model.recgrp.tgfpp[curActive].contractamt" style="width: 100%" disabled
                  placeholder="请输入合约金额"></c-input-currency>
              </el-form-item>
            </c-col>
            <c-col :span="24">
              <el-form-item label="到期日" :prop="`recgrp.tgfpp.${curActive}.enddate`">
                <c-date-picker type="date" v-model="model.recgrp.tgfpp[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.tgfpp.${curActive}.tradedirection`">
                <c-select v-model="model.recgrp.tgfpp[curActive].tradedirection" dbCode="tradir" style="width: 100%" placeholder="请输入" disabled>
                </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>