<template>
  <q-layout view="lHh lpr lFf" style="background: #f5f8fa">
    <q-header reveal class="bg-white text-white q-px-md q-py-sm">
      <q-toolbar>
        <q-toolbar-title class="row items-center">

          <div class="col row items-center">
            <q-btn dense flat round @click="toggleLeftDrawer" class="mobile-only">
              <svg-icon icon="Text/Menu.svg" :size="32"></svg-icon>
            </q-btn>
            <div class="mobile-only q-ml-md text-dark text-h6 text-weight-bold">PIC</div>
            <div class="mls text-h6 text-dark desktop-only">{{childPageTitle}}</div>
          </div>
          <div class="bg-grey-2 rounded-borders q-px-md f12 text-grey-800 q-mr-md desktop-only">{{version}}</div>
          <div class="rounded-borders header-item q-mr-lg">
            <svg-icon color="grey" icon="design/component.svg" :size="25" :tips="$t('syslog')"></svg-icon>
          </div>
          <div class="rounded-borders header-item q-mr-lg" style="position: right;">
            <div v-if="isDadge" class="header-badge bg-green-4"></div>
            <svg-icon color="grey" icon="Communication/Chat6.svg" :size="25" :tips="$t('sysmsg')">
            </svg-icon>
            <q-popup-proxy :offset="[0,15]" class="no-shadow">
              <Notifications :user="userInfo"></Notifications>
            </q-popup-proxy>
          </div>
          <q-avatar size="40px" rounded class="bg-blue-2 cursor-pointer">
            <q-img :src="userInfo.photo" v-if="userInfo?.photo" mode="cover" />
            <span class="text-primary text-h6" v-else>{{ userInfo.name.substring(0, 1) }}</span>
            <q-popup-proxy :offset="[0,15]" class="no-shadow">
             <user-info :user="userInfo"></user-info>
            </q-popup-proxy>
          </q-avatar>
        </q-toolbar-title>
      </q-toolbar>
    </q-header>

    <q-drawer show-if-above v-model="leftDrawerOpen" style="background: #1e1e2d; width: 265px" side="left" class="column">
      <div style="box-sizing: border-box; height: 66px; border-bottom: 1px dashed #444" class="row items-center q-px-md desktop-only">
        <img src="../assets/images/pic-log.png" alt="" style="height: 30px" />
        <!-- <div class="text-white text-weight-bold text-subtitle1 q-ml-md">{{ $t('siteName') }}</div> -->
      </div>
      <q-scroll-area :thumb-style="scrollStyle.thumbStyle" :bar-style="scrollStyle.barStyle" class="col nav-list q-pl-lg">
        <navs></navs>
      </q-scroll-area>
    </q-drawer>

    <q-page-container class="window-height">
      <q-scroll-area :thumb-style="scrollStyle.thumbStyle" :bar-style="scrollStyle.barStyle" class="full-height">
        <router-view />
      </q-scroll-area>
    </q-page-container>

    <!-- <q-footer class="bg-white text-dark">
      <q-toolbar>
        <q-toolbar-title>
          <div class="text-body2">2022© PIC</div>
        </q-toolbar-title>
      </q-toolbar>
    </q-footer> -->
  </q-layout>
</template>

<script lang="ts">
import { inject, provide, reactive, ref, toRefs, onMounted } from 'vue'
import { getStoreGetter } from '../store/utils'
import { UserGetter } from '../store/modules/user/getters'
import svgIcon from '../components/global/svg-icon.vue'
import useScrollModule from '../module/scrollbar/scrollModule'
import Navs from '../components/layout/navs.vue'
import userInfo from "../components/layout/userInfo.vue";
import Notifications from "../components/layout/Notifications.vue";
import { DirtionmaryHelper } from '../config/dictionary'
import { env } from 'process'
import { AppConfig } from 'src/config/app'
export default {
  components: { svgIcon, Navs,userInfo,Notifications },
  setup() {
    const leftDrawerOpen = ref(false)
    const data = reactive({
      userInfo: {} as any,
      leftDrawerOpen: false,
      scrollStyle: {} as any,
      timer: 0,
      isDadge: true,
      version:''
    })
    const childPageTitle = ref('')
    provide(DirtionmaryHelper.PAGE_TITLE_KEY ,childPageTitle)
    const activeMenu=ref(0)
    provide(DirtionmaryHelper.MENU_KEYS, activeMenu)
    data.userInfo = getStoreGetter<UserGetter>('user', 'getUser')
    data.scrollStyle = useScrollModule().scrollStyle
    const methods = {
      toggleLeftDrawer() {
        data.leftDrawerOpen = !data.leftDrawerOpen
      },

    }
    onMounted(()=>{
      setInterval(()=> {
        data.isDadge = false
        setTimeout(()=>{
          data.isDadge = true
        },200)
      }, 1000);
    })
    data.version = AppConfig.$version
    return {
      ...toRefs(data),
      ...methods,
      childPageTitle
    }
  }
}
</script>
<style>
.header-item{
  cursor: pointer;
  display: flex;
  height: 40px;
  width: 40px;
  align-items: center;
  justify-content: center;
}
.header-item svg g [fill]{
  fill: rgb(161,165,183) !important;
  cursor: pointer;
  padding: 4px;
}
.header-item:hover{
  background: rgba(0,0,0,.05);
}
.header-item:hover svg g [fill]{
  fill:var(--q-primary) !important;
}
.header-badge{
  width: 6px;
  height: 6px;
  border-radius: 50%;
  position: absolute;
  margin-top: -40px;
}
</style>
