<template>
    <div class="">
        <template v-for="category in categoryList" :key="category.CMNCODVAL">
            <div
                v-if="
                    (category.CMNCODVAL === 300201 && birthdayList?.length) ||
                    (category.CMNCODVAL === 300202 && vacationList?.length) ||
                    (category.CMNCODVAL === 300203 && birthdayPartyList?.length) ||
                    (category.CMNCODVAL === 300204 && dinnerList?.length) ||
                    (category.CMNCODVAL === 300205 && teaTimeList?.length) ||
                    (category.CMNCODVAL === 300206 && workShopList?.length)
                "
                class="border border-2 mt-3 card p-2"
            >
                <div class="row g-2 position-relative">
                    <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 d-flex align-items-center">
                        <template v-if="category.CMNCODVAL === 300201">
                            <MainMemberProfile :members="birthdayList" :baseUrl="baseUrl" />
                        </template>
                        <template v-if="category.CMNCODVAL === 300202">
                            <MainMemberProfile :members="vacationList" :baseUrl="baseUrl" />
                        </template>
                        <template v-if="category.CMNCODVAL === 300203">
                            <MainEventBoard :place="birthdayPartyList[0].LOCEVTPLC" :time="birthdayPartyList[0].LOCEVTTME" />
                        </template>
                        <template v-if="category.CMNCODVAL === 300204">
                            <MainEventBoard :place="dinnerList[0].LOCEVTPLC" :time="dinnerList[0].LOCEVTTME" />
                        </template>
                        <template v-if="category.CMNCODVAL === 300205">
                            <MainEventBoard :place="teaTimeList[0].LOCEVTPLC" :time="teaTimeList[0].LOCEVTTME" />
                        </template>
                        <template v-if="category.CMNCODVAL === 300206">
                            <MainEventBoard :place="workShopList[0].LOCEVTPLC" :time="workShopList[0].LOCEVTTME" />
                        </template>
                    </div>
                </div>
            </div>
        </template>
    </div>
</template>

<script setup>
    import { defineEmits } from 'vue';
    import MainMemberProfile from '@c/main/MainMemberProfile.vue';
    import MainEventBoard from '@c/main/MainEventBoard.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,
        },
        birthdayPartyList: {
            type: Array,
        },
        dinnerList: {
            type: Array,
        },
        teaTimeList: {
            type: Array,
        },
        workShopList: {
            type: Array,
        },
    });
</script>

<style scoped>
    .event-board {
        width: 100%;
        padding: 0.5rem;
    }

    .event-info {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    .info-item {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .label {
        font-weight: 500;
        color: #666;
        min-width: 3rem;
    }

    .content {
        color: #333;
        word-break: break-all;
    }
</style>
