<template>
  <div id="publicContent">
    <div v-if="formTabs && formTabs.length > 0">
      <el-button class="draftButton">{{
        formType == 1 ? "临时保存" : "返回"
      }}</el-button>
      <el-tabs
        v-model="activeName"
        type="card"
        :style="{ width: formType == 1 ? '100%' : 'calc(100% - 200px)' }"
        class="publicTab"
        v-loading="fromLoading"
        @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>
    </div>
    <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,
  },
  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;
  position: relative;
  .draftButton {
    position: absolute;
    top: 46px;
    right: 40px;
    z-index: 999999;
    border-radius: 4px;
    border: 1px solid #4e68ff;
    color: #4e68ff;
  }
}
.publicTab {
  // width: calc(100%);
  margin-top: 10px;
}
::v-deep {
  .el-tabs--card > .el-tabs__header {
    width: calc(100% - 100px);
    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;
  }
}
</style>
