<template>
  <div style="margin-left: 1px">
    <a-empty v-if="selectedUsers.length === 0" />
    <div v-else>
      <a-button-group
        v-for="(user, index) in selectedUsers"
        :key="'user-' + user.id + '-' + index"
        class="small-space"
      >
        <a-button class="btn-green" size="small">
          <UserOutlined />
          {{ user.realname }}
        </a-button>
        <a-button v-if="!disabled" class="btn-green" size="small" @click="deleteUser(index)">
          <CloseOutlined />
        </a-button>
      </a-button-group>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { UserOutlined, CloseOutlined } from '@ant-design/icons-vue';
import type { UserItem } from './types';

const props = withDefaults(
  defineProps<{
    disabled?: boolean;
    selectedUsers: UserItem[];
  }>(),
  {
    disabled: false,
    selectedUsers: () => [],
  }
);

const emit = defineEmits(['update:selectedUsers']);

function deleteUser(index: number) {
  const arr = [...props.selectedUsers];
  arr.splice(index, 1);
  emit('update:selectedUsers', arr);
}
</script>

<style lang="less" scoped>
.small-space {
  margin: 2px;
}
.btn-green {
  background-color: #52c41a;
  color: #fff;
  border-color: #52c41a;
}
</style>
