<template>
    <div class="commuter-list">
        <div v-for="post in project" :key="post.PROJCTSEQ"
            class="border border-2 mt-3 card p-2"
            :style="`border-color: ${post.projctcolor} !important; color: ${post.projctcolor} !important;`"
            @dragover="allowDrop($event)"
            @drop="handleDrop($event, post)">
            <p class="mb-1">
                {{ post.PROJCTNAM }}
            </p>
            <div class="row gx-2">
                <div v-for="commuter in commuters.filter(c => c.PROJCTNAM === post.PROJCTNAM)" :key="commuter.COMMUTCMT" class="col-4">
                    <div class="ratio ratio-1x1">
                        <img :src="`${baseUrl}upload/img/profile/${commuter.profile}`"
                            alt="User Profile"
                            class="rounded-circle"
                            :class="isCurrentUser(commuter) ? 'cursor-pointer' : ''"
                            :draggable="isCurrentUser(commuter)"
                            @dragstart="isCurrentUser(commuter) ? dragStart($event, post) : null"
                            @error="$event.target.src = '/img/icons/icon.png'">
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

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

const props = defineProps({
    project: {
        type: Object,
        required: false
    },
    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
    }
});

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>
