<script setup lang="ts">
const statMap = new Map([
  ['approve', { state: 'agree', icon: 'gt-plane-ok-green', color: 'var(--color-success,#0EB07B)' }], // 对钩
  ['true', { state: 'agree', icon: 'gt-plane-ok-green', color: 'var(--color-success,#0EB07B)' }], // 对钩
  ['pass', { state: 'agree', icon: 'gt-plane-ok-green', color: 'var(--color-success,#0EB07B)' }], // 对钩
  ['pass', { state: 'agree', icon: 'gt-plane-ok-green', color: 'var(--color-success,#0EB07B)' }], // 对钩
  ['reject', { state: 'reject', icon: 'gt-plane-Fail', color: 'var(--color-danger,#F2050D)' }] // 叉
  // ['optional', { state: 'optional', icon: '' }] // 未操作状态 空
]);

// 审查，审视 对钩列表
defineOptions({ name: 'GuardiansLs' });
import { pickNickName } from '@/utils';
interface IItem {
  username: string;
  nick_name?: string;
  nickname?: string;
  disabled?: boolean;
  state: 'approve' | 'pass' | 'reject' ;
};

withDefaults(defineProps<{
  data: IItem[];
}>(), {
  data() { return []; }
});
defineEmits<{
  'agree': [IItem];
  'reject': [IItem];
}>();
</script>
<template>
  <ul class="g-guardians-ls">
    <li v-for="(item, index) in data" :key="item.id + index" class="g-guardians-ls-item"
      :class="{ disabled: item.disabled }">
      <g-avatar :width="18" :height="18" style="vertical-align: middle;" :name="pickNickName(item)" :src="item.avatar || item.avatar_url" />
      <span class="username">
        <GLink :to="{ name: 'homepage', params: { namespace: item.username } }">{{ pickNickName(item) }}</GLink>
      </span>
      <GIcon v-if="statMap.get(item.state)" :name="statMap.get(item.state).icon" :color="statMap.get(item.state).color"></GIcon>
    </li>
  </ul>
</template>

<style lang="scss" scoped>
.g-guardians-ls {
  @apply text-ellipsis overflow-hidden whitespace-nowrap flex flex-col gap-[8px];

  &-item {
    @apply flex leading-[18px] items-center align-middle gap-[8px] overflow-hidden text-ellipsis;

    .username {
      @apply overflow-hidden text-ellipsis flex-1;
    }

    .icon {
      min-width: 1em;
      // cursor: pointer;
    }

    .disabled {
      filter: opacity(60%);
      // @apply cursor-not-allowed;

      // .icon {
      //   @apply cursor-not-allowed;
      // }
    }
  }
}
</style>
