<!--
 * @Date: 2026-05-19 14:40:21
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2026-05-19 15:03:23
 * @FilePath: /lls_program/src/pages/ScanCheckinList/index.vue
 * @Description: 文件描述
-->
<template>
  <view class="scan-checkin-list-page">
    <view class="scan-checkin-list-header">
      <text class="scan-checkin-list-subtitle">请选择一个打卡点，进入详情后完成扫码打卡</text>
    </view>

    <view v-if="loading && pointList.length === 0" class="scan-checkin-list-status">
      加载中...
    </view>

    <template v-else>
      <view v-for="point in pointList" :key="point.id" class="scan-checkin-list-card">
        <view class="scan-checkin-list-leading">
          <IconFont size="30" name="https://cdn.ipadbiz.cn/lls_prog/icon/check_list_logo.png" />
        </view>

        <view class="scan-checkin-list-content">
          <text class="scan-checkin-list-name">{{ point.title }}</text>
        </view>

        <view class="scan-checkin-list-action" @click="goToDetail(point)">
          <Scan2 size="20" />
        </view>
      </view>

      <view v-if="!loading && pointList.length === 0" class="scan-checkin-list-status">
        暂无扫码打卡点
      </view>

      <view
        v-if="hasMore && pointList.length > 0"
        class="scan-checkin-list-load-more"
        @click="loadMore"
      >
        {{ loadingMore ? '加载中...' : '加载更多' }}
      </view>

      <view v-if="!hasMore && pointList.length > 0" class="scan-checkin-list-no-more">
        没有更多数据了
      </view>
    </template>

    <view class="scan-checkin-list-floating-button" @click="handleShowBoothMap">
      <IconFont
        class="scan-checkin-list-floating-icon"
        size="20"
        name="https://cdn.ipadbiz.cn/lls_prog/icon/%E5%B1%95%E4%BD%8D%E5%9B%BE@2x.png"
      />
      <text class="scan-checkin-list-floating-text">展位图</text>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import Taro, { useLoad } from '@tarojs/taro'
import { IconFont, Scan2 } from '@nutui/icons-vue-taro'
import './index.less'
import { getScanStageListAPI } from '@/api/map'

const pointList = ref([])
const activityId = ref('')
const loading = ref(false)
const loadingMore = ref(false)
const hasMore = ref(true)
const currentPage = ref(0)
const pageSize = ref(10)

const mapStageList = stageList =>
  stageList.map(stage => ({
    id: stage.id,
    title: stage.title,
    isChecked: stage.is_checked,
  }))

const goToDetail = point => {
  const params = new URLSearchParams({
    activityId: activityId.value,
    detailId: point.id,
    title: point.title,
  })

  Taro.navigateTo({
    url: `/pages/ScanCheckinDetail/index?${params.toString()}`,
  })
}

const handleShowBoothMap = () => {
  const params = new URLSearchParams({
    activityId: activityId.value,
  })

  Taro.navigateTo({
    url: `/pages/BoothMapGallery/index?${params.toString()}`,
  })
}

useLoad(options => {
  activityId.value = options.activityId || options.id || ''

  loadStageList()
})

const loadStageList = async (isLoadMore = false) => {
  if (!activityId.value) {
    pointList.value = []
    hasMore.value = false
    return
  }

  if (isLoadMore) {
    if (loading.value || loadingMore.value || !hasMore.value) {
      return
    }
    loadingMore.value = true
  } else {
    if (loading.value) {
      return
    }
    loading.value = true
    currentPage.value = 0
    hasMore.value = true
    pointList.value = []
  }

  const page = currentPage.value

  try {
    const result = await getScanStageListAPI({
      activity_id: activityId.value,
      page,
      limit: pageSize.value,
    })

    if (result?.code !== 1) {
      Taro.showToast({
        title: result?.msg || '获取关卡列表失败',
        icon: 'none',
      })
      return
    }

    const stageList = mapStageList(result?.data?.stages || [])

    pointList.value = isLoadMore ? [...pointList.value, ...stageList] : stageList
    hasMore.value = stageList.length === pageSize.value
    currentPage.value = page + 1
  } catch (error) {
    console.error('获取扫码打卡关卡列表失败:', error)
    Taro.showToast({
      title: '获取关卡列表失败',
      icon: 'none',
    })
  } finally {
    loading.value = false
    loadingMore.value = false
  }
}

const loadMore = () => {
  loadStageList(true)
}
</script>

<script>
export default {
  name: 'ScanCheckinList',
}
</script>