<template>
  <a-layout :class="['layout', device]">
    <!-- SideMenu -->
    <a-drawer
      v-if="isMobile()"
      placement="left"
      :wrapClassName="`drawer-sider ${navTheme}`"
      :closable="false"
      :visible="collapsed"
      @close="drawerClose"
    >
      <side-menu
        mode="inline"
        :menus="menus"
        :theme="navTheme"
        :collapsed="false"
        :collapsible="true"
        @menuSelect="menuSelect"
      ></side-menu>
    </a-drawer>

    <side-menu
      v-else-if="isSideMenu()"
      mode="inline"
      :menus="menus"
      :theme="navTheme"
      :collapsed="collapsed"
      :collapsible="true"
    ></side-menu>

    <a-layout
      :class="[layoutMode, `content-width-${contentWidth}`]"
      :style="{ paddingLeft: contentPaddingLeft, minHeight: '100vh' }"
    >
      <!-- layout header -->
      <global-header
        :class="{'global-header': true, 'zIndexTop': showLoading}"
        :mode="layoutMode"
        :menus="menus"
        :theme="navTheme"
        :collapsed="collapsed"
        :device="device"
        @toggle="toggle"
      />

      <!-- layout content -->
      <a-layout-content :style="{ height: '100%', margin: '24px 12px 0', paddingTop: fixedHeader ? '64px' : '0' }">
        <multi-tab v-if="multiTab" ></multi-tab>
        <transition
          :css="false"
          @before-enter="beforeEnter"
          @enter="enter"
          @after-enter="afterEnter">
          <route-view />
        </transition>
        <!--        <route-view v-transition/>-->
      </a-layout-content>
      <div :class="{'loading-container': true, 'zIndexBelowTop': showLoading}" v-if="showLoading" >
      </div>

    </a-layout>
  </a-layout>
</template>

<script>
import { triggerWindowResizeEvent } from '../../packages/utils/util'
import { mapState, mapActions } from 'vuex'
import { mixin, mixinDevice } from '../../packages/utils/mixin'
import config from '../config/defaultSettings.js'
import RouteView from './RouteView.vue'
import SideMenu from '../components/Menu/SideMenu.vue'
import GlobalHeader from '../components/GlobalHeader'
import { convertRoutes } from '../../packages/utils/routeConvert'

export default {
  name: 'BasicLayout',
  mixins: [mixin, mixinDevice],
  components: {
    RouteView,
    SideMenu,
    GlobalHeader
  },
  data () {
    return {
      serviceName: 'tUmUserpreferencesService',
      production: config.production,
      collapsed: false,
      menus: [],
      showFavor: false,
      favorLists: [],
      url: {
        listOrm: 'getAndOrm'
      },
      showLoading: false
    }
  },
  computed: {
    ...mapState({
      // 动态主路由
      mainMenu: state => state.permission.addRouters
    }),

    contentPaddingLeft () {
      if (!this.fixSidebar || this.isMobile()) {
        return '0'
      }
      if (this.sidebarOpened) {
        return '256px'
      }
      return '80px'
    }
  },
  watch: {
    sidebarOpened (val) {
      this.collapsed = !val
    }
  },
  created () {
    const routes = convertRoutes(this.mainMenu.find(item => item.path === '/'))
    this.menus = (routes && routes.children) || []
    this.collapsed = !this.sidebarOpened
  },
  mounted () {
    const userAgent = navigator.userAgent
    if (userAgent.indexOf('Edge') > -1) {
      this.$nextTick(() => {
        this.collapsed = !this.collapsed
        setTimeout(() => {
          this.collapsed = !this.collapsed
        }, 16)
      })
    }
  },
  methods: {
    ...mapActions(['setSidebar']),
    handleAnimation (anim) {
      this.anim = anim
      this.anim.setSpeed(3)
    },
    beforeEnter (el) {
      this.showLoading = true
    },
    enter (el, done) {
      setTimeout(() => {
        done()
      }, 500)
    },
    afterEnter (el) {
      this.showLoading = false
    },
    toggle () {
      this.collapsed = !this.collapsed
      this.setSidebar(!this.collapsed)
      triggerWindowResizeEvent()
    },
    paddingCalc () {
      let left = ''
      if (this.sidebarOpened) {
        left = this.isDesktop() ? '256px' : '80px'
      } else {
        left = (this.isMobile() && '0') || (this.fixSidebar && '80px') || '0'
      }
      return left
    },
    menuSelect () {},
    drawerClose () {
      this.collapsed = false
    },
    setShowFavor (showFavor) {
      this.showFavor = showFavor
    },
    updateLayout () {
    }
  }
}
</script>

<style lang="less">
/*
 * The following styles are auto-applied to elements with
 * transition="page-transition" when their visibility is toggled
 * by Vue.js.
 *
 * You can easily play with the page transition by editing
 * these styles.
 */

.page-transition-enter {
  opacity: 0;
}

.page-transition-leave-active {
  opacity: 0;
}

.page-transition-enter .page-transition-container,
.page-transition-leave-active .page-transition-container {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}
.loading-container{
  position: absolute;
  background: white;
  width: 100%;
  height: 100%;
  display: flex;
  align-items:center;/*垂直居中*/
  justify-content: center;/*水平居中*/
}
.global-header{
  z-index: 11;
}
.zIndexTop{
  z-index: 1611;
}
.zIndexBelowTop{
  z-index: 1610;
}
</style>
