<template>
  <view class="event-detail-page">
    <!-- 自定义导航栏 -->
    <view class="custom-navbar">
      <view class="navbar-content">
        <text class="nav-btn" @click="handleBack">返回</text>
        <text class="nav-title">日程详情</text>
        <text class="nav-btn" style="opacity: 0;">占位</text>
      </view>
    </view>

    <!-- 内容区域 -->
    <scroll-view class="content-scroll" scroll-y>
      <!-- 标题显示 -->
      <view class="form-item">
        <text class="title-text">{{ eventData.title || '无标题' }}</text>
      </view>

      <!-- 时间日期显示 -->
      <view class="form-item time-section">
        <view class="time-item">
          <view class="time-icon">🕐</view>
          <view class="time-content">
            <text class="time-value">{{ startTime }}</text>
            <text class="time-date">{{ startDateText }}</text>
          </view>
        </view>
        <text class="time-separator">----</text>
        <view class="time-item">
          <view class="time-icon">🕐</view>
          <view class="time-content">
            <text class="time-value">{{ endTime }}</text>
            <text class="time-date">{{ endDateText }}</text>
          </view>
        </view>
      </view>

      <!-- 全天显示 -->
      <view class="form-item">
        <text class="label">全天</text>
        <text class="value-text">{{ eventData.allDay ? '是' : '否' }}</text>
      </view>

      <!-- 重复显示 -->
      <view class="form-item">
        <text class="label">重复</text>
        <text class="value-text">{{ repeatText }}</text>
      </view>

      <!-- 描述显示 -->
      <view class="form-item" v-if="eventData.description">
        <view class="desc-icon">📄</view>
        <view class="desc-content">
          <text class="desc-text">{{ eventData.description }}</text>
        </view>
      </view>
      <view class="form-item" v-else>
        <view class="desc-icon">📄</view>
        <view class="desc-content">
          <text class="desc-placeholder">无描述</text>
        </view>
      </view>

      <!-- 日程颜色显示 -->
      <view class="form-item">
        <view class="color-dot" :style="{ backgroundColor: eventData.color || '#B3D9FF' }"></view>
        <text class="label">日程颜色</text>
      </view>

      <!-- 提醒设置显示 -->
      <view class="form-item">
        <view class="reminder-icon">🔔</view>
        <text class="reminder-text">{{ reminderText }}</text>
      </view>
    </scroll-view>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue';
import { onLoad } from '@dcloudio/uni-app';

// 事件数据
const eventData = ref({
  title: '',
  date: '',
  startDate: '',
  startHour: 0,
  startMin: 0,
  endDate: '',
  endHour: 0,
  endMin: 0,
  allDay: false,
  repeat: 'none',
  description: '',
  color: '#B3D9FF',
  reminders: []
});

// 格式化时间
const formatTime = (hour, min) => {
  const h = String(hour).padStart(2, '0');
  const m = String(min || 0).padStart(2, '0');
  return `${h}:${m}`;
};

// 格式化日期文本
const formatDateText = (dateStr) => {
  if (!dateStr) return '';
  const date = new Date(dateStr);
  const month = date.getMonth() + 1;
  const day = date.getDate();
  const weekdays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
  const weekday = weekdays[date.getDay()];
  return `${month}月${day}日 ${weekday}`;
};

// 计算属性
const startTime = computed(() => {
  return eventData.value.allDay ? '全天' : formatTime(eventData.value.startHour, eventData.value.startMin);
});

const endTime = computed(() => {
  if (eventData.value.allDay) {
    return '';
  }
  // 如果没有结束时间，使用开始时间+1小时
  if (eventData.value.endHour === undefined && eventData.value.endMin === undefined) {
    const startTotalMin = eventData.value.startHour * 60 + (eventData.value.startMin || 0);
    const endTotalMin = startTotalMin + 60;
    const endHour = Math.floor(endTotalMin / 60) % 24;
    const endMin = endTotalMin % 60;
    return formatTime(endHour, endMin);
  }
  return formatTime(eventData.value.endHour || eventData.value.startHour, eventData.value.endMin || eventData.value.startMin);
});

const startDateText = computed(() => {
  const date = eventData.value.startDate || eventData.value.date;
  return formatDateText(date);
});

const endDateText = computed(() => {
  const date = eventData.value.endDate || eventData.value.startDate || eventData.value.date;
  return formatDateText(date);
});

// 格式化提醒时间文本
const formatReminderTime = (reminder) => {
  if (reminder.type === 'custom') {
    return reminder.customText || '自定义时间';
  }
  
  const options = [
    { label: '开始时', value: 0 },
    { label: '开始前5分钟', value: 5 },
    { label: '开始前15分钟', value: 15 },
    { label: '开始前30分钟', value: 30 },
    { label: '开始前1小时', value: 60 },
    { label: '开始前2小时', value: 120 },
    { label: '开始前1天', value: 1440 },
    { label: '开始前2天', value: 2880 },
    { label: '开始前3天', value: 4320 }
  ];
  
  const option = options.find(opt => opt.value === reminder.minutes);
  return option ? option.label : `开始前${reminder.minutes}分钟`;
};

const reminderText = computed(() => {
  if (!eventData.value.reminders || eventData.value.reminders.length === 0) {
    return '不提醒';
  }
  if (eventData.value.reminders.length === 1) {
    const reminder = eventData.value.reminders[0];
    const timeText = formatReminderTime(reminder);
    return `${timeText},应用弹窗提醒我`;
  }
  return `${eventData.value.reminders.length}个提醒,应用弹窗提醒我`;
});

// 重复选项
const repeatOptions = [
  { label: '不重复', value: 'none' },
  { label: '每天', value: 'daily' },
  { label: '每周', value: 'weekly' },
  { label: '每月', value: 'monthly' },
  { label: '每年', value: 'yearly' }
];

const repeatText = computed(() => {
  const option = repeatOptions.find(opt => opt.value === eventData.value.repeat);
  return option ? option.label : '不重复';
});

// 返回
const handleBack = () => {
  uni.navigateBack();
};

// 页面加载时接收参数
onLoad((options) => {
  // 从存储中获取事件数据
  const storedEvent = uni.getStorageSync('eventDetailData');
  if (storedEvent) {
    // 处理事件数据，确保所有字段都有默认值
    eventData.value = {
      title: storedEvent.title || '',
      date: storedEvent.date || storedEvent.startDate || '',
      startDate: storedEvent.startDate || storedEvent.date || '',
      startHour: storedEvent.startHour !== undefined ? storedEvent.startHour : 0,
      startMin: storedEvent.startMin !== undefined ? storedEvent.startMin : 0,
      endDate: storedEvent.endDate || storedEvent.startDate || storedEvent.date || '',
      endHour: storedEvent.endHour !== undefined ? storedEvent.endHour : (storedEvent.startHour !== undefined ? storedEvent.startHour + 1 : 0),
      endMin: storedEvent.endMin !== undefined ? storedEvent.endMin : (storedEvent.startMin !== undefined ? storedEvent.startMin : 0),
      allDay: storedEvent.allDay || false,
      repeat: storedEvent.repeat || 'none',
      description: storedEvent.description || '',
      color: storedEvent.color || '#B3D9FF',
      reminders: storedEvent.reminders || []
    };
    // 清除存储
    uni.removeStorageSync('eventDetailData');
  } else {
    // 如果没有数据，返回上一页
    uni.showToast({
      title: '未找到日程信息',
      icon: 'none'
    });
    setTimeout(() => {
      uni.navigateBack();
    }, 1500);
  }
});
</script>

<style lang="scss" scoped>
.event-detail-page {
  min-height: 100vh;
  background: #fff;
}

.custom-navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: #fff;
  border-bottom: 1px solid #e5e5e5;
  padding-top: var(--status-bar-height, 0);
}

.navbar-content {
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
}

.nav-btn {
  font-size: 16px;
  color: #333;
  padding: 8px;
}

.nav-title {
  font-size: 17px;
  font-weight: 600;
  color: #333;
}

.content-scroll {
  margin-top: calc(var(--status-bar-height, 0) + 45px);
  height: calc(100vh - var(--status-bar-height, 0) - 45px);
}

.form-item {
  padding: 16px;
  border-bottom: 1px solid #f5f5f5;
  display: flex;
  align-items: center;
}

.title-text {
  font-size: 18px;
  font-weight: 500;
  color: #333;
  width: 100%;
}

.time-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 16px;
}

.time-item {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 12px;
}

.time-icon {
  font-size: 20px;
}

.time-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.time-value {
  font-size: 24px;
  font-weight: 600;
  color: #333;
}

.time-date {
  font-size: 12px;
  color: #999;
}

.time-separator {
  margin: 0 16px;
  font-size: 20px;
  color: #ccc;
}

.label {
  font-size: 16px;
  color: #333;
  flex: 1;
}

.value-text {
  font-size: 16px;
  color: #666;
}

.desc-icon {
  font-size: 20px;
  margin-right: 12px;
}

.desc-content {
  flex: 1;
}

.desc-text {
  font-size: 16px;
  color: #333;
  line-height: 1.5;
}

.desc-placeholder {
  font-size: 16px;
  color: #999;
}

.color-dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  margin-right: 12px;
}

.reminder-icon {
  font-size: 20px;
  margin-right: 12px;
}

.reminder-text {
  flex: 1;
  font-size: 16px;
  color: #333;
}
</style>

