<template>
  <transition name="fade">
    <router-view v-if="fullscreen"></router-view>
    <MainLayout id="app" :theme="theme" v-else>
      <div class="zpa-row middle" slot="header" style="height: 64px;">
        <ToggleMenu v-model="isSmall" :theme="theme" />
        <h1 class="title">{{name}}</h1>
        <div class="zpa-row end middle header-slot">
          <slot name="header-extra"></slot>
          <div class="zpa-row no-fit tools middle" v-if="$slots['header-tools'] || tools">
            <slot name="header-tools"></slot>
            <template v-for="t in tools">
              <div class="tool" :is="t + 'Tool'" :key="t"></div>
            </template>
          </div>
        </div>
        <div class="zpa-row no-fit middle" style="margin-right: 16px;">
          <p style="font-size: 14px; margin-right: 8px;">你好，{{userInfo.userName}}（前端组 - 开发）</p>
          <Dropdown>
            <a href="javascript:void(0)">
              <Avatar icon="ios-person" size="large" />
            </a>
            <DropdownMenu slot="list">
              <DropdownItem
                  v-modal
                  :modal-content="ChangePwd"
                  :modal-config="{title: '修改密码'}"
              >
                <Icon type="md-key" :size="18"></Icon>
                修改密码
              </DropdownItem>
              <DropdownItem
                  v-modal
                  :modal-content="UserRank"
                  :modal-config="{title: '当前岗位'}"
              >
                <Icon type="logo-buffer" :size="18"></Icon>
                当前岗位
              </DropdownItem>
              <DropdownItem divided @click.native="doLogout">
                <Icon type="ios-exit" style="margin-left: -2px;" :size="18"></Icon>
                退出登录
              </DropdownItem>
            </DropdownMenu>
          </Dropdown>
        </div>
      </div>
      <MainMenu :small="isSmall" slot="menu" :query="query" ref="MainMenu" :theme="theme">
        <template #bottom>
          <slot name="menu-bottom"></slot>
        </template>
      </MainMenu>
      <router-view slot="content" />
    </MainLayout>
  </transition>
</template>

<script>
import {
  mapState,
  mapMutations,
} from 'vuex'
import {
  logout,
} from '@centit/api-auth'

import MainLayout from './components/commons/MainLayout'
import MainMenu from './components/commons/MainMenu'
// 操作
import ChangePwd from './components/operators/ChangePwd'
import UserRank from './components/operators/UserRank'
// 工具
import FullScreenTool from './components/tools/fullscreen/FullScreenTool'
import SkinTool from './components/tools/skin/SkinTool'
import ToggleMenu from './components/tools/ToggleMenu'

export default {
  name: 'App',

  components: {
    MainLayout,
    MainMenu,
    FullScreenTool,
    SkinTool,
    ToggleMenu,
  },

  data () {
    return {
      ChangePwd,
      UserRank,
      isSmall: false,
    }
  },

  provide () {
    return {
      $App: this,
    }
  },

  props: {
    queryMenu: Function,
    appName: String,
    tools: {
      type: Array,
      default: () => ['Skin', 'FullScreen'],
    },
  },

  computed: {
    ...mapState('core', {
      userInfo: 'userInfo',
      theme: 'theme',
    }),
    name () {
      return this.appName || '南大先腾'
    },
    fullscreen () {
      const meta = this.$route.meta || {}
      return !!meta.fullscreen
    },
  },

  methods: {
    ...mapMutations('core', [
      'clearLoginInfo',
    ]),
    reloadMenu () {
      this.$refs.MainMenu.load()
    },
    async query () {
      if (this.queryMenu) {
        return this.queryMenu()
      }
      return [
        {
          id: 'Home',
          url: '/home',
          icon: 'md-home',
          text: '首页',
        },
        {
          id: 'About',
          url: '/about',
          icon: 'md-people',
          text: '关于',
        },
      ]
    },
    doLogout () {
      this.clearLoginInfo()
      logout()
      this.$router.push({
        name: 'Login',
      })
    },
  },

  created () {
    if (document.body.clientWidth <= 1366) {
      this.isSmall = true
    }
  },

  watch: {
    $route: {
      handler: function $route (to) {
        const { meta } = to
        if (meta.title) {
          document.title = `${meta.title}-${this.name}`
        } else {
          document.title = this.name
        }
      },
      immediate: true,
    },
  },
}
</script>

<style lang="less">
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

#app {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  font-size: 12px;
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</style>

<style scoped lang="less">
.header-slot, .tools {
  padding: 0 8px;

  .tool {
    margin: 0 8px;
  }
}
</style>
