<template>
  <div class="home" >
    <!-- <img alt="Quasar logo" src="~assets/quasar-logo-full.svg"> -->
    <div class="box" v-if="AccountType==2 || ispower==true">
      <div style="margin: 0 auto;width: 130px;">
        <el-tabs v-model="model" >
          <el-tab-pane :label="item.label" :name="item.value" :key="item.value" v-for="(item, index) in options"></el-tab-pane>
        </el-tabs>
      </div>

    </div>
    <div v-if="model=='one'" class="flex flex-center" style="flex: 1;min-height: 750px">
          <img style="width:250px;" alt="Quasar logo" src="../assets/images/logo.png" />
    </div>
    <div v-if="model=='two'" style="height: 750px;overflow: auto">
      <teachplan></teachplan>
    </div>
  </div>
</template>

<script>
  import teachplan from './course/teacherLesson'
  export default {
    components:{
      teachplan
    },
    name: 'PageIndex',
    data(){
      return{
        options:[
          {label: 'OKR', value: 'one'},

        ],
        model: 'one',
        AccountType:1,
        ispower:false,//是否显示备课管理

      }
    },
    created() {

    },
    mounted() {
      let userInfo = this.getLocalStorage();
      this.AccountType = userInfo.AccountType
      if(userInfo.AccountType && userInfo.AccountType==2){      //是否是教师1不是 2是
        this.options=[
          {label: 'OKR', value: 'one'},
          {label: '备课管理', value: 'two'},
        ];
      }
      this.ispower = false;
      if(userInfo.MenuList.length>0){
        this.getMapList(userInfo.MenuList)//判断菜单权限是否有
      }
     if(this.ispower==true){
       this.options=[
         {label: 'OKR', value: 'one'},
         {label: '备课管理', value: 'two'},
       ];
     }
    },
    methods:{
      getMapList(list){
        list.forEach(x=>{
          if(x.MenuUrl == '/course/teacherLesson'){
            this.ispower=true
          }
          if(x.SubList.length>0){
            this.getMapList(x.SubList)
          }
        })
      }
    }
  }

</script>
<style>
  .home .box{
    width: 100%;
    height: 50px;

  }
  .home {
    margin: 0;
  }
  ::-webkit-scrollbar {
    display: none; /* Chrome Safari */
  }

  .box .el-tabs__header{
    margin: 0;
  }
</style>
