<template>
  <div class='m-container'>
    <h2>
      <el-page-header @back="onCancel"
                      :content="teacherName"></el-page-header>
    </h2>
    <div class="m-core">
      <el-tabs v-model.trim="activeName"
               type="card"
               @tab-click="handleClick">
        <el-tab-pane label="基本信息"
                     :disabled="isCreate"
                     name="0">
          <teacherOperation @onTeacher="onTeacher"
                            v-if="activeName=='0'" />
        </el-tab-pane>
        <el-tab-pane label="课酬设置"
                     v-if="salaryStatus"
                     name="1"
                     :disabled="isTeacher">
          <salarySet :teacherId="teacherId"
                     v-if="activeName=='1'" />
        </el-tab-pane>
        <!--   'teacherFreeTime/query'  v-if="permission('/teacherFreeTime/query')"-->
        <el-tab-pane label="网管课设置"
                     v-if="accompanyStatus"
                     name="2"
                     :disabled="isTeacher">
          <accompany :teacherId="teacherId"
                     v-if="activeName=='2'" />
        </el-tab-pane>
        <!-- v-permission="pageType == 'create' ? '/teacherAdd/salarySeting' : '/teacherUpdate/saraySeting'" -->
      </el-tabs>
    </div>
  </div>
</template>
<script>
import teacherOperation from './components/teacherOperation'
import salarySet from './components/salarySet'
import accompany from './components/accompanySet'
import { permission } from '@/utils/directivePage'
export default {
  components: { teacherOperation, salarySet, accompany },
  name: 'teacherOperations',
  data () {
    return {
      pageType: this.$route.query.type,
      baseInfoStatus: true, // 权限显示，基本信息
      salaryStatus: true, // 权限显示 课酬设置
      accompanyStatus: true, // 权限显示 网管课设置
      teacherId: this.$route.query.teacherId,
      activeName: '0',
      activeStatus: [true, false],
      isTeacher: true,
      isCreate: false,
      teacherName:''
    }
  },
  mounted () {
    this.init()
  },
  activated () {
    this.init()
  },
  methods: {
    init () {
          this.activeName = null
    this.teacherId = this.$route.query.teacherId
    this.pageType = this.$route.query.type
      if (this.teacherId) {
        this.isTeacher = false
      }
      if(this.$route.query.teacherName){
        this.teacherName = this.$route.query.teacherName
      }else {
         this.teacherName = '老师新增'
      }
      this.salaryStatus = permission(this.pageType == 'create' ? '/teacherAdd/salarySeting' : '/teacherUpdate/saraySeting')
      this.baseInfoStatus = permission(this.pageType == 'create' ? '/teacherAdd/baseInfo' : '/teacherUpdate/baseInfo')
      this.accompanyStatus = permission(this.pageType == 'create' ? '/teacherAdd/accompany' : '/teacherUpdate/accompany')
      this.activeName = '0'
    },
    handleClick (val) {
      this.activeName = val.name
      this.activeStatus[val.name] = true
    },
    onCancel () {
      this.$router.push({ path: '/business/teacherList' })
    },
    onTeacher (id) {
      let type = this.$route.query.type
      if (type == 'update') {
        this.activeName = "1"
        this.activeStatus[1] = true
      } else {
        if (id) {
          this.isCreate = true // 当保存课酬时基本信息不能点
          this.isTeacher = false
          this.teacherId = id
          this.activeName = "1"
          this.activeStatus[1] = true
        }
      }
    },
    permission (str) {
      return permission(str)
    }
  },

}
</script>
<style lang="scss">
</style>
