<template>
  <q-layout view="lHh Lpr lFf">
    <q-header bordered reveal height-hint="98" class="head-bg">
      <q-toolbar style="height:60px;" class="q-pr-lg q-pl-lg">
        <q-avatar style="width:38px">
          <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; font-family:perfectFont;height:60px;flex:1;justify-content: left;" class="text-white"
          shrink stretch v-if="userInfo">
          <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">
          <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="box-shadow: 2px 0 10px 0 rgba(237,238,240,0.50);font-family:perfectFont;"
          class="text-subtitle2 second-menu-bg" :style="{'width':isExpend?'40px':'180px'}"
          v-if="secondNavs && secondNavs.length>0">
          <div class="full-width left-menu-box q-pt-md">
            <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>
                    <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 style="padding-right:0;min-width:40px;">
                      <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 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
        },
        contentStyle2: {
          backgroundColor: 'rgba(0,0,0,0.02)',
          color: '#555'
        },
        isExpend: false,
        contentActiveStyle2: {
          backgroundColor: '#eee',
          color: 'black'
        },
        thumbStyle2: {
          right: '0px',
          borderRadius: '5px',
          backgroundColor: '#027be3',
          width: '5px',
          opacity: 0.75
        }
      }
    },
    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%;
  }

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

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

  }

  .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: 100%;
    height: 100%;
    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;
  }

</style>
