<template>
    <li
    data-bs-toggle="tooltip"
    data-popup="tooltip-custom"
    data-bs-placement="top"
    class="avatar pull-up"
    :aria-label="data.MEMBERSEQ"
    :data-bs-original-title="getTooltipTitle(data)">
        <img
            class="rounded-circle user-avatar border border-3"
            :src="`${baseUrl}upload/img/profile/${data.MEMBERPRF}`"
            :style="`border-color: ${data.usercolor} !important;`"
            @error="$event.target.src = '/img/icons/icon.png'"
            alt="user"
        />
    </li>
</template>

<script setup>
import { useUserInfoStore } from '@s/useUserInfoStore';
import $api from '@api';
import { nextTick, onMounted } from 'vue';

const props = defineProps({
    data: {
        type: Object,
        required: true,
    },
});
const userStore = useUserInfoStore();
const baseUrl = $api.defaults.baseURL.replace(/api\/$/, '');

onMounted(async () => {
    nextTick(() => {
        const tooltips = document.querySelectorAll('[data-bs-toggle="tooltip"]');
        tooltips.forEach((tooltip) => {
        new bootstrap.Tooltip(tooltip);
        });
    });
});
const getTooltipTitle = (user) => {
    return user.MEMBERSEQ === userStore.user.id ? '나' : user.MEMBERNAM;
};

</script>

<style lang="scss" scoped>

</style>
