<style lang="less" scoped>
@import './Index.less';
</style>

<style lang="less">
.badgesty {
  margin-left: 6px;
  box-shadow: none;
}
</style>

<template>
  <div id="teachermgmt" class="backdrop">
    <div class="mgmt-top">
      <div class="tab-box">
        <span class="pane" @click="paneBtn('userList')" :class="{ active: compts === 'userList' }">{{ $t('teachermgmt.page.text1') }}</span>
        <span class="pane" @click="paneBtn('personnel')" :class="{ active: compts === 'personnel' }">{{ $t('teachermgmt.page.text2') }} <Badge :count="requestedUserCount" class-name="badgesty"></Badge></span>
      </div>
    </div>
    <div class="mgmt-main">
      <transition name="opacity" mode="out-in">
        <div :is="compts"></div>
      </transition>
    </div>
  </div>
</template>

<script>
import userList from './components/userList/Index.vue'
import personnel from './components/personnel/Index.vue'
import { mapGetters, mapMutations } from 'vuex'

export default {
  data() {
    return {
      compts: 'userList'
    }
  },
  components: {
    userList,
    personnel
  },
  computed: {
    ...mapGetters({
      requestedUserCount: 'user/getSchoolUserRequestedCount', //申請加入此學校的使用者數
      authList: 'user/getschoolSettingAuthList', //權限總列表
      isKeyInSpace: 'spaceAuth/getIsKeyInSpace'
    }),
    user() {
      return this.$access.getExtendInfo('userInfo')
    }
  },
  methods: {
    paneBtn(pane) {
      this.compts = pane
    },
    //由DB取得該校所有使用者並放入state.schoolUserList
    getSchoolTeacher() {
      this.$store.dispatch('user/getSchoolTeacher').then(
        res => {
          if (res.code == 0) {
            this.$Message.error('無法取得使用者資料')
          }
        },
        err => {
          this.$Message.error('user/setSchoolTeacher API error!')
        }
      )
    },
    //由DB取得權限總列表並放入state.schoolSettingAuthList
    getSchoolAuthorityList() {
      this.$store.dispatch('user/getSchoolAuthorityList').then(
        res => {
          if (res.code == 0) {
            alert('無法取得權限總列表')
          }
        },
        err => {
          alert('user/getSchoolAuthorityList API error: ' + err)
        }
      )
    }
    // 取得所有學校資料
    // getAllSchoolBaesInfoTest() {
    //    this.$api.GetAllSchoolBaesInfo({}).then(
    //          res => {
    //            console.log(res);
    //      })
    // }
  },
  beforeRouteLeave(to, from, next) {
    if (this.isKeyInSpace == true) {
      let config = {
        title: this.$t('teachermgmt.saveWarning'),
        content: this.$t('teachermgmt.warningCnt'),
        okText: this.$t('teachermgmt.leaveText'),
        onOk: () => {
          next()
        },
        onCancel: () => {
          next(false)
        }
      }
      this.$Modal.confirm(config)
    } else {
      next()
    }
  },
  mounted() {
    this.getSchoolTeacher()
    this.getSchoolAuthorityList()
    // this.getAllSchoolBaesInfoTest()
  }
}
</script>
