<template>
  <view class="calendar-examples">
    <view class="example-section">
      <text class="section-title">基础用法</text>
      <uni-calendar />
    </view>

    <view class="example-section">
      <text class="section-title">周日在前</text>
      <uni-calendar :sunday-first="true" />
    </view>

    <view class="example-section">
      <text class="section-title">按周显示（第2周）- 其他周置灰</text>
      <uni-calendar 
        ref="weekCalendar"
        display-mode="week" 
        :week-number="currentWeek" 
        @change-week="onWeekChange" />
      <view class="week-controls">
        <button @click="preWeek" class="week-btn">上一周</button>
        <text class="week-info">第{{ currentWeek }}周 / 共{{ totalWeeks }}周</text>
        <button @click="nextWeek" class="week-btn">下一周</button>
      </view>
    </view>

    <view class="example-section">
      <text class="section-title">不高亮今天</text>
      <uni-calendar :highlight-today="false" />
    </view>

    <view class="example-section">
      <text class="section-title">隐藏工具栏</text>
      <uni-calendar :show-toolbar="false" />
    </view>

    <view class="example-section">
      <text class="section-title">自定义日期样式</text>
      <uni-calendar>
        <template #calendar-item="{ weeks, calendar, selected, lunar, highlightToday, weekIndex, weeksIndex }">
          <view class="custom-date" :class="{
            'custom-today': weeks.isDay,
            'custom-selected': calendar.fullDate === weeks.fullDate,
            'custom-disabled': weeks.disable
          }">
            <text class="date-number">{{ weeks.date }}</text>
            <view v-if="weeks.extraInfo" class="custom-indicator"></view>
          </view>
        </template>
      </uni-calendar>
    </view>

    <view class="example-section">
      <text class="section-title">增强插槽 - 自定义整个日期项</text>
      <uni-calendar>
        <template #calendar-item="{ weeks, calendar, selected, lunar, highlightToday, weekIndex, weeksIndex }">
          <view class="enhanced-calendar-item" :class="{
            'enhanced-today': weeks.isDay,
            'enhanced-selected': calendar.fullDate === weeks.fullDate,
            'enhanced-disabled': weeks.disable,
            'enhanced-week-disabled': weeks.isWeekModeDisabled,
            'enhanced-not-current-month': !weeks.isCurrentMonth
          }">
            <view class="date-content">
              <text class="date-number">{{ weeks.date }}</text>
              <text class="date-lunar" v-if="lunar && weeks.lunar">{{ weeks.lunar }}</text>
            </view>
            <view class="date-indicators">
              <view v-if="weeks.extraInfo" class="indicator-dot"></view>
              <view v-if="weeks.isDay" class="today-badge">今</view>
              <view v-if="!weeks.isCurrentMonth" class="month-badge">非本月</view>
            </view>
          </view>
        </template>
      </uni-calendar>
    </view>

    <view class="example-section">
      <text class="section-title">组合使用</text>
      <uni-calendar
        :sunday-first="true"
        display-mode="week"
        :week-number="1"
        :highlight-today="false"
        :show-toolbar="false"
      >
        <template #calendar-item="{ weeks, calendar, selected, lunar, highlightToday, weekIndex, weeksIndex }">
          <view class="minimal-date">
            <text>{{ weeks.date }}</text>
          </view>
        </template>
      </uni-calendar>
    </view>

    <view class="example-section">
      <text class="section-title">日期范围API示例</text>
      <view class="api-demo">
        <button @click="getMonthRange" class="api-btn">获取本月范围</button>
        <button @click="getWeekRange" class="api-btn">获取当前周范围</button>
        <view v-if="monthRange" class="api-result">
          <text class="api-title">本月范围：</text>
          <text>{{ monthRange.startDate }} 至 {{ monthRange.endDate }}</text>
          <text>共 {{ monthRange.totalDays }} 天，{{ monthRange.totalWeeks }} 周</text>
        </view>
        <view v-if="weekRange" class="api-result">
          <text class="api-title">当前周范围：</text>
          <text>{{ weekRange.startDate }} 至 {{ weekRange.endDate }}</text>
          <text>共 {{ weekRange.totalDays }} 天 (第{{ weekRange.currentWeek }}周/共{{ weekRange.totalWeeks }}周)</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import Calendar from './util.js'

export default {
  name: 'CalendarExamples',
  data() {
    return {
      calendar: {},
      currentWeek: 2,
      totalWeeks: 6,
      monthRange: null,
      weekRange: null,
      calendarUtil: null
    }
  },
  created() {
    // 初始化日历工具类
    this.calendarUtil = new Calendar()
  },
  methods: {
    onWeekChange(event) {
      this.currentWeek = event.weekNumber
      this.totalWeeks = event.totalWeeks
      console.log('周数变化:', event)
    },
    preWeek() {
      if (this.$refs.weekCalendar) {
        this.$refs.weekCalendar.preWeek()
      }
    },
    nextWeek() {
      if (this.$refs.weekCalendar) {
        this.$refs.weekCalendar.nextWeek()
      }
    },
    // 获取本月范围
    getMonthRange() {
      try {
        this.monthRange = this.calendarUtil.getCurrentMonthRange()
        console.log('本月范围:', this.monthRange)
      } catch (error) {
        console.error('获取本月范围失败:', error)
        uni.showToast({
          title: '获取失败',
          icon: 'error'
        })
      }
    },
    // 获取指定周范围
    getWeekRange() {
      try {
        // 获取当前日期所在的周
        this.weekRange = this.calendarUtil.getCurrentWeekRange()
        console.log('当前周范围:', this.weekRange)
      } catch (error) {
        console.error('获取周范围失败:', error)
        uni.showToast({
          title: '获取失败',
          icon: 'error'
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.calendar-examples {
  padding: 20rpx;
}

.example-section {
  margin-bottom: 40rpx;
  padding: 20rpx;
  border: 1px solid #eee;
  border-radius: 8rpx;
}

.section-title {
  display: block;
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
  color: #333;
}

.custom-date {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  position: relative;
}

.custom-today {
  background-color: #007aff;
  color: white;
}

.custom-selected {
  background-color: #ff3b30;
  color: white;
}

.custom-disabled {
  opacity: 0.3;
  color: #ccc;
}

.date-number {
  font-size: 28rpx;
  font-weight: bold;
}

.custom-indicator {
  position: absolute;
  bottom: 4rpx;
  width: 8rpx;
  height: 8rpx;
  background-color: #ff9500;
  border-radius: 50%;
}

.minimal-date {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24rpx;
  color: #666;
}

.enhanced-calendar-item {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  position: relative;
  background-color: #F6F8FA;
  transition: all 0.3s ease;
}

.enhanced-today {
  background-color: #007aff;
  color: white;
}

.enhanced-selected {
  background-color: #ff3b30;
  color: white;
}

.enhanced-disabled {
  opacity: 0.3;
  color: #ccc;
}

.enhanced-week-disabled {
  opacity: 0.3;
  color: #ccc;
}

.enhanced-not-current-month {
  opacity: 0.5;
  color: #999;
}

.date-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.date-number {
  font-size: 28rpx;
  font-weight: bold;
  line-height: 1;
}

.date-lunar {
  font-size: 20rpx;
  margin-top: 2rpx;
  opacity: 0.8;
}

.date-indicators {
  position: absolute;
  top: 4rpx;
  right: 4rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rpx;
}

.indicator-dot {
  width: 8rpx;
  height: 8rpx;
  background-color: #ff9500;
  border-radius: 50%;
}

.today-badge {
  width: 16rpx;
  height: 16rpx;
  background-color: #ff3b30;
  color: white;
  border-radius: 50%;
  font-size: 16rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.month-badge {
  width: 20rpx;
  height: 20rpx;
  background-color: #ff9500;
  color: white;
  border-radius: 50%;
  font-size: 12rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.week-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 20rpx;
  gap: 20rpx;
}

.week-btn {
  padding: 10rpx 20rpx;
  background-color: #007aff;
  color: white;
  border: none;
  border-radius: 8rpx;
  font-size: 24rpx;
}

.week-info {
  font-size: 28rpx;
  color: #333;
  font-weight: bold;
}

.api-demo {
  margin-top: 20rpx;
  padding: 20rpx;
  background-color: #f8f9fa;
  border-radius: 8rpx;
}

.api-btn {
  margin: 10rpx;
  padding: 15rpx 30rpx;
  background-color: #007aff;
  color: white;
  border: none;
  border-radius: 8rpx;
  font-size: 24rpx;
}

.api-result {
  margin-top: 20rpx;
  padding: 15rpx;
  background-color: white;
  border-radius: 8rpx;
  border-left: 4rpx solid #007aff;
}

.api-title {
  display: block;
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 10rpx;
}

.api-result text {
  display: block;
  font-size: 24rpx;
  color: #666;
  margin-bottom: 5rpx;
}
</style>
