<template>
  <div class='m-container'>

    <h2>
      <el-page-header @back="onCancel"
                      :content="className"></el-page-header>
    </h2>
    <div class="m-core">
      <!-- navMenu -->
      <el-tabs v-model.trim="activeName"
               type="card"
               @tab-click="handleClick">
        <el-tab-pane label="基本信息"
                     v-if="permissionList.vipBase"
                     name="1">
          <vipBase v-if="activeName == 1" />
        </el-tab-pane>
        <el-tab-pane label="教学记录"
                     v-if="permissionList.teacherRecord"
                     name="2">
          <teacherRecord v-if="activeName == 2" />
        </el-tab-pane>
        <el-tab-pane label="VIP课程财务"
                     v-if="permissionList.fnanceInfo"
                     name="3">
          <fnanceInfo v-if="activeName == 3" />
        </el-tab-pane>
        <el-tab-pane label="VIP学生列表"
                     v-if="permissionList.vipStudentList"
                     name="4">
          <vipStudentList v-if="activeName == 4" />
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
<script>
import vipBase from '@/views/vipClass/vipDetail/components/vipBaseInfo'
import teacherRecord from '@/views/vipClass/vipDetail/components/teacherRecord'
import fnanceInfo from '@/views/vipClass/vipDetail/components/fnanceInfo'
import vipStudentList from '@/views/vipClass/vipDetail/components/vipStudentList'
import { permission } from '@/utils/directivePage' // 权限
export default {
  components: { teacherRecord, vipBase, fnanceInfo, vipStudentList },
  name: 'vipDetail',
  data () {
    return {
      activeName: '1',
      className: '',
      rules: null,
      searchForm: null,
      permissionList: {
        vipBase: permission('/vipDetail/vipBase'),
        teacherRecord: permission('/vipDetail/teacherRecord'),
        fnanceInfo: permission('/vipDetail/fnanceInfo'),
        vipStudentList: permission('/vipDetail/vipStudentList')
      }
    }
  },
  mounted () {
    this.__init()
  },
  activated() {
    this.__init()
  },
  methods: {
    __init() {
      let querys = this.$route.query
      if (querys.rules) {
        this.rules = querys.rules
      }
      if (querys.searchForm) {
        this.searchForm = querys.searchForm
      }
      this.className = querys.name
    },
    handleClick (val, event) {
      this.activeName = val.name;
    },
    onCancel () {
      this.$router.push({ path: '/business/vipList', query: { rules: this.rules, searchForm: this.searchForm } })
    }
  }
}
</script>
<style lang="scss">
</style>