<template>
  <div>
    <el-tabs v-model="activeName" type="border-card">
      <el-tab-pane
        v-for="i in trialCriterionList"
        :key="i.TrialReadingCriterionId"
        :label="i.TrialReadingCriterionName"
        :name="i.TrialReadingCriterionId"
      >
        <TaskList
          v-if="activeName === i.TrialReadingCriterionId"
          :trial-criterion-info="i"
        />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import { getTrialCriterionList } from '@/api/trials/reading'
import TaskList from './components/TaskList'
export default {
  name: 'ReadingTask',
  components: {
    TaskList
  },
  data() {
    return {
      activeName: '',
      trialId: '',
      trialCriterionList: []
    }
  },
  mounted() {
    this.trialId = this.$route.query.trialId
    this.getTrialCriterionList()
  },
  methods: {
    async getTrialCriterionList() {
      try {
        const res = await getTrialCriterionList(this.trialId)
        if (res.IsSuccess) {
          this.trialCriterionList = res.Result
          this.activeName = this.trialCriterionList.length > 0 ? this.trialCriterionList[0].TrialReadingCriterionId : ''
        }
      } catch (err) {
        console.log(err)
      }
    }
  }
}
</script>
