<template>
  <view class="booth-map-gallery-page">
    <view v-if="loading" class="booth-map-gallery-status">加载中...</view>

    <view v-else-if="imageList.length === 0" class="booth-map-gallery-status"> 暂无展位图 </view>

    <view v-else class="booth-map-gallery-grid">
      <view
        v-for="(item, index) in imageList"
        :key="item.id"
        class="booth-map-gallery-item"
        @click="previewImage(index)"
      >
        <image class="booth-map-gallery-image" :src="item.url" :mode="item.mode || 'widthFix'" />
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import Taro, { useLoad } from '@tarojs/taro'
import './index.less'
import { detailAPI } from '@/api/map_activity'

const imageList = ref([])
const loading = ref(false)
const activityId = ref('')

const isApiSuccess = code => Number(code) === 1

const mapBoothImages = boothImages =>
  boothImages
    .filter(item => typeof item === 'string' && item.trim() !== '')
    .map((url, index) => ({
      id: `booth-${index}`,
      url,
      mode: 'widthFix',
    }))

const fetchBoothImages = async () => {
  if (!activityId.value) {
    imageList.value = []
    Taro.showToast({
      title: '缺少活动信息',
      icon: 'none',
    })
    return
  }

  loading.value = true

  try {
    const result = await detailAPI({ id: activityId.value })

    if (!isApiSuccess(result?.code)) {
      Taro.showToast({
        title: result?.msg || '获取展位图失败',
        icon: 'none',
      })
      imageList.value = []
      return
    }

    imageList.value = mapBoothImages(result?.data?.booth_images || [])
  } catch (error) {
    console.error('[BoothMapGallery] 获取展位图失败:', error)
    imageList.value = []
    Taro.showToast({
      title: '获取展位图失败',
      icon: 'none',
    })
  } finally {
    loading.value = false
  }
}

useLoad(options => {
  activityId.value = options.activityId || options.activity_id || options.id || ''
  fetchBoothImages()
})

const previewImage = index => {
  if (imageList.value.length === 0) {
    return
  }

  Taro.previewImage({
    current: imageList.value[index].url,
    urls: imageList.value.map(item => item.url),
  })
}
</script>

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