<template>
  <div>
    <el-tabs v-model="tabIndex">
      <el-tab-pane v-for="item in panes" :key="item.name" :label="item.label" :name="item.name">
        <component :is="item.component" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup name="StudyRecord">
import Practice from './components/Practice.vue'
import Exam from './components/Exam.vue'
import Wrong from './components/Wrong.vue'
import Collect from './components/Collect.vue'
import { checkPermi } from '@/utils/permission'

const tabIndex = ref('')
const panes = ref([])

onMounted(() => {
  panes.value = []
  const arr = [
    {
      label: '做题记录',
      name: 'practice',
      permi: 'UAVClue:StudyRecord:practice',
      component: markRaw(Practice)
    },
    {
      label: '模考记录',
      name: 'exam',
      permi: 'UAVClue:StudyRecord:exam',
      component: markRaw(Exam)
    },
    {
      label: '错题记录',
      name: 'wrong',
      permi: 'UAVClue:StudyRecord:wrong',
      component: markRaw(Wrong)
    },
    {
      label: '收藏记录',
      name: 'collect',
      permi: 'UAVClue:StudyRecord:collect',
      component: markRaw(Collect)
    }
  ]
  arr.map((item) => {
    if (checkPermi([item.permi])) {
      panes.value.push(item)
    }
  })
  tabIndex.value = panes.value[0].name
})
</script>

<style lang="scss" scoped></style>
