<template>
    <div class="welcome-container">
        <!-- 上部分：欢迎文字 -->
        <div class="welcome-header">
            欢迎来到珞珈岛，{{ userStore.userInfo?.username ? userStore.userInfo.username : '珈人' }}
        </div>

        <!-- 中间部分：月份、日期、星期 -->
        <div class="welcome-body">
            <div class="month-column">
                <span v-for="(char, index) in currentMonthText" :key="index">{{ char }}</span>
            </div>
            <div class="day-row">
                <span>{{ currentDay }}</span>
            </div>
            <div class="weekday-column">
                <span v-for="(char, index) in currentWeekday" :key="index">{{ char }}</span>
            </div>
        </div>

        <!-- 下部分：打卡按钮 -->
        <div class="welcome-footer">
            <button
                class="check-in-button"
                :class="{ checked: isCheckedIn }"
                @click="checkIn"
            >
                {{ isCheckedIn ? '今日已打卡' : '打卡' }}
            </button>
        </div>
    </div>
</template>

<script setup lang="js" name="WelcomeCalendar">
import { ref } from 'vue';
import { useUserStore } from '@/stores/user';   

const today = new Date();

// 当前日期信息
const currentMonthText = ref(['一', '月']); // 默认值
const currentDay = ref(today.getDate()); // 当前日期号
const currentWeekday = ref(['星', '期', '日']); // 当前星期完整文字
const userStore = useUserStore();
// 打卡状态
const isCheckedIn = ref(false);


// 获取当前用户唯一标识
const getUserKey = () => {
  return userStore.userInfo?.userid || userStore.userInfo?.username || 'guest';
};

// 检查今天是否已打卡
const checkToday = () => {
  const todayStr = new Date().toISOString().slice(0, 10);
  const userKey = getUserKey();
  return localStorage.getItem(`checkin-${userKey}-${todayStr}`) === '1';
};

// 打卡功能
const checkIn = () => {
  const todayStr = new Date().toISOString().slice(0, 10);
  const userKey = getUserKey();
  isCheckedIn.value = true;
  localStorage.setItem(`checkin-${userKey}-${todayStr}`, '1');
};

// 初始化日期信息
const initializeDate = () => {
    const months = [
        '一月', '二月', '三月', '四月', '五月', '六月',
        '七月', '八月', '九月', '十月', '十一月', '十二月',
    ];
    const weekdays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];

    currentMonthText.value = months[today.getMonth()].split('');
    currentDay.value = today.getDate();
    currentWeekday.value = weekdays[today.getDay()].split('');
    isCheckedIn.value = checkToday(); 
};

// 初始化
initializeDate();
</script>

<style scoped>
.welcome-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    width: 300px;
    height: 350px;
    margin: 0 auto;
    border: 1px solid #ccc;
    border-radius: 8px;
    overflow: hidden;
    font-family: Arial, sans-serif;
    padding: 20px;
    box-sizing: border-box;
    background: rgba(255, 255, 255, 0.7); /* 半透明白色背景 */
    backdrop-filter: blur(4px);            /* 可选，增加毛玻璃效果 */
}

.welcome-header {
    font-size: 20px;
    font-weight: bold;
    color: #5aa76f;
    text-align: center;
    margin-bottom: 20px;
}

.welcome-body {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-bottom: 20px;
}

.month-column,
.weekday-column {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 16px;
    font-weight: bold;
    color: #333;
    gap: 2px; /* 紧凑排列 */
}

.day-row {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 180px; /* 日期号字体放大 */
    font-weight: bold;
    color: #5aa76f;
    flex: 1; /* 占据中间空间 */
    text-align: center;
}

.welcome-footer {
    width: 100%;
    text-align: center;
}

.check-in-button {
    width: 100px;
    padding: 10px;
    font-size: 16px;
    font-weight: bold;
    color: white;
    background-color: #5aa76f;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.check-in-button.checked {
    background-color: #ccc;
    cursor: not-allowed;
}

.check-in-button:hover:not(.checked) {
    background-color: #4a8a5a;
}
</style>