<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>
      <q-btn flat @click="changeMenu(3)" :color="chosenMenu==3?'primary':'blue-grey-14'" :class="[chosenMenu==3?'text-weight-bold':'']" label="我的排班计划"></q-btn>
      <q-btn flat @click="changeMenu(4)" v-if="AccountType==2" :color="chosenMenu==4?'primary':'blue-grey-14'" :class="[chosenMenu==4?'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 comWorkDiv" style="overflow: auto">
      <teachplan></teachplan>
    </div>
    <!-- 备课管理 -->
    <div v-if="chosenMenu==3" class="comWorkDiv" style="overflow: auto">
      <mySchedule></mySchedule>
    </div>
    <!-- 我的上课计划 -->
    <div v-if="chosenMenu==4" class="comWorkDiv" style="overflow: auto">
      <myClassmate></myClassmate>
    </div>

    <!-- zk新增公告弹窗 -->
    <notice-form v-if="isShowNotice" @fathergoBefore="fathergoBefore" @fathergoAfter="fathergoAfter" :seting-obj="noticeObj" @close="closeNoticeForm">
    </notice-form>

  </div>
</template>

<script>

  import {
    GetMyNoticePageList
  } from '../api/course/index'

  import teachplan from './course/teacherLesson'
  import okr from './okr/index'
  import alignView from './okr/okr-align-view'
  import noticeForm from '../components/course/notice-form'
  import mySchedule from './scheduling/mySchedule'
  import myClassmate from './scheduling/myClassmate';

  export default {
    components:{
      teachplan,
      okr,
      alignView,
      noticeForm,
      mySchedule,
      myClassmate
    },
    name: 'PageIndex',
    data(){
      return{
        options:[
          {label: 'OKR', value: 'one'},

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

        //通知请求参数
        noticeMsg:{
          pageIndex:1,
          pageSize:1,
          LookTime:""
        },
        isShowNotice:false,
        noticeObj:{},
        TimeList:[], //存放时间作为比较
      }
    },
    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'},
       ];
     }
     var notifyTime = window.localStorage.getItem('notifyTime');
     if(notifyTime){
      this.noticeMsg.LookTime = notifyTime;
     }
     this.getNoticeList();
    },
    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)
          }
        })
      },

      //获取获取公告弹窗数据
      getNoticeList(){
        GetMyNoticePageList(this.noticeMsg).then(res => {
          if (res.Code == 1) {
            this.noticeObj = res.Data;
            if(res.Data.PageData.length>0){
              this.isShowNotice=true;
            }
            if(res.Data.PageData[0]&&res.Data.PageData[0].UpdateTimeStr){
              this.TimeList.push(new Date(res.Data.PageData[0].UpdateTimeStr));
              var maxDate=new Date(Math.max.apply(null,this.TimeList));
              var date = new Date(maxDate);
              var y = date.getFullYear();
              var m = date.getMonth() + 1;
              m = m < 10 ? ('0' + m) : m;
              var d = date.getDate();
              d = d < 10 ? ('0' + d) : d;
              var notifyData = y+'-'+m+'-'+d+' '+ date.getHours() + ':' +date.getMinutes() + ':' + date.getSeconds();
              localStorage.setItem("notifyTime", notifyData);
            }
          }
        })
      },
      //关闭公告弹窗
      closeNoticeForm(){
        this.isShowNotice=false;
      },
      //向后翻页
      fathergoAfter(){
        this.noticeMsg.pageIndex++;
        this.getNoticeList();
      },
      //往回翻页
      fathergoBefore(){
        this.noticeMsg.pageIndex--;
        this.getNoticeList();
      }
    }
  }

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

  }
  .homebx {
    margin: 0;
  }
  .myscroll::-webkit-scrollbar {
    display: none; 
  }

  .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;
  }
  .comWorkDiv{
    height: 100vh
  }
</style>
