<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>
