<template>
  <view class="calendar-page">
    <!-- 顶部标签栏 -->
    <view class="top-tabs">
      <text
        v-for="(tab, index) in topTabs"
        :key="index"
        class="tab-item"
        :class="{ active: activeTab === tab }"
        @click="switchTab(tab)"
      >
        {{ tab }}
      </text>
    </view>

    <!-- 年月选择器 -->
    <view class="year-month-picker">
      <button class="picker-btn" @click="showYearMonthPicker"> {{ currentMonth }} ▼ </button>
    </view>

    <!-- 功能按钮 -->
    <view class="action-buttons">
      <button class="action-btn">分享</button>
      <button class="action-btn">周/月报</button>
      <button class="action-btn">说明</button>
    </view>

    <!-- 日历网格 -->
    <view class="calendar-grid">
      <!-- 星期标题 -->
      <view class="week-header">
        <text v-for="(day, index) in weekDays" :key="index" class="week-day">{{ day }}</text>
      </view>

      <!-- 日期网格 -->
      <view class="date-grid">
        <view
          v-for="(date, index) in dates"
          :key="index"
          class="date-cell"
          :class="{ today: date.today }"
          @click="selectDate"
        >
          <text class="date-number">{{ date.day }}</text>
          <text v-if="date.today" class="today-text">今</text>
        </view>
      </view>
    </view>

    <!-- 底部 TabBar -->
    <view class="bottom-tabbar">
      <navigator url="/pages/xunji/xunji" class="tab-item">
        <image
          class="tab-icon"
          src="https://fitness-hcxtec-bucket.oss-cn-shenzhen.aliyuncs.com/20260316/order-empty_1773628059920.png"
          mode="aspectFill"
        ></image>
        <text class="tab-text">首页</text>
      </navigator>
      <navigator url="/pages/course/course" class="tab-item">
        <image
          class="tab-icon"
          src="https://fitness-hcxtec-bucket.oss-cn-shenzhen.aliyuncs.com/20260316/order-empty_1773628059920.png"
          mode="aspectFill"
        ></image>
        <text class="tab-text">课程</text>
      </navigator>
      <navigator url="/pages/enter-gym/enter-gym" class="tab-item active">
        <image
          class="tab-icon"
          src="https://fitness-hcxtec-bucket.oss-cn-shenzhen.aliyuncs.com/20260316/order-empty_1773628059920.png"
          mode="aspectFill"
        ></image>
        <text class="tab-text">进馆</text>
      </navigator>
      <navigator url="/pages/training-log/training-log" class="tab-item">
        <image
          class="tab-icon"
          src="https://fitness-hcxtec-bucket.oss-cn-shenzhen.aliyuncs.com/20260316/order-empty_1773628059920.png"
          mode="aspectFill"
        ></image>
        <text class="tab-text">训记</text>
      </navigator>
      <navigator url="/pages/my/my" class="tab-item">
        <image
          class="tab-icon"
          src="https://fitness-hcxtec-bucket.oss-cn-shenzhen.aliyuncs.com/20260316/order-empty_1773628059920.png"
          mode="aspectFill"
        ></image>
        <text class="tab-text">我的</text>
      </navigator>
    </view>
  </view>
</template>

<script setup>
  import { ref } from 'vue';

  // 响应式数据
  const activeTab = ref('日历');
  const currentMonth = ref('2025.10月');
  const weekDays = ref(['一', '二', '三', '四', '五', '六', '日']);
  const topTabs = ref(['概要', '计划', '日历', '动作', '模板', '数据']);

  const dates = ref([
    { day: 29, today: false },
    { day: 30, today: false },
    { day: 1, today: false },
    { day: 2, today: false },
    { day: 3, today: false },
    { day: 4, today: false },
    { day: 5, today: false },
    { day: 6, today: false },
    { day: 7, today: false },
    { day: 8, today: false },
    { day: 9, today: false },
    { day: 10, today: false },
    { day: 11, today: false },
    { day: 12, today: false },
    { day: 13, today: false },
    { day: 14, today: false },
    { day: 15, today: false },
    { day: 16, today: true },
    { day: 17, today: false },
    { day: 18, today: false },
    { day: 19, today: false },
    { day: 20, today: false },
    { day: 21, today: false },
    { day: 22, today: false },
    { day: 23, today: false },
    { day: 24, today: false },
    { day: 25, today: false },
    { day: 26, today: false },
    { day: 27, today: false },
    { day: 28, today: false },
    { day: 29, today: false },
    { day: 30, today: false },
    { day: 31, today: false },
    { day: 1, today: false },
    { day: 2, today: false },
  ]);

  // 方法
  const switchTab = (tab) => {
    activeTab.value = tab;
  };

  const showYearMonthPicker = () => {
    uni.showActionSheet({
      itemList: ['2025.10月', '2025.11月', '2025.12月'],
      success: (res) => {
        if (res.tapIndex === 0) {
          currentMonth.value = '2025.10月';
        } else if (res.tapIndex === 1) {
          currentMonth.value = '2025.11月';
        } else {
          currentMonth.value = '2025.12月';
        }
      },
    });
  };

  const selectDate = () => {
    uni.navigateTo({
      url: '/pages4/pages/xunji/xunji-rili-tianjia',
    });
  };
</script>

<style scoped lang="scss">
  .calendar-page {
    background-color: white;
    min-height: 100vh;
  }

  .top-tabs {
    display: flex;
    justify-content: space-around;
    padding: 20rpx 0;
    border-bottom: 1px solid #eee;
    font-size: 28rpx;
    color: #333;
  }

  .tab-item {
    padding: 10rpx 0;
    border-bottom: 2rpx solid transparent;
  }

  .tab-item.active {
    color: #ffd700;
    border-bottom-color: #ffd700;
  }

  .year-month-picker {
    padding: 20rpx;
    display: flex;
    justify-content: flex-start;
  }

  .picker-btn {
    background-color: white;
    border: 1px solid #ddd;
    border-radius: 20rpx;
    padding: 10rpx 20rpx;
    font-size: 26rpx;
    color: #333;
  }

  .action-buttons {
    display: flex;
    justify-content: flex-end;
    padding: 20rpx;
    gap: 20rpx;
  }

  .action-btn {
    background-color: white;
    border: 1px solid #ddd;
    border-radius: 20rpx;
    padding: 10rpx 20rpx;
    font-size: 24rpx;
    color: #333;
  }

  .calendar-grid {
    margin: 20rpx;
  }

  .week-header {
    display: flex;
    justify-content: space-between;
    padding: 20rpx 0;
    font-size: 26rpx;
    color: #999;
  }

  .week-day {
    width: 40rpx;
    text-align: center;
  }

  .date-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 10rpx;
  }

  .date-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 80rpx;
    border: 1px solid #eee;
    border-radius: 8rpx;
    font-size: 26rpx;
    color: #333;
    position: relative;
  }

  .date-cell.today {
    background-color: #f5f5f5;
    color: #ffd700;
  }

  .today-text {
    position: absolute;
    bottom: 10rpx;
    font-size: 20rpx;
    color: #ffd700;
  }

  .bottom-tabbar {
    display: flex;
    justify-content: space-around;
    padding: 20rpx;
    background-color: white;
    border-top: 1px solid #eee;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 999;
  }

  .tab-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 24rpx;
    color: #333;
  }

  .tab-item.active {
    color: #ffd700;
  }

  .tab-icon {
    width: 40rpx;
    height: 40rpx;
    margin-bottom: 6rpx;
  }
</style>