<script setup lang="ts">
import DropMemu from '@/components/DropMenu/DropMenu.vue';
import { deleteSession } from '@/services/header/header.service';
import { clearCurrentLoginInfo } from '@/utils/common-service';
import { getStoreData, loading, setStoreData } from '@/utils/composition';
import { transformRole } from '@/utils/utils';
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { cancelRequests } from '@/utils/http-service';

const props = defineProps({
  theme: {
    type: String,
    default: 'default',
  },
});
const show = ref(false);
const userRef = ref(null);
const router = useRouter();

// 绑定数据
const uName = getStoreData('loct', 'un');
const uRole = getStoreData('loct', 'ur')
  .map((item: string) => {
    return transformRole(item);
  })
  .join();
const uIp = getStoreData('loct', 'uip');
const uTime = getStoreData('loct', 'utime');

function leave() {
  show.value = false;
}

function showDrop() {
  show.value = true;
}

function hideDrop(ev: MouseEvent) {
  show.value = false;
}

// 退出登录
function loginOut() {
  const sid = getStoreData('loct', 'rn');
  if (sid) {
    loading(true);
    cancelRequests();
    deleteSession(sid)
      .then(() => {
        cancelRequests();
        router.push('/login');
        clearCurrentLoginInfo();
        setStoreData('loct', 'isExited', true);
      })
      .finally(() => {
        loading(false);
      });
  }
}
</script>
<template>
  <div class="menu-container" @mouseenter="showDrop()" @mouseleave="hideDrop($event)">
    <div id="userInfoContainer" ref="userRef" class="user-container">
      <i id="localUserIcon" class="icon-User" :class="[{ active: show }, `${theme}-user`]"></i>
    </div>
    <DropMemu :offset-x="6" :show="show" :placement="'right'" @leave="leave()">
      <div id="secDrop_login" class="nav-user-info">
        <table>
          <tr>
            <td>
              {{ $t('COMMON_USERNAME') }}
            </td>
            <td>
              <span id="navUserName" :title="uName">{{ uName }}</span>
            </td>
          </tr>
          <tr>
            <td>
              {{ $t('COMMON_ROLE') }}
            </td>
            <td>
              <span id="navRole">{{ uRole }}</span>
            </td>
          </tr>
          <tr>
            <td>
              {{ $t('COMMON_IPADRESS') }}
            </td>
            <td>
              <span id="navIpAddress">{{ uIp }}</span>
            </td>
          </tr>
          <tr>
            <td>
              {{ $t('COMMON_TIME') }}
            </td>
            <td>
              <span id="navTime">{{ uTime }}</span>
            </td>
          </tr>
        </table>
        <div class="nav-login-out">
          <span id="loginOut" @click.stop="loginOut()" @mouseup.stop="() => {}">
            {{ $t('HEADER_LOGIN_OUT') }}
          </span>
        </div>
      </div>
    </DropMemu>
  </div>
</template>

<style lang="scss" scoped>
.menu-container {
  display: flex;
  height: 100%;
}
.user-container {
  display: flex;
  height: 100%;
  align-items: center;
  padding-left: 10px;
  padding-right: 10px;
  i {
    font-size: 24px;
  }
  i.active::before {
    color: $APP-COLOR-HOVER !important;
  }
}
.nav-user-info {
  padding-top: 5px;
  text-align: left;
  table {
    font-size: $FONT-14;
    td {
      white-space: nowrap;
      padding: 2px 10px;
    }
    td:first-child {
      color: var(--o-text-color-tertiary);
    }
    td:last-child {
      color: var(--o-text-color-primary);
    }
  }
}
.nav-login-out {
  text-align: center;
  border-top: 1px solid $APP-BORDER-COLOR-LOGIN-OUT;
  padding: 6px;
  margin-top: 5px;
  font-size: $FONT-14;
  span {
    color: $APP-COLOR-ACTIVE;
    cursor: pointer;
  }
}

.standard-user {
  &:before {
    color: #fffffe !important;
  }
}

.ibma-user {
  &:before {
    color: #fffffe !important;
  }
}

.beautiful-user {
  &:before {
    color: #fffffe !important;
  }
}
</style>
