<template>
  <n-dropdown trigger="hover" @select="handleSelect" :show-arrow="true" :options="options">
    <div class="user-info-box">
      <n-avatar
        round
        object-fit="cover"
        size="medium"
        :src="!avatarLogo ? Person : avatarLogo"
        @error="errorHandle"
      ></n-avatar>
    </div>
  </n-dropdown>

  <!-- 系统设置 model -->
  <go-system-set v-model:modelShow="modelShow"></go-system-set>
  <!-- 关于软件 model -->
  <go-system-info v-model:modelShow="modelShowInfo"></go-system-info>
</template>

<script lang="ts" setup>
import { h, ref, onMounted } from 'vue'
import { NAvatar, NText } from 'naive-ui'
import { renderIcon } from '@/utils'
import { renderLang } from '@/utils'
import { GoSystemSet } from '@/components/GoSystemSet/index'
import { GoSystemInfo } from '@/components/GoSystemInfo/index'
import { icon } from '@/plugins'
import { useUserStore } from '@/store/external/modules/user'
import { useSyncRemote } from '@/views/chart/hooks/external/useRemote.hook'
import Person from './person.png'
import { useSetWebsiteIcon } from '@/hooks/external/useSetWebsiteIcon.hook'

const { getPlatform } = useSetWebsiteIcon()

const { PersonIcon, LogOutOutlineIcon, SettingsSharpIcon } = icon.ionicons5

const t = window['$t']

const { dataSyncUpdate } = useSyncRemote()

const modelShowInfo = ref(false)

const modelShow = ref(false)

const avatarLogo = ref('')

// 是否失败
const fallback = ref(false)

// 用户图标渲染
const renderUserInfo = () => {
  const userStoreOverride = useUserStore()
  const { username, avatar } = userStoreOverride.getUserInfo
  avatarLogo.value = avatar as string
  return h(
    'div',
    {
      style: 'display: flex; align-items: center; padding: 8px 12px;'
    },
    [
      h(NAvatar, {
        round: true,
        style: 'margin-right: 12px;',
        src: !avatar ? Person : avatar
      }),
      h('div', null, [
        h('div', null, [
          h('div', null, [
            h('div', null, [h(NText, { depth: 2 }, { default: () => (!username ? 'ThingsKit' : username) })])
          ])
        ])
      ])
    ]
  )
}

onMounted(() => {
  try {
    renderUserInfo()
    //获取企业定制
    getPlatform()
  } finally {
    console.log()
  }
})

const options = ref([
  {
    label: '我的信息',
    key: 'info',
    type: 'render',
    render: renderUserInfo
  },
  {
    type: 'divider',
    key: 'd1'
  },
  {
    label: renderLang('global.sys_set'),
    key: 'sysSet',
    icon: renderIcon(SettingsSharpIcon)
  },
  // THINGS_KIT 隐藏关于软件
  // {
  //   label: renderLang('global.contact'),
  //   key: 'contact',
  //   icon: renderIcon(ChatboxEllipsesIcon)
  // },
  {
    type: 'divider',
    key: 'd3'
  },
  {
    label: t('business.closeAndExit'),
    key: 'closePage',
    icon: renderIcon(LogOutOutlineIcon)
  }
  // {
  //   label: renderLang('global.logout'),
  //   key: 'logout',
  //   icon: renderIcon(LogOutOutlineIcon)
  // }
])

// 图片渲染错误
const errorHandle = (e: Event) => {
  fallback.value = true
}

// 系统设置
const sysSetHandle = () => {
  modelShow.value = true
}

// 系统设置
const sysInfoHandle = () => {
  modelShowInfo.value = true
}

// THINGS_KIT 修改退出登录
const userStore = useUserStore()

const handleSelect = (key: string) => {
  switch (key) {
    case 'contact':
      sysInfoHandle()
      break
    case 'sysSet':
      sysSetHandle()
      break
    case 'closePage':
      handleClosePage()
      break
    case 'logout':
      // THINGS_KIT 修改退出登录
      userStore.logout(true)
      // logout()
      break
  }
}

const handleClosePage = () => {
  //先保存当前页面数据
  dataSyncUpdate()
  //兼容Firefox Chrome
  var userAgent = navigator.userAgent
  if (userAgent.indexOf('Firefox') != -1 || userAgent.indexOf('Chrome') != -1) {
    window.location.href = 'about:blank'
    window.close()
  } else {
    window.opener = null
    window.open('', '_self')
    window.close()
  }
}
</script>

<style lang="scss" scoped>
.user-info-box {
  cursor: pointer;
  transform: scale(0.7);
}
</style>