<template>
  <div class="m-container">
    <h2 class="mo-tilte">
      <el-page-header @back="onCancel"
                      :content="teacherName"></el-page-header>
      <div>
        <!-- 服务指标:本周 运营指标: -->
        <el-button v-if="teacherInfos && permission('/operateStudent')" type="text" @click="gotoOperating">运营指标:<span style="color:red">{{teacherInfos.operatingIndex}}%</span></el-button>
        <el-button v-if="teacherInfos && permission('/serverIndexList')" type="text" @click="gotoAfterSchool">服务指标(每周):<span style="color:red">{{teacherInfos.serviceIndex}}%</span></el-button>
      </div>
    </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.teacherInfo"
                     name="0">
          <teacherInfo v-if="activeName == 0&&teacherInfos" :teacherInfo='teacherInfos'  />
        </el-tab-pane>
        <el-tab-pane label="乐团课"
        lazy
                     v-if="permissionList.musicGroup"
                     name="1">
          <courseInfo v-if="activeName == 1" />
        </el-tab-pane>
        <el-tab-pane label="VIP课"
        lazy
                     v-if="permissionList.VipCourse"
                     name="2">
          <courseInfo1 v-if="activeName == 2" />
        </el-tab-pane>
        <el-tab-pane label="网管课"
        lazy
                     v-if="permissionList.teacherNetwork"
                     name="8">
          <teacherNetwork v-if="activeName == 8" />
        </el-tab-pane>
        <el-tab-pane label="对外课"
        lazy
                     v-if="permissionList.outCourseList"
                     name="3">
          <outCourseList v-if="activeName == 3" />
        </el-tab-pane>
        <el-tab-pane label="课表详情"
        lazy
                     v-if="permissionList.teacherRecord"
                     name="4">
          <teacherRecord v-if="activeName == 4" />
        </el-tab-pane>
        <el-tab-pane label="请假记录"
        lazy
                     v-if="permissionList.leaveRecord"
                     name="5">
          <leaveRecord v-if="activeName == 5" />
        </el-tab-pane>
        <el-tab-pane label="上课结算列表"
        lazy
                     v-if="permissionList.settlement"
                     name="6">
          <settlement v-if="activeName == 6" />
        </el-tab-pane>
        <el-tab-pane label="时间记录"
        lazy
                     v-if="permissionList.timerList"
                     name="7">
          <timerList v-if="activeName == 7" />
        </el-tab-pane>
        <el-tab-pane label="学员"
        lazy
                     v-if="permissionList.serveStudentList"
                     name="9">
          <serveStudentList v-if="activeName == 9" />
        </el-tab-pane>
        <el-tab-pane label="月历课表"
        lazy
                     v-if="permissionList.calendarList"
                     name="10">
          <calendarList v-if="activeName == 10" />
        </el-tab-pane>
        <el-tab-pane label="周历课表"
        lazy
                     v-if="permissionList.weeklyCalendar"
                     name="11">
          <weeklyCalendar v-if="activeName == 11" />
        </el-tab-pane>
      </tab-router>
    </div>
  </div>
</template>
<script>
import teacherRecord from "@/views/teacherManager/teacherDetail/components/teacherRecord";
import leaveRecord from "@/views/teacherManager/teacherDetail/components/leaveRecord";
import teacherInfo from "@/views/teacherManager/teacherDetail/components/teacherInfo";
import courseInfo from "@/views/teacherManager/teacherDetail/components/courseInfo";
import courseInfo1 from "@/views/teacherManager/teacherDetail/components/courseInfo1";
import courseInfo2 from "@/views/teacherManager/teacherDetail/components/courseInfo2";
import settlement from "@/views/teacherManager/teacherDetail/components/settlement";
import timerList from "@/views/teacherManager/teacherDetail/components/timerList";
import outCourseList from "@/views/teacherManager/teacherDetail/components/outCourseList";
import teacherNetwork from "@/views/teacherManager/teacherDetail/components/teacherNetwork";
import serveStudentList from "@/views/teacherManager/teacherDetail/components/serveStudentList";
import calendarList from '@/views/teacherManager/teacherDetail/components/calendarList'
import weeklyCalendar from '@/views/teacherManager/teacherDetail/components/weeklyCalendar'
import { permission } from "@/utils/directivePage";
import { teacherGet } from '@/api/teacherManager'
export default {
  components: {
    teacherRecord,
    leaveRecord,
    teacherInfo,
    courseInfo,
    courseInfo1,
    courseInfo2,
    settlement,
    timerList,
    outCourseList,
    teacherNetwork,
    serveStudentList,
    calendarList,
    weeklyCalendar
  },
  name: "teacherDetail",
  data () {
    return {
      teacherName: this.$route.query.teacherName,
      activeName: "0",
      // activeStatus: [true, false, false, false, false, false, false]
      permissionList: {
        teacherInfo: permission("/teacherDetail/teacherInfo"),
        musicGroup: permission("/teacherDetail/musicGroupCourse"),
        VipCourse: permission("/teacherDetail/VIPCourse"),
        domeCourse: permission("/teacherDetail/domeCourse"),
        teacherRecord: permission("/teacherDetail/teacherRecord"),
        leaveRecord: permission("/teacherDetail/leaveRecord"),
        settlement: permission("/teacherDetail/settlement"),
        timerList: permission("/teacherDetail/timerList"),
        outCourseList: permission("/teacherDetail/outCourseList"), //
        teacherNetwork: permission("/teacherDetail/teacherNetwork"),
        serveStudentList: permission("/teacherDetail/serveStudentList"),
        calendarList: permission("/teacherDetail/calendarList"),
        weeklyCalendar: permission("/teacherDetail/weeklyCalendar"),
      },
      teacherInfos:null
    };
  },
  activated () {

  },

  mounted () {
      this.teacherName = this.$route.query.teacherName;
      this.teacherId = this.$route.query.teacherId
      this.activeName = "0";
      teacherGet({ teacherId: this.teacherId }).then(res => {
        if (res.code == 200) {
         this.teacherInfos = res.data

        }
      })
  },
  methods: {
    permission,
    handleClick (val, event) {
      this.activeName = val.name;
      // this.activeStatus[val.name] = true
    },
    onCancel () {
       this.$store.dispatch('delVisitedViews', this.$route)
      this.$router.push({
        path: "/teacherManager/teacherList"
      });
    },
      gotoAfterSchool() {
      // 需要的参数 id
      this.$router.push({
        path: "/serverIndexManager/serverIndexList",
        query: { teacherId:  this.teacherId*1, activeIndex: "2" },
      });
    },
    gotoOperating() {
      this.$router.push({
        path: "/operateManager/operateStudent",
        query: { teacherId:  this.teacherId*1, operatingTag: "1" },
      });
    },
  }
};
</script>
<style lang="scss" scoped>
.mo-tilte {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
</style>
