<template>
  <transition name="fade">
    <router-view v-if="fullscreen"></router-view>
    <MainLayout id="app" v-else>
      <div class="zpa-row middle" slot="header" style="height: 64px;">
        <span class="zpa-row middle center no-fit" style="width: 64px; height: 64px; background: #9061f9; margin-right: 16px; cursor: pointer;">
          <Icon :type="toggleMenuIcon" :size="32" color="#fff" @click="isSmall = !isSmall"></Icon>
        </span>
        <h1>{{name}}</h1>
        <div class="zpa-row end 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" />
      <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'

export default {
  name: 'App',

  components: {
    MainLayout,
    MainMenu,
  },

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

  props: {
    queryMenu: Function,
    appName: String,
  },

  computed: {
    name () {
      return this.appName || '南大先腾'
    },
    fullscreen () {
      const meta = this.$route.meta || {}
      return !!meta.fullscreen
    },
    ...mapState('core', {
      userInfo: 'userInfo',
    }),
    toggleMenuIcon () {
      return this.isSmall ? 'md-arrow-forward' : 'md-arrow-back'
    },
  },

  methods: {
    ...mapMutations('core', [
      'clearLoginInfo',
    ]),
    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>
