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

<template>
    <div id="teachermgmt" class="backdrop">
        <Row class="main">
            <Col class="pane" :span="3">                
                 <Row class="scrollstyle pane-box">
                    <Col>
                        <div class="pane-box-colum" @click="paneBtn('AccountMgmt')"  :class="{ 'active': menuStr === 'AccountMgmt' }">
                            AccountMgmt 帳號管你
                        </div>
                        <div class="pane-box-colum" @click="paneBtn('Authorization')" :class="{ 'active': menuStr === 'Authorization' }">
                            Authorization 權限管你
                        </div>
                    </Col>
                </Row>
            </Col>
            <transition name="leftInOut">
                <div v-on:closeComp="close()" :is="menu"></div>
            </transition>
        </Row>        
    </div>
</template>

<script>

import AccountMgmt from './menu/accountmgmt/Index.vue'
import Authorization  from './menu/authorization/Index.vue'

export default {
  data () {
    return {
        menu:'',
        menuStr: '',
    }
  },
  components:{
    AccountMgmt,
    Authorization,
  },
  computed:{
  },
  methods:{
    async paneBtn(pane){
        if(this.menu !='' && this.menu != pane){
           this.menu = '' 
           this.menuStr = pane; 
           await this.sleep(700);
           this.menu = pane;              
        } else {
            this.menu = pane;
            this.menuStr = pane;            
        }
    },
    sleep (time) {
        return new Promise((resolve) => setTimeout(resolve, time));
    },
    close(e){
        this.menu = '';
        this.menuStr = '';        
    }
  }
}
</script>