<template>
  <a-space class="user-nav-container" align="center">
    <a-avatar 
      :src="userImageSrc" 
      :size="32"
      :style="{ backgroundColor: userImageSrc ? 'transparent' : '#1890ff' }"
    >
      {{ loginInfo?.userName?.charAt(0) }}
    </a-avatar>
    
    <a-dropdown :trigger="['click']">
      <a class="ant-dropdown-link" @click.prevent>
        {{ loginInfo?.userName || '' }}
        <down-outlined class="dropdown-arrow" />
      </a>
      
      <template #overlay>
        <a-menu>
          <a-menu-item key="settings" @click="setUserParameters">
            <template #icon>
              <setting-outlined />
            </template>
            {{ $t("lang.top-nav-user-info.personalSettings") }}
          </a-menu-item>
          
          <a-menu-item key="logout" @click="logout">
            <template #icon>
              <logout-outlined />
            </template>
            {{ $t("lang.top-nav-user-info.cancellation") }}
          </a-menu-item>
        </a-menu>
      </template>
    </a-dropdown>
  </a-space>
</template>

<script>
import { defineComponent } from 'vue';
import { 
  DownOutlined,
  SettingOutlined,
  LogoutOutlined,
} from '@ant-design/icons-vue';
import Common from '../common/Common.js';
import store from '../store/index.js';

export default defineComponent({
  components: {
    DownOutlined,
    SettingOutlined,
    LogoutOutlined,
  },

  props: {
    loginInfo: {
      type: Object,
      default: () => null,
    },
  },

  computed: {
    userImageSrc() {
      if (!this.loginInfo?.userImageUrl) return null;
      
      const storeName = store.state.downloadStore.imageSrc;
      let imageName = '';
      
      if(storeName.includes('com.leanwo.prodog.base.model.User')) {
        const index = storeName.indexOf('/');
        imageName = index !== -1 ? storeName.slice(index + 1) : '';
      } else {
        imageName = storeName;
      }
      return Common.getResourceUrl(
        'image',
        'com.leanwo.prodog.base.model.User',
        imageName,
      );
    },
  },

  methods: {
    setUserParameters() {
      this.$router.push('/desktop/userParameters');
    },

    logout() {
      Common.clearLocalStorage(true);
      this.$router.push('/login');
    },
  },
});
</script>

<style scoped>
.user-nav-container {
  margin-right: 24px;
  cursor: pointer;
}

.ant-dropdown-link {
  color: rgba(0, 0, 0, 0.85);
  transition: color 0.3s;
}

.ant-dropdown-link:hover {
  color: #1890ff;
}

.dropdown-arrow {
  margin-left: 8px;
  font-size: 12px;
}
</style>