<template>
    <div class="w_100 h_100">
       <div class="zone1 mb40">
            <div class="zone-wrap">
                <div>
                    <img src="../../../resources/img/content/ico_asset.svg" alt="">
                    <span>새로운 디지털 자산 생성</span>
                </div>
                <span><button class="btn-ico sm ico-plus"></button></span>
            </div>
       </div>
       <div class="zone2-wrap" style="height: calc(100% - 115px);">
            <div class="zone2 mb40">
                <div class="sec-title mb10">
                    <p>최신 디지털 자산</p>
                </div>
                <ul class="layout center gap30">
                    <li v-for="item in assets" :key="item.id" class="box-item">
                        <div class="layout center space-between mb10">
                            <div class="box-title" >{{ item.name }}</div>
                            <div class="date" >{{ item.date }}</div>
                        </div>
                        <img :src="item.img" alt="자산 이미지" >
                    </li>
                </ul>
            </div>
            <div class="zone3 layout stetch gap30" style="height: calc(100% - 353px)">
                    <div style="width: 50%;">
                        <div class="sec-title mb10">
                            <p>피드백 알림</p>
                        </div>
                        <ul class="box-item">
                            <li class="alram-item" v-for="item in alarms" :key="item.id">
                                <div  class="layout center gap10">
                                    <img src="../../../resources/img/content/ico_alram.svg" alt="">
                                    <p><span>프로젝트{{ item.project }}</span>에 피드백 <span>{{ item.count }}건</span>이 입력되었습니다.</p>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <div style="width: 50%;">
                        <div class="sec-title mb10">
                            <p>최근 활동 로그</p>
                        </div>
                        <ul class="box-item">
                            <li class="alram-item" v-for="log in activityLogs" :key="log.id">
                                <div  class="layout center gap10">
                                    <img src="../../../resources/img/content/ico_alram.svg" alt="">
                                    <p> {{ log.time }}에 {{ log.project }}가 마지막 수정됨.</p>
                                </div>
                            </li>
                        </ul>
                    </div>
            </div>
       </div>
    </div>
</template>

<script>
import { mapGetters } from 'vuex';
import dayjs from 'dayjs';
import relativeTime from 'dayjs/plugin/relativeTime';
import 'dayjs/locale/ko'; // 한국어 locale 불러오기
import { findAllLogsProc } from '../../../resources/api/main';

export default {
    data() {
        return {
             assets: [
                { id: 1, name: '디지털 자산 A', date: '2024-06-01', img: require('../../../resources/img/content/sample1.png') },
                { id: 2, name: '디지털 자산 B', date: '2024-06-10', img: require('../../../resources/img/content/sample2.png') },
                { id: 3, name: '디지털 자산 C', date: '2024-06-15', img: require('../../../resources/img/content/sample3.png') }
            ],
            alarms: [
                { id: 1, project: 'A', count: 2 },
                { id: 2, project: 'B', count: 1 },
                { id: 3, project: 'C', count: 5 },
                { id: 4, project: 'D', count: 3 },
                { id: 5, project: 'F', count: 7 }
            ],
            activityLogs: [
                // { id: 1, project: '프로젝트A', time: '어제 14:30' },
                // { id: 2, project: '프로젝트B', time: '어제 18:10' },
                // { id: 3, project: '프로젝트C', time: '오늘 09:05' },
                // { id: 4, project: '프로젝트D', time: '오늘 09:05' },
                // { id: 5, project: '프로젝트F', time: '오늘 09:05' }
            ]
        };
    },
    methods: {
        loadLogs() {
            findAllLogsProc({
                memberId: this.getMemId
            })
            .then(response => {
                // 프로젝트 수정 로그
                const editLogList = response.data.result.editLogs;

                this.activityLogs = editLogList.map(log => ({
                    id: log.projectLogId,
                    projectGroupId: log.projectGroupId,
                    project: log.projectName,
                    time: dayjs(log.createdAt).fromNow()
                }))

                // 프로젝트 생성 로그
            })
            .catch(error => {console.error('로그 목록 조회 실패: ', error);})
        }
    },
    watch: {},
    computed: {
    ...mapGetters([
      'getMemId',
      'getMemNm',
      'getMemLoginId'
    ])
    },
    components: {},
    created() {},
    mounted() {
        console.log("사용자 아이디: " + this.getMemId + " 사용자 이름: " + this.getMemNm + " 사용자 로그인 아이디: " + this.getMemLoginId);
        this.loadLogs();
    },
    beforeUnmount() {},
};

</script>