<!--
 * @Description: 积分攻略列表页面
-->
<template>
  <view class="points-list-page">
    <!-- 搜索框 -->
    <view class="search-section">
      <view class="search-box">
        <input
          v-model="searchKeyword"
          placeholder="搜索积分攻略"
          class="search-input"
          @input="handleSearch"
        />
      </view>
    </view>

    <!-- 攻略分类 -->
    <view class="category-section">
      <view class="category-title">攻略分类</view>
      <view class="category-grid">
        <view
          v-for="category in categories"
          :key="category.id"
          class="category-item"
          @click="filterByCategory(category.id)"
          :class="{ active: selectedCategory === category.id }"
        >
          <text class="category-name">{{ category.name }}</text>
        </view>
      </view>
    </view>

    <!-- 攻略列表 -->
    <view class="points-list-section">
      <scroll-view
        class="points-list"
        :scroll-y="true"
        :catch-move="true"
        :style="scrollStyle"
      >
        <view class="points-items">
          <view
            v-for="item in filteredPointsItems"
            :key="item.id"
            class="points-item"
            @click="showPointsDetail(item)"
          >
            <view class="points-item-left">
              <view class="points-content">
                <text class="points-title">{{ item.title }}</text>
                <text class="points-desc">{{ item.description }}</text>
                <view class="points-reward">
                  <text class="reward-text">可获得: {{ item.reward }}积分</text>
                </view>
              </view>
            </view>
            <view class="points-item-right">
              <text class="arrow-text"><RectRight /></text>
            </view>
          </view>
        </view>

        <!-- 空状态 -->
        <view
          v-if="filteredPointsItems.length === 0"
          class="empty-state"
        >
          <text class="empty-text">暂无相关积分攻略</text>
        </view>
      </scroll-view>
    </view>

    <!-- 右侧弹出详情 -->
    <nut-popup
      v-model:visible="showDetailPopup"
      position="right"
      :style="{ width: '85%', height: '100%' }"
      @close="closeDetail"
    >
      <view class="detail-popup">
        <!-- 详情头部 -->
        <view class="detail-header">
          <view class="detail-title">{{ currentPointsItem?.title }}</view>
          <view class="close-btn1" @click="closeDetail">
            <text class="close-text">关闭</text>
          </view>
        </view>

        <!-- 详情内容 -->
        <scroll-view class="detail-content" :scroll-y="true">
          <view class="detail-body">
            <!-- 攻略描述 -->
            <view class="detail-section">
              <view class="section-title">攻略描述</view>
              <text class="section-content">{{ currentPointsItem?.description }}</text>
            </view>

            <!-- 获取步骤 -->
            <view class="detail-section">
              <view class="section-title">获取步骤</view>
              <view class="solution-content">
                <view
                  v-for="(step, index) in currentPointsItem?.steps"
                  :key="index"
                  class="solution-step"
                >
                  <view class="step-number">{{ index + 1 }}</view>
                  <text class="step-content">{{ step }}</text>
                </view>
              </view>
            </view>

            <!-- 积分奖励 -->
            <view class="detail-section">
              <view class="section-title">积分奖励</view>
              <view class="reward-section">
                <view class="reward-item">
                  <text class="reward-label">基础积分:</text>
                  <text class="reward-value">{{ currentPointsItem?.reward }}分</text>
                </view>
                <view v-if="currentPointsItem?.bonusReward" class="reward-item">
                  <text class="reward-label">额外奖励:</text>
                  <text class="reward-value bonus">{{ currentPointsItem?.bonusReward }}分</text>
                </view>
              </view>
            </view>

            <!-- 注意事项 -->
            <view v-if="currentPointsItem?.notes?.length" class="detail-section">
              <view class="section-title">注意事项</view>
              <view class="notes-content">
                <view
                  v-for="(note, index) in currentPointsItem.notes"
                  :key="index"
                  class="note-item"
                >
                  <text class="note-text">• {{ note }}</text>
                </view>
              </view>
            </view>
          </view>
        </scroll-view>
      </view>
    </nut-popup>

    <!-- Toast提示 -->
    <nut-toast
      v-model:visible="toastVisible"
      :msg="toastMessage"
      :type="toastType"
    />
  </view>
</template>

<script setup>
// import '@tarojs/taro/html.css'
import { ref, computed, onMounted } from 'vue'
import Taro from '@tarojs/taro'
import { RectRight } from '@nutui/icons-vue-taro'
import './index.less'

/**
 * 积分攻略列表页面组件
 * 功能：展示各种积分获取攻略、搜索和分类筛选
 */

// ==================== 响应式数据 ====================
/**
 * 搜索关键词
 */
const searchKeyword = ref('')

/**
 * 选中的分类
 */
const selectedCategory = ref('all')

/**
 * 详情弹窗显示状态
 */
const showDetailPopup = ref(false)

/**
 * 当前查看的积分攻略项
 */
const currentPointsItem = ref(null)

/**
 * Toast提示
 */
const toastVisible = ref(false)
const toastMessage = ref('')
const toastType = ref('success')

/**
 * 攻略分类数据
 */
const categories = ref([
  { id: 'all', name: '全部' },
  { id: 'daily', name: '日常任务' },
  { id: 'activity', name: '活动参与' },
  { id: 'family', name: '家庭互动' },
  { id: 'special', name: '特殊奖励' }
])

/**
 * 积分攻略数据
 */
const pointsItems = ref([
  // 常规积分
  {
    id: 'p001',
    category: 'daily',
    title: '日常步数积分攻略',
    description: '通过日常走路获得积分，简单易行的积分获取方式',
    reward: '100步=1',
    steps: [
      '在微信里，我-设置-通用-辅助功能，启用“微信运功”功能',
      '每日保持运动，记录步数',
      '打开“老来赛”小程序，就可以同步微信步数',
    ],
    notes: [
      '家庭成员步数同样按此规则计算'
    ]
  },
  {
    id: 'p002',
    category: 'activity',
    title: '参与奖励积分攻略',
    description: '参与获得丰厚积分奖励',
    reward: 1000,
    steps: [
      '关注活动页面的最新活动信息',
      '前往活动地点参与活动',
      '在任意一个卡点完成打卡',
      '系统确认后发放1000积分奖励'
    ],
    notes: [
      '只要打卡一个卡点即可',
      '每次参与活动都可获得积分',
      '需要实地参与才能获得积分'
    ]
  },
  {
    id: 'p003',
    category: 'activity',
    title: '完成奖励积分攻略',
    description: '完成主题路线活动，获得超高积分奖励',
    reward: 5000,
    steps: [
      '参与主题路线活动',
      '了解活动设置的卡点位置',
      '完成奖励要求的卡点数量的打卡任务',
      '系统确认后发放5000积分奖励'
    ],
    notes: [
      '完成奖励要求的卡点数量的打卡任务即视为完成奖励',
    ]
  },
  // 额外积分
  {
    id: 'p004',
    category: 'family',
    title: '家庭成员达标奖励',
    description: '家庭成员达到5人，获得奖励积分',
    reward: 500,
    steps: [
      '创建或加入家庭',
      '邀请家人加入家庭',
      '确保家庭成员达到5人',
      '系统自动检测家庭人数',
      '达到5人后自动发放500积分奖励'
    ],
    notes: [
      '家庭成员达5人获得500分',
      '一次性奖励积分',
      '鼓励家庭成员共同参与'
    ]
  },
  {
    id: 'p005',
    category: 'family',
    title: '家庭陪伴运动攻略',
    description: '家庭成员陪伴运动，获得额外积分奖励',
    reward: 100,
    steps: [
      '与家庭成员一起进行运动',
      '运动过程中拍摄照片',
      '在小程序家庭主页中上传陪伴运动照片',
      '系统确认照片有效性',
      '获得100积分陪伴运动奖励'
    ],
    notes: [
      '每天上传陪伴运动最多可获得100积分',
    ]
  },
  {
    id: 'p006',
    category: 'special',
    title: '轮椅陪伴运动攻略',
    description: '陪伴轮椅老人运动，获得额外奖励积分',
    reward: 100,
    steps: [
      '陪伴轮椅老人进行运动',
      '在家庭主页上传合影打卡，获得奖励积分',
    ],
    notes: [
      '一次性奖励积分',
    ]
  }
])

/**
 * 搜索区域高度
 */
const searchSectionHeight = ref(0)

/**
 * 分类区域高度
 */
const categorySectionHeight = ref(0)

/**
 * 滚动样式
 */
const scrollStyle = computed(() => {
  const totalFixedHeight = searchSectionHeight.value + categorySectionHeight.value

  // 添加安全边距，避免内容被遮挡
  const safeMargin = 20
  const finalHeight = totalFixedHeight + safeMargin

  return {
    height: `calc(100vh - ${finalHeight}rpx)`,
    minHeight: '400rpx' // 设置最小高度，防止在某些设备上过小
  }
})

/**
 * 获取系统信息
 */
const systemInfo = ref({})

/**
 * 获取元素高度
 * @param {string} selector - 元素选择器
 * @returns {Promise<number>} 元素高度（rpx）
 */
const getElementHeight = (selector) => {
  return new Promise((resolve) => {
    const query = Taro.createSelectorQuery()
    query.select(selector).boundingClientRect((rect) => {
      if (rect && rect.height > 0) {
        // 根据设备像素比动态计算rpx
        const pixelRatio = systemInfo.value.pixelRatio || 2
        const screenWidth = systemInfo.value.screenWidth || 375
        // 标准转换：750rpx = 屏幕宽度px
        const rpxRatio = 750 / screenWidth
        const height = rect.height * rpxRatio
        resolve(Math.ceil(height))
      } else {
        resolve(0)
      }
    }).exec()
  })
}

/**
 * 计算固定区域高度
 */
const calculateFixedHeight = async () => {
  try {
    // 获取系统信息
    systemInfo.value = await Taro.getWindowInfo()

    // 多次尝试获取高度，确保DOM完全渲染
    let attempts = 0
    const maxAttempts = 3

    while (attempts < maxAttempts) {
      const searchHeight = await getElementHeight('.search-section')
      const categoryHeight = await getElementHeight('.category-section')

      // 如果获取到有效高度，则使用
      if (searchHeight > 0 && categoryHeight > 0) {
        searchSectionHeight.value = searchHeight
        categorySectionHeight.value = categoryHeight
        return
      }

      attempts++
      // 等待更长时间再重试
      await new Promise(resolve => setTimeout(resolve, 200))
    }

    // 如果多次尝试都失败，使用基于设备的默认值
    const isTablet = systemInfo.value.screenWidth >= 768
    searchSectionHeight.value = isTablet ? 180 : 144 // 平板设备使用更大的默认值
    categorySectionHeight.value = isTablet ? 240 : 200

  } catch (error) {
    console.error('计算高度失败:', error)
    // 使用保守的默认值
    const isTablet = systemInfo.value?.screenWidth >= 768
    searchSectionHeight.value = isTablet ? 180 : 144
    categorySectionHeight.value = isTablet ? 240 : 200
  }
}

/**
 * 过滤后的积分攻略项
 */
const filteredPointsItems = computed(() => {
  let items = pointsItems.value

  // 按分类过滤
  if (selectedCategory.value !== 'all') {
    items = items.filter(item => item.category === selectedCategory.value)
  }

  // 按搜索关键词过滤
  if (searchKeyword.value.trim()) {
    const keyword = searchKeyword.value.toLowerCase()
    items = items.filter(item =>
      item.title.toLowerCase().includes(keyword) ||
      item.description.toLowerCase().includes(keyword)
    )
  }

  return items
})

// ==================== 方法 ====================
/**
 * 返回上一页
 */
const goBack = () => {
  Taro.navigateBack()
}

/**
 * 处理搜索
 */
const handleSearch = () => {
  // 搜索逻辑已在computed中处理
}

/**
 * 按分类过滤
 */
const filterByCategory = (categoryId) => {
  selectedCategory.value = categoryId
}

/**
 * 显示积分攻略详情
 */
const showPointsDetail = (item) => {
  currentPointsItem.value = item
  showDetailPopup.value = true
}

/**
 * 关闭详情
 */
const closeDetail = () => {
  showDetailPopup.value = false
  currentPointsItem.value = null
}

// ==================== 生命周期 ====================
onMounted(async () => {
  // 先获取系统信息
  try {
    systemInfo.value = await Taro.getWindowInfo()
  } catch (error) {
    console.error('获取系统信息失败:', error)
  }

  // 延时计算高度，确保DOM渲染完成
  // 对于平板设备，需要更长的等待时间
  const isTablet = systemInfo.value?.screenWidth >= 768
  const delay = isTablet ? 300 : 150

  setTimeout(() => {
    calculateFixedHeight()
  }, delay)

  // 监听窗口大小变化，重新计算高度
  Taro.onWindowResize(() => {
    setTimeout(() => {
      calculateFixedHeight()
    }, 100)
  })
})
</script>

<script>
export default {
  name: 'PointsListPage'
}
</script>

<style lang="less" scoped>
.points-list-page {
  height: 100vh;
  display: flex;
  flex-direction: column;

  .search-section {
    flex-shrink: 0;
    padding: 20rpx;

    // 平板设备适配
    @media (min-width: 768px) {
      padding: 30rpx 40rpx;
    }

    .search-box {
      .search-input {
        width: 100%;
        height: 80rpx;
        padding: 0 20rpx;
        border-radius: 40rpx;
        background-color: #f5f5f5;
        font-size: 28rpx;

        // 平板设备适配
        @media (min-width: 768px) {
          height: 100rpx;
          font-size: 32rpx;
          padding: 0 30rpx;
        }
      }
    }
  }

  .category-section {
    flex-shrink: 0;
    padding: 20rpx;

    // 平板设备适配
    @media (min-width: 768px) {
      padding: 30rpx 40rpx;
    }

    .category-title {
      font-size: 32rpx;
      font-weight: bold;
      margin-bottom: 20rpx;

      // 平板设备适配
      @media (min-width: 768px) {
        font-size: 36rpx;
        margin-bottom: 30rpx;
      }
    }

    .category-grid {
      display: flex;
      flex-wrap: wrap;
      gap: 20rpx;

      // 平板设备适配
      @media (min-width: 768px) {
        gap: 30rpx;
      }

      .category-item {
        padding: 16rpx 32rpx;
        border-radius: 40rpx;
        background-color: #f8f8f8;
        border: 2rpx solid transparent;
        transition: all 0.3s ease;

        // 平板设备适配
        @media (min-width: 768px) {
          padding: 20rpx 40rpx;
          font-size: 30rpx;
        }

        &.active {
          background-color: #007aff;
          color: white;
        }

        .category-name {
          font-size: 28rpx;

          // 平板设备适配
          @media (min-width: 768px) {
            font-size: 32rpx;
          }
        }
      }
    }
  }

  .points-list-section {
    flex: 1;
    overflow: hidden;

    .points-list {
      height: 100%;

      .points-items {
        padding: 0 20rpx 20rpx;

        // 平板设备适配
        @media (min-width: 768px) {
          padding: 0 40rpx 40rpx;
        }

        .points-item {
          display: flex;
          align-items: center;
          padding: 30rpx 20rpx;
          margin-bottom: 20rpx;
          background-color: white;
          border-radius: 20rpx;
          box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);

          // 平板设备适配
          @media (min-width: 768px) {
            padding: 40rpx 30rpx;
            margin-bottom: 30rpx;
            border-radius: 24rpx;
          }

          .points-item-left {
            flex: 1;

            .points-content {
              .points-title {
                font-size: 32rpx;
                font-weight: bold;
                color: #333;
                margin-bottom: 10rpx;
                display: block;

                // 平板设备适配
                @media (min-width: 768px) {
                  font-size: 36rpx;
                  margin-bottom: 15rpx;
                }
              }

              .points-desc {
                font-size: 26rpx;
                color: #666;
                margin-bottom: 15rpx;
                display: block;
                line-height: 1.4;

                // 平板设备适配
                @media (min-width: 768px) {
                  font-size: 30rpx;
                  margin-bottom: 20rpx;
                }
              }

              .points-reward {
                .reward-text {
                  font-size: 24rpx;
                  color: #007aff;
                  font-weight: bold;

                  // 平板设备适配
                  @media (min-width: 768px) {
                    font-size: 28rpx;
                  }
                }
              }
            }
          }

          .points-item-right {
            margin-left: 20rpx;

            // 平板设备适配
            @media (min-width: 768px) {
              margin-left: 30rpx;
            }

            .arrow-text {
              font-size: 32rpx;
              color: #ccc;

              // 平板设备适配
              @media (min-width: 768px) {
                font-size: 36rpx;
              }
            }
          }
        }
      }

      .empty-state {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 400rpx;

        .empty-text {
          font-size: 28rpx;
          color: #999;

          // 平板设备适配
          @media (min-width: 768px) {
            font-size: 32rpx;
          }
        }
      }
    }
  }
}

// 详情弹窗样式
.detail-popup {
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: #f8f8f8;

  .detail-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 40rpx 30rpx;
    background-color: white;
    border-bottom: 2rpx solid #eee;

    // 平板设备适配
    @media (min-width: 768px) {
      padding: 50rpx 40rpx;
    }

    .detail-title {
      font-size: 36rpx;
      font-weight: bold;
      color: #333;

      // 平板设备适配
      @media (min-width: 768px) {
        font-size: 40rpx;
      }
    }

    .close-btn1 {
      padding: 10rpx 20rpx;

      .close-text {
        font-size: 28rpx;
        color: #007aff;

        // 平板设备适配
        @media (min-width: 768px) {
          font-size: 32rpx;
        }
      }
    }
  }

  .detail-content {
    flex: 1;

    .detail-body {
      padding: 30rpx;

      // 平板设备适配
      @media (min-width: 768px) {
        padding: 40rpx;
      }

      .detail-section {
        margin-bottom: 40rpx;
        padding: 30rpx;
        background-color: white;
        border-radius: 20rpx;

        // 平板设备适配
        @media (min-width: 768px) {
          margin-bottom: 50rpx;
          padding: 40rpx;
          border-radius: 24rpx;
        }

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

          // 平板设备适配
          @media (min-width: 768px) {
            font-size: 36rpx;
            margin-bottom: 30rpx;
          }
        }

        .section-content {
          font-size: 28rpx;
          color: #666;
          line-height: 1.5;

          // 平板设备适配
          @media (min-width: 768px) {
            font-size: 32rpx;
          }
        }
      }
    }
  }
}
</style>