<template>
  <div class="m-container">
    <h2>
      <div class="squrt"></div>系统日志
    </h2>
    <div class="m-core">
      <el-tabs type="border-card"
               v-model.trim="activeIndex"
               @tab-click="handleClick">
        <el-tab-pane label="系统通知"
                     v-if="permissionList.journalItem"
                     name='0'>
          <item v-if="activeIndex == 0" />
        </el-tab-pane>
        <el-tab-pane label="学员申诉"
                     v-if="permissionList.studentComplain"
                     name='1'>
          <studentComplain v-if="activeIndex == 1" />
        </el-tab-pane>
        <el-tab-pane label="退团退课"
                     v-if="permissionList.musicGroupCourse"
                     name='2'>
          <musicGroup v-if="activeIndex == 2" />
        </el-tab-pane>
        <el-tab-pane label="请假处理"
                     v-if="permissionList.leaveOperation"
                     name='3'>
          <leaveOperation v-if="activeIndex == 3" />
        </el-tab-pane>
        <el-tab-pane label="VIP申请审核"
                     v-if="permissionList.vipApply"
                     name='4'>
          <vipApply v-if="activeIndex == 4" />
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
<script>
import item from './journalItem'
import studentComplain from './studentComplain'
import musicGroup from './musicGroup'
import leaveOperation from './leaveOperation'
import vipApply from './vipApply'
import { permission } from '@/utils/directivePage'
export default {
  components: {
    item, studentComplain, musicGroup, leaveOperation, vipApply
  },
  name: 'journal',
  data () {
    return {
      activeIndex: '0',
      permissionList: {
        journalItem: permission('/journalItem'),
        studentComplain: permission('/studentComplain'),
        musicGroupCourse: permission('/musicGroupCourse'),
        leaveOperation: permission('/leaveOperation'),
        vipApply: permission('/vipApply')
      }
    }
  },
  methods: {
    handleClick (val) {
      this.activeIndex = val.name
    }
  }
}
</script>
<style lang="scss" scoped>
</style>