<script lang="ts" setup>
import { computed, inject, onMounted, ref } from 'vue'
import { useUser } from '@/store/modules/user'
import { getImgUrl } from '@/utils/urlUtils'

const emit = defineEmits<{
  (e: 'logout'): void
}>()

const userStore = useUser()

const useInfo = userStore.getUserInfo

const aiDisabled = ref(false)

function handleSelect(key: string) {
  userStore.updateTenantId(key)
  location.reload()
}

function logIt(e) {
  // console.log('e:', e)
  return false
}

const mousetrap = inject('mousetrap') as any
onMounted(() => {
  mousetrap.bind('g i', logIt)
  mousetrap.bind(['command+k', 'ctrl+k'], logIt)
})

const showPopover = ref(false)
const popRef = ref(null)

const iconName = computed(() => {
  return showPopover.value ? 'expand' : 'collapse'
})

function handleUpdateShow(show: boolean) {
  showPopover.value = show
}

function logOut() {
  (popRef.value as any).setShow(false)
  emit('logout')
}

const currentCompanyName = computed(() => {
  const tenantList = useInfo.tenantList
  const currentId = userStore.getTenantId
  const current = tenantList.find(item => item.id === currentId)
  return current.name || 'name'
})

const options = computed(() => {
  const tenantList = useInfo.tenantList
  return tenantList.map((item) => {
    return {
      label: item.name,
      key: item.id,
    }
  })
})
</script>

<template>
  <n-popover
    ref="popRef" style="border-radius: 10px" placement="bottom-end" raw :show-arrow="false" trigger="click"
    @update:show="handleUpdateShow"
  >
    <template #trigger>
      <div class="setting">
        <span>{{ useInfo.username }}</span>
        <SvgIcon style="margin-left: 6px;" :name="iconName" size="14" />
      </div>
    </template>
    <div class="container">
      <div class="header">
        <n-avatar :src="getImgUrl(useInfo.usericon)" round size="medium" />
        <div style="margin-left: 10px">
          <span style="display: block; font-size: 20px">{{ useInfo.username }}</span>
          <span style="display: block; font-size: '20px'">{{ useInfo.departname }}</span>
        </div>
      </div>
      <n-dropdown placement="left-start" trigger="hover" :options="options" @select="handleSelect">
        <div class="trigger">
          <span>{{ currentCompanyName }}</span>
          <span>icon</span>
        </div>
      </n-dropdown>
      <div class="item">
        <span>AI设置开关</span>
        <n-switch v-model:value="aiDisabled" />
      </div>
      <div class="trigger">
        联系我们
      </div>
      <n-divider style="margin-top: 0px; margin-bottom: 10px" />
      <div class="trigger" @click="logOut">
        退出登录
      </div>
    </div>
  </n-popover>
</template>

<style lang="less" scoped>
.setting {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.container {
  display: flex;
  flex-direction: column;
  border-radius: 10px;
  justify-content: center;
  background-color: #ffffff;

  .header {
    border-radius: 10px 10px 0px 0px;
    background-color: #7a92ff;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    color: #ffffff;
  }

  .trigger,
  .item {
    display: flex;
    justify-content: space-between;
    padding: 10px 20px;
  }

  .trigger:hover {
    background-color: #e8f2ff;
  }
}
</style>
