<template>
    <div class="page-container">
        <div class="page-header">
            <nav class="navbar navbar-expand-lg d-flex justify-content-between">
                <div class="" id="navbarNav">
                    <ul class="navbar-nav" id="leftNav">
                        <li class="nav-item">
                            <a class="nav-link" id="sidebar-toggle" href="#" @click="toggerSiderBar"><i data-feather="arrow-left"></i></a>
                        </li>
                        <li class="nav-item">
                            <router-link class="nav-link" to="/layout/index">主页</router-link>
                        </li>
                        <li class="nav-item" v-if="isAdmin">
                            <router-link class="nav-link" to="/layout/system">设置</router-link>
                        </li>
                        <li class="nav-item">
                            <router-link class="nav-link" to="/about">帮助</router-link>
                        </li>
                    </ul>
                </div>
                <div class="logo">
                    <router-link class="navbar-brand" to="/home"></router-link>
                </div>
                <div class="" id="headerNav">
                    <ul class="navbar-nav">
                        <li class="nav-item dropdown">
                            <a class="nav-link search-dropdown" href="#" id="searchDropDown" role="button"
                                data-bs-toggle="dropdown" aria-expanded="false"><i data-feather="search"></i></a>
                            <div class="dropdown-menu dropdown-menu-end dropdown-lg search-drop-menu"
                                aria-labelledby="searchDropDown">
                                <form>
                                    <input class="form-control" type="text" placeholder="由此搜索.."
                                        aria-label="Search">
                                </form>
                                <h6 class="dropdown-header">近期搜索</h6>
                                <a class="dropdown-item" href="#">图表</a>
                                <a class="dropdown-item" href="#">新订单</a>
                                <a class="dropdown-item" href="#">用户管理</a>
                                <a class="dropdown-item" href="#">新用户</a>
                            </div>
                        </li>
                        <li class="nav-item dropdown">
                            <a class="nav-link notifications-dropdown" href="#" id="notificationsDropDown" role="button"
                                data-bs-toggle="dropdown" aria-expanded="false">3</a>
                            <div class="dropdown-menu dropdown-menu-end notif-drop-menu"
                                aria-labelledby="notificationsDropDown">
                                <h6 class="dropdown-header">Notifications</h6>
                                <a href="#">
                                    <div class="header-notif">
                                        <div class="notif-image">
                                            <span class="notification-badge bg-info text-white">
                                                <i class="fas fa-bullhorn"></i>
                                            </span>
                                        </div>
                                        <div class="notif-text">
                                            <p class="bold-notif-text">faucibus dolor in commodo lectus mattis</p>
                                            <small>19:00</small>
                                        </div>
                                    </div>
                                </a>
                                <a href="#">
                                    <div class="header-notif">
                                        <div class="notif-image">
                                            <span class="notification-badge bg-primary text-white">
                                                <i class="fas fa-bolt"></i>
                                            </span>
                                        </div>
                                        <div class="notif-text">
                                            <p class="bold-notif-text">faucibus dolor in commodo lectus mattis</p>
                                            <small>18:00</small>
                                        </div>
                                    </div>
                                </a>
                                <a href="#">
                                    <div class="header-notif">
                                        <div class="notif-image">
                                            <span class="notification-badge bg-success text-white">
                                                <i class="fas fa-at"></i>
                                            </span>
                                        </div>
                                        <div class="notif-text">
                                            <p>faucibus dolor in commodo lectus mattis</p>
                                            <small>yesterday</small>
                                        </div>
                                    </div>
                                </a>
                                <a href="#">
                                    <div class="header-notif">
                                        <div class="notif-image">
                                            <span class="notification-badge">
                                                <img src="../../assets/images/avatars/profile-image.png" alt="">
                                            </span>
                                        </div>
                                        <div class="notif-text">
                                            <p>faucibus dolor in commodo lectus mattis</p>
                                            <small>yesterday</small>
                                        </div>
                                    </div>
                                </a>
                                <a href="#">
                                    <div class="header-notif">
                                        <div class="notif-image">
                                            <span class="notification-badge">
                                                <img src="../../assets/images/avatars/profile-image.png" alt="">
                                            </span>
                                        </div>
                                        <div class="notif-text">
                                            <p>faucibus dolor in commodo lectus mattis</p>
                                            <small>yesterday</small>
                                        </div>
                                    </div>
                                </a>
                            </div>
                        </li>
                        <li class="nav-item dropdown">
                            <a class="nav-link profile-dropdown" href="#" id="profileDropDown" role="button"
                                data-bs-toggle="dropdown" aria-expanded="false"><img class="rounded-circle border"
                                    :src="Avatar ? baseURL + Avatar : '../../assets/images/avatars/profile-image.png'" alt=""></a>
                            <div class="dropdown-menu dropdown-menu-end profile-drop-menu"
                                aria-labelledby="profileDropDown">
                                <router-link class="dropdown-item" to="/layout/center"><i data-feather="user"></i>个人中心</router-link>
                                <a class="dropdown-item" href="#"><i data-feather="inbox"></i>消息</a>
                                <a class="dropdown-item" href="#"><i data-feather="edit"></i>活动<span
                                        class="badge rounded-pill bg-success">12</span></a>
                                <a class="dropdown-item" href="#"><i data-feather="check-circle"></i>任务</a>
                                <div class="dropdown-divider"></div>
                                <router-link class="dropdown-item" to="/layout/system" v-if="isAdmin"><i data-feather="settings"></i>系统设置</router-link>
                                <a class="dropdown-item" href="#" @click.prevent="unlock"><i data-feather="unlock"></i>锁定</a>
                                <a class="dropdown-item" href="#" @click.prevent="logout"><i data-feather="log-out"></i>注销</a>
                            </div>
                        </li>
                    </ul>
                </div>
            </nav>
        </div>
        <div class="page-sidebar">
            <ul class="list-unstyled accordion-menu scroll-box">
                <li class="sidebar-title">
                    主页
                </li>
                <li :class="{ 'active-page' : $route.path.endsWith(item.path) }" v-for="item in routeMenu.filter(x => x.meta.isHome)" :key="item.path">
                    <router-link :to="item.path"><i :data-feather="item.meta.icon"></i>{{item.meta.title}}</router-link>
                </li>
                <li class="sidebar-title">
                    菜单
                </li>
                <li :class="{ 'active-page' : $route.path.endsWith(item.path) }" v-for="item in routeMenu.filter(x => !x.meta.isHome)" :key="item.path">
                    <router-link :to="item.path"><i :data-feather="item.meta.icon"></i>{{item.meta.title}}</router-link>
                </li>
            </ul>
        </div>
        <div class="page-content">
            <router-view :key="componentKey" @refresh="refreshHandle"/>

        </div>
    </div>
</template>

<script>

import auth from '@/utils/auth'
import feather from 'feather-icons'
import { mapGetters } from 'vuex'
import axiosIntance from '@/request/request'
import { Avatar } from 'ant-design-vue'
export default {
    data(){
        return{
            routeMenu: [],
            baseURL: null,
            componentKey:0
        }
    },
    methods:{
        refreshHandle(){
            this.componentKey += 1
        },
        /**
         * 展开/关闭侧边菜单栏
         */
        toggerSiderBar(){
            document.body.classList.toggle('sidebar-hidden')
        },
        updateRouterMenu(){
            const baseroutes = this.$router.options.routes
            const route = baseroutes.find(x => x.path == '/layout')
            this.routeMenu = route.children.filter(x => this.isAdmin ? x.meta.showInMenu : (x.meta.showInMenu && x.meta.showInUser))
        },
        unlock(){
            this.$alert('还没写...','info')
        },
        logout(){
            auth.clear()
            this.$alert('登录状态失效，请重新登录...','info')
            this.$router.push('/auth/login')
            
        }
    },watch:{
        isAdmin:{
            handler(newval){
                this.updateRouterMenu()
            },
            immediate:true
        }
    },
    computed:{
        ...mapGetters('userinfo',['isAdmin','Avatar'])
    },
    mounted(){
        this.baseURL = axiosIntance.defaults.baseURL
        feather.replace()
    },
    beforeCreate(){
          //加载用户信息
          this.$store.dispatch('userinfo/fetchUserInfo')
    }
}
</script>

<style scoped>

.rounded-circle {
    width: 40px;
    height: 40px;
}
.scroll-box{
    height: 300px;         /* 或 max-height, 或 calc(...) */
  overflow-y: auto;      /* 超出时显示滚动（有内容时才出现） */
  overflow-x: hidden;    /* 横向不要滚动时禁止 */
  padding: 12px;
  background: #fff;
  border-radius: 6px;
  border: 1px solid #eee;
}
</style>