<template>
  <div class="calendar-container">
    <!-- 头部导航 -->
    <div class="calendar-header">
      <button @click="previousMonth" class="nav-btn">
        <svg viewBox="0 0 24 24" width="16" height="16">
          <path fill="currentColor" d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/>
        </svg>
      </button>
      <h2 class="month-year">{{ currentYear }}年{{ currentMonth + 1 }}月</h2>
      <div class="header-actions">
        <button v-if="!shouldShowFinishCamp()" @click="showCampModal = true" class="camp-btn">
          <svg viewBox="0 0 24 24" width="16" height="16">
            <path fill="currentColor" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
          </svg>
          设置营期
        </button>
        <button v-if="shouldShowFinishCamp()" @click="finishCamp" class="camp-btn finish-camp">
          <svg viewBox="0 0 24 24" width="16" height="16">
            <path fill="currentColor" d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"/>
          </svg>
          结束营期
        </button>
        <button @click="showHistory" class="history-btn">
          <svg viewBox="0 0 24 24" width="16" height="16">
            <path fill="currentColor" d="M13,3A9,9 0 0,0 4,12H1L4.89,15.89L4.96,16.03L9,12H6A7,7 0 0,1 13,5A7,7 0 0,1 20,12A7,7 0 0,1 13,19C11.07,19 9.32,18.21 8.06,16.94L6.64,18.36C8.27,20 10.5,21 13,21A9,9 0 0,0 22,12A9,9 0 0,0 13,3Z"/>
          </svg>
          历史
        </button>
        <button @click="nextMonth" class="nav-btn">
          <svg viewBox="0 0 24 24" width="16" height="16">
            <path fill="currentColor" d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/>
          </svg>
        </button>
      </div>
    </div>

    <!-- 星期标题 -->
    <div class="weekdays">
      <div v-for="day in weekdays" :key="day" class="weekday">
        {{ day }}
      </div>
    </div>

    <!-- 日期网格 -->
    <div class="calendar-grid">
      <div 
        v-for="date in calendarDates" 
        :key="date.key"
        :class="[
          'date-cell',
          {
            'other-month': !date.isCurrentMonth,
            'today': date.isToday,
            'selected': date.isSelected,
            'has-event': date.hasEvent
          }
        ]"
        @click="selectDate(date, $event)"
      >
        <span class="date-number">{{ date.day }}</span>
        <div v-if="date.hasEvent && !isRestDay(date.dateStr)" class="event-dot" :class="getEventTypeClass(date.dateStr)"></div>
        <span v-if="isRestDay(date.dateStr)" class="rest-text">休</span>
      </div>
    </div>

    <!-- 悬浮日期信息 -->
    <div 
      v-if="showTooltip && selectedDate" 
      class="date-tooltip"
      :style="{ left: tooltipPosition.x + 'px', top: tooltipPosition.y + 'px' }"
    >
      <h3>{{ formatSelectedDate }}</h3>
      <div v-if="selectedDateEvents.length > 0" class="events-list">
        <div v-for="event in selectedDateEvents" :key="event.id" class="event-item">
          <span class="event-title">{{ event.title }}</span>
          <span class="event-desc">{{ event.description }}</span>
        </div>
      </div>
      <div v-else class="no-events">
        暂无日程安排
      </div>
    </div>

    <!-- 设置营期弹窗 -->
    <div v-if="showCampModal" class="modal-overlay" @click="showCampModal = false">
      <div class="modal-content" @click.stop>
        <div class="modal-header">
          <h3>设置营期</h3>
          <button @click="showCampModal = false" class="close-btn">
            <svg viewBox="0 0 24 24" width="20" height="20">
              <path fill="currentColor" d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>
            </svg>
          </button>
        </div>
        <div class="modal-body">
          <div class="form-group">
            <label for="campDays">接数据天数：</label>
            <input 
              type="number" 
              id="campDays" 
              v-model="campDays" 
              min="1" 
              max="365" 
              class="form-input"
              placeholder="请输入天数"
            />
          </div>
          <div class="form-group">
            <label for="restDays">休息天数：</label>
            <input 
              type="number" 
              id="restDays" 
              v-model="restDays" 
              min="1" 
              max="365" 
              class="form-input"
              placeholder="请输入休息天数"
            />
          </div>
        </div>
        <div class="modal-footer">
          <button @click="showCampModal = false" class="cancel-btn" :disabled="isSaving">取消</button>
          <button @click="saveCampSettings" class="save-btn" :disabled="isSaving">
            <span v-if="isSaving">保存中...</span>
            <span v-else>保存</span>
          </button>
        </div>
      </div>
    </div>

    <!-- 结束营期确认弹窗 -->
    <div v-if="showFinishConfirmModal" class="modal-overlay">
      <div class="modal-content confirm-modal" @click.stop>
        <div class="modal-header">
          <h3>确认结束营期</h3>
        </div>
        <div class="modal-body">
          <p class="confirm-text">确定要结束当前营期吗？结束后需要立即设置下一营期。</p>
        </div>
        <div class="modal-footer">
          <button @click="cancelFinishCamp" class="cancel-btn">取消</button>
          <button @click="confirmFinishCamp" class="confirm-btn">确认结束</button>
        </div>
      </div>
    </div>

    <!-- 强制设置下一营期弹窗 -->
    <div v-if="showNextCampModal" class="modal-overlay">
      <div class="modal-content force-modal" @click.stop>
        <div class="modal-header">
          <h3>设置下一营期</h3>
          <span class="required-text">*必须完成设置才能结束当前营期</span>
        </div>
        <div class="modal-body">
          <div class="form-group">
            <label for="nextCampStartDate">下一营期开始时间：<span class="required">*</span></label>
            <input 
              type="date" 
              id="nextCampStartDate" 
              v-model="nextCampStartDate" 
              class="form-input"
              required
            />
          </div>
          <div class="form-group">
            <label for="nextCampDataDays">接数据时间（天数）：<span class="required">*</span></label>
            <input 
              type="number" 
              id="nextCampDataDays" 
              v-model="nextCampDataDays" 
              min="1" 
              max="365" 
              class="form-input"
              placeholder="请输入接数据天数"
              required
            />
          </div>
          <div class="form-group">
            <label for="nextCampRestDays">休息时间（天数）：<span class="required">*</span></label>
            <input 
              type="number" 
              id="nextCampRestDays" 
              v-model="nextCampRestDays" 
              min="1" 
              max="365" 
              class="form-input"
              placeholder="请输入休息天数"
              required
            />
          </div>
        </div>
        <div class="modal-footer">
          <button @click="forceNextCampSetting" class="cancel-btn disabled">不能取消</button>
          <button @click="saveNextCampSettings" class="save-btn">完成设置</button>
        </div>
      </div>
    </div>
  </div>

  <!-- 历史营期弹框 -->
  <div v-if="showHistoryModal" class="modal-overlay" @click="showHistoryModal = false">
    <div class="modal-content" @click.stop>
      <div class="modal-header">
        <h3>历史营期记录</h3>
        <button @click="showHistoryModal = false" class="close-btn">
          <svg viewBox="0 0 24 24" width="20" height="20">
            <path fill="currentColor" d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>
          </svg>
        </button>
      </div>
      <div class="modal-body">
        <div v-if="historyPeriods.length === 0" class="no-history">
          <svg viewBox="0 0 24 24" width="48" height="48" class="no-data-icon">
            <path fill="currentColor" d="M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4M12,6A6,6 0 0,0 6,12A6,6 0 0,0 12,18A6,6 0 0,0 18,12A6,6 0 0,0 12,6M12,8A4,4 0 0,1 16,12A4,4 0 0,1 12,16A4,4 0 0,1 8,12A4,4 0 0,1 12,8Z"/>
          </svg>
          <p>暂无历史营期记录</p>
        </div>
        <div v-else class="history-list">
          <div v-for="(period, index) in historyPeriods" :key="index" class="history-item">
            <div class="period-info">
              <div class="period-title">第 {{ index + 1 }} 期营期</div>
              <div class="period-details">
                <div class="detail-row">
                  <span class="label">开始时间：</span>
                  <span class="value">{{ period.startDate }}</span>
                </div>
                <div class="detail-row">
                  <span class="label">结束时间：</span>
                  <span class="value">{{ period.endDate }}</span>
                </div>
                <div class="detail-row">
                  <span class="label">接数据天数：</span>
                  <span class="value">{{ period.dataDays }} 天</span>
                </div>
                <div class="detail-row">
                  <span class="label">休息天数：</span>
                  <span class="value">{{ period.restDays }} 天</span>
                </div>
              </div>
            </div>
            <div class="period-status" :class="period.status">
              {{ period.status === 'completed' ? '已完成' : '进行中' }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { useUserStore } from '@/stores/user';
import {getCampPeriodAdmin} from '@/api/secondTop.js'

// 响应式数据
const currentYear = ref(new Date().getFullYear());
const currentMonth = ref(new Date().getMonth());
const selectedDate = ref(null);
const today = new Date();
const showTooltip = ref(false);
const tooltipPosition = ref({ x: 0, y: 0 });

// 营期设置相关
const showCampModal = ref(false);
const campDays = ref();
const restDays = ref();
const isSaving = ref(false);
const isCampFinished = ref(false);

// 结束营期确认弹框相关
const showFinishConfirmModal = ref(false);
const showNextCampModal = ref(false);
const nextCampStartDate = ref('');
const nextCampDataDays = ref();
const nextCampRestDays = ref();

// 历史营期弹框相关
const showHistoryModal = ref(false);
const historyPeriods = ref([]);

// 获取本地时区的今日日期字符串
const getTodayString = () => {
  const now = new Date();
  const year = now.getFullYear();
  const month = String(now.getMonth() + 1).padStart(2, '0');
  const day = String(now.getDate()).padStart(2, '0');
  return `${year}-${month}-${day}`;
};

const todayString = getTodayString();

// 星期标题
const weekdays = ['日', '一', '二', '三', '四', '五', '六'];

// 示例事件数据
const events = ref([]);

// 计算属性：当前月份的日期数组
const calendarDates = computed(() => {
  const dates = [];
  const firstDay = new Date(currentYear.value, currentMonth.value, 1);
  const lastDay = new Date(currentYear.value, currentMonth.value + 1, 0);
  const startDate = new Date(firstDay);
  
  // 调整到周日开始
  startDate.setDate(startDate.getDate() - startDate.getDay());
  
  // 生成6周的日期
  for (let i = 0; i < 42; i++) {
    const date = new Date(startDate);
    date.setDate(startDate.getDate() + i);
    
    const dateStr = `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
    const isCurrentMonth = date.getMonth() === currentMonth.value;
    const isToday = dateStr === todayString;
    const hasEvent = events.value.some(event => event.date === dateStr);
    
    dates.push({
      key: `${date.getFullYear()}-${date.getMonth()}-${date.getDate()}`,
      date: date,
      day: date.getDate(),
      dateStr: dateStr,
      isCurrentMonth: isCurrentMonth,
      isToday: isToday,
      isSelected: selectedDate.value && selectedDate.value.dateStr === dateStr,
      hasEvent: hasEvent
    });
  }
  
  return dates;
});

// 计算属性：格式化选中日期
const formatSelectedDate = computed(() => {
  if (!selectedDate.value) return '';
  const date = selectedDate.value.date;
  return `${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日`;
});

// 计算属性：选中日期的事件
const selectedDateEvents = computed(() => {
  if (!selectedDate.value) return [];
  return events.value.filter(event => event.date === selectedDate.value.dateStr);
});

// 方法：上一月
const previousMonth = () => {
  if (currentMonth.value === 0) {
    currentMonth.value = 11;
    currentYear.value--;
  } else {
    currentMonth.value--;
  }
};

// 方法：下一月
const nextMonth = () => {
  if (currentMonth.value === 11) {
    currentMonth.value = 0;
    currentYear.value++;
  } else {
    currentMonth.value++;
  }
};

// 方法：选择日期
const selectDate = (date, event) => {
  selectedDate.value = date;
  if (event) {
    tooltipPosition.value = {
      x: event.clientX + 10,
      y: event.clientY - 10
    };
    showTooltip.value = true;
    
    // 3秒后自动隐藏
    setTimeout(() => {
      showTooltip.value = false;
    }, 3000);
  }
};

// 方法：隐藏悬浮框
const hideTooltip = () => {
  showTooltip.value = false;
};

// 方法：显示历史记录
const showHistory = async () => {
  try {
    // 加载历史营期数据
    await loadHistoryPeriods();
    showHistoryModal.value = true;
  } catch (error) {
    console.error('加载历史营期数据失败:', error);
    alert('加载历史营期数据失败，请重试');
  }
};

// 方法：加载历史营期数据
const loadHistoryPeriods = async () => {
  try {
    // 这里可以调用API获取历史营期数据
    // const result = await getHistoryCampPeriods();
    
    // 模拟历史营期数据
    historyPeriods.value = [
      {
        startDate: '2024-01-15',
        endDate: '2024-01-28',
        dataDays: 10,
        restDays: 4,
        status: 'completed'
      },
      {
        startDate: '2024-02-01',
        endDate: '2024-02-14',
        dataDays: 8,
        restDays: 6,
        status: 'completed'
      },
      {
        startDate: '2024-02-20',
        endDate: '2024-03-05',
        dataDays: 12,
        restDays: 2,
        status: 'completed'
      }
    ];
  } catch (error) {
    console.error('加载历史营期数据失败:', error);
    historyPeriods.value = [];
  }
};

// 方法：保存营期设置
const saveCampSettings = async () => {
  // 防抖：如果正在保存中，直接返回
  if (isSaving.value) {
    return;
  }
  
  if (!campDays.value || campDays.value < 1) {
    alert('请输入有效的接数据天数');
    return;
  }
  if (!restDays.value || restDays.value < 1) {
    alert('请输入有效的休息天数');
    return;
  }
  
  isSaving.value = true;
  
  try {
    // 调用API设置营期参数并获取营期安排
    const result = await CenterCampPeriodAdmin({
      receipt_data_time: campDays.value.toString(),
      rest_days: restDays.value.toString()
    });
    
    if (result && result.data) {
      showCampModal.value = false;
      // 重置表单数据
      campDays.value = null;
      restDays.value = null;
      alert('营期设置成功！');
    } 
  } catch (error) {
    console.error('保存营期设置失败:', error);
    alert('保存营期设置失败，请重试');
  } finally {
    isSaving.value = false;
  }
};



// 辅助方法：格式化日期为字符串
const formatDateToString = (date) => {
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  return `${year}-${month}-${day}`;
};

// 方法：获取事件类型样式类
const getEventTypeClass = (dateStr) => {
  const dayEvents = events.value.filter(event => event.date === dateStr && event.isCampEvent);
  if (dayEvents.length === 0) return '';
  
  const eventType = dayEvents[0].type;
  switch (eventType) {
    case 'data':
      return 'event-data';
    case 'course':
      return 'event-course';
    case 'rest':
      return 'event-rest';
    default:
      return '';
  }
};

// 方法：判断是否为休息日
const isRestDay = (dateStr) => {
  const dayEvents = events.value.filter(event => event.date === dateStr && event.isCampEvent && event.type === 'rest');
  return dayEvents.length > 0;
};

// 方法：检查营期是否应该结束
const shouldShowFinishCamp = () => {
  if (isCampFinished.value) return false;
  
  // 检查是否有营期相关的事件
  const campEvents = events.value.filter(event => event.isCampEvent);
  if (campEvents.length === 0) return false;
  
  // 获取所有休息日事件
  const restEvents = events.value.filter(event => event.isCampEvent && event.type === 'rest');
  if (restEvents.length === 0) return false;
  
  // 获取当前日期
  const today = new Date();
  today.setHours(0, 0, 0, 0);
  
  // 检查是否所有休息日都已经过完
  const allRestDaysPassed = restEvents.every(restEvent => {
    const restDate = new Date(restEvent.date);
    restDate.setHours(0, 0, 0, 0);
    return today > restDate; // 当前日期要大于休息日（即休息日已经过完）
  });
  
  return allRestDaysPassed;
};

// 方法：结束营期
const finishCamp = async () => {
  // 显示确认弹框
  showFinishConfirmModal.value = true;
};

// 确认结束营期并进入下一营期设置
const confirmFinishCamp = () => {
  showFinishConfirmModal.value = false;
  showNextCampModal.value = true;
};

// 取消结束营期
const cancelFinishCamp = () => {
  showFinishConfirmModal.value = false;
};

// 保存下一营期设置并结束当前营期
const saveNextCampSettings = async () => {
  if (!nextCampStartDate.value || !nextCampDataDays.value || !nextCampRestDays.value) {
    alert('请填写完整的下一营期信息');
    return;
  }
  
  try {
    // 先结束当前营期
    isCampFinished.value = true;
    await CenterCampPeriodAdmin({
      is_camp_finish: "11"
    });
    
    // 设置下一营期
    await CenterCampPeriodAdmin({
      receipt_data_start_time: nextCampStartDate.value,
      receipt_data_time: nextCampDataDays.value.toString(),
      rest_days: nextCampRestDays.value.toString()
    });
    
    // 关闭弹框并重置数据
    showNextCampModal.value = false;
    nextCampStartDate.value = '';
    nextCampDataDays.value = null;
    nextCampRestDays.value = null;
    
    alert('营期设置成功！');
  } catch (error) {
    console.error('营期设置失败:', error);
    isCampFinished.value = false;
    alert('营期设置失败，请重试');
  }
};

// 强制要求设置下一营期（不允许取消）
const forceNextCampSetting = () => {
  alert('必须设置下一营期才能结束当前营期');
};

// 路由实例
const router = useRouter();

// 用户store实例
const userStore = useUserStore();

// 获取通用请求参数的函数
const getRequestParams = () => {
  const params = {}
  // 优先从路由参数获取
  const routeUserLevel = router.currentRoute.value.query.user_level || router.currentRoute.value.params.user_level
  const routeUserName = router.currentRoute.value.query.user_name || router.currentRoute.value.params.user_name
  
  if (routeUserLevel && routeUserName) {
    params.user_level = routeUserLevel.toString()
    params.user_name = routeUserName
  } else if (userStore.userInfo && userStore.userInfo.username) {
    // 如果路由没有参数，从用户store获取
    params.user_name = userStore.userInfo.username
    if (userStore.userInfo.user_level) {
      params.user_level = userStore.userInfo.user_level.toString()
    }
  }

  return params
}

// 判断是否为路由导航（有路由参数）
const isRouteNavigation = computed(() => {
  const routeUserName = router.currentRoute.value.query.user_name || router.currentRoute.value.params.user_name
  return !!routeUserName
})
// 获取和设置当前营期阶段 getCampPeriodAdmin
async function CenterCampPeriodAdmin(data = {}) {
  const params = getRequestParams()
  const hasParams = params.user_name
  
  // 根据传入的参数决定传递哪些数据
  let Finsh = {}
  if (data.is_camp_finish !== undefined) {
    // 结束营期时，只传递is_camp_finish参数
    Finsh.is_camp_finish = data.is_camp_finish
  } else if (data.receipt_data_start_time && data.receipt_data_time) {
    // 设置营期时，传递开始时间和天数参数
    Finsh.receipt_data_start_time = data.receipt_data_start_time
    Finsh.receipt_data_time = data.receipt_data_time
    if (data.rest_days) {
      Finsh.rest_days = data.rest_days
    }
  } else {
    // 兼容原有逻辑，使用全局变量
    if (isCampFinished.value) {
      Finsh.is_camp_finish = isCampFinished.value
    } else if (campDays.value) {
      // 只有在有营期设置数据时才传递参数
      Finsh.receipt_data_time = campDays.value.toString()
      if (restDays.value) {
        Finsh.rest_days = restDays.value.toString()
      }
    }
    // 如果没有营期设置数据，Finsh 保持为空对象，用于获取现有数据
  }
  console.log('Finsh', Finsh)
  console.log('params', params)
  
  // 确保总是传递用户参数，即使是获取数据时
  const finalParams = hasParams ? {...params, ...Finsh} : (Object.keys(Finsh).length > 0 ? Finsh : {})
  const res = await getCampPeriodAdmin(finalParams)
  
  // 如果获取到营期数据，映射到日历中
  if (res && res.data && res.data.camp_period) {
    mapCampPeriodToCalendar(res.data.camp_period);
  }
  
  return res
}

// 方法：将营期时间安排映射到日历
const mapCampPeriodToCalendar = (campPeriod) => {
  // 清除之前的营期相关事件
  events.value = events.value.filter(event => !event.isCampEvent);
  
  let eventId = events.value.length + 1;
  
  // 解析接数据时间
  if (campPeriod.receipt_data_time) {
    const dataPeriod = parseDateRange(campPeriod.receipt_data_time);
    for (let date = new Date(dataPeriod.start); date <= dataPeriod.end; date.setDate(date.getDate() + 1)) {
      const dateStr = formatDateToString(new Date(date));
      events.value.push({
        id: eventId++,
        date: dateStr,
        title: '接数据',
        description: '营期数据接收阶段',
        isCampEvent: true,
        type: 'data'
      });
    }
  }
  
  // 解析课程时间
  const courses = [
    { key: 'class_one', title: '课1' },
    { key: 'class_two', title: '课2' },
    { key: 'class_three', title: '课3' },
    { key: 'class_four', title: '课4' }
  ];
  
  let lastCourseEndDate = null;
  
  courses.forEach(course => {
    if (campPeriod[course.key]) {
      const coursePeriod = parseDateRange(campPeriod[course.key]);
      const dateStr = formatDateToString(coursePeriod.start);
      events.value.push({
        id: eventId++,
        date: dateStr,
        title: course.title,
        description: `营期${course.title}阶段`,
        isCampEvent: true,
        type: 'course'
      });
      
      // 记录最后一个课程的结束日期
      if (course.key === 'class_four') {
        lastCourseEndDate = coursePeriod.end;
      }
    }
  });
  
  // 在课4之后添加休息日
  if (lastCourseEndDate) {
    const restDate = new Date(lastCourseEndDate);
    restDate.setDate(restDate.getDate() + 1);
    const restDateStr = formatDateToString(restDate);
    
    events.value.push({
      id: eventId++,
      date: restDateStr,
      title: '休息',
      description: '营期休息日',
      isCampEvent: true,
      type: 'rest'
    });
  }
};

// 辅助方法：解析日期范围字符串
const parseDateRange = (dateRangeStr) => {
  // 解析格式: "2025-08-15 00:00:00 to 2025-08-16 23:59:59"
  const [startStr, endStr] = dateRangeStr.split(' to ');
  return {
    start: new Date(startStr.split(' ')[0]),
    end: new Date(endStr.split(' ')[0])
  };
};




// 组件挂载时选中今天并获取营期数据
onMounted(async () => {
  const todayDate = calendarDates.value.find(date => date.isToday);
  if (todayDate) {
    selectedDate.value = todayDate;
  }
  
  // 获取现有的营期数据
  try {
    const result = await CenterCampPeriodAdmin();
    
    // 如果没有获取到营期数据，添加一些测试数据以便测试结束营期功能
    if (!result || !result.data || !result.data.camp_period) {
      // 添加一些测试营期事件
      events.value.push({
        id: 999,
        date: formatDateToString(new Date()),
        title: '测试营期',
        description: '测试营期数据',
        isCampEvent: true,
        type: 'data'
      });
    }
  } catch (error) {
    console.error('获取营期数据失败:', error);
    // 即使API失败，也添加测试数据
    events.value.push({
      id: 999,
      date: formatDateToString(new Date()),
      title: '测试营期',
      description: '测试营期数据',
      isCampEvent: true,
      type: 'data'
    });
  }
});
</script>

<style scoped>
.calendar-container {
  max-width: 100%;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
}

.calendar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 24px;
  background: linear-gradient(135deg, #4a90e2 0%, #357abd 100%);
  color: white;
}

.month-year {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.nav-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.2);
  color: white;
  cursor: pointer;
  transition: all 0.2s ease;
}

.nav-btn:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: scale(1.05);
}

.weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background: #f8f9fa;
  border-bottom: 1px solid #e9ecef;
}

.weekday {
  padding: 12px 8px;
  text-align: center;
  font-weight: 600;
  font-size: 14px;
  color: #6c757d;
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0;
  background: transparent;
}

.date-cell {
  position: relative;
  min-height: 44px;
  background: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  border: 2px solid transparent;
}

.date-cell:hover {
  background: #f8f9fa;
}

.date-cell.other-month {
  color: #adb5bd;
  background: #f8f9fa;
}

.date-cell.today {
  background: #e3f2fd;
}

.date-cell.today .date-number {
  background: #2196f3;
  color: white;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
}

.date-cell.selected {
  border-color: #667eea;
  background: #f0f4ff;
}

.date-number {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 2px;
}

.event-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ff6b6b;
  position: absolute;
  bottom: 8px;
}

.date-cell.has-event .event-dot {
  background: #4ecdc4;
}

.date-tooltip {
  position: fixed;
  z-index: 1000;
  background: white;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  padding: 16px;
  max-width: 280px;
  min-width: 200px;
  border: 1px solid #e9ecef;
  pointer-events: none;
}

.date-tooltip h3 {
  margin: 0 0 12px 0;
  font-size: 14px;
  font-weight: 600;
  color: #495057;
  border-bottom: 1px solid #e9ecef;
  padding-bottom: 8px;
}

.events-list {
  space-y: 8px;
}

.event-item {
  display: flex;
  flex-direction: column;
  padding: 12px;
  background: white;
  border-radius: 8px;
  margin-bottom: 8px;
}

.event-title {
  font-weight: 600;
  color: #495057;
  margin-bottom: 4px;
}

.event-desc {
  font-size: 14px;
  color: #6c757d;
}

.no-events {
  color: #adb5bd;
  font-style: italic;
  text-align: center;
  padding: 20px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .calendar-header {
    padding: 16px 20px;
  }
  
  .month-year {
    font-size: 16px;
  }
  
  .nav-btn {
    width: 32px;
    height: 32px;
  }
  
  .date-cell {
    min-height: 50px;
  }
  
  .weekday {
    padding: 10px 6px;
    font-size: 12px;
  }
  
  .date-tooltip {
    max-width: 250px;
    min-width: 180px;
    padding: 12px;
  }
  
  .date-tooltip h3 {
    font-size: 13px;
  }
}

/* 头部操作区域 */
.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* 设置营期按钮 */
.camp-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: linear-gradient(135deg, #28a745, #20c997);
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.camp-btn:hover {
  background: linear-gradient(135deg, #218838, #1ea085);
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(40, 167, 69, 0.3);
}

/* 历史按钮 */
.history-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: linear-gradient(135deg, #17a2b8, #138496);
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.history-btn:hover {
  background: linear-gradient(135deg, #138496, #117a8b);
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(23, 162, 184, 0.3);
}

/* 弹窗样式 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-content {
  background: white;
  border-radius: 12px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
  width: 90%;
  max-width: 480px;
  max-height: 90vh;
  overflow: hidden;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid #e9ecef;
  background: linear-gradient(135deg, #f8f9fa, #e9ecef);
}

.modal-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #495057;
}

.close-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  color: #6c757d;
  transition: all 0.2s ease;
}

.close-btn:hover {
  background: #f8f9fa;
  color: #495057;
}

.modal-body {
  padding: 24px;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
  color: #495057;
  font-size: 14px;
}

.form-input {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid #e9ecef;
  border-radius: 8px;
  font-size: 14px;
  transition: all 0.2s ease;
  box-sizing: border-box;
}

.form-input:focus {
  outline: none;
  border-color: #4a90e2;
  box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.1);
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 20px 24px;
  border-top: 1px solid #e9ecef;
  background: #f8f9fa;
}

.cancel-btn, .save-btn {
  padding: 10px 20px;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.cancel-btn {
  background: #6c757d;
  color: white;
}

.cancel-btn:hover {
  background: #5a6268;
}

.save-btn {
  background: linear-gradient(135deg, #4a90e2, #357abd);
  color: white;
}

.save-btn:hover {
  background: linear-gradient(135deg, #357abd, #2968a3);
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(74, 144, 226, 0.3);
}

.finish-camp {
  background: linear-gradient(135deg, #e74c3c, #c0392b);
  color: white;
}

.finish-camp:hover {
  background: linear-gradient(135deg, #c0392b, #a93226);
  transform: translateY(-1px);
}

/* 营期事件类型样式 */
.event-dot.event-data {
  background: linear-gradient(135deg, #9c27b0, #7b1fa2);
  box-shadow: 0 2px 4px rgba(156, 39, 176, 0.3);
}

.event-dot.event-course {
  background: linear-gradient(135deg, #fd7e14, #e55a00);
  box-shadow: 0 2px 4px rgba(253, 126, 20, 0.3);
}

.event-dot.event-rest {
  background: linear-gradient(135deg, #28a745, #1e7e34);
  box-shadow: 0 2px 4px rgba(40, 167, 69, 0.3);
}

/* 休息日文字样式 */
.rest-text {
  position: absolute;
  bottom: 2px;
  right: 2px;
  font-size: 10px;
  font-weight: bold;
  color: #28a745;
  background: rgba(40, 167, 69, 0.1);
  border-radius: 2px;
  padding: 1px 3px;
  line-height: 1;
}

/* 确认弹框样式 */
.confirm-modal {
  max-width: 420px;
}

.confirm-text {
  font-size: 16px;
  color: #495057;
  text-align: center;
  margin: 0;
  line-height: 1.5;
}

.confirm-btn {
  padding: 10px 20px;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  background: linear-gradient(135deg, #e74c3c, #c0392b);
  color: white;
}

.confirm-btn:hover {
  background: linear-gradient(135deg, #c0392b, #a93226);
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(231, 76, 60, 0.3);
}

/* 强制设置弹框样式 */
.force-modal {
  max-width: 500px;
}

.force-modal .modal-header {
  background: linear-gradient(135deg, #ff6b6b, #ee5a52);
  color: white;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.force-modal .modal-header h3 {
  color: white;
  margin: 0;
}

.required-text {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.9);
  font-weight: 400;
  background: rgba(255, 255, 255, 0.2);
  padding: 4px 8px;
  border-radius: 4px;
}

.required {
  color: #e74c3c;
  margin-left: 2px;
}

.cancel-btn.disabled {
  background: #adb5bd;
  color: #6c757d;
  cursor: not-allowed;
  opacity: 0.6;
}

.cancel-btn.disabled:hover {
  background: #adb5bd;
  transform: none;
  box-shadow: none;
}

/* 表单验证样式 */
.form-input:invalid {
  border-color: #e74c3c;
}

.form-input:invalid:focus {
  border-color: #e74c3c;
  box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.1);
}

/* 强制弹框的保存按钮 */
.force-modal .save-btn {
  background: linear-gradient(135deg, #28a745, #20c997);
}

.force-modal .save-btn:hover {
  background: linear-gradient(135deg, #218838, #1ea085);
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(40, 167, 69, 0.3);
}

/* 历史营期弹框样式 */
.no-history {
  text-align: center;
  padding: 40px 20px;
  color: #6c757d;
}

.no-data-icon {
  margin-bottom: 16px;
  opacity: 0.5;
}

.no-history p {
  margin: 0;
  font-size: 16px;
}

.history-list {
  max-height: 400px;
  overflow-y: auto;
}

.history-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 20px;
  border: 1px solid #e9ecef;
  border-radius: 8px;
  margin-bottom: 12px;
  background: #f8f9fa;
  transition: all 0.2s ease;
}

.history-item:hover {
  background: #e9ecef;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.history-item:last-child {
  margin-bottom: 0;
}

.period-info {
  flex: 1;
}

.period-title {
  font-size: 16px;
  font-weight: 600;
  color: #495057;
  margin-bottom: 12px;
}

.period-details {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.detail-row {
  display: flex;
  align-items: center;
  font-size: 14px;
}

.detail-row .label {
  color: #6c757d;
  min-width: 100px;
  font-weight: 500;
}

.detail-row .value {
  color: #495057;
  font-weight: 600;
}

.period-status {
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  min-width: 60px;
}

.period-status.completed {
  background: linear-gradient(135deg, #28a745, #20c997);
  color: white;
}

.period-status.active {
  background: linear-gradient(135deg, #ffc107, #fd7e14);
  color: white;
}
</style>