<template>
  <div class="flex column full-height" style="padding-top:54px !important;">
    <!-- <img alt="Quasar logo" src="~assets/quasar-logo-full.svg"> -->
    <div class="sub-header">
      <!-- <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> -->
      <q-btn @click="changeMenu(1)"  flat :color="chosenMenu==1?'primary':'blue-grey-14'" :class="[chosenMenu==1?'text-weight-bold':'']" label="OKR 工作区">
        <q-menu v-if="chosenMenu==1">
          <q-list>
            <q-item clickable @click="okrMenu=1">
              <q-item-section q-item-section avatar>
                <inline-svg class="svg-icon svg-icon-secondary" src="icons/svg/Text/Edit-text.svg"></inline-svg>
              </q-item-section>
              <q-item-section>OKR</q-item-section>
            </q-item>
            <q-separator />
            <q-item clickable @click="okrMenu=2">
              <q-item-section q-item-section avatar>
                <inline-svg class="svg-icon svg-icon-secondary" src="icons/svg/General/Visible.svg"></inline-svg>
              </q-item-section>
              <q-item-section>对齐视图</q-item-section>
            </q-item>
            <q-item clickable>
              <q-item-section q-item-section avatar>
                <inline-svg class="svg-icon svg-icon-secondary" src="icons/svg/Shopping/Chart-pie.svg"></inline-svg>
              </q-item-section>
              <q-item-section>数据看板</q-item-section>
            </q-item>
          </q-list>
        </q-menu>
      </q-btn>
      <q-btn @click="changeMenu(2)"  v-if="AccountType==2 || ispower==true" flat :color="chosenMenu==2?'primary':'blue-grey-14'" :class="[chosenMenu==2?'text-weight-bold':'']" label="备课管理">
      </q-btn>
    </div>
    <div v-if="chosenMenu==1" class="flex col" style="flex: 1">
      <okr v-if="okrMenu==1"></okr>
      <align-view v-if="okrMenu==2"></align-view>
    </div>
    <div v-if="chosenMenu==2" class="col" style="height: 750px;overflow: auto">
      <teachplan></teachplan>
    </div>
  </div>
</template>

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

        ],
        model: 'one',
        AccountType:1,
        ispower:false,//是否显示备课管理
        chosenMenu:1,
        okrMenu:1
      }
    },
    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:{
      changeMenu(i){
        if(i==1){
          this.okrMenu=1
        }
        this.chosenMenu=i
      },
      getMapList(list){
        list.forEach(x=>{
          if(x.MenuUrl == '/course/teacherLesson'){
            this.ispower=true
          }
          if(x.SubList.length>0){
            this.getMapList(x.SubList)
          }
        })
      }
    }
  }

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

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

  .box .el-tabs__header{
    margin: 0;
  }
  .sub-header{
    position: fixed;
    height: 56px;
    top: 60px;
    left: 0;
    right: 0;
    transition: top .3s ease;
    z-index: 95;
    box-shadow: 0 10px 30px 0 rgba(82,63,105,.08);
    background-color: #fff;
    border-top: 1px solid #ebedf3;
    margin: 0;
    padding: 10px 20px;
  }
</style>
