<template>
  <n-layout-header class="layout__header" bordered>
    <div class="header__logo">
      <n-image height="18" src="/logo.png" preview-disabled />
    </div>

    <n-dropdown trigger="hover" :options="options" @select="handleSelect">
      <div class="user_msg">
        <n-image
          class="user_avatar"
          :src="userInfo.avatar"
          preview-disabled
        />
        <span class="user_name">{{ userInfo.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 { signoutRedirect } from '@/utils/oidc/index.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)
        }
      ],
      userInfo: {
        avatar: '',
        realname: '管理员'
      }
    })

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

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

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

<style scoped>
.layout__header {
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.header__logo{
  height: 18px;
}
.user_msg {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.user_avatar {
  width: 30px;
  height: 30px;
  margin-right: 10px;
}
</style>
