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

    <h2>
      <el-page-header @back="onCancel"
                      :content="className"></el-page-header>
    </h2>
    <div class="m-core">
      <!-- navMenu -->
      <tab-router v-model.trim="activeName"
               type="card"
               @tab-click="handleClick">
        <el-tab-pane label="基本信息"
        lazy
                     v-if="permissionList.vipBase"
                     name="1">
          <vipBase  />
        </el-tab-pane>
        <el-tab-pane label="教学记录"
                     v-if="permissionList.teacherRecord"
                     lazy
                     name="2">
          <teacherRecord v-if="activeName == 2" />
        </el-tab-pane>
        <el-tab-pane label="VIP课程财务"
                     v-if="permissionList.fnanceInfo"
                     lazy
                     name="3">
          <fnanceInfo v-if="activeName == 3" />
        </el-tab-pane>
        <el-tab-pane label="VIP学生列表"
                     v-if="permissionList.vipStudentList"
                     lazy
                     name="4">
          <vipStudentList v-if="activeName == 4"  :vipDetail='vipDetail'/>
        </el-tab-pane>
      </tab-router>
    </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' // 权限
import {
  getVipGroupDetail,
} from "@/api/vipSeting";
export default {
  components: { teacherRecord, vipBase, fnanceInfo, vipStudentList },
  name: 'vipDetail',
  data () {
    return {
      activeName: '1',
      className: '',
      rules: null,
      searchForm: null,
      vipDetail:null,
      permissionList: {
        vipBase: permission('/vipDetail/vipBase'),
        teacherRecord: permission('/vipDetail/teacherRecord'),
        fnanceInfo: permission('/vipDetail/fnanceInfo'),
        vipStudentList: permission('/vipDetail/vipStudentList')
      }
    }
  },
  mounted () {
    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
      // 获取vip基本信息
        let id = this.$route.query.id;
      // 根据id 获取vip详情

    },

    handleClick (val, event) {
      this.activeName = val.name;

    },
    onCancel () {
       this.$store.dispatch('delVisitedViews', this.$route)
      this.$router.push({ path: '/business/vipList' })
    }
  }
}
</script>
<style lang="scss">
</style>
