<template>
  <n-layout-header class="layout__header" bordered>
    <div class="header__title">
      <n-image width="42" height="42" src="/logo.png" preview-disabled />
      <span class="header__name">{{ platFormTitle }}</span>
    </div>

    <n-dropdown trigger="hover" :options="options" @select="handleSelect">
      <div class="user_msg">
        <n-image
          class="user_avatar"
          :src="getUserInfo.avatar"
          preview-disabled
        />
        <span class="user_name">{{ getUserInfo.realname }}</span>
      </div>
    </n-dropdown>
  </n-layout-header>
</template>

<script>
import { defineComponent, reactive, toRefs, computed } from 'vue'
import { useRouter } from 'vue-router'
import { EditOutlined, LogoutOutlined } from '@vicons/antd'
import { renderIcon } from '@/utils'
import { useUserStore } from '@/store/modules/user.js'
import { useSettingStore } from '@/store/modules/setting.js'
import setting from '@/setting/config.js'
export default defineComponent({
  name: 'LayoutHeader',
  setup() {
    const router = useRouter()
    const userStore = useUserStore()
    const settingStore = useSettingStore()
    const data = reactive({
      options: [
        {
          label: '修改密码',
          key: 'edit',
          icon: renderIcon(EditOutlined)
        },
        {
          label: '退出登录',
          key: 'out',
          icon: renderIcon(LogoutOutlined)
        }
      ],
      platFormTitle: setting.title
    })

    const getUserInfo = computed(() => {
      return userStore.userInfoMsg
    })

    const getLogoWidth = computed(() => {
      return settingStore.getSidebarSetting.width - 30
    })

    async function handleSelect(key) {
      switch (key) {
        case 'out':
          await logOut()
      }
    }

    async function logOut() {
      const res = await userStore.userLogout()
      if (res.code === 0) {
        router.replace('/login')
      }
    }

    return {
      ...toRefs(data),
      getUserInfo,
      getLogoWidth,
      handleSelect
    }
  }
})
</script>

<style scoped>
.layout__header {
  padding: 0 20px;
  background: #36475D;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.header__title{
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.header__name {
  font-size: 18px;
  font-family: Noto Sans SC-Bold, Noto Sans SC;
  font-weight: bold;
  color: #FFFFFF;
  margin-left: 16px;
}
.user_msg {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  cursor: pointer;
}
.user_avatar {
  width: 30px;
  height: 30px;
  margin-right: 10px;
}
.user_name {
  color: #fff;
}
</style>
