<template>
    <div class="mt-4">
        <div v-if="projectList.length === 0" class="text-center">
            <p class="text-muted mt-4">게시물이 없습니다.</p>
        </div>

        <div v-for="post in projectList" :key="post.PROJCTSEQ" @click="openModal(post)" class="cursor-pointer">
            <ProjectCard
                :title="post.PROJCTNAM"
                :description="post.PROJCTDES"
                :strdate="post.PROJCTSTR"
                :enddate="post.PROJCTEND"
                :address="post.PROJCTARR + ' ' + post.PROJCTDTL"
                :projctSeq="post.PROJCTSEQ"
                :projctCol="post.projctcolor"
            />
        </div>

        <CenterModal :display="isModalOpen" @close="closeModal">
            <template #title> 프로젝트 수정 </template>
            <template #body>
                <FormInput
                    title="이름"
                    name="name"
                    :is-essential="true"
                    :is-alert="nameAlert"
                    v-model="selectedProject.PROJCTNAM"
                />

                <FormSelect
                    title="컬러"
                    name="color"
                    :is-essential="true"
                    :is-label="true"
                    :is-common="true"
                    :data="allColors"
                    v-model="selectedProject.projctcolor"
                />

                <FormInput
                    title="시작일"
                    type="date"
                    name="startDay"
                    v-model="selectedProject.PROJCTSTR"
                    :is-essential="true"
                />

                <FormInput
                    title="종료일"
                    type="date"
                    name="endDay"
                    v-model="selectedProject.PROJCTEND"
                />

                <FormInput
                    title="설명"
                    name="description"
                    v-model="selectedProject.PROJCTDES"
                />

                <ArrInput
                    title="주소"
                    name="address"
                    :is-essential="true"
                    :is-row="true"
                    v-model="selectedProject"
                    @update:data="updateAddress"
                />

            </template>
            <template #footer>
                <button class="btn btn-secondary" @click="closeModal">Close</button>
                <button class="btn btn-primary" @click="handleSubmit">Save</button>
            </template>
        </CenterModal>
    </div>
</template>

<script setup>
    import { computed, ref } from 'vue';
    import ProjectCard from './ProjectCard.vue';
    import { onMounted } from 'vue';
    import $api from '@api';
    import CenterModal from '@c/modal/CenterModal.vue';
    import FormInput from '@c/input/FormInput.vue';
    import FormSelect from '@c/input/FormSelect.vue';
    import commonApi from '@/common/commonApi';
import ArrInput from '../input/ArrInput.vue';

    const projectList = ref([]);
    const isModalOpen = ref(false);

    const nameAlert = ref(false);
    const selectedProject = ref({
        PROJCTNAM: '',
        projctcolor: '',
        PROJCTSTR: '',
        PROJCTEND: '',
        PROJCTZIP: '',
        PROJCTARR: '',
        PROJCTDTL: '',
        PROJCTDES: '',
        PROJCTCOL: '',
    });

    const { colorList } = commonApi({
        loadColor: true,
        colorType: 'YNP',
    });


    onMounted(() => {
        getProjectList();
    });

    // 프로젝트 목록 불러오기
    const getProjectList = () => {
        $api.get('project/select').then(res => {
            projectList.value = res.data.data.projectList;
        });
    };

    const openModal = (post) => {
        isModalOpen.value = true;
        selectedProject.value = { ...post };
    };

    const closeModal = () => {
        isModalOpen.value = false;
    };

    // 현재 프로젝트 색상 + 사용하지 않은 색상
    const allColors = computed(() => {
        // 기존 색상 추가
        const existingColor = { value: selectedProject.value.PROJCTCOL, label: selectedProject.value.projctcolor };

        // colorList에 기존 색상을 추가
        return [existingColor, ...colorList.value];
    });

    const updateAddress = (addressData) => {
        selectedProject.value = {
            ...selectedProject.value,
            PROJCTZIP: addressData.postcode,
            PROJCTARR: addressData.address,
            PROJCTDTL: addressData.detailAddress
        };
    };


    const handleSubmit = () => {

        console.log(selectedProject.value);
    };
</script>
