<template>
    <div class="card mb-3 shadow-sm border">
        <div class="row g-0">
            <div class="card-body">
                <!-- 제목 -->
                <h5 class="card-title">
                    {{ title }}
                </h5>
                <!-- 날짜 -->
                <div class="d-flex flex-column flex-sm-row align-items-center pb-2">
                    <i class="bx bx-calendar"></i>
                    <div class="ms-2">날짜</div>
                    <div class="ms-12">{{ strdate }} ~ {{ enddate }}</div>
                </div>
                <!-- 참여자 -->
                <div class="d-flex flex-column flex-sm-row align-items-center pb-2">
                    <i class="bx bxs-user"></i>
                    <div class="ms-2">참여자</div>
                    <UserList :projctSeq="projctSeq" class="ms-8 mb-0" />
                </div>
                <!-- 설명 -->
                <div class="d-flex flex-column flex-sm-row align-items-center pb-2">
                    <i class="bx bx-detail"></i>
                    <div class="ms-2">설명</div>
                    <div class="ms-12">{{ description }}</div>
                </div>
                <!-- 주소 -->
                <div class="d-flex flex-column flex-sm-row align-items-center pb-2">
                    <i class="bx bxs-map"></i>
                    <div class="ms-2">주소</div>
                    <div class="ms-12">{{ address }}</div>
                    <button type="button" class="btn ms-auto text-white" :style="`background-color: ${projctCol} !important;`" @click.stop="openModal">log</button>
                </div>
            </div>
        </div>
    </div>
    <CenterModal :display="isModalOpen" @close="closeModal">
        <template #title> Log </template>
        <template #body>
            <div class="ms-4 mt-2" v-if="logData">
                <p class="mb-1">{{ logData.createDate }}</p>
                <strong class="">[{{ logData.creator }}] 프로젝트 등록</strong>
            </div>

            <div class="log-item" v-if="logData?.updateDate">
                <div class="d-flex align-items-center">
                    <i class="bx bx-edit me-2"></i>
                    <strong>수정 정보</strong>
                </div>
                <div class="ms-4 mt-2">
                    <p class="mb-1">{{ logData.updateDate }}</p>
                    <p class="mb-0 text-muted">[{{ logData.updater }}] 프로젝트 수정</p>
                </div>
            </div>

        </template>
        <template #footer>
            <button type="button" class="btn btn-secondary" @click="closeModal">닫기</button>
        </template>
    </CenterModal>
</template>

<script setup>
import { defineProps, ref } from 'vue';
import UserList from '@c/user/UserList.vue';
import CenterModal from '@c/modal/CenterModal.vue';
import $api from '@api';

// Props 정의
const props = defineProps({
    title: {
        type: String,
        required: true,
    },
    strdate: {
        type: String,
        required: true,
    },
    enddate: {
        type: String,
        required: true,
        default: "",
    },
    description: {
        type: String,
        required: false,
    },
    address: {
        type: String,
        required: true,
    },
    projctSeq: {
        type: Number,
        required: false
    },
    projctCol: {
        type: String,
        required: false
    },
});

defineEmits(['click']);

const isModalOpen = ref(false);
const logData = ref(null);

const fetchLogData = async () => {
    try {
        const response = await $api.get(`project/log/${props.projctSeq}`);
        logData.value = response.data.data.length > 0 ? response.data.data[0] : {};
    } catch (error) {
        console.error('로그 정보 조회 실패:', error);
    }
};

const openModal = async () => {
    await fetchLogData();
    isModalOpen.value = true;
};

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

</script>

