<template>
<!-- 컴포넌트 사용 ex)

<UserList @user-list-update="handleUserListUpdate" />

-->
<ul class="list-unstyled users-list d-flex align-items-center">
    <li
    v-for="(user, index) in userList"
    :key="index"
    class="avatar pull-up"
    :class="{ disabled: user.disabled }"
    @click="toggleDisable(index)"
    data-bs-toggle="tooltip"
    data-popup="tooltip-custom"
    data-bs-placement="top"
    :aria-label="user.MEMBERSEQ"
    :data-bs-original-title="user.MEMBERSEQ"
    >
    <img
        class="rounded-circle"
        :src="`http://localhost:10325/upload/img/profile/${user.MEMBERPRF}`"
        alt="profile"
    />
    </li>
</ul>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import { useUserStore } from '@s/userList';

const emit = defineEmits();
const userStore = useUserStore();
const userList = ref([]);

// 사용자 목록 호출
onMounted(async () => {
    await userStore.fetchUserList();
    userList.value = userStore.userList;
});

// 클릭 시 활성화/비활성화
const toggleDisable = (index) => {
const user = userList.value[index];
    if (user) {
        user.disabled = !user.disabled;
        emitUserListUpdate();
    }
};

// emit
const emitUserListUpdate = () => {
    const activeUsers = userList.value.filter(user => !user.disabled);
    const disabledUsers = userList.value.filter(user => user.disabled);

    emit('user-list-update', { activeUsers, disabledUsers });
};
</script>
<style scoped>
/* disabled 클래스를 적용할 때 사용자의 이미지를 흐리게 */
.avatar.disabled {
    opacity: 0.5; /* 흐리게 만들기 */
}

/* 비활성화된 상태에서 이미지를 회색으로 변환 */
.avatar.disabled img {
    filter: grayscale(100%);
}
</style>
