<!--
 * @Date: 2025-03-21 13:27:50
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2025-03-21 13:53:13
 * @FilePath: /mlaj/src/views/checkin/ExerciseCheckInPage.vue
 * @Description: 文件描述
-->
<template>
  <AppLayout title="运动打卡" :show-back="true">
    <div
      class="bg-gradient-to-br from-green-50 via-green-100/30 to-blue-50/30 min-h-screen p-4"
    >
      <!-- 时间筛选 -->
      <FrostedGlass class="p-4 rounded-xl mb-4">
        <div class="flex items-center justify-between mb-4">
          <div class="text-sm text-gray-600">选择时间范围</div>
          <div @click="showDatePicker = true" class="text-green-600 text-sm">
            {{ formatDateRange }}
          </div>
        </div>
      </FrostedGlass>

      <!-- 打卡列表 -->
      <van-list
        v-model:loading="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <FrostedGlass v-for="item in list" :key="item.id" class="p-4 rounded-xl mb-4">
          <div class="flex justify-between items-start mb-2">
            <div class="text-gray-900 font-medium">{{ item.exerciseType }}</div>
            <div class="text-sm text-gray-500">{{ item.submitTime }}</div>
          </div>
          <div class="text-gray-600 text-sm">
            <div class="mb-1">
              时长：{{ item.duration }}分钟 | 强度：{{ item.intensity }}
            </div>
            <div class="whitespace-pre-wrap">{{ item.thoughts }}</div>
          </div>
        </FrostedGlass>
      </van-list>

      <!-- 时间选择器 -->
      <van-popup v-model:show="showDatePicker" position="bottom">
        <van-picker-group
          title="预约日期"
          :tabs="['开始日期', '结束日期']"
          @confirm="onConfirmDate"
          @cancel="onCancelDate"
        >
          <van-date-picker v-model="startDate" :min-date="minDate" :max-date="maxDate" />
          <van-date-picker v-model="endDate" :min-date="minDate" :max-date="maxDate" />
        </van-picker-group>
      </van-popup>
    </div>
  </AppLayout>
</template>

<script setup>
import { ref, computed } from "vue";
import { DatePicker, List, Popup } from "vant";
import AppLayout from "@/components/layout/AppLayout.vue";
import FrostedGlass from "@/components/ui/FrostedGlass.vue";

// 列表数据
const list = ref([]);
const loading = ref(false);
const finished = ref(false);
const pageSize = 10;
const currentPage = ref(1);

// 日期选择
const showDatePicker = ref(false);
const startDate = ref(["2022", "06", "01"]);
const endDate = ref(["2023", "06", "01"]);
const minDate = new Date(2020, 0, 1);
const maxDate = new Date(2025, 5, 1);

// 格式化日期范围显示
const formatDateRange = computed(() => {
  return `${startDate.value.join("-")} ~ ${endDate.value.join("-")}`;
});

// 确认日期选择
const onConfirmDate = (values) => {
  const [start, end] = values;
  startDate.value = start.selectedValues;
  endDate.value = end.selectedValues;
  showDatePicker.value = false;
  // 重置列表并重新加载
  list.value = [];
  finished.value = false;
  currentPage.value = 1;
  onLoad();
};

// 取消日期选择
const onCancelDate = () => {
  showDatePicker.value = false;
};

// 加载数据
const onLoad = () => {
  loading.value = true;
  // 模拟数据加载
  setTimeout(() => {
    const newItems = Array.from({ length: pageSize }, (_, index) => ({
      id: list.value.length + index + 1,
      exerciseType: ["跑步", "步行", "骑行", "游泳"][Math.floor(Math.random() * 4)],
      duration: Math.floor(Math.random() * 120) + 30,
      intensity: ["低强度", "中等强度", "高强度"][Math.floor(Math.random() * 3)],
      thoughts: "今天的运动很充实，感觉状态不错！",
      submitTime: "2024-03-21 14:30:00",
    }));

    list.value.push(...newItems);
    loading.value = false;
    currentPage.value += 1;

    if (list.value.length >= 30) {
      finished.value = true;
    }
  }, 1000);
};
</script>