<template>
  <q-layout view="lHh Lpr lFf">
    <q-header bordered reveal height-hint="98" class="head-bg text-dark">
      <q-toolbar style="height:60px;" class="q-pr-lg q-pl-lg">
        <q-avatar style="width:38px" square>
          <img :src="logo">
        </q-avatar>
        <q-toolbar-title style="font-family:perfectFont;margin-right:50px">
          {{name}}
        </q-toolbar-title>
        <q-tabs v-model="tab" @input="changeNavs" inline-label
          style="margin:0 auto;height:60px;flex:1;justify-content: left;font-weight:bold;" shrink stretch
          v-if="userInfo" active-color="primary">
          <q-tab v-for="(x, i) in userInfo.MenuList" class="q-mr-md" :key="i" @click="setNavs(i)" :name="`navs_${i}`"
            :label="x.MenuName" :icon="x.MenuIcon" />
        </q-tabs>
        <div class="q-pl-lg flex items-center">
          <div class="wave_wrapper" @click="showNotify">
            <!-- <span class="dona wave_scale">
            </span> -->
            <span :class="{'dona':socektArr.length>0,'wave_scale':socektArr.length>0}">
            </span>
            <inline-svg class="svg-icon svg-icon-primary" src="icons/svg/Code/Compiling.svg"></inline-svg>
          </div>
          <q-btn flat color="text-black" style="height:50px" @click="showInfo">
            <span class="text-grey q-mr-xs">Hi</span>
            <span class="text-dark q-mr-md">{{(userInfo&& userInfo.AccountName? userInfo.AccountName:"")}} </span>
            <q-avatar size="35px" rounded style="background:#C9F7F5" text-color="white">
              <img :src="userInfo.UserIcon" v-if="userInfo&&userInfo.UserIcon">
              <span v-else>{{(userInfo&& userInfo.AccountName? userInfo.AccountName.substring(0,1):"") }}</span>
            </q-avatar>
          </q-btn>
        </div>
      </q-toolbar>
    </q-header>
    <q-page-container class="window-height">
      <div class="row items-stretch full-height">
        <div style="box-shadow: 2px 0 10px 0 rgba(237,238,240,0.50);background-color:#f5f6f7"
          class="text-subtitle2 second-menu-bg" :style="{'width':IsShowLeft?'0':'180px'}"
          v-if="secondNavs && secondNavs.length>0">
          <div class="full-width left-menu-box q-pt-md">
            <div class="is-show-menu-2" @click="changeLeft">
              <!-- <a v-if="!IsShowLeft" title="收起"><<</a> -->
              <i v-if="!IsShowLeft" class="iconfont icon-shouqi" title="收起"></i>
              <i v-else class="iconfont icon-zhankai is_Show_menu_3" title="展开"></i>
              <!-- <a v-else class="is_Show_menu_3" title="展开">>></a> -->
            </div>
            <q-list style="width:180px;overflow:hidden">
              <template v-for="(x,i) in secondNavs">
                <q-item :to="x.MenuUrl" clickable v-ripple :active="currentPath==x.MenuUrl" v-if="x.SubList.length==0"
                  :key="i">
                  <q-item-section avatar style="min-width:30px;">
                    <q-icon :name="x.MenuIcon" size="20px" />
                  </q-item-section>
                  <q-item-section>{{x.MenuName}}</q-item-section>
                </q-item>
                <q-expansion-item v-else :label="x.MenuName">
                  <q-item :to="y.MenuUrl" clickable v-ripple :active="currentPath==y.MenuUrl"
                    v-for="(y, yi) in x.SubList" :key="yi">
                    <q-item-section avatar style="padding-right:0;min-width:30px;">
                      <q-icon :name="y.MenuIcon" size="20px" />
                    </q-item-section>
                    <q-item-section>{{y.MenuName}}</q-item-section>
                  </q-item>
                </q-expansion-item>
              </template>
            </q-list>
          </div>
        </div>
        <div class="col" style="background: #f2f4f7;">
          <q-scroll-area class="fit" :thumb-style="thumbStyle" :bar-style="barStyle" visible style="">
            <router-view />
          </q-scroll-area>
        </div>
      </div>
    </q-page-container>
    <user-info-box v-if="persistent" :show-obj="userInfo" @close="closeSaveForm"></user-info-box>
    <notify v-if="persistentNotify" :show-obj="userInfo" :socekt-obj="socektArr" @close="closeSaveForm"></notify>
  </q-layout>
</template>

<script>
  import {
    mapGetters
  } from 'vuex'
  import userInfoBox from '../components/global/user-right-box'
  import notify from '../components/global/notify'

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

  import {
    sendSock
  } from '../api/common/socket'
  export default {
    name: 'MainLayout',
    data() {
      return {
        tab: "navs_0",
        currentPath: "",
        secondNavs: [],
        thumbStyle: {
          right: '0px',
          borderRadius: '0px',
          backgroundColor: '#1d1d1d',
          width: '6px',
          opacity: 1
        },
        barStyle: {
          right: '0px',
          borderRadius: '0px',
          backgroundColor: '#999',
          width: '6px',
          opacity: 0.5
        },
        persistent: false,
        persistentNotify: false,
        isExpend: false,
        IsShowLeft: true,
        userCenterMenuList: [], //用户中心菜单
        socektArr:[], //消息数组
      }
    },
    components: {
      userInfoBox,
      notify
    },
    watch: {
      $route: {
        handler: function (route) {
          var newPath = route.path.split("?")[0].toLowerCase();
          this.IsShowLeft = false;
          switch (newPath) {
            case "/course/chapter":
              this.IsShowLeft = true;
              break;
            case "/course/teachplan":
              this.IsShowLeft = true;
              break;
            case "/course/courseinfo":
              this.IsShowLeft = true;
              break;
            case "/course/coursejob":
              this.IsShowLeft = true;
              break;
          }
          this.currentPath = route.path
        },
        immediate: true
      },
      userInfo: {
        handler: function (newVal) {
          let i = this.tab.split('_')[1];
          if (newVal && newVal.MenuList) {
            this.secondNavs = newVal.MenuList.length > 0 ? newVal.MenuList[i].SubList : [];
          }
          if (newVal && newVal.UserCenterList) {
            this.userCenterMenuList = newVal.UserCenterList;
          }
        },
        immediate: true
      }
    },
    computed: {
      ...mapGetters([
        'userInfo',
        'logo',
        'name'
      ]),
    },
    mounted() {
      let i = 0
      if (sessionStorage.getItem("current_navs")) {
        i = sessionStorage.getItem("current_navs")
      }
      this.tab = `navs_${i}`
      if (this.userInfo && this.userInfo.MenuList) {
        this.secondNavs = this.userInfo.MenuList.length > 0 ? this.userInfo.MenuList[i].SubList : []
      }

      this.getLogList();
      this.getMsg();
    },
    methods: {
      changeLeft() {
        this.IsShowLeft = !this.IsShowLeft;
      },
      showInfo() {
        this.persistent = true
      },
      showNotify() {
        this.persistentNotify = true
      },
      changeNavs(val) {
        let i = val.split('_')[1]
        this.secondNavs = this.userInfo.MenuList[i].SubList
      },
      closeSaveForm() {
        this.persistent = false
        this.persistentNotify = false
      },
      setNavs(val) {
        //防止页面数据丢失
        sessionStorage.setItem("current_navs", val)
        this.tab = `navs_${val}`
        this.secondNavs = this.userInfo.MenuList[val].SubList
        this.$router.push({
          path: this.userInfo.MenuList[val].MenuUrl
        })
      },
      //获取日志列表
      getLogList(){
        GetMsgLogList().then(res => {
          if (res.Code == 1) {
            this.socektArr = res.Data;
          }
        })
      },
      getMsg() {
        let userinfo = this.getLocalStorage();
        var SendData = {
          AppId: "JiaHeJiaoYu",
          ClientId: userinfo.Id,
        };
        sendSock(SendData, this.getDataFunc)
      },
      getDataFunc(e) {
        console.log("socketData",e);
        if (e.data) {
          var newData = JSON.parse(e.data)
          this.socektArr = this.socektArr.concat(newData)
          this.showNotification(newData[0].Title, newData[0].Content, newData.CoverImg)
        }
      },
      /**
       * 通过Html调用显示系统通知
       * @param title
       * @param msg
       * @param imgUrl
       */
      showNotification(title, msg, imgUrl) {
        var Notification = window.Notification || window.mozNotification || window.webkitNotification;
        // 判断浏览器是否支持桌面通知
        if (Notification) {
          Notification.requestPermission(function (result) {
            //result 默认值'default'等同于拒绝 'denied' -用户选择了拒绝 'granted' -用户同意启用通知
            if ("granted" != result) {
              console.log('请授权浏览器能够进行通知!');
              return false;
            } else {
              var tag = "sds" + Math.random();
              var notify = new Notification(
                title, {
                  dir: 'auto',
                  lang: 'zh-CN',
                  tag: tag, //实例化的notification的id
                  icon: imgUrl, //通知的缩略图,icon 支持ico、png、jpg、jpeg格式
                  title: title, //通知的标题
                  body: msg //通知的具体内容
                }
              );
              // 定义通知窗口点击函数
              notify.onclick = function () {
                //如果通知消息被点击,通知窗口将被激活
                window.focus();
              };
              // 定义通知错误事件
              notify.onerror = function () {
         
              };
              // 定义通知显示事件 可以设置多少秒之后关闭 也可以不设置关闭
              notify.onshow = function () {
                // 窗口显示3S后关闭
                setTimeout(function () {
                  notify.close();
                }, 3000);
              };
              // 定义通知关闭事件
              notify.onclose = function () {

              };
            }
          });
        } else {
          // 提示不支持系统通知
          console.log('您的浏览器不支持系统通知,建议使用Chrome浏览');
        }
      },
    },
  }

</script>

<style>
  @import url('~assets/css/common.css');

  .full-width {
    height: 100%;
  }

  .is-show-menu-2 {
    position: absolute;
    color: #a1a4a9;
    cursor: pointer;
    right: 75px;
    bottom: 7px;
    z-index: 999;
  }

  .is-show-menu-2 i {
    font-size: 30px;
  }

  .is_Show_menu_3 {
    position: absolute;
    left: 75px;
    bottom: 7px;
    cursor: pointer;
    z-index: 10;
  }

  .head-bg {
    /*background-image: url('~assets/images/page/top.png');
    background-position: right;
    background-repeat: no-repeat;
    background-size: auto 100%;*/
    background-color: #FFF;
  }

  .head-bg .q-tab__label {
    font-weight: bold !important;
    font-size: 15px;
  }

  .second-menu-bg {
    background-image: url('~assets/images/page/left.png');
    background-position: bottom;
    background-repeat: no-repeat;
    background-size: 100% auto;
    height: 100%;
    position: relative;
  }

  .hide-scrollbar {
    scrollbar-width: 5px !important;
    -ms-overflow-style: marquee, panner !important;
  }

  .suojin {
    height: 40px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .5);

  }

  .suojin i {
    font-size: 24px;
    color: #636363;
  }

  .left-menu-box {
    overflow-x: hidden;
    overflow-y: auto;
    max-height: calc(100% - 50px);
    height: calc(100% - 50px);
    background-color: rgba(255, 255, 255, 0.3);
  }

  .left-menu-box::-webkit-scrollbar {
    width: 4px;
    height: 4px;
  }

  .left-menu-box::-webkit-scrollbar-thumb {
    border-radius: 4px;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: #bbb;
  }

  /* .left-menu-box::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    background: #EDEDED;

} */
  @keyframes shouqidonghua {
    from {
      width: 180px;
    }

    to {
      width: 60px;
    }
  }

  .changeShowqidonghua {
    animation: shouqidonghua 0.5s linear;
    width: 60px !important;
    overflow-x: hidden;
  }

  @keyframes shouqidonghua {
    from {
      width: 180px;
    }

    to {
      width: 60px;
    }
  }

  .changeShowqidonghua {
    animation: shouqidonghua 0.5s linear;
    width: 60px !important;
    overflow-x: hidden;
  }

  .wave_wrapper {
    margin: 0px 20px 0px 0;
    width: 50px;
    height: 50px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    cursor: pointer;
  }

  .wave_wrapper:hover {
    background-color: #f3f6f9;
  }

  .wave_wrapper .dona {
    position: absolute;
    width: 50%;
    height: 50%;
    top: 25%;
    left: 25%;
    border: 1px solid var(--q-color-primary) !important;
    border-radius: 50%;
    z-index: 2;
  }

  .wave_wrapper span.wave_scale {
    animation: wave_scale 2s both infinite;
  }

  @keyframes wave_scale {
    0% {
      transform: translate3d(-41px, -41px, 0px) scale(1, 1);
      -webkit-transform: scale(1, 1);
      opacity: 1;
    }

    50% {
      transform: translate3d(-41px, -41px, 0px) scale(10, 10);
      -webkit-transform: scale(2.5, 2.5);
      opacity: 0;
    }

    100% {
      transform: translate3d(-41px, -41px, 0px) scale(1, 1);
      -webkit-transform: scale(1, 1);
      opacity: 0;
    }
  }

</style>
