<template>
  <li class="menu-item">
    <span class="font-bold" v-if="item.nick_name" :title="item.nick_name">{{ item.nick_name }} &nbsp;</span>
    <span :title="item.itemText">{{ item.itemText }}</span>
    <span class="g-member-items-item-tags shrink-0 ml-2">
      <slot name="tags" :data="item" :index="index">
        <custom-tag v-if="isProjectMember" class="g-member-items-item-tag" color="#2865E0" border-color="#E4E9F0">
          项目成员
        </custom-tag>
        <!-- <custom-tag v-if="isManager" class="g-member-items-item-tag" color="#2865E0" border-color="#E4E9F0">
          管理者
        </custom-tag>
        <custom-tag
          v-if="isVisitor && (item.join_way === 'inherit' || !isManager)"
          class="g-member-items-item-tag"
          color="#0EB07B"
          border-color="#E4E9F0"
        >
          浏览者
        </custom-tag>
        <custom-tag
          v-if="isDeveloper && (item.join_way === 'inherit' || !isManager)"
          class="g-member-items-item-tag"
          color="#707A87"
          border-color="#E4E9F0"
        >
          开发者
        </custom-tag> -->
      </slot>
    </span>
  </li>
</template>

<script setup lang="ts">
defineOptions({ name: 'MemberItemMini' });
import CustomTag from '@/components/CustomTag/index.vue';
import setting from '@/setting';
import { computed } from 'vue';

const props = withDefaults(
  defineProps<{
    item: any;
  }>(),
  {
    item: {}
  }
);
const userRole = setting.role;

const { visitor, developer, admin } = setting.role;
const isDeveloper = computed(() => props.item.access_level >= developer && props.item.access_level < admin);
const isManager = computed(() => props.item.access_level >= admin);
const isVisitor = computed(() => props.item.access_level >= visitor && props.item.access_level < developer);
const isProjectMember = computed(() => {
  return (
    isManager.value
    || (isDeveloper.value && (props.item.value?.join_way === 'inherit' || !isManager.value))
    || (isVisitor.value && (props.item.value?.join_way === 'inherit' || !isManager.value))
  );
});
</script>
<style lang="scss" scoped>
.menu-item {
  @apply cursor-pointer whitespace-nowrap overflow-hidden overflow-x-auto text-ellipsis flex items-center;
  padding: 8px;
  max-width: 500px;
  border-bottom: 1px solid var(--color-border-light);
}
</style>
