<template>
  <view class="min-h-screen bg-gray-50">
    <!-- 顶部导航 -->
    <view class="sticky top-0 z-10 bg-white shadow-sm">
      <view class="flex items-center justify-between px-4 py-3">
        <view class="flex items-center space-x-2">
          <text class="iconfont icon-arrow-left text-xl" @tap="goBack"></text>
          <text class="text-lg font-bold">活动详情</text>
        </view>
        <view class="flex items-center space-x-4">
          <text class="iconfont icon-share text-xl"></text>
        </view>
      </view>
    </view>

    <!-- 活动详情内容 -->
    <scroll-view class="h-screen" scroll-y>
      <!-- 活动封面 -->
      <view class="relative">
        <image
          :src="activityDetail.eventAvatar"
          mode="aspectFill"
          class="w-full h-80 object-cover"
        />
        <view class="absolute top-3 right-3 px-3 py-1 bg-white/90 rounded-full backdrop-blur-sm">
          <text class="text-sm text-primary font-medium">¥{{ activityDetail.eventPrice }}</text>
        </view>
        <view
          :class="[
            'absolute top-3 left-3 px-3 py-1 rounded-full text-sm font-medium',
            isOngoing ? 'bg-green-500/90 text-white' : 'bg-gray-500/90 text-white',
          ]"
        >
          {{ isOngoing ? '报名中' : '已结束' }}
        </view>
      </view>

      <!-- 活动信息 -->
      <view class="p-4 bg-white">
        <text class="block text-xl font-bold mb-2">{{ activityDetail.eventTitle }}</text>
        <view class="flex items-center text-sm text-gray-500 mb-2">
          <text class="iconfont icon-time mr-1"></text>
          <text>截止时间: {{ activityDetail.endTime }}</text>
        </view>
        <view class="flex items-center text-sm text-gray-500 mb-4">
          <text class="iconfont icon-location mr-1"></text>
          <text>{{ activityDetail.eventPlace }}</text>
        </view>
        <view class="flex items-center justify-between">
          <view class="flex items-center">
            <text class="text-sm text-gray-500">
              已有 {{ activityDetail.eventNumber }}/{{ activityDetail.eventLimitNumber }} 人报名
            </text>
          </view>
          <button
            class="px-8 py-2.5 text-white text-sm rounded-full flex items-center justify-center shadow-md transition-all duration-300"
            :class="{
              'bg-gradient-to-r from-pink-500 to-purple-500 hover:from-pink-600 hover:to-purple-600':
                isOngoing,
              'bg-gray-400 cursor-not-allowed': !isOngoing,
            }"
            :disabled="!isOngoing"
            @tap="handleSignUp"
          >
            <text class="iconfont icon-add mr-1" v-if="isOngoing"></text>
            {{ isOngoing ? '立即报名' : '已结束' }}
          </button>
        </view>
      </view>

      <!-- 活动详情 -->
      <view class="p-4 mt-4 bg-white">
        <text class="block text-lg font-bold mb-4">活动详情</text>
        <rich-text :nodes="activityDetail.eventContent"></rich-text>
      </view>

      <!-- 活动信息补充 -->
      <view class="p-4 mt-4 bg-white">
        <text class="block text-lg font-bold mb-4">活动信息</text>
        <view class="space-y-2">
          <view class="flex justify-between">
            <text class="text-gray-500">发起时间</text>
            <text>{{ activityDetail.createTime }}</text>
          </view>
          <view class="flex justify-between">
            <text class="text-gray-500">有效天数</text>
            <text>{{ activityDetail.effectiveTime }}天</text>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script lang="ts" setup>
import { ref, computed, onMounted } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import type { EventItem } from '@/service/event/type'
import { joinEventAPI } from '@/service/event'

onLoad(() => {
  // 页面加载时执行的逻辑
  const instance: any = getCurrentInstance().proxy
  const eventChannel = instance.getOpenerEventChannel()
  eventChannel.on('item', function (data) {
    const { item } = data
    activityDetail.value = item
  })
})

// 活动详情数据
const activityDetail = ref<EventItem>({
  id: '',
  eventTitle: '',
  eventContent: '',
  eventAvatar: '',
  eventPrice: '',
  eventPlace: '',
  createTime: '',
  endTime: '',
  effectiveTime: '',
  eventNumber: '',
  eventLimitNumber: '',
})

// 计算活动是否进行中
const isOngoing = computed(() => {
  if (!activityDetail.value.endTime) return false
  return new Date(activityDetail.value.endTime) > new Date()
})

// 加载状态
const isLoading = ref(false)
const hasMore = ref(true)

// 报名活动
const handleSignUp = async () => {
  try {
    uni.showModal({
      title: '报名确认',
      content: '确定要报名参加此活动吗？',
      success: async (res) => {
        if (res.confirm) {
          const result = await joinEventAPI(activityDetail.value.id)
          if (result.code === 500) {
            uni.showModal({
              title: '报名失败',
              content: result.message || '报名失败，请稍后重试',
              showCancel: false,
            })
            return
          }
          uni.showToast({
            title: '报名成功',
            icon: 'success',
          })
        }
      },
    })
  } catch (error) {
    uni.showModal({
      title: '报名失败',
      content: '系统异常，请稍后重试',
      showCancel: false,
    })
  }
}

// 返回上一页
const goBack = () => {
  uni.navigateBack()
}
</script>
