<template>
  <div id="publicContent" :class="formClass">
    <el-tabs
      v-model="activeName"
      type="card"
      style="margin-top: 10px"
      class="publicTab"
      v-loading="fromLoading"
      v-if="formTabs && formTabs.length > 0"
      @tab-click="handleTabClick"
    >
      <el-tab-pane
        :label="form.label"
        :name="'index' + index"
        v-for="(form, index) in formTabs"
        :key="form.id"
      >
        <transition mode="out-in" name="fade-transform">
          <div v-show="activeName === 'index' + index">
            <template v-if="form.formId">
              <form-tab
                :patient-id="patientId"
                :patient-standby-id="patientStandbyId"
                :form="form"
                :disabled="disabled"
                contrast
                @setFormJson="setFormJson"
                @handleConfirm="handleConfirm"
              ></form-tab>
            </template>
          </div>
        </transition>
      </el-tab-pane>
    </el-tabs>
    <el-empty v-else description="暂无数据"></el-empty>
  </div>
</template>

<script>
import mixin from "./mixin"

export default {
  name: "ConfigForms",
  mixins: [mixin],
  props: {
    disabled: Boolean,
    formType: String,
    patientId: String,
    formClass:String,
  },
  data() {
    return {}
  },
  methods: {
    handleConfirm(data, done, cb) {
      this.addPatient(data, done, cb)
    },
  },
  created() {
    // 字典formType 1 筛查表单
    this.getCurrentFormByType(this.formType)
  },
}
</script>

<style lang="scss" scoped>
#publicContent {
  padding: 32px 24px;
}
.publicTab {
  width: calc(100% - 200px);
}
::v-deep {
  .el-tabs--card > .el-tabs__header {
    border-bottom: none;
  }
  .el-tabs--card > .el-tabs__header .el-tabs__nav {
    border: none;
  }
  .el-tabs--card > .el-tabs__header .el-tabs__item {
    min-width: 116px;
    text-align: center;
    background: #f0f1fa;
    font-size: 14px;
    border: none;
  }
  .el-tabs--card > .el-tabs__header .el-tabs__item.is-active {
    background: #4e68ff;
    color: #fff;
  }
}
.my-form {
  overflow-x: scroll;
}
.follow-form {
  .publicTab {
    margin-bottom: 10px;
    ::v-deep {
      .el-collapse-item__header {
        border-width: 1px 0px 0px;
      }
      .row24 {
        border-top: 1px solid #cccccc;
      }
      .custom-form-item {
        border-width: 1px 0px 0px;
      }
      .el-collapse-item {
        margin-bottom: 20px;
        border-radius: 4px;
        overflow: hidden;
        border: 1px solid #cccccc;
      }
      .el-collapse-item__wrap {
        border: none;
      }
      .el-collapse-item:nth-child(1) {
        border: 1px solid #cccccc;
      }
      // .custom-form-item:last-child {
      //   border: none;
      // }
      // .row24.el-col-lg-12:nth-child(2n) {
      //   border-width: 0px 0px 0px 1px;
      // }
      .el-form-item {
        .el-form-item__label {
          text-align: left;
          background: #fafafa;
          font-size: 14px;
          color: #333333;
          border-right: 1px solid #cccccc;
          width: 80px !important;
          padding: 18px 10px;
          margin-right: 20px;
          text-align: center;
        }
      }
      .el-form-item {
        padding: 0px;
      }
      .el-col {
        // border-top: 1px solid #cccccc;
      }
    }
  }
}
</style>
