<template>
  <v-app id="layout">
    <!-- 侧边导航栏 -->
    <v-navigation-drawer v-model="drawer" app dark>

      <v-list class="pb-0">
        <v-list-item class="px-2">
          <v-list-item-avatar>
            <v-img
              :src="user_avatar"
              :lazy-src="user_avatar"
            >
              <template v-slot:placeholder>
                <v-row
                  class="fill-height ma-0"
                  align="center"
                  justify="center"
                >
                  <v-progress-circular
                    indeterminate
                    color="grey lighten-5"
                  />
                </v-row>
              </template>
            </v-img>
          </v-list-item-avatar>
          <v-list-item-content>
            <v-list-item-title v-text="user_nickname" />
          </v-list-item-content>
          <v-btn icon @click="showAccountManagementItem = !showAccountManagementItem">
            <v-icon>mdi-chevron-down</v-icon>
          </v-btn>
        </v-list-item>
        <v-divider />
      </v-list>
      <v-list class="pt-0">
        <v-expand-transition>
          <div v-show="showAccountManagementItem" class="account-management-item">
            <v-list-item-group color="primary">
              <v-list-item @click="logout">
                <v-list-item-icon>
                  <v-icon>mdi-logout-variant</v-icon>
                </v-list-item-icon>
                <v-list-item-content>
                  <v-list-item-title>退出登录</v-list-item-title>
                </v-list-item-content>
              </v-list-item>
              <v-divider />
            </v-list-item-group>
          </div>
        </v-expand-transition>
      </v-list>
      <nested-list :props-routes="routes" />
    </v-navigation-drawer>

    <!-- 顶部导航栏-->
    <v-app-bar app>
      <v-app-bar-nav-icon @click.stop="drawer = !drawer" />
      <breadcrumbs class="d-none d-md-flex" />
      <v-spacer />
      <v-tooltip bottom>
        <template v-slot:activator="{ on, attrs }">
          <v-btn
            icon
            v-bind="attrs"
            class="d-none d-md-flex"
            v-on="on"
          >
            <v-icon>mdi-magnify</v-icon>
          </v-btn>
        </template>
        <span>搜索</span>
      </v-tooltip>
      <v-tooltip bottom>
        <template v-slot:activator="{ on, attrs }">
          <v-btn
            icon
            v-bind="attrs"
            class="d-none d-md-flex"
            v-on="on"
          >
            <v-badge
              bordered
              color="error"
              dot
              right
              overlap
            >
              <v-icon>mdi-bell-outline</v-icon>
            </v-badge>
          </v-btn>
        </template>
        <span>通知</span>
      </v-tooltip>
      <screenfull />
      <v-tooltip bottom>
        <template v-slot:activator="{ on, attrs }">
          <v-btn
            icon
            v-bind="attrs"
            class="d-none d-md-flex"
            v-on="on"
          >
            <v-icon>mdi-refresh</v-icon>
          </v-btn>
        </template>
        <span>刷新</span>
      </v-tooltip>
      <v-menu
        bottom
        open-on-hover
        :nudge-bottom="40"
        transition="slide-y-transition"
      >
        <template v-slot:activator="{ on, attrs }">
          <div>
            <v-avatar
              v-bind="attrs"
              v-on="on"
            >
              <v-img
                :src="user_avatar"
                :lazy-src="user_avatar"
              >
                <template v-slot:placeholder>
                  <v-row
                    class="fill-height ma-0"
                    align="center"
                    justify="center"
                  >
                    <v-progress-circular
                      indeterminate
                      color="grey lighten-5"
                    />
                  </v-row>
                </template>
              </v-img>
            </v-avatar>
            <v-btn
              text
              v-bind="attrs"
              class="user-nickname-dropmenu-btn"
              v-on="on"
            >
              <span v-text="user_nickname" />
              <v-icon>mdi-chevron-down</v-icon>
            </v-btn>
          </div>
        </template>

        <v-list dense>
          <v-list-item
            @click="() => {}"
          >
            <v-list-item-icon>
              <v-icon>mdi-account-details</v-icon>
            </v-list-item-icon>
            <v-list-item-title>个人中心</v-list-item-title>
          </v-list-item>
          <v-list-item @click="logout">
            <v-list-item-icon>
              <v-icon>mdi-logout-variant</v-icon>
            </v-list-item-icon>
            <v-list-item-title>退出登录</v-list-item-title>
          </v-list-item>
        </v-list>
      </v-menu>
      <v-tooltip bottom>
        <template v-slot:activator="{ on, attrs }">
          <v-btn
            icon
            v-bind="attrs"
            class="d-none d-md-flex"
            v-on="on"
          >
            <v-icon>mdi-cog-outline</v-icon>
          </v-btn>
        </template>
        <span>设置</span>
      </v-tooltip>
    </v-app-bar>

    <!-- 根据应用组件来调整你的内容 -->
    <v-main>

      <!-- 给应用提供合适的间距 -->
      <v-container fluid>

        <!-- 如果使用 vue-router -->
        <v-scroll-x-transition mode="out-in">
          <keep-alive>
            <router-view />
          </keep-alive>
        </v-scroll-x-transition>
      </v-container>
    </v-main>
  </v-app>
</template>

<script>
import NestedList from '@/layout/NestedList'
import Breadcrumbs from '@/components/Breadcrumbs'
import Screenfull from '@/components/Screenfull'
import { mapGetters } from 'vuex'
export default {
  name: 'Layout',
  components: { NestedList, Breadcrumbs, Screenfull },
  data: () => {
    return {
      drawer: true,
      showAccountManagementItem: false
    }
  },
  computed: {
    ...mapGetters([
      'constRoutes',
      'asyncRoutes',
      'user_nickname',
      'user_avatar'
    ]),
    /**
     * 剔除不在侧边栏中展示路径对象
     * @return {Array}
     */
    routes() {
      const routes = this.constRoutes.concat(this.asyncRoutes)
      return routes.filter(item => !item.hidden)
    }
  },
  methods: {
    logout() {
      this.$store.dispatch('user/logout').then(() => {
        this.$message.success('退出登录成功')
        this.$router.replace('/login')
      }).catch(error => {
        this.$message.error('退出登录失败')
        this.$message.error(error)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.v-application {
  .account-management-item {
    box-shadow: inset 0px 2px 4px -1px rgb(0 0 0 / 20%), inset 0px 4px 5px 0px rgb(0 0 0 / 14%), inset 0px 1px 10px 0px rgb(0 0 0 / 12%);
  }
  .user-nickname-dropmenu-btn {
    &.v-btn {
      &.v-btn--text {
        padding: 0;
      }
    }
  }
  .v-main {
    background-color: #f6f8f9;
    .container{
      padding: 20px;
    }
  }
}
</style>