<template>
    <div class="commuter-list mt-3">
        <div
            v-for="post in sortedProjects"
            :key="post.PROJCTSEQ"
            class="border border-2 mb-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.PROJCTLVE ? c.PROJCTLVE === post.PROJCTSEQ : c.PROJCTNAM === post.PROJCTNAM)
                    )"
                    :key="commuter.MEMBERSEQ"
                    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, computed } 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 sortedProjects = computed(() => {
    const projectList = Array.isArray(props.project) ? props.project :
                        Object.values(props.project || {});

    return projectList
        .filter(item => item && typeof item === 'object')
        .sort((a, b) => (b.participant_count || 0) - (a.participant_count || 0));
});
// 현재 사용자 확인
const isCurrentUser = (commuter) => {
    // 현재 사용자인지 확인
    const isCurrentUserCheck = props.user && commuter && commuter.MEMBERSEQ === props.user.id;

    // 퇴근 기록이 없는지 확인
    const hasNoCheckRecord = !commuter.COMMUTLVE;

    // 현재 사용자이면서 퇴근 기록이 없는 경우에만 true 반환
    return isCurrentUserCheck && hasNoCheckRecord;
};

// 드래그 시작 이벤트 핸들러
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>
