<!--
 * @Date: 2026-02-05 19:48:00
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2026-02-05 20:09:34
 * @FilePath: /lls_program/src/pages/CheckinMap/index.vue
 * @Description: 打卡地图列表页
-->
<template>
  <view class="checkin-map-page">
    <!-- 列表内容 -->
    <view class="map-list">
      <view v-for="item in mapList" :key="item.id" class="map-card" @tap="handleCardClick(item)">
        <!-- 封面图 -->
        <view class="card-cover">
          <image :src="item.cover" mode="aspectFill" class="cover-image" />
        </view>

        <!-- 卡片内容 -->
        <view class="card-content">
          <text class="card-title">{{ item.title }}</text>
          <view class="card-time-wrapper">
            <text class="card-time-label">活动日期</text>
            <text class="card-time">{{ item.timeRange }}</text>
          </view>
          <view class="enter-btn" @tap.stop="handleEnter(item)">
            <text class="enter-btn-text">立即进入</text>
          </view>
        </view>
      </view>
    </view>

    <BottomNav />
  </view>
</template>

<script setup>
import { ref } from 'vue'
import Taro from '@tarojs/taro'
import BottomNav from '@/components/BottomNav.vue'

/**
 * Mock 打卡地图数据
 */
const mapList = ref([
  {
    id: 1,
    title: '重阳登高打卡',
    cover: 'https://picsum.photos/400/300?random=1',
    timeRange: '2025.09.06～2025.10.31',
    activityId: 'chongyang_2024',
  },
  {
    id: 2,
    title: '公园晨跑打卡',
    cover: 'https://picsum.photos/400/300?random=2',
    timeRange: '2025.09.01～2025.12.31',
    activityId: 'morning_run_2024',
  },
  {
    id: 3,
    title: '社区健身打卡',
    cover: 'https://picsum.photos/400/300?random=3',
    timeRange: '2025.08.01～2025.12.31',
    activityId: 'community_fitness',
  },
  {
    id: 4,
    title: '周末徒步打卡',
    cover: 'https://picsum.photos/400/300?random=4',
    timeRange: '2025.09.15～2025.11.30',
    activityId: 'weekend_hike',
  },
  {
    id: 5,
    title: '秋日赏菊打卡',
    cover: 'https://picsum.photos/400/300?random=5',
    timeRange: '2025.10.15～2025.11.15',
    activityId: 'autumn_chrysanthemum',
  },
  {
    id: 6,
    title: '古镇文化打卡',
    cover: 'https://picsum.photos/400/300?random=6',
    timeRange: '2025.10.01～2025.10.31',
    activityId: 'ancient_town',
  },
])

/**
 * 处理卡片点击事件
 * @param {Object} item - 卡片数据
 */
const handleCardClick = item => {
  console.log('点击卡片:', item)
  // 可以在这里添加预览或其他交互
}

/**
 * 进入打卡活动
 * @param {Object} item - 活动数据
 */
const handleEnter = item => {
  console.log('进入活动:', item)

  // 跳转到活动封面页，带上活动ID参数
  Taro.navigateTo({
    url: `/pages/ActivitiesCover/index?activityId=${item.activityId}&title=${encodeURIComponent(item.title)}`,
  })
}
</script>

<style lang="less">
.checkin-map-page {
  min-height: 100vh;
  background-color: #54abae; /* 项目主色调 */
  padding-bottom: 160px; /* 为底部导航留出空间 */
}

.page-header {
  padding: 40px 30px 20px;
  text-align: center;
}

.page-title {
  font-size: 48px;
  font-weight: bold;
  color: #ffffff;
}

.map-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 一行两个 */
  gap: 20px;
  padding: 20px 30px;
}

.map-card {
  background-color: #ffffff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s;
}

.map-card:active {
  transform: scale(0.98);
}

.card-cover {
  width: 100%;
  height: 360px;
  overflow: hidden;
}

.cover-image {
  width: 100%;
  height: 100%;
}

.card-content {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.card-title {
  font-size: 28px;
  font-weight: bold;
  color: #1f2937;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.card-time-wrapper {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.card-time-label {
  font-size: 22px;
  color: #9ca3af;
  font-weight: 500;
}

.card-time {
  font-size: 24px;
  color: #1f2937;
  font-weight: 600;
}

.enter-btn {
  margin-top: 8px;
  background-color: #54abae;
  color: #ffffff;
  padding: 16px;
  border-radius: 8px;
  text-align: center;
  font-size: 26px;
  font-weight: 500;
}

.enter-btn:active {
  background-color: #4a979a;
}

.enter-btn-text {
  color: #ffffff;
}
</style>