<template>
  <a-layout :class="['admin-layout', 'beauty-scroll']">
    <drawer v-if="isMobile" v-model="drawerOpen">
      <side-menu :theme="theme.mode" :menuData="menuData" :collapsed="false" :collapsible="false"
        @menuSelect="onMenuSelect" />
    </drawer>
    <side-menu :class="[fixedSideBar ? 'fixed-side' : '']" :theme="theme.mode"
      v-else-if="layout === 'side' || layout === 'mix'" :menuData="sideMenuData" :collapsed="collapsed"
      :collapsible="true" />
    <div v-if="fixedSideBar && !isMobile"
      :style="`width: ${sideMenuWidth}; min-width: ${sideMenuWidth};max-width: ${sideMenuWidth};`" class="virtual-side">
    </div>
    <drawer v-if="!hideSetting" v-model="showSetting" placement="right">
      <div class="setting" slot="handler">
        <a-icon :type="showSetting ? 'close' : 'setting'" />
      </div>
      <setting />
    </drawer>
    <a-layout class="admin-layout-main beauty-scroll">
      <admin-header :class="[{'fixed-tabs': fixedTabs, 'fixed-header': fixedHeader, 'multi-page': multiPage}]"
        :style="headerStyle" :menuData="headMenuData" :collapsed="collapsed" @toggleCollapse="toggleCollapse" />
      <a-layout-header
        :class="['virtual-header', {'fixed-tabs' : fixedTabs, 'fixed-header': fixedHeader, 'multi-page': multiPage}]"
        v-show="fixedHeader"></a-layout-header>
      <a-layout-content class="admin-layout-content" :style="`min-height: ${minHeight}px;`">
        <div style="position: relative">
          <slot></slot>
        </div>
      </a-layout-content>
      <a-layout-footer style="padding: 0px">
        <page-footer :link-list="footerLinks" />
      </a-layout-footer>
    </a-layout>
  </a-layout>
</template>

<script>
import AdminHeader from './header/AdminHeader' // 加载头部组件
import PageFooter from './footer/PageFooter' // 加载页脚组件
import Drawer from '../components/tool/Drawer' // 加载抽屉组件
import SideMenu from '../components/menu/SideMenu' // 加载侧边栏组件
import Setting from '../components/setting/Setting' // 加载设置组件
import { mapState, mapMutations, mapGetters } from 'vuex' // 加载vuex


// const minHeight = window.innerHeight - 64 - 122

export default {
  name: 'AdminLayout', // 组件名称 管理布局
  components: { Setting, SideMenu, Drawer, PageFooter, AdminHeader }, // 注册组件  设置、侧边栏、抽屉、页脚、头部
  data() {
    return {
      minHeight: window.innerHeight - 64 - 122, // 最小高度
      collapsed: false, // 侧边栏是否折叠
      showSetting: false, // 是否显示设置
      drawerOpen: false // 抽屉是否打开
    }
  },
  provide() { // 提供数据
    return {
      adminLayout: this // 提供adminLayout 数据
    }
  },
  watch: {
    $route(val) { // 监听路由变化
      this.setActivated(val) // 设置激活
    },
    layout() { // 监听布局变化
      this.setActivated(this.$route) // 设置激活
    },
    isMobile(val) { // 监听是否移动端变化
      if (!val) {
        this.drawerOpen = false
      }
    }
  },
  computed: {
    ...mapState('setting', ['isMobile', 'theme', 'layout', 'footerLinks', 'copyright', 'fixedHeader', 'fixedSideBar',
      'fixedTabs', 'hideSetting', 'multiPage']),
    // 获取vuex中的数据 是否移动端、主题、布局、页脚链接、版权、固定头部、固定侧边栏、固定标签、隐藏设置、多页签
    ...mapGetters('setting', ['firstMenu', 'subMenu', 'menuData']),
    // 获取vuex中的数据 第一个菜单、子菜单、菜单数据
    sideMenuWidth() { // 侧边栏宽度
      return this.collapsed ? '80px' : '256px'
    },
    headerStyle() { // 头部样式
      let width = (this.fixedHeader && this.layout !== 'head' && !this.isMobile) ? `calc(100% - ${this.sideMenuWidth})` : '100%' // 宽度
      let position = this.fixedHeader ? 'fixed' : 'static' // 位置
      return `width: ${width}; position: ${position};` // 返回样式
    },
    headMenuData() { // 头部菜单数据
      const { layout, menuData, firstMenu } = this // 获取布局、菜单数据、第一个菜单
      return layout === 'mix' ? firstMenu : menuData // 返回头部菜单数据
    },
    sideMenuData() { // 侧边栏菜单数据
      const { layout, menuData, subMenu } = this // 获取布局、菜单数据、子菜单
      return layout === 'mix' ? subMenu : menuData // 返回侧边栏菜单数据
    }
  },
  methods: {
    ...mapMutations('setting', ['correctPageMinHeight', 'setActivatedFirst']), // 设置页面最小高度、设置激活第一个 
    toggleCollapse() { // 切换折叠
      this.collapsed = !this.collapsed // 设置折叠
    },
    onMenuSelect() { // 菜单选择
      this.toggleCollapse() // 切换折叠
    },
    setActivated(route) { // 设置激活 路由
      if (this.layout === 'mix') { // 如果布局是混合
        let matched = route.matched // 匹配的路由
        matched = matched.slice(0, matched.length - 1) // 截取匹配的路由
        const { firstMenu } = this // 获取第一个菜单
        for (let menu of firstMenu) { // 遍历第一个菜单
          if (matched.findIndex(item => item.path === menu.fullPath) !== -1) { // 如果匹配的路由中有第一个菜单的路径
            this.setActivatedFirst(menu.fullPath) // 设置激活第一个
            break
          }
        }
      }
    }
  },
  created() { // 创建
    this.correctPageMinHeight(this.minHeight - 24) // 设置页面最小高度
    this.setActivated(this.$route) // 设置激活

  },
  beforeDestroy() { // 销毁前
    this.correctPageMinHeight(-this.minHeight + 24) // 设置页面最小高度
  }
}
</script>

<style lang="less" scoped>
.admin-layout {
  .side-menu {
    &.fixed-side {
      position: fixed;
      height: 100vh;
      left: 0;
      top: 0;
    }
  }

  .virtual-side {
    transition: all 0.2s;
  }

  .virtual-header {
    transition: all 0.2s;
    opacity: 0;

    &.fixed-tabs.multi-page:not(.fixed-header) {
      height: 0;
    }
  }

  .admin-layout-main {
    .admin-header {
      top: 0;
      right: 0;
      overflow: hidden;
      transition: all 0.2s;

      &.fixed-tabs.multi-page:not(.fixed-header) {
        height: 0;
      }
    }
  }

  .admin-layout-content {
    padding: 24px 24px 0;
    /*overflow-x: hidden;*/
    /*min-height: calc(100vh - 64px - 122px);*/
  }

  .setting {
    background-color: @primary-color;
    color: @base-bg-color;
    border-radius: 5px 0 0 5px;
    line-height: 40px;
    font-size: 22px;
    width: 40px;
    height: 40px;
    box-shadow: -2px 0 8px @shadow-color;
  }
}
</style>
