<template>
  <view class="poster-checkin-page bg-gray-50 h-screen flex flex-col">
    <!-- 加载状态 -->
    <view v-if="isLoading" class="flex-1 flex items-center justify-center">
      <view class="text-center">
        <view class="text-gray-500 mb-2">加载中...</view>
      </view>
    </view>

    <!-- 错误状态 -->
    <view v-else-if="apiError" class="flex-1 flex items-center justify-center">
      <view class="text-center">
        <view class="text-red-500 mb-2">{{ apiError }}</view>
        <view @tap="fetchPosterDetail" class="bg-blue-500 text-white px-4 py-2 rounded">
          重新加载
        </view>
      </view>
    </view>

    <!-- 正常内容 -->
    <template v-else>
      <!-- 活动信息区域 -->
      <view v-if="pageState === 'normal' || pageState === 'no-checkin'" class="bg-white mx-4 mt-4 mb-2 rounded-lg shadow-sm p-4">
        <!-- 活动主题 -->
        <view class="text-lg font-bold text-gray-800 mb-2">
          {{ activityInfo.title }}
        </view>

        <!-- 打卡进度 -->
        <view class="flex items-center mb-2">
          <view class="flex items-center">
            <view
              v-for="(point, index) in activityInfo.checkPoints"
              :key="index"
              class="w-2 h-2 rounded-full mr-2 flex items-center justify-center"
              :class="point.completed ? 'bg-orange-400' : 'bg-gray-300'"
            >
            </view>
          </view>
          <text class="text-xs text-gray-600">{{ activityInfo.completedCount }}/{{ activityInfo.totalCount }}</text>
        </view>

        <!-- 活动截止日期 -->
        <view class="text-sm text-gray-500">
          活动截止日期：{{ activityInfo.endDate }}
        </view>
      </view>

      <!-- 海报预览区域 - 正常状态 -->
      <view v-if="pageState === 'normal'" class="flex-1 mx-4 relative" style="overflow: visible; padding-bottom: 110rpx;">
        <view class="h-full relative flex items-center justify-center">
          <view v-if="currentPoster.path" class="w-full h-full relative">
            <image
              :src="currentPoster.path"
              mode="widthFix"
              class="w-full h-full"
            />
            <!-- 打卡点标题 -->
            <!-- <view class="absolute bottom-2 left-2 bg-blue-500 text-white text-xs px-2 py-1 rounded">
              {{ posterList[currentPosterIndex]?.title || '海报生成中' }}
            </view> -->
            <!-- 点击预览提示 -->
            <!-- <view @tap="previewPoster" class="absolute bottom-2 right-2 bg-black bg-opacity-50 text-white text-xs px-2 py-1 rounded">
              点击预览
            </view> -->
          </view>
        </view>

        <!-- 左箭头按钮 -->
        <view
          class="absolute top-1/2 transform -translate-y-1/2 w-10 h-10 rounded-full flex items-center justify-center transition-all duration-200 z-10"
          :class="currentPosterIndex > 0 ? 'bg-orange-400 text-white shadow-lg' : 'bg-gray-300 text-gray-500'"
          style="left: -20rpx;"
          @tap="previousPoster"
        >
          <Left size="16"></Left>
        </view>

        <!-- 右箭头按钮 -->
        <view
          class="absolute top-1/2 transform -translate-y-1/2 w-10 h-10 rounded-full flex items-center justify-center transition-all duration-200 z-10"
          :class="currentPosterIndex < posterList.length - 1 ? 'bg-orange-400 text-white shadow-lg' : 'bg-gray-300 text-gray-500'"
          style="right: -20rpx;"
          @tap="nextPoster"
        >
          <Right size="16"></Right>
        </view>
      </view>

      <!-- 没有打卡信息的空状态 -->
      <view v-if="pageState === 'no-checkin'" class="flex-1 mx-4 mb-2 flex justify-center">
        <view class="rounded-lg shadow-sm p-8 text-center max-w-sm">
          <view class="text-6xl mb-4">📸</view>
          <view class="text-lg font-bold text-gray-800 mb-2">您还没有打卡记录</view>
          <view class="text-sm text-orange-500 mb-4">完成打卡后即可生成专属海报</view>
        </view>
      </view>

      <!-- 底部操作按钮 - 仅在正常状态显示 -->
      <view v-if="pageState === 'normal'" class="bg-white border-t border-gray-200 p-4 safe-area-bottom z-50" style="position: fixed; bottom: 0; left: 0; right: 0;">
        <view class="flex gap-4">
          <view
            class="flex-1 bg-gradient-to-r from-orange-400 to-orange-500 text-white text-sm py-3 px-6 rounded-lg font-medium shadow-lg active:scale-95 transition-transform duration-150 flex items-center justify-center gap-2"
            @click="chooseBackgroundImage"
          >
            <text>{{ currentPosterHasCustomBackground ? '更改照片' : '上传照片' }}</text>
          </view>
          <view
            class="flex-1 text-white py-3 px-6 rounded-lg font-medium text-sm shadow-lg active:scale-95 transition-transform duration-150 flex items-center justify-center gap-2"
            :class="posterPath ? 'bg-gradient-to-r from-green-400 to-green-500' : (posterGenerateFailed ? 'bg-gradient-to-r from-orange-400 to-orange-500' : 'bg-gray-400')"
            @click="handlePosterAction"
            :disabled="!posterPath && !posterGenerateFailed"
          >
            <text>{{ posterPath ? '保存海报' : (posterGenerateFailed ? '重新生成' : '生成中...') }}</text>
          </view>
        </view>
      </view>
    </template>

    <!-- 海报生成组件 - 仅在正常状态显示 -->
    <PosterBuilder
      v-if="shouldGeneratePoster && pageState === 'normal'"
      :config="posterConfig"
      :show-loading="true"
      @success="onPosterSuccess"
      @fail="onPosterFail"
    />

    <!-- 图片预览 -->
    <nut-image-preview
      v-model:show="previewVisible"
      :images="previewImages"
      :init-no="0"
      :show-index="false"
      @close="closePreview"
    />

  </view>
</template>

<script setup>
import { ref, onMounted, computed, watch } from 'vue'
import Taro from '@tarojs/taro'
import { Left, Right } from '@nutui/icons-vue-taro'
import PosterBuilder from '@/components/PosterBuilder/index.vue'
import BASE_URL from '@/utils/config'
// 导入获取海报详情的API
import { getPosterDetailAPI, savePosterBackgroundAPI } from '@/api/map'
// 默认背景图
const defaultBackground = 'https://cdn.ipadbiz.cn/lls_prog/images/%E6%B5%B7%E6%8A%A5%E9%BB%98%E8%AE%A4%E8%83%8C%E6%99%AF%E5%9B%BE1.png?imageMogr2/strip/quality/60'

// 页面状态
const posterPath = ref('') // 生成的海报路径
const backgroundImages = ref({}) // 每个海报的用户上传背景图 {posterIndex: imageUrl}
const shouldGeneratePoster = ref(false) // 是否应该生成海报
const currentPosterIndex = ref(0) // 当前显示的海报索引
const posterGenerateFailed = ref(false) // 海报生成是否失败
const posterGeneratedFlags = ref({}) // 每个海报的生成状态 {posterIndex: boolean}
const posterConfigHashes = ref({}) // 每个海报的配置哈希值，用于检测配置变化

// 页面参数
const pageParams = ref({
  from: '',
  id: '',
})

// API数据状态
const apiData = ref(null)
const isLoading = ref(false)
const apiError = ref(null)

// 图片预览相关
const previewVisible = ref(false)
const previewImages = ref([])

/**
 * 获取海报详情数据
 */
const fetchPosterDetail = async () => {
  try {
    isLoading.value = true
    apiError.value = null

    const accountInfo = wx.getAccountInfoSync();
    const envVersion = accountInfo.miniProgram.envVersion;
    // 小程序版本。正式版为 "release"，体验版为 "trial"。默认是正式版
    const env_version = envVersion === 'release' ? 'release' : 'trial';

    const response = await getPosterDetailAPI({ env_version })

    if (response.code === 1) {
      apiData.value = response.data
      console.log('获取海报详情成功:', response.data)

      // 根据API数据更新活动信息
      updateActivityInfo()

      // 根据API数据更新海报列表
      updatePosterList()

      // 根据pageParams.id设置当前海报索引
      setCurrentPosterIndex()

    } else {
      apiError.value = response.msg || '获取海报详情失败'
      console.error('获取海报详情失败:', response.msg)
    }
  } catch (error) {
    apiError.value = '网络请求失败'
    console.error('获取海报详情异常:', error)
  } finally {
    isLoading.value = false
  }
}

/**
 * 根据API数据更新活动信息
 */
const updateActivityInfo = () => {
  if (!apiData.value) return

  const { title, end_date, details, show_detail_index } = apiData.value

  // 转换details为checkPoints格式
  const checkPoints = details.map((detail, index) => ({
    id: detail.id,
    name: detail.name,
    completed: detail.is_checked === true
  }))

  // 计算已完成数量
  const completedCount = checkPoints.filter(point => point.completed).length

  activityInfo.value = {
    title: title || '海报打卡活动',
    checkPoints,
    completedCount,
    totalCount: checkPoints.length,
    endDate: end_date || '',
    showDetailIndex: show_detail_index || 0
  }
}

/**
 * 根据API数据更新海报列表
 */
const updatePosterList = () => {
  if (!apiData.value) return

  const { details, family, qrcode_url } = apiData.value

  // 只显示is_checked为真的关卡
  const checkedDetails = details.filter(detail =>
    detail.is_checked === true
  )

  posterList.value = checkedDetails.map((detail, index) => ({
    id: detail.id,
    title: detail.name,
    path: '',
    checkPointId: detail.id,
    backgroundImage: detail.background_url || defaultBackground,
    // 海报内容数据
    user: {
      avatar: family?.avatar_url || 'https://cdn.ipadbiz.cn/lls_prog/images/%E5%85%A8%E5%AE%B6%E7%A6%8F3_%E5%89%AF%E6%9C%AC.jpg?imageMogr2/strip/quality/60',
      nickname: '用户昵称' // 默认昵称，后续可从用户信息获取
    },
    family: {
      name: family?.name || '我的家庭',
      description: ''
    },
    activity: {
      logo: detail.main_slogan || 'https://cdn.ipadbiz.cn/lls_prog/images/%E6%B5%B7%E6%8A%A5%E5%B7%A6%E4%B8%8A%E8%A7%92logo.png?imageMogr2/strip/quality/60',
    },
    level: {
      logo: detail.sub_slogan || 'https://cdn.ipadbiz.cn/lls_prog/images/%E6%B5%B7%E6%8A%A5%E5%8F%B3%E4%B8%8B%E8%A7%92icon.png?imageMogr2/strip/quality/60',
      name: detail.name || '海报打卡活动',
    },
    qrcode: qrcode_url,
    qrcodeDesc: '长按识别，来，我们一起打卡！'
  }))
}

/**
 * 根据pageParams.id设置当前海报索引
 */
const setCurrentPosterIndex = () => {
  if (!posterList.value.length) {
    currentPosterIndex.value = 0
    return
  }

  // 如果有指定的ID，查找对应的海报索引
  if (pageParams.value.id) {
    const targetIndex = posterList.value.findIndex(poster =>
      poster.checkPointId.toString() === pageParams.value.id.toString()
    )

    if (targetIndex !== -1) {
      currentPosterIndex.value = targetIndex
      return
    }
  }

  // 如果没有ID或没找到对应的关卡ID，默认显示第一个已打卡的项（索引0）
  // 因为posterList已经过滤了is_checked=true的项，所以第一个就是我们要的
  currentPosterIndex.value = 0
}

// 活动信息数据 - 将由API数据填充
const activityInfo = ref({
  title: '',
  checkPoints: [],
  completedCount: 0,
  totalCount: 0,
  endDate: '',
  showDetailIndex: 0
})

// 海报数据列表 - 将由API数据填充
const posterList = ref([])

// 数据状态检查
const hasActivityInfo = computed(() => {
  return activityInfo.value && activityInfo.value.title && activityInfo.value.checkPoints && activityInfo.value.checkPoints.length > 0
})

const hasCheckinInfo = computed(() => {
  return posterList.value && posterList.value.length > 0
})

// 页面显示状态
const pageState = computed(() => {
  if (!hasActivityInfo.value) {
    return 'no-activity' // 没有活动信息
  }
  if (!hasCheckinInfo.value) {
    return 'no-checkin' // 有活动信息但没有打卡信息
  }
  return 'normal' // 正常状态
})



// 当前海报
const currentPoster = computed(() => {
  return posterList.value[currentPosterIndex.value] || { path: '', title: '' }
})

// 当前海报的内容数据
const currentMockData = computed(() => {
  const currentPoster = posterList.value[currentPosterIndex.value]
  if (!currentPoster) return null

  return {
    user: currentPoster.user,
    family: currentPoster.family,
    activity: currentPoster.activity,
    level: currentPoster.level,
    qrcode: currentPoster.qrcode,
    qrcodeDesc: currentPoster.qrcodeDesc
  }
})

// 当前海报是否有用户上传的背景图
const currentPosterHasCustomBackground = computed(() => {
  return !!backgroundImages.value[currentPosterIndex.value]
})

// 海报配置
const posterConfig = computed(() => {
  const currentPosterData = posterList.value[currentPosterIndex.value]
  const bgImage = backgroundImages.value[currentPosterIndex.value] || currentPosterData?.backgroundImage || defaultBackground

  return {
    width: 600, // 从750减少到600，减小Canvas尺寸以控制文件大小
    height: 1067, // 按比例调整高度 (1334 * 600/750 = 1067)
    backgroundColor: '#f5f5f5',
    debug: false,
    borderRadius: 12, // 按比例调整圆角 (15 * 600/750 = 12)
    images: [
      // 背景图
      {
        x: 0,
        y: 0,
        width: 600, // 按比例调整 (750 * 0.8 = 600)
        height: 880, // 按比例调整 (1100 * 0.8 = 880)
        url: bgImage,
        zIndex: 0
      },
      // 用户头像
      {
        x: 32, // 按比例调整 (40 * 0.8 = 32)
        y: 32, // 按比例调整 (40 * 0.8 = 32)
        width: 104, // 按比例调整 (130 * 0.8 = 104)
        height: 104, // 按比例调整 (130 * 0.8 = 104)
        url: currentMockData.value.user.avatar,
        borderRadius: 52, // 按比例调整 (65 * 0.8 = 52)
        zIndex: 2
      },
      // 活动logo
      {
        x: 360, // 按比例调整 (450 * 0.8 = 360)
        y: 32, // 按比例调整 (40 * 0.8 = 32)
        width: 200, // 按比例调整 (250 * 0.8 = 200)
        height: 64, // 按比例调整 (80 * 0.8 = 64)
        url: currentMockData.value.activity.logo,
        zIndex: 2
      },
      // 关卡徽章
      {
        x: 8, // 按比例调整 (10 * 0.8 = 8)
        y: 704, // 按比例调整 (880 * 0.8 = 704)
        width: 304, // 按比例调整 (380 * 0.8 = 304)
        height: 80, // 按比例调整 (100 * 0.8 = 80)
        url: currentMockData.value.level.logo,
        zIndex: 2
      },
      // 小程序码
      {
        x: 24, // 按比例调整 (30 * 0.8 = 24)
        y: 880, // 按比例调整 (1100 * 0.8 = 880)
        width: 144, // 按比例调整 (180 * 0.8 = 144)
        height: 144, // 按比例调整 (180 * 0.8 = 144)
        url: currentMockData.value.qrcode,
        zIndex: 1
      }
    ],
    texts: [
      // 家庭名称
      {
        x: 32, // 按比例调整 (40 * 0.8 = 32)
        y: 152, // 按比例调整 (190 * 0.8 = 152)
        text: currentMockData.value.family.name,
        fontSize: 29, // 按比例调整 (36 * 0.8 = 29)
        color: '#ffffff',
        fontWeight: 'bold',
        textAlign: 'left',
        shadowColor: 'rgba(0, 0, 0, 0.6)',
        shadowOffsetX: 2,
        shadowOffsetY: 2,
        shadowBlur: 4,
        zIndex: 2
      },
      // 家庭描述
      // {
      //   x: 32, // 按比例调整 (40 * 0.8 = 32)
      //   y: 200, // 按比例调整 (250 * 0.8 = 200)
      //   text: currentMockData.value.family.description,
      //   fontSize: 22, // 按比例调整 (28 * 0.8 = 22)
      //   color: '#ffffff',
      //   textAlign: 'left',
      //   shadowColor: 'rgba(0, 0, 0, 0.6)',
      //   shadowOffsetX: 2,
      //   shadowOffsetY: 2,
      //   shadowBlur: 4,
      //   zIndex: 2
      // },
      // 小程序码描述
      {
        x: 208, // 按比例调整 (260 * 0.8 = 208)
        y: 900, // 按比例调整 (1125 * 0.8 = 900)
        text: currentMockData.value.qrcodeDesc,
        fontSize: 24, // 按比例调整 (30 * 0.8 = 24)
        color: '#333333',
        lineHeight: 32, // 按比例调整 (40 * 0.8 = 32)
        lineNum: 2,
        width: 352, // 按比例调整 (440 * 0.8 = 352)
        textAlign: 'left',
        zIndex: 1
      },
      // 关卡描述
      {
        x: 208, // 按比例调整 (260 * 0.8 = 208)
        y: 944, // 按比例调整 (1180 * 0.8 = 944)
        text: '打卡点: ' + currentMockData.value.level.name,
        fontSize: 26, // 按比例调整 (32 * 0.8 = 26)
        color: '#333333',
        lineHeight: 40, // 按比例调整 (50 * 0.8 = 40)
        lineNum: 2,
        width: 352, // 按比例调整 (440 * 0.8 = 352)
        textAlign: 'left',
        zIndex: 1
      },
    ],
    blocks: [
      // 下半部分白色背景
      {
        x: 0,
        y: 840, // 按比例调整 (1050 * 0.8 = 840)
        width: 600, // 按比例调整 (750 * 0.8 = 600)
        height: 427, // 按比例调整 (534 * 0.8 = 427)
        backgroundColor: '#ffffff',
        zIndex: 0
      },
      // 用户信息背景遮罩
      // {
      //   x: 24, // 按比例调整 (30 * 0.8 = 24)
      //   y: 144, // 按比例调整 (180 * 0.8 = 144)
      //   width: 360, // 按比例调整 (450 * 0.8 = 360)
      //   height: 112, // 按比例调整 (140 * 0.8 = 112)
      //   backgroundColor: 'rgba(0,0,0,0.3)',
      //   borderRadius: 8, // 按比例调整 (10 * 0.8 = 8)
      //   zIndex: 1
      // }
    ]
  }
})

/**
 * 页面加载时初始化
 */
onMounted(async () => {
  Taro.setNavigationBarTitle({ title: '海报打卡' })

  // 获取页面参数
  const instance = Taro.getCurrentInstance()
  const params = instance.router?.params || {}

  pageParams.value = {
    id: params.id || '',
  }

  console.log('海报打卡页面接收到的参数:', pageParams.value)

  // 获取海报详情数据
  await fetchPosterDetail()

  // 数据获取完成后检查页面状态
  if (pageState.value === 'no-activity') {
    // 没有活动信息，显示确认对话框
    showNoActivityConfirm()
    return
  }

  // 页面加载时检查是否需要生成当前海报
  generateCurrentPosterIfNeeded()
})

/**
 * 监听背景图变化，重新生成海报
 */
watch(backgroundImages, (newVal, oldVal) => {
  // 只有当前海报的背景图发生变化时才重新生成
  const currentIndex = currentPosterIndex.value
  const newBgImage = newVal[currentIndex]
  const oldBgImage = oldVal?.[currentIndex]

  if (newBgImage !== oldBgImage) {
    console.log('背景图发生变化:', { currentIndex, newBgImage, oldBgImage })

    // 标记当前海报需要重新生成
    posterGeneratedFlags.value[currentIndex] = false
    delete posterConfigHashes.value[currentIndex]

    // 清除当前海报路径
    posterPath.value = ''

    // 重新生成海报
    generateCurrentPoster()
  }
}, { deep: true })

/**
 * 监听当前海报索引变化，切换海报
 */
watch(currentPosterIndex, (newIndex, oldIndex) => {
  // 切换海报时，检查新海报是否已生成
  if (newIndex !== oldIndex) {
    generateCurrentPosterIfNeeded()
  }
})

/**
 * 生成当前海报配置的哈希值
 */
const generateConfigHash = (config) => {
  const configStr = JSON.stringify({
    backgroundImage: backgroundImages.value[currentPosterIndex.value],
    posterIndex: currentPosterIndex.value,
    mockData: currentMockData.value
  })
  // 简单哈希函数
  let hash = 0
  for (let i = 0; i < configStr.length; i++) {
    const char = configStr.charCodeAt(i)
    hash = ((hash << 5) - hash) + char
    hash = hash & hash // 转换为32位整数
  }
  return hash.toString()
}

/**
 * 检查是否需要生成当前海报
 */
const generateCurrentPosterIfNeeded = () => {
  const currentIndex = currentPosterIndex.value
  const currentHash = generateConfigHash()
  const isGenerated = posterGeneratedFlags.value[currentIndex]
  const lastHash = posterConfigHashes.value[currentIndex]
  const hasCustomBackground = !!backgroundImages.value[currentIndex]

  console.log('检查是否需要生成海报:', {
    currentIndex,
    isGenerated,
    hasCustomBackground,
    currentHash,
    lastHash,
    hashChanged: lastHash !== currentHash
  })

  // 如果海报未生成过，或者配置发生了变化，则需要重新生成
  if (!isGenerated || lastHash !== currentHash) {
    console.log('需要重新生成海报')
    posterConfigHashes.value[currentIndex] = currentHash
    generateCurrentPoster()
  } else {
    // 海报已存在且配置未变化，直接使用缓存的海报
    const cachedPoster = posterList.value[currentIndex]
    if (cachedPoster && cachedPoster.path) {
      console.log('使用缓存的海报:', cachedPoster.path)
      posterPath.value = cachedPoster.path
      posterGenerateFailed.value = false
    } else {
      console.log('缓存的海报路径不存在，重新生成')
      generateCurrentPoster()
    }
  }
}

/**
 * 生成当前海报
 */
const generateCurrentPoster = () => {
  posterPath.value = ''
  posterGenerateFailed.value = false
  shouldGeneratePoster.value = false

  // 延迟触发生成，确保配置更新
  setTimeout(() => {
    shouldGeneratePoster.value = true
  }, 100)
}

/**
 * 切换到上一张海报
 */
const previousPoster = () => {
  if (currentPosterIndex.value > 0) {
    currentPosterIndex.value = currentPosterIndex.value - 1
  }
}

/**
 * 切换到下一张海报
 */
const nextPoster = () => {
  if (currentPosterIndex.value < posterList.value.length - 1) {
    currentPosterIndex.value = currentPosterIndex.value + 1
  }
}

/**
 * 选择背景图片
 */
const chooseBackgroundImage = () => {
  Taro.chooseImage({
    count: 1,
    sizeType: ['compressed'],
    sourceType: ['album', 'camera'],
    success: (res) => {
      const tempFile = res.tempFiles[0]
      if (tempFile.size > 5 * 1024 * 1024) {
        Taro.showToast({
          title: '图片大小不能超过5MB',
          icon: 'none'
        })
        return
      }

      uploadBackgroundImage(tempFile.path)
    },
    fail: (error) => {
      console.error('选择图片失败:', error)
      // Taro.showToast({
      //   title: '选择图片失败，请重试',
      //   icon: 'none'
      // })
    }
  })
}

/**
 * 上传背景图片
 */
const uploadBackgroundImage = (filePath) => {
  Taro.showLoading({ title: '上传中...' })

  Taro.uploadFile({
    url: BASE_URL + '/admin/?m=srv&a=upload',
    filePath,
    name: 'file',
    success: async (uploadRes) => {
      const data = JSON.parse(uploadRes.data)
      if (data.code === 0 && data.data) {
        const currentIndex = currentPosterIndex.value
        const currentPosterData = posterList.value[currentIndex]

        // 为当前海报设置背景图
        backgroundImages.value[currentIndex] = data.data.src

        // 调用保存海报背景接口
        try {
          const saveResult = await savePosterBackgroundAPI({
            detail_id: currentPosterData.checkPointId,
            poster_background_url: data.data.src
          })

          if (saveResult.code === 1) {
            console.log('海报背景保存成功:', saveResult.data)
          } else {
            console.warn('海报背景保存失败:', saveResult.msg)
            // 即使保存失败，也继续生成海报，不影响用户体验
          }
        } catch (error) {
          console.error('保存海报背景异常:', error)
          // 即使保存失败，也继续生成海报，不影响用户体验
        }

        // 强制标记当前海报需要重新生成
        posterGeneratedFlags.value[currentIndex] = false
        delete posterConfigHashes.value[currentIndex]

        // 清除当前海报路径，强制重新生成
        posterPath.value = ''

        // 立即重新生成海报
        generateCurrentPoster()

        Taro.hideLoading()
        Taro.showToast({ title: '上传成功', icon: 'success' })
      } else {
        Taro.hideLoading()
        Taro.showToast({ title: data.msg || '上传失败', icon: 'none' })
      }
    },
    fail: (error) => {
      console.error('上传文件失败:', error)
      Taro.hideLoading()
      Taro.showToast({ title: '上传失败，请稍后重试', icon: 'none' })
    }
  })
}

/**
 * 海报生成成功
 */
const onPosterSuccess = (result) => {
  const currentIndex = currentPosterIndex.value
  posterPath.value = result.tempFilePath
  posterGenerateFailed.value = false

  // 更新当前海报的路径和生成状态
  if (posterList.value[currentIndex]) {
    posterList.value[currentIndex].path = result.tempFilePath
  }
  posterGeneratedFlags.value[currentIndex] = true

  // 保存当前配置的哈希值
  posterConfigHashes.value[currentIndex] = generateConfigHash()

  shouldGeneratePoster.value = false

  console.log('海报生成成功:', {
    currentIndex,
    posterPath: result.tempFilePath,
    hasCustomBackground: !!backgroundImages.value[currentIndex]
  })

  Taro.showToast({ title: '海报生成成功', icon: 'success' })
}

/**
 * 海报生成失败
 */
const onPosterFail = (error) => {
  const currentIndex = currentPosterIndex.value
  shouldGeneratePoster.value = false
  posterGenerateFailed.value = true
  posterPath.value = ''

  // 标记当前海报生成失败，下次仍需重新生成
  posterGeneratedFlags.value[currentIndex] = false

  Taro.showToast({ title: '海报生成失败', icon: 'none' })
  console.error('海报生成失败:', error)
}

/**
 * 预览海报
 */
// const previewPoster = () => {
//   const currentPath = currentPoster.value.path
//   console.warn('预览海报', currentPath)
//   if (!currentPath) return

//   previewImages.value = [{ src: currentPath }]
//   previewVisible.value = true
// }

/**
 * 关闭预览
 */
const closePreview = () => {
  previewVisible.value = false
}

/**
 * 处理海报按钮点击事件
 */
const handlePosterAction = () => {
  if (posterPath.value) {
    // 如果海报已生成，执行保存操作
    savePoster()
  } else if (posterGenerateFailed.value) {
    // 如果生成失败，重新生成海报
    generateCurrentPoster()
  }
}

/**
 * 保存海报到相册
 */
const savePoster = () => {
  const currentPath = currentPoster.value.path
  if (!currentPath) {
    Taro.showToast({ title: '请等待海报生成完成', icon: 'none' })
    return
  }

  Taro.saveImageToPhotosAlbum({
    filePath: currentPath,
    success: () => {
      Taro.showToast({ title: '保存成功', icon: 'success' })
    },
    fail: (err) => {
      if (err.errMsg.includes('auth deny')) {
        Taro.showModal({
          title: '提示',
          content: '需要您授权保存图片到相册',
          showCancel: false,
          confirmText: '去设置',
          success: () => {
            Taro.openSetting()
          }
        })
      } else {
        Taro.showToast({ title: '保存失败', icon: 'none' })
      }
    }
  })
}

/**
 * 显示没有活动信息的确认对话框
 */
const showNoActivityConfirm = () => {
  Taro.showModal({
    title: '温馨提示',
    content: '您还没有参加过活动，请先参加活动后再来生成海报',
    showCancel: false,
    confirmText: '知道了',
    success: (res) => {
      if (res.confirm) {
        // 返回上一页
        Taro.navigateBack({
          delta: 1
        })
      }
    }
  })
}


</script>

<style scoped>
.safe-area-bottom {
  padding-bottom: env(safe-area-inset-bottom);
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.animate-spin {
  animation: spin 1s linear infinite;
}
</style>

<style lang="less">
.poster-checkin-page {
  .aspect-\[3\/4\] {
    aspect-ratio: 3/4;
  }
}
</style>