<template>
    <div class="sidemenu">
        <div class="myinfo">
            <div class="name-box">
                <div class="img-area">
                    <div><img :src="photoicon" alt="">
                        <p class="name">OOO과장</p>
                    </div>
                    <div class="info">
                        <p>솔루션 개발팀</p>
                        <i class="fa-bars"></i>
                        <p>팀장</p>
                    </div>
                </div>
            </div>
            <ul class="info-box">
                <li>
                    <p>5</p>
                    <div class="name yellow">신청</div>
                </li>
                <li>
                    <p>5</p>
                    <div class="name ">신청</div>
                </li>
                <li>
                    <p>5</p>
                    <div class="name blue">신청</div>
                </li>
                <li>
                    <p>5</p>
                    <div class="name red">신청</div>
                </li>
            </ul>
        </div>
        <div class="boxs">
            <div class="box">
                <div class="img-area"><img :src="img1" alt=""></div>
                <div class="sm-box">
                    <h3>연차 잔여일수</h3>
                    <p>11.5</p>
                </div>
            </div>
            <div class="bd-box">
                <div>전체 <span>15</span></div>
                <i class="fa-bars"></i>
                <div>사용 <span>3.5</span></div>
            </div>
        </div>
        <div class="boxs">
            <h4><img :src="icon1" alt="">01월 근태현황</h4>
            <div class="color-boxs">
                <div class="box red">
                    <h3>지각</h3>
                    3
                </div>
                <div class="box">
                    <h3>조기퇴근</h3>
                    3
                </div>
                <div class="box green">
                    <h3>결근</h3>
                    3
                </div>
            </div>
        </div>
    </div>
    <div class="content">
        <div class="top-content">
            <div class="boxs">

                <div class="title">
                    <h2>근무체크 <span>출근전</span></h2>
                    <div class="sub"><img :src="dateicon" alt="">{{ today }}</div>
                </div>
                <div class="blue-box">
                    <div class="box">
                        <p class="time">{{ time }}</p>
                    </div>
                    <div class="buttons">
                        <button><img :src="startbtn" alt=""></button>
                        <i class="fa-bars"></i>
                        <button><img :src="stopbtn" alt=""></button>
                    </div>
                </div>

            </div>
            <div class="boxs">
                <div class="title">
                    <h2>오늘의 주요 </h2>
                    <div class="sub">더보기<img :src="moreicon" alt=""></div>
                </div>
                <div class="board tbl-wrap">
                    <table class="tbl data">
                        <tbody>
                            <tr v-for="(item, index) in requestList" :key="index" >
                                <td :class="getCategoryClass(item.category)">
                                    <p>{{ item.category }}</p>
                                </td>
                                <td>{{ item.name }}</td>
                                <td>{{ item.startdate }} ~ {{ item.enddate }}</td>
                                <td class="status" :class="getStatusClass(item.status)">
                                    <p>{{ item.status }}</p>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <GoogleCalendar />
    </div>
</template>

<script>
import GoogleCalendar from "../../component/GoogleCalendar.vue"

export default {
    data() {
        return {
            photoicon: "/client/resources/img/photo_icon.png",
            img1: "/client/resources/img/img.png",
            icon1: "/client/resources/img/icon.png",
            dateicon: "/client/resources/img/date.png",
            startbtn: "/client/resources/img/start.png",
            stopbtn: "/client/resources/img/stop.png",
            moreicon: "/client/resources/img/more.png",
            today: new Date().toLocaleDateString('ko-KR', {
                year: 'numeric',
                month: '2-digit',
                day: '2-digit',
                weekday: 'short',
            }),
            time: this.getCurrentTime(),
            requestList: [
                { category: '용역', name: '프로젝트1', startdate: '2025-04-30', enddate: '2025-04-30', status: '진행중' },
                { category: '내부', name: '프로젝트2', startdate: '2025-05-01', enddate: '2025-04-30', status: '진행전' },
                { category: '국가과제', name: '프로젝트2', startdate: '2025-05-01', enddate: '2025-04-30', status: '완료' }
            ]
        }
    },
    methods: {
        getCurrentTime() {
            const now = new Date();
            const hours = String(now.getHours()).padStart(2, '0');
            const minutes = String(now.getMinutes()).padStart(2, '0');
            const seconds = String(now.getSeconds()).padStart(2, '0');
            return `${hours}:${minutes}:${seconds}`;
        },
        getCategoryClass(category) {
        switch (category) {
            case '용역': return 'category-service';
            case '내부': return 'category-internal';
            case '국가과제': return 'category-government';
            default: return '';
        }
    },
    getStatusClass(status) {
        switch (status) {
            case '진행중': return 'status-in-progress';
            case '진행전': return 'status-not-started';
            case '완료': return 'status-complete';
            default: return '';
        }
    }
    },
    watch: {

    },
    computed: {

    },
    components: {
        GoogleCalendar,
    },
    mounted() {
        console.log('main mounted');
        setInterval(() => {
            this.time = this.getCurrentTime();
        }, 1000);
    }
}
</script>