<template>
  <el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane v-for="item of $d.ReadingCategory" :key="item.id" :label="item.label" :name="item.label">
      <QuestionTpl v-if="tabs.includes(item.label)" :trial-reading-criterion-id="trialReadingCriterionId" :reading-category="item.value" />
    </el-tab-pane>
  </el-tabs>
</template>
<script>
import QuestionTpl from './QuestionTpl'
export default {
  name: 'QuestionsPreview',
  components: {
    QuestionTpl
  },
  props: {
    trialReadingCriterionId: {
      type: String,
      default() {
        return ''
      }
    }
  },
  data() {
    return {
      activeName: this.$d.ReadingCategory[0].label,
      tabs: [this.$d.ReadingCategory[0].label]
    }
  },
  methods: {
    handleClick(tab, event) {
      if (this.tabs.includes(tab.name)) {
        return
      } else {
        this.tabs.push(tab.name)
      }
    }
  }
}
</script>
