<template>
    <div class="employee-sector">
        <h3>เลือกพนักงาน</h3>
        <div class="employee-list">
            <div v-for="employee in employees" :key="employee.id" class="employee-card" draggable="true"
                @dragstart="onDragStart($event, employee)">
                <img :src="employee.image || defaultImage" alt="employee" class="employee-image" />
                <span>{{ employee.name }}</span>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import type { Employee } from '@/types/Employee'
import { ref } from 'vue'

// ข้อมูลพนักงาน Mock (ยังไม่เชื่อม API)
const employees = ref<Employee[]>([
    { id: 1, name: 'นก', gender: 'female', image: 'images/em001.jpg', tel: '0812345678', dailyWageRate: 450 },
    { id: 2, name: 'เจน', gender: 'female', image: 'images/em002.jpg', tel: '0823456789', dailyWageRate: 450 },
    { id: 3, name: 'เจม', gender: 'male', image: 'images/em003.jpg', tel: '0834567890', dailyWageRate: 450 },
    { id: 4, name: 'แอน', gender: 'female', image: 'images/em004.jpg', tel: '0845678901', dailyWageRate: 450 },
    { id: 5, name: 'พิมาย', gender: 'others', image: 'images/em005.jpg', tel: '0856789012', dailyWageRate: 450 },
    { id: 6, name: 'น้อง', gender: 'male', image: 'images/em006.jpg', tel: '0867890123', dailyWageRate: 450 },
    { id: 7, name: 'ปุ๊ก', gender: 'female', image: 'images/em007.jpg', tel: '0878901234', dailyWageRate: 450 },
    { id: 8, name: 'เป้', gender: 'male', image: 'images/em008.jpg', tel: '0889012345', dailyWageRate: 450 }
]);

const defaultImage = 'images/noimage.jpg' // ใช้รูป default ถ้าไม่มีรูปพนักงาน

const onDragStart = (event: DragEvent, employee: Employee) => {
    event.dataTransfer?.setData('text/plain', JSON.stringify(employee))
    event.dataTransfer!.effectAllowed = 'move'
}
</script>

<style scoped>
.employee-sector {
    padding: 1rem;
    background: white;
    border-radius: 10px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    text-align: center;
}

/* ✅ ใช้ Grid ให้มี 5 คอลัมน์ */
.employee-list {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    /* 5 คนต่อแถว */
    gap: 10px;
    justify-items: center;
    padding: 10px;
}

/* ✅ ปรับ Employee Card ให้พอดีกับ Grid */
.employee-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100px;
    height: 120px;
    border: 2px solid #ccc;
    border-radius: 10px;
    cursor: grab;
    background: white;
    transition: all 0.3s ease;
}

.employee-card:hover {
    background: #f0f0f0;
}

.employee-card:active {
    cursor: grabbing;
}

.employee-image {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 5px;
}
</style>