<template>
  <scroll-view class="page" scroll-y>
    <view class="banner" v-if="detail.banner">
      <image class="banner-img" :src="detail.banner" mode="widthFix" />
    </view>
    <view class="header">
      <view class="title">{{ detail.name || detail.title || '-' }}</view>
      <view class="meta">分类：{{ detail.category_name || '对对碰' }}</view>
      <view class="meta" v-if="detail.price_draw !== undefined">参与价：￥{{ detail.price_draw }}</view>
      <view class="meta" v-if="detail.status !== undefined">状态：{{ statusText }}</view>
    </view>
    <view class="actions">
      <button class="btn" @click="onPreviewBanner">查看图片</button>
      <button class="btn primary" @click="onParticipate">立即参与</button>
    </view>
  </scroll-view>
</template>

<script setup>
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { getActivityDetail } from '../../api/appUser'

const detail = ref({})
const statusText = ref('')

function statusToText(s) {
  if (s === 1) return '进行中'
  if (s === 0) return '未开始'
  if (s === 2) return '已结束'
  return String(s || '')
}

async function fetchDetail(id) {
  const data = await getActivityDetail(id)
  detail.value = data || {}
  statusText.value = statusToText(detail.value.status)
}

function onPreviewBanner() {
  const url = detail.value.banner || ''
  if (url) uni.previewImage({ urls: [url], current: url })
}

function onParticipate() {
  uni.showToast({ title: '功能待接入', icon: 'none' })
}

onLoad((opts) => {
  const id = (opts && opts.id) || ''
  if (id) fetchDetail(id)
})
</script>

<style scoped>
.page { height: 100vh }
.banner { padding: 24rpx }
.banner-img { width: 100% }
.header { padding: 0 24rpx }
.title { font-size: 36rpx; font-weight: 700 }
.meta { margin-top: 8rpx; font-size: 26rpx; color: #666 }
.actions { display: flex; padding: 24rpx; gap: 16rpx }
.btn { flex: 1 }
.primary { background-color: #007AFF; color: #fff }
</style>