<template>
  <div class="question-wrapper">
    <el-tabs v-model="activeTab" @tab-click="clickTab">
      <el-tab-pane
        v-for="item in tabPaneList"
        :key="item.value"
        :label="item.label"
        :name="item.value"
      >
        <qc-questions v-if="activeTab == 'qc'" />
        <criterions-tmp v-if="activeTab == 'criterions'" />
        <clinical-data v-if="activeTab == 'clinicalData'" />
        <medical-audit v-if="activeTab == 'medicalAudit'" />
        <Anonymization v-if="activeTab == 'anonymization'" />
        <IncreaseFields v-if="activeTab == 'increasefields'" />
        <Email v-if="activeTab == 'email'" />
        <Sign v-if="activeTab == 'sign'" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import QcQuestions from "./components/QcQuestions.vue";
import CriterionsTmp from "./components/CriterionsTmp";
import ClinicalData from "./components/ClinicalDataConfig";
import MedicalAudit from "./components/MedicalAudit";
import Anonymization from "./components/Anonymization";
import IncreaseFields from "./components/IncreaseFields";
import Email from "./email/index.vue";
import Sign from "./sign/index.vue";
export default {
  name: "Questions",
  components: {
    QcQuestions,
    CriterionsTmp,
    ClinicalData,
    Anonymization,
    IncreaseFields,
    Email,
    Sign,
    MedicalAudit,
  },
  data() {
    return {
      activeTab: null,
      defaultTabPaneList: [
        { label: "QC问题配置", name: "qc" },
        { label: "阅片标准配置", name: "criterions" },
        { label: "临床数据配置", name: "clinicalData" },
        { label: "医学审核问题配置", name: "medicalAudit" },
        { label: "DICOM字段匿名化配置", name: "anonymization" },
        { label: "DICOM字段匿名化配置", name: "increasefields" },
        { label: "邮件管理", name: "email" },
        { label: "签名管理", name: "sign" },
      ],
      tabPaneList: [],
    };
  },
  created() {
    if (this.$route.query.tabActive) {
      this.activeTab = this.$route.query.tabActive;
    }
    this.tabPaneList = [];
    this.$d.Common_Template_Type.forEach((item) => {
      if (this.hasPermi([`dictionary:template:${item.value}`])) {
        if (!this.activeTab) {
          this.activeTab = item.value;
        }
        this.tabPaneList.push(item);
      }
    });
  },
  methods: {
    clickTab(tab, event) {
      this.$router.push({ path: `/dictionary/template?tabActive=${tab.name}` });
    },
  },
};
</script>
<style lang="scss">
.question-wrapper {
  .el-tabs {
    height: 100%;
    display: flex;
    flex-direction: column;
  }
  .el-tabs__header {
    height: 40px;
    margin-bottom: 5px;
  }
  .el-tabs__content {
    flex: 1;
    .el-tab-pane {
      height: 100%;
    }
  }
}
</style>

