<script setup lang="ts">
import { h, readonly, ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { sidebarMenus } from '@/router/index'
import { type MenuOption } from '@/router/utils'
import CustomIcon from '@/components/custom-icon/custom-icon.vue'
import { useUserStore } from '@/store/modules/user'

const currentRoute = useRoute()
const router = useRouter()

const userStore = useUserStore()

const menuValue = ref(currentRoute.meta.belong)

const defaultAvatar = 'https://gsst-poe-sit.gz.bcebos.com/data/20240910/1725952917468.png'

const avatarOptions = readonly([
  // {
  //   label: '我的',
  //   key: 'My',
  //   icon: () => h(CustomIcon, { icon: 'bx:user' }),
  // },
  {
    label: '退出登录',
    key: 'logout',
    icon: () => h(CustomIcon, { icon: 'teenyicons:logout-solid' }),
  },
])

watch(
  () => currentRoute.fullPath,
  () => {
    menuValue.value = currentRoute.meta.belong
  },
)

function handleUpdateValue(_key: string, menuItemOption: MenuOption) {
  router.push({ name: menuItemOption.routeName })
}

function handleToPersonAppSettingPage() {
  router.push({ name: 'PersonalAppSetting' })
}

function handleDropdownSelect(key: string) {
  if (key === 'logout') {
    userStore.logout().then(() => {
      router.push({ name: 'Login' })
    })
    return
  }

  router.replace({ name: key })
}

function handleToLogin() {
  router.push({
    name: 'Login',
    query: { redirect: encodeURIComponent(router.currentRoute.value.fullPath) },
  })
}
</script>

<template>
  <div class="flex h-full flex-col justify-between px-3">
    <div>
      <div
        class="mx-auto my-[14px] flex h-[23px] w-[90px] bg-[url('@/assets/images/page-logo.png')] bg-contain bg-center bg-no-repeat"
      />

      <div class="py-5">
        <button
          class="bg-theme-color flex h-[40px] w-[203px] items-center justify-center rounded-md text-white outline-none hover:opacity-80"
          @click="handleToPersonAppSettingPage"
        >
          <CustomIcon icon="ic:outline-add" class="mr-1 h-[18px] w-[18px]" />
          <span>创建应用</span>
        </button>
      </div>

      <ul>
        <li
          v-for="sidebarMenuItem in sidebarMenus"
          :key="sidebarMenuItem.key"
          class="my-1 flex h-10 cursor-pointer items-center rounded-md pl-3 hover:bg-[#f2f5f9]"
          :class="[menuValue === sidebarMenuItem.routeName ? 'bg-[#f2f5f9] text-[#151b26]' : 'text-[#5c5f66]']"
          @click="handleUpdateValue(sidebarMenuItem.routeName, sidebarMenuItem)"
        >
          <CustomIcon :icon="sidebarMenuItem.icon" class="mr-2 text-base" />
          <span class="line-clamp-1 max-w-[150px]">{{ sidebarMenuItem.label }}</span>
        </li>
      </ul>
    </div>

    <div class="mb-7">
      <NDropdown
        v-if="userStore.isLogin"
        trigger="click"
        placement="top-start"
        :options="avatarOptions"
        @select="handleDropdownSelect"
      >
        <div class="flex h-full cursor-pointer items-center">
          <NAvatar round :size="40" object-fit="cover" :src="userStore.userInfo.avatarUrl || defaultAvatar" />

          <div class="ml-3 line-clamp-1 max-w-[140px] select-none break-all text-base">
            {{ userStore.userInfo.nickName || '未登录' }}
          </div>
        </div>
      </NDropdown>

      <div v-else>
        <NButton type="primary" class="w-full! rounded-md!" @click="handleToLogin">立即登录</NButton>
      </div>
    </div>
  </div>
</template>

<style lang="scss">
.v-binder-follower-container {
  .n-dropdown-menu {
    --n-border-radius: 10px !important;
    --n-box-shadow: -3px 3px 4px 0px #f2f2f2 !important;

    padding: 6px 0 !important;
  }

  .n-dropdown-menu .n-dropdown-option-body {
    padding: 0 10px;
  }
}
</style>
