<template>
    <div class="">
        <template v-for="category in categoryList" :key="category.CMNCODVAL">
            <div class="border border-2 mt-3 card p-2">
                <div class="row g-2">
                    <div class="col-3 mx-0 px-0">
                        <div class="ratio ratio-1x1">
                            <img
                                :src="`${baseUrl}img/main-category-img/main-${category.CMNCODVAL}.png`"
                                :alt="`${category.CMNCODNAM}`"
                                @error="$event.target.src = '/img/icons/icon.png'"
                            />
                        </div>
                    </div>
                    <div class="col-9 mx-0 px-0">
                        <template v-if="category.CMNCODVAL === 300201">
                            <div class="ms-2">
                                <ul class="row gx-1 mb-0 list-inline d-flex align-items-center">
                                    <li class="col-4 me-0" v-for="member in birthdayList" :key="member.MEMBERSEQ">
                                        <div class="ratio ratio-1x1 mb-0 profile-list">
                                            <img
                                                :src="`${baseUrl}upload/img/profile/${member.MEMBERPRF}`"
                                                alt="User Profile"
                                                class="rounded-circle"
                                                @error="$event.target.src = '/img/icons/icon.png'"
                                            />
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </template>
                        <template v-if="category.CMNCODVAL === 300202">
                            <div class="ms-2">
                                <ul class="row gx-1 mb-0 list-inline d-flex align-items-center">
                                    <li class="col-4 me-0" v-for="member in vacationList" :key="member.MEMBERSEQ">
                                        <div class="ratio ratio-1x1 mb-0 profile-list">
                                            <img
                                                :src="`${baseUrl}upload/img/profile/${member.MEMBERPRF}`"
                                                alt="User Profile"
                                                class="rounded-circle"
                                                @error="$event.target.src = '/img/icons/icon.png'"
                                            />
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </template>
                    </div>
                </div>
            </div>
        </template>
    </div>
</template>

<script setup>
    import { defineEmits } from 'vue';

    const props = defineProps({
        project: {
            type: Object,
            required: false,
        },
        categoryList: {
            type: Array,
        },
        commuters: {
            type: Array,
            required: false,
        },
        baseUrl: {
            type: String,
            required: false,
        },
        user: {
            type: Object,
            required: false,
        },
        selectedProject: {
            type: Number,
            default: null,
        },
        checkedInProject: {
            type: Object,
            default: null,
        },
        birthdayList: {
            type: Array,
        },
        vacationList: {
            type: Array,
        },
    });

    const emit = defineEmits(['drop', 'update:selectedProject', 'update:checkedInProject']);

    // 현재 사용자 확인
    const isCurrentUser = commuter => {
        return props.user && commuter && commuter.MEMBERSEQ === props.user.id;
    };

    // 드래그 시작 이벤트 핸들러
    const dragStart = (event, project) => {
        // 드래그 데이터 설정
        event.dataTransfer.setData('application/json', JSON.stringify(project));
        event.dataTransfer.effectAllowed = 'copy';
    };

    // 드래그 오버 드롭 허용
    const allowDrop = event => {
        event.preventDefault();
    };

    // 드롭
    const handleDrop = (event, targetProject) => {
        event.preventDefault();
        emit('drop', { event, targetProject });
    };
</script>
