<template>
  <div class="question-wrapper">
    <el-tabs v-model="activeTab" @tab-click="clickTab">
      <!-- QC问题配置 -->
      <el-tab-pane :label="$t('dictionary:template:tab:qcConfig')" name="qc">
        <qc-questions v-if="activeTab == 'qc'" />
      </el-tab-pane>
      <!-- 阅片标准配置 -->
      <el-tab-pane :label="$t('dictionary:template:tab:criterionsConfig')" name="criterions">
        <criterions-tmp v-if="activeTab == 'criterions'" />
      </el-tab-pane>
      <!-- 临床数据配置 -->
      <el-tab-pane :label="$t('dictionary:template:tab:clinicalDataConfig')" name="clinicalData">
        <clinical-data v-if="activeTab == 'clinicalData'" />
      </el-tab-pane>
      <!-- 医学审核问题配置 -->
      <el-tab-pane :label="$t('dictionary:template:tab:medicalConfig')" name="medicalAudit">
        <medical-audit v-if="activeTab == 'medicalAudit'" />
      </el-tab-pane>
      <!-- DICOM字段匿名化配置 -->
      <el-tab-pane :label="$t('dictionary:template:tab:dicomTagConfig')" name="anonymization">
        <Anonymization v-if="activeTab == 'anonymization'" />
      </el-tab-pane>
      <!-- DICOM字段新增配置 -->
      <el-tab-pane :label="$t('dictionary:template:tab:dicomTagAddConfig')" name="increasefields">
        <IncreaseFields v-if="activeTab == 'increasefields'" />
      </el-tab-pane>
      <!-- 邮件管理 -->
      <el-tab-pane :label="$t('dictionary:template:tab:emailConfig')" name="email">
        <Email v-if="activeTab == 'email'" />
      </el-tab-pane>
      <!-- 签名管理 -->
      <el-tab-pane :label="$t('dictionary:template:tab:signConfig')" name="sign">
        <Sign v-if="activeTab == 'sign'" />
      </el-tab-pane>
      <!-- 浏览器推荐 -->
      <el-tab-pane :label="$t('dictionary:template:tab:browserConfig')" name="browser">
        <Browser v-if="activeTab == 'browser'" />
      </el-tab-pane>
      <!-- 文件记录 -->
      <el-tab-pane :label="$t('dictionary:template:tab:fileConfig')" name="file">
        <File v-if="activeTab == 'file'" />
      </el-tab-pane>
      <!-- 用户协议 -->
      <el-tab-pane :label="$t('dictionary:template:tab:agreement')" name="agreement">
        <Agreement v-if="activeTab == 'agreement'" />
      </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'
import Browser from './browser/index.vue'
import File from './file/index.vue'
import Agreement from './agreement/index.vue'
export default {
  name: 'Questions',
  components: {
    QcQuestions,
    CriterionsTmp,
    ClinicalData,
    Anonymization,
    IncreaseFields,
    Email,
    Sign,
    MedicalAudit,
    Browser,
    File,
    Agreement
  },
  data() {
    return {
      activeTab: 'qc',
    }
  },
  mounted() {
    if (this.$route.query.tabActive) {
      this.activeTab = this.$route.query.tabActive
    } else {
      this.activeTab = 'qc'
    }
  },
  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>
