<template>
  <div class="m-container">
    <h2>
      <div class="squrt"></div>评论管理
    </h2>
    <div class="m-core">

      <tab-router v-model.trim="activeIndex"
               type="card"
               @tab-click="handleClick">
        <el-tab-pane label="月报"
                     name="1"
                     v-if="permissionList.evaluateList">
          <evaluateList v-if="activeIndex == 1"></evaluateList>
        </el-tab-pane>
        <el-tab-pane label="网管课评价"
                     name="2"
                     v-if="permissionList.networkList">
          <networkList v-if="activeIndex == 2"></networkList>
        </el-tab-pane>
        <el-tab-pane label="vip课评价"
                     v-if="permissionList.vipEvaluateList"
                     name="3">
          <vipEvaluateList v-if="activeIndex == 3">
          </vipEvaluateList>
        </el-tab-pane>
      </tab-router>
    </div>
  </div>
</template>
<script>
import evaluateList from "@/views/evaluateManager/evaluateList";
import networkList from '@/views/evaluateManager/networkList'
import vipEvaluateList from '@/views/evaluateManager/vipEvaluateList'
import { permission } from "@/utils/directivePage";
export default {
  components: {
    evaluateList,
    networkList,
    vipEvaluateList
  },
  data () {
     const query = this.$route.query
    return {
      activeIndex: "1",
      permissionList: {
        evaluateList: permission("/commentManager/evaluateList"),
        networkList: permission("/commentManager/networkList"),
        studentVip: permission("/studentDetail/studentVip"),
        vipEvaluateList: permission("/commentManager/vipEvaluateList"),
      },
    }
  },
  created () {
    this.init();
  },
  activated () {
    this.init();
  },
  methods: {
    init () {
      this.$route.query.activeIndex ? this.activeIndex = this.$route.query.activeIndex : this.activeIndex;
    },
    handleClick (val) {
      this.activeIndex = val.name
     }
  }
};
</script>
<style lang="scss" scoped>
</style>
