<script lang="ts" setup>
import defaultAvatar from '@/assets/images/avatar.png'
import Strings from '@/common/utils/strings.ts'
import AppApi from '@/common/app/app-api.ts'
import { useAppUserStore } from '@/common/app/app-user-store.ts'
import UserInfoPanel from '@/pages/a-frame/UserInfoPanel.vue'
import PasswdPanel from '@/pages/a-frame/PasswdPanel.vue'
import LoginApi from '@/pages/login/login-api.ts'
import Evt from '@/common/utils/evt.ts'

const userInfoPanelIns = useTemplateRef<InstanceType<typeof UserInfoPanel>>('userInfoPanelIns')

const passwdPanelIns = useTemplateRef<InstanceType<typeof UserInfoPanel>>('passwdPanelIns')

const appUserStore = useAppUserStore()

const avatar = computed(() => {
  return Strings.isBlank(appUserStore.avatar) ? defaultAvatar : AppApi.fileUrl(appUserStore.avatar!)
})
const tenantName = computed(() => {
  return appUserStore.tenantName
})
const currentTab = ref<string>('1')

function dropdownChangeHandler() {
  userInfoPanelIns.value?.reset()
  passwdPanelIns.value?.reset()
}

function logoutHandler() {
  LoginApi.logout().finally(() => {
    Evt.emit('logout')
    Evt.emit('disconnect_ws')
  })
}
</script>

<template>
  <ElDropdown placement="bottom-end" trigger="click" @visible-change="dropdownChangeHandler">
    <div class="user-info-container">
      <div>
        <div style="font-size: 16px">{{ appUserStore.nickname }}</div>
        <div v-if="tenantName">{{ tenantName }}</div>
      </div>
      <ElAvatar :src="avatar"/>
    </div>
    <template #dropdown>
      <div class="opt-panel">
        <div>
          <div>{{ appUserStore.nickname }}</div>
          <div v-if="tenantName">{{ tenantName }}</div>
        </div>
        <ElTabs v-model="currentTab">
          <ElTabPane label="基本资料" name="1">
            <UserInfoPanel ref="userInfoPanelIns" class="user-info-panel"/>
          </ElTabPane>
          <ElTabPane label="修改密码" name="2">
            <PasswdPanel ref="passwdPanelIns" class="passwd-panel"/>
          </ElTabPane>
        </ElTabs>
        <div>
          <ElButton type="danger" @click="logoutHandler">退出登录</ElButton>
        </div>
      </div>
    </template>
  </ElDropdown>
</template>

<style lang="stylus" scoped>
.user-info-container {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor pointer
}

.opt-panel {
  width 300px;

  & > div:first-child {
    box-sizing border-box
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    border-bottom: 1px solid var(--el-border-color-light);
    padding: 12px;
    font-size: 1rem;
  }

  & > div:nth-child(3) {
    box-sizing border-box
    width: 100%;
    display flex
    justify-content center
    border-top: 1px solid #D3D7DE;
    padding 8px

    & > button {
      width 50%
    }
  }

  :deep(.el-tabs) {
    width: 100%;

    .el-tabs__nav-scroll {
      width 100%
    }

    .el-tabs__nav {
      width 100%
      justify-content space-around
      position relative
    }

  }

  .user-info-panel, .passwd-panel {
    padding 12px
  }
}
</style>
