<template>
  <n-layout-header class="layout__header" bordered>
    <div class="header__logo">
      <n-image height="18" :src="logo" preview-disabled />
      <span class="sp">欢迎回来, {{ getUserInfo.realname }}</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 { signinRedirect, signoutRedirect } from '@/utils/oidc/index.js'
import logo from './logo.png'

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()
      }
    }

    const getUserInfo = computed(() => {
      console.log(userStore, '==============')
      return {
        hasLogin: userStore.hasLogin,
        // avatar: userStore.avatar,
        username: userStore.username,
        realname: userStore.realname
      }
    })

    const handleLogin = () => {
      signinRedirect()
    }

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

<style scoped>
.layout__header {
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.header__logo{
  height: 18px;
}
.sp {
  margin-left: 8px;
  font-size: 14px;
  font-weight: blod;
  vertical-align: top;
}
.user_msg {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.user_avatar {
  width: 30px;
  height: 30px;
  margin-right: 10px;
}
</style>
