<template>
  <el-tabs v-model="activeName" @tab-click="handleClick">
    <!-- 器官 -->
    <el-tab-pane :label="$t('dictionary:template:basicData:organs')" name="organs">

      <OrgansTbl
        :criterion-id="criterionId"
        :is-complete-config="isCompleteConfig"
      />
    </el-tab-pane>
    <!-- 疗效评估 -->
    <el-tab-pane :label="$t('dictionary:template:basicData:efficacyAssessment')" name="efficacyAssessment">
      <EfficacyAssessment
        v-if="tabs.includes('efficacyAssessment')"
        :criterion-id="criterionId"
        :criterion-type="criterionType"
        :is-complete-config="isCompleteConfig"
      />
    </el-tab-pane>
    <!-- 标准字典 -->
    <el-tab-pane :label="$t('dictionary:template:basicData:criterionDictionary')" name="criterionDictionary">
      <CriterionDictionary
        v-if="tabs.includes('criterionDictionary')"
        :criterion-id="criterionId"
        :is-complete-config="isCompleteConfig"
      />
    </el-tab-pane>
  </el-tabs>
</template>
<script>
import OrgansTbl from './OrgansTbl'
import EfficacyAssessment from './EfficacyAssessment'
import CriterionDictionary from './CriterionDictionary'
export default {
  name: 'CriterionsBaseData',
  components: { OrgansTbl, EfficacyAssessment, CriterionDictionary },
  props: {
    criterionId: {
      type: String,
      required: true
    },
    isCompleteConfig: {
      type: Boolean,
      required: true
    },
    criterionType: {
      type: Number,
      required: true
    },
  },
  data() {
    return {
      activeName: 'organs',
      tabs: ['organs']
    }
  },
  methods: {
    handleClick(tab, event) {
      if (this.tabs.includes(tab.name)) {
        return
      } else {
        this.tabs.push(tab.name)
      }
    }
  }
}
</script>
