<template>
  <q-layout view="lHh Lpr lFf">
    <q-header bordered reveal height-hint="98">
      <q-toolbar style="height:60px;" class="q-pr-lg q-pl-lg">
        <q-avatar>
          <img :src="logo">
        </q-avatar>
        <q-toolbar-title style="font-family:perfectFont">
          {{name}}
        </q-toolbar-title>
        <q-tabs v-model="tab" @input="changeNavs" inline-label
          style="margin:0 auto; font-family:perfectFont;height:60px" class="text-white" shrink stretch v-if="userInfo">
          <q-tab v-for="(x, i) in userInfo.MenuList" :key="i" @click="setNavs(i)" :name="`navs_${i}`"
            :label="x.MenuName" :icon="x.MenuIcon" />
        </q-tabs>
        <div class="q-pl-lg">
          <q-btn-dropdown flat color="primary" size="xs">
            <template v-slot:label>
              <q-icon left name="iconfont icon-message" class="text-white" style="font-size:20px;">
                <q-badge color="negative" floating>4</q-badge>
              </q-icon>
            </template>
            <q-list bordered padding class="rounded-borders" style="max-width: 350px">
              <q-item-label header>Folders</q-item-label>

              <q-item clickable v-ripple>
                <q-item-section avatar top>
                  <q-avatar icon="folder" color="primary" text-color="white" />
                </q-item-section>

                <q-item-section>
                  <q-item-label lines="1">Photos</q-item-label>
                  <q-item-label caption>February 22nd, 2019</q-item-label>
                </q-item-section>

                <q-item-section side>
                  <q-icon name="info" color="green" />
                </q-item-section>
              </q-item>

              <q-item clickable v-ripple>
                <q-item-section avatar top>
                  <q-avatar icon="folder" color="orange" text-color="white" />
                </q-item-section>

                <q-item-section>
                  <q-item-label lines="1">Movies</q-item-label>
                  <q-item-label caption>March 1st, 2019</q-item-label>
                </q-item-section>

                <q-item-section side>
                  <q-icon name="info" />
                </q-item-section>
              </q-item>

              <q-item clickable v-ripple>
                <q-item-section avatar top>
                  <q-avatar icon="folder" color="teal" text-color="white" />
                </q-item-section>

                <q-item-section>
                  <q-item-label lines="1">Photos</q-item-label>
                  <q-item-label caption>January 15th, 2019</q-item-label>
                </q-item-section>

                <q-item-section side>
                  <q-icon name="info" />
                </q-item-section>
              </q-item>

              <q-separator spaced />
              <q-item-label header>Files</q-item-label>

              <q-item clickable v-ripple>
                <q-item-section avatar top>
                  <q-avatar icon="assignment" color="grey" text-color="white" />
                </q-item-section>

                <q-item-section>
                  <q-item-label lines="1">Expenses spreadsheet</q-item-label>
                  <q-item-label caption>March 2nd, 2019</q-item-label>
                </q-item-section>

                <q-item-section side>
                  <q-icon name="info" />
                </q-item-section>
              </q-item>

              <q-item clickable v-ripple>
                <q-item-section avatar top>
                  <q-avatar icon="place" color="grey" text-color="white" />
                </q-item-section>

                <q-item-section>
                  <q-item-label lines="1">Places to visit</q-item-label>
                  <q-item-label caption>February 22, 2019</q-item-label>
                </q-item-section>

                <q-item-section side>
                  <q-icon name="info" color="amber" />
                </q-item-section>
              </q-item>

              <q-item clickable v-ripple>
                <q-item-section avatar top>
                  <q-avatar icon="library_music" color="grey" text-color="white" />
                </q-item-section>

                <q-item-section>
                  <q-item-label lines="1">My favorite song</q-item-label>
                  <q-item-label caption>Singing it all day</q-item-label>
                </q-item-section>

                <q-item-section side>
                  <q-icon name="info" />
                </q-item-section>
              </q-item>
            </q-list>
          </q-btn-dropdown>
          <q-btn-dropdown flat color="primary" size="xs" v-if="userInfo">
            <template v-slot:label>
              <q-avatar size="28px">
                <img :src="userInfo.UserIcon">
              </q-avatar>
            </template>
            <div class="row no-wrap q-pa-md">
              <div class="column">
                <div class="text-h6 q-mb-md">Settings</div>
                <q-toggle label="Use Mobile Data" />
                <q-toggle label="Bluetooth" />
              </div>

              <q-separator vertical inset class="q-mx-lg" />

              <div class="column items-center">
                <q-avatar size="72px">
                  <img :src="userInfo.UserIcon">
                </q-avatar>

                <div class="text-subtitle1 q-mt-md q-mb-xs">{{userInfo.AccountName}}</div>

                <q-btn color="primary" label="登出系统" push size="sm" v-close-popup @click="logout" />
              </div>
            </div>
          </q-btn-dropdown>
        </div>
      </q-toolbar>
    </q-header>
    <q-page-container class="window-height">
      <div class="row items-stretch full-height">
        <div style="width:180px;box-shadow: 2px 0 10px 0 rgba(237,238,240,0.50);font-family:perfectFont"
          class="text-subtitle2" v-if="secondNavs && secondNavs.length>0">
          <q-list>
            <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>
                  <q-icon :name="x.MenuIcon" size="20px" />
                </q-item-section>
                <q-item-section>{{x.MenuName}}</q-item-section>
              </q-item>
              <q-expansion-item expand-separator   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>
                    <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 class="col" style="background: #f2f4f7;">
          <q-scroll-area class="fit" :thumb-style="thumbStyle" :bar-style="barStyle" visible style="">
            <router-view style="margin:20px" />
          </q-scroll-area>
        </div>
      </div>
    </q-page-container>
  </q-layout>
</template>

<script>
  import EssentialLink from 'components/EssentialLink.vue'
  import {
    mapGetters
  } from 'vuex'
  import lockr from 'lockr'
  export default {
    name: 'MainLayout',
    components: {
      EssentialLink
    },
    data() {
      return {
        leftDrawerOpen: false,
        //essentialLinks: linksData
        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
        }
      }
    },
    watch: {
      $route: {
        handler: function (route) {
          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 : []
          }
        },
        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 : []
      }
    },
    methods: {
      logout() {
        this.$store
          .dispatch('LogOut')
          .then(() => {
            this.$router.push('/login')
          })
          .catch(() => {})
      },
      changeNavs(val) {
        let i = val.split('_')[1]
        this.secondNavs = this.userInfo.MenuList[i].SubList
      },
      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
        })
      }
    },
  }

</script>
<style>
  .full-width {
    height: 100%;
  }

</style>
