<!--Created by 熊超超 on 2018/4/25.-->
<template>
  <div data-flex="cross:center" class="nav p-h-16 bs-2 m-b-10 bg-white">
    <span class="f-16" data-flex-box="1">
      <component :is="titleComponent"></component>
    </span>
    <div data-flex="cross:center">
      <xt-icon name="user" size="18" class="m-r-5"/>
      <span>用户名</span>
      <span class="m-h-5">|</span>
      <span>超级管理员</span>
      <span class="f-16">
        <component v-if="!!navComponent" :is="navComponent"></component>
      </span>
      <xt-icon name="logout" size="18" class="m-l-10 cp" @click="onLogout"/>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  computed: {
    titleComponent() {
      return 'xt-title'
    },
    navComponent() {
      return this.$config?.components?.nav ? 'xt-nav' : ''
    },
  },
  methods: {
    async onLogout () {
      const re = await this.$utils.confirm('确定退出登录吗？')
      this.$utils.loading.open()
      if (!re) return
      const {error} = await this.$store.dispatch(this.$config.actions.logout || 'logout')
      this.$utils.loading.close()
      if (!error) {
        this.$store.commit('logout')
        this.$router.push('/login')
        this.$utils.message.success('退出成功')
      }
    },
  },
}
</script>

<style lang="scss" scoped>
  @import "../../css/vars";
  .nav{
    height: 52px !important;
  }
</style>
