<template>
  <div class="detail">
    <div class="detail-header" :style="{ backgroundImage: `url(${activity.coverImage || 'https://s1.xiaomiev.com/activity-outer-assets/0328/images/su7_ultra_20250227/pc/5.jpg'})` }">
      <div class="header-overlay"></div>
      <div class="header-back" @click="$router.back()">
        <van-icon name="arrow-left" />
      </div>
      <div class="header-content">
        <h1 class="activity-title">{{ activity.title }}</h1>
      </div>
    </div>
    
    <div class="content">
      <div class="info-card">
        <div class="info-item">
          <van-icon name="clock-o" class="info-icon" />
          <div class="info-text">
            <div class="info-label">活动时间</div>
            <div class="info-value">{{ formatDate(activity.startTime) }}</div>
          </div>
        </div>
        <div class="info-item" @click="showMap">
          <van-icon name="location-o" class="info-icon" />
          <div class="info-text">
            <div class="info-label">活动地点</div>
            <div class="info-value">{{ activity.location }}</div>
          </div>
          <van-icon name="arrow" class="info-arrow" />
        </div>
        <div class="info-item">
          <van-icon name="calendar-o" class="info-icon" />
          <div class="info-text">
            <div class="info-label">报名截止</div>
            <div class="info-value">{{ formatDate(activity.registrationDeadline) }}</div>
          </div>
        </div>
        <div class="info-item">
          <van-icon name="gold-coin-o" class="info-icon" />
          <div class="info-text">
            <div class="info-label">人均费用</div>
            <div class="info-value price-value">{{ activity.price > 0 ? `¥${activity.price}` : '免费' }}</div>
          </div>
        </div>
      </div>
      
      <div class="section">
        <h3 class="section-title">活动介绍</h3>
        <p class="description">{{ activity.description }}</p>
      </div>
      
      <!-- 赞助商弹幕 -->
      <SponsorDanmaku v-if="activity.danmakuEnabled" :prizes="prizes" />
      
      <!-- 活动流程 -->
      <div class="section">
        <h3 class="section-title">活动流程</h3>
        <div class="timeline">
          <!-- 签到与集结 -->
          <div class="timeline-item">
            <div class="timeline-dot"></div>
            <div class="timeline-content" @click="toggleTimeline(0)" :class="{ expanded: expandedTimelineIndex === 0 }">
              <div class="timeline-time">
                <span class="time-text">14:00 - 14:30</span>
                <van-icon :name="expandedTimelineIndex === 0 ? 'arrow-up' : 'arrow-down'" class="expand-icon" />
              </div>
              <div class="timeline-title">签到与集结</div>
              <div class="timeline-brief">车辆有序到场,签到领卡,开启精彩活动之旅</div>
              <div class="timeline-detail" :class="{ expanded: expandedTimelineIndex === 0 }">
                <div class="detail-content">
                  <div class="flow-steps">
                    <div class="step-item">🚗 车辆到场 → 指引至临时停车点</div>
                    <div class="step-item">✍️ 签到处签名确认参与</div>
                    <div class="step-item">📱 扫码入群,加入活动大家庭</div>
                    <div class="step-item">🎫 领取专属积分卡</div>
                  </div>
                  <div class="game-rule">
                    <div class="rule-title">📋 积分卡说明</div>
                    <div class="rule-content">
                      • 每人领取一张积分卡（红绿双色章）<br>
                      • 初始积分：0分<br>
                      • 游戏得分范围：+1至+5分<br>
                      • 游戏扣分范围：-1至-5分<br>
                      • 最终积分可兑换精美礼品<br>
                      • 积分越高,礼品越丰厚
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          
          <!-- 观赏素材拍摄 -->
          <div class="timeline-item">
            <div class="timeline-dot"></div>
            <div class="timeline-content" @click="toggleTimeline(1)" :class="{ expanded: expandedTimelineIndex === 1 }">
              <div class="timeline-time">
                <span class="time-text">14:30 - 16:30</span>
                <van-icon :name="expandedTimelineIndex === 1 ? 'arrow-up' : 'arrow-down'" class="expand-icon" />
              </div>
              <div class="timeline-title">观赏素材拍摄</div>
              <div class="timeline-brief">专业摄影团队记录精彩瞬间,留下珍贵回忆</div>
              <div class="timeline-detail" :class="{ expanded: expandedTimelineIndex === 1 }">
                <div class="detail-content">
                  <div class="flow-steps">
                    <div class="step-item">📸 全员车前合影 - 展示车队阵容</div>
                    <div class="step-item">🎯 签到墙合照 - 打卡留念</div>
                    <div class="step-item">🏛️ 地标合影 - 记录活动地点</div>
                    <div class="step-item">🎬 动态全员上车 - 拍摄车队启动瞬间</div>
                    <div class="step-item">✨ 拍摄"泉州"字样 - 城市印记</div>
                  </div>
                  <div class="tip-box">
                    💡 提示：这些素材将用于活动回顾视频制作,请积极配合拍摄
                  </div>
                </div>
              </div>
            </div>
          </div>
          
          <!-- 互动游戏时间 -->
          <div class="timeline-item">
            <div class="timeline-dot"></div>
            <div class="timeline-content" @click="toggleTimeline(2)" :class="{ expanded: expandedTimelineIndex === 2 }">
              <div class="timeline-time">
                <span class="time-text">16:30 - 18:00</span>
                <van-icon :name="expandedTimelineIndex === 2 ? 'arrow-up' : 'arrow-down'" class="expand-icon" />
              </div>
              <div class="timeline-title">互动游戏时间</div>
              <div class="timeline-brief">10+趣味游戏项目,赢取积分兑换精美礼品</div>
              <div class="timeline-detail" :class="{ expanded: expandedTimelineIndex === 2 }">
                <div class="detail-content">
                  <div class="game-list">
                    <div 
                      v-for="(game, index) in gameItems" 
                      :key="'game' + index"
                      class="game-card" 
                      @click.stop="toggleGame('game' + index)" 
                      :class="{ expanded: expandedGameId === 'game' + index, 'highlight-game': game.name.includes('最终复活') }"
                    >
                      <div class="game-header">
                        <div class="game-title">{{ game.icon }} {{ game.name }}</div>
                        <van-icon :name="expandedGameId === 'game' + index ? 'arrow-up' : 'arrow-down'" class="expand-icon" />
                      </div>
                      <div class="game-detail" :class="{ expanded: expandedGameId === 'game' + index }">
                        <div class="game-desc" v-html="game.detail"></div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          
          <!-- 落日BBQ -->
          <div class="timeline-item">
            <div class="timeline-dot"></div>
            <div class="timeline-content" @click="toggleTimeline(3)" :class="{ expanded: expandedTimelineIndex === 3 }">
              <div class="timeline-time">
                <span class="time-text">18:00 - 19:30</span>
                <van-icon :name="expandedTimelineIndex === 3 ? 'arrow-up' : 'arrow-down'" class="expand-icon" />
              </div>
              <div class="timeline-title">落日BBQ</div>
              <div class="timeline-brief">落日余晖下品尝美食,拍摄浪漫氛围大片</div>
              <div class="timeline-detail" :class="{ expanded: expandedTimelineIndex === 3 }">
                <div class="detail-content">
                  <div class="flow-steps">
                    <div class="step-item">🌅 落日余晖下车辆排成一排</div>
                    <div class="step-item">💡 齐开大灯营造氛围</div>
                    <div class="step-item">📷 拍摄氛围感大片</div>
                    <div class="step-item">🍖 边烤肉边欣赏晚霞</div>
                    <div class="step-item">🎵 轻松音乐伴随美食时光</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          
          <!-- 篝火歌舞会 -->
          <div class="timeline-item">
            <div class="timeline-dot"></div>
            <div class="timeline-content" @click="toggleTimeline(4)" :class="{ expanded: expandedTimelineIndex === 4 }">
              <div class="timeline-time">
                <span class="time-text">19:00 - 21:00</span>
                <van-icon :name="expandedTimelineIndex === 4 ? 'arrow-up' : 'arrow-down'" class="expand-icon" />
              </div>
              <div class="timeline-title">篝火歌舞会</div>
              <div class="timeline-brief">互动游戏、璀璨烟花、积分兑奖,欢乐不停歇</div>
              <div class="timeline-detail" :class="{ expanded: expandedTimelineIndex === 4 }">
                <div class="detail-content">
                  <div class="game-list">
                    <div class="game-card" @click.stop="toggleGame('bonfire1')" :class="{ expanded: expandedGameId === 'bonfire1' }">
                      <div class="game-header">
                        <div class="game-title">🥁 击鼓传花（10轮）</div>
                        <van-icon :name="expandedGameId === 'bonfire1' ? 'arrow-up' : 'arrow-down'" class="expand-icon" />
                      </div>
                      <div class="game-detail" :class="{ expanded: expandedGameId === 'bonfire1' }">
                        <div class="game-desc">
                          <strong>玩法：</strong>音乐响起时传递道具,音乐停止时持花者上台<br>
                          <strong>惩罚：</strong>吃柠檬或苦瓜(二选一)<br>
                          <strong>得分：</strong>勇敢完成+2分,拒绝挑战-3分<br>
                          <strong>轮数：</strong>共10轮,气氛逐渐升温
                        </div>
                      </div>
                    </div>
                    
                    <div class="game-card" @click.stop="toggleGame('bonfire2')" :class="{ expanded: expandedGameId === 'bonfire2' }">
                      <div class="game-header">
                        <div class="game-title">🤝 喊数抱团（10轮）</div>
                        <van-icon :name="expandedGameId === 'bonfire2' ? 'arrow-up' : 'arrow-down'" class="expand-icon" />
                      </div>
                      <div class="game-detail" :class="{ expanded: expandedGameId === 'bonfire2' }">
                        <div class="game-desc">
                          <strong>玩法：</strong>主持人喊数字,参与者按数字抱团<br>
                          <strong>规则：</strong>落单者淘汰,上台自我介绍(1分钟)<br>
                          <strong>得分：</strong>成功抱团+1分,落单但完成自我介绍+2分,拒绝-2分<br>
                          <strong>互动：</strong>认识新朋友的好机会!
                        </div>
                      </div>
                    </div>
                    
                    <div class="game-card" @click.stop="toggleGame('bonfire3')" :class="{ expanded: expandedGameId === 'bonfire3' }">
                      <div class="game-header">
                        <div class="game-title">🎵 大合唱</div>
                        <van-icon :name="expandedGameId === 'bonfire3' ? 'arrow-up' : 'arrow-down'" class="expand-icon" />
                      </div>
                      <div class="game-detail" :class="{ expanded: expandedGameId === 'bonfire3' }">
                        <div class="game-desc">
                          <strong>玩法：</strong>全员参与,齐唱经典歌曲<br>
                          <strong>氛围：</strong>点燃现场,凝聚团队
                        </div>
                      </div>
                    </div>
                    
                    <div class="game-card" @click.stop="toggleGame('bonfire4')" :class="{ expanded: expandedGameId === 'bonfire4' }">
                      <div class="game-header">
                        <div class="game-title">🎭 个人才艺表演</div>
                        <van-icon :name="expandedGameId === 'bonfire4' ? 'arrow-up' : 'arrow-down'" class="expand-icon" />
                      </div>
                      <div class="game-detail" :class="{ expanded: expandedGameId === 'bonfire4' }">
                        <div class="game-desc">
                          <strong>玩法：</strong>自愿上台展示才艺(唱歌/跳舞/表演)<br>
                          <strong>准备：</strong>需提前到后台准备BGM<br>
                          <strong>鼓励：</strong>展现自我,收获掌声!
                        </div>
                      </div>
                    </div>
                    
                    <div class="game-card" @click.stop="toggleGame('bonfire5')" :class="{ expanded: expandedGameId === 'bonfire5' }">
                      <div class="game-header">
                        <div class="game-title">👶 小朋友互动</div>
                        <van-icon :name="expandedGameId === 'bonfire5' ? 'arrow-up' : 'arrow-down'" class="expand-icon" />
                      </div>
                      <div class="game-detail" :class="{ expanded: expandedGameId === 'bonfire5' }">
                        <div class="game-desc">
                          <strong>玩法：</strong>主持人邀请小朋友上台互动<br>
                          <strong>内容：</strong>简单游戏/才艺展示/问答<br>
                          <strong>礼品：</strong>参与即有小礼物<br>
                        </div>
                      </div>
                    </div>
                    
                    <div class="game-card" @click.stop="toggleGame('bonfire6')" :class="{ expanded: expandedGameId === 'bonfire6' }">
                      <div class="game-header">
                        <div class="game-title">🎆 璀璨烟火秀</div>
                        <van-icon :name="expandedGameId === 'bonfire6' ? 'arrow-up' : 'arrow-down'" class="expand-icon" />
                      </div>
                      <div class="game-detail" :class="{ expanded: expandedGameId === 'bonfire6' }">
                        <div class="game-desc">
                          <strong>环节：</strong>三重烟花盛宴,点亮夜空绽放精彩<br>
                          <strong>米兰之夜：</strong>大型专业烟火表演,绚丽夺目<br>
                          <strong>仙女棒：</strong>每车配发手持烟花,拍照打卡<br>
                          <strong>加特林压轴：</strong>震撼收尾,全场欢呼<br>
                        </div>
                      </div>
                    </div>
                    
                    <div class="game-card" @click.stop="toggleGame('bonfire7')" :class="{ expanded: expandedGameId === 'bonfire7' }">
                      <div class="game-header">
                        <div class="game-title">🏆 积分兑换礼品</div>
                        <van-icon :name="expandedGameId === 'bonfire7' ? 'arrow-up' : 'arrow-down'" class="expand-icon" />
                      </div>
                      <div class="game-detail" :class="{ expanded: expandedGameId === 'bonfire7' }">
                        <div class="game-desc">
                          <strong>奖项设置：</strong><br>
                          🥇 一等奖 - 神秘大奖等你拿<br>
                          🥈 二等奖 - 精美礼品超值享<br>
                          🥉 三等奖 - 实用好物带回家<br>
                          🎖️ 四等奖 - 纪念礼品留回忆<br>
                          🎊 参与奖 - 人人有份不落空<br>
                          <br>
                          ✨ 积分越高奖品越丰厚,还可能有惊喜等着你!<br>
                          📍 凭积分卡到兑奖处领取对应礼品
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          
          <!-- 自由交流 & 返程 -->
          <div class="timeline-item timeline-item-last">
            <div class="timeline-dot"></div>
            <div class="timeline-content" @click="toggleTimeline(5)" :class="{ expanded: expandedTimelineIndex === 5 }">
              <div class="timeline-time">
                <span class="time-text">21:00 以后</span>
                <van-icon :name="expandedTimelineIndex === 5 ? 'arrow-up' : 'arrow-down'" class="expand-icon" />
              </div>
              <div class="timeline-title">自由交流 & 返程</div>
              <div class="timeline-brief">自由合影留念,整理现场,安全返程</div>
              <div class="timeline-detail" :class="{ expanded: expandedTimelineIndex === 5 }">
                <div class="detail-content">
                  <div class="flow-steps">
                    <div class="step-item">📸 自由合影留念</div>
                    <div class="step-item">🧹 整理现场垃圾</div>
                    <div class="step-item">🚗 提醒安全驾驶返程</div>
                    <div class="step-item">👋 期待下次相聚</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 场地展示 -->
      <div v-if="venueImages.length" class="section">
        <h3 class="section-title">场地展示</h3>
        <van-swipe class="venue-swipe" :autoplay="3000" indicator-color="white">
          <van-swipe-item v-for="(image, index) in venueImages" :key="index">
            <div class="venue-image" @click="previewImage(getImageUrl(image))">
              <img :src="getImageUrl(image)" :alt="`场地图片${index + 1}`" />
            </div>
          </van-swipe-item>
        </van-swipe>
      </div>
      
      <!-- 活动经费 -->
      <div v-if="expenses.length && isApproved" class="section">
        <h3 class="section-title">活动经费 <span class="count">¥{{ totalExpense }}</span></h3>
        <div class="expense-list">
          <div v-for="expense in expenses" :key="expense.id" class="expense-item">
            <div class="expense-info">
              <div class="expense-name">{{ expense.item }}</div>
              <div class="expense-category">{{ expense.category }}</div>
            </div>
            <div v-if="expense.media && expense.media.length" class="expense-media">
              <div v-for="(media, index) in expense.media" :key="index" class="expense-media-item">
                <van-image 
                  v-if="media.type === 'image'" 
                  :src="media.url" 
                  fit="cover"
                  @click="previewImage(media.url)"
                />
                <div v-else class="expense-video" @click="playExpenseVideo(media.url)">
                  <video :src="media.url"></video>
                  <van-icon name="play-circle-o" class="play-icon" />
                </div>
              </div>
            </div>
            <div class="expense-amount">金额：¥{{ expense.amount }}</div>
          </div>
        </div>
      </div>
      
      <div v-if="!isApproved && hasRegistered" class="section">
        <div class="permission-tip">
          <van-icon name="info-o" />
          <span v-if="userRegistration.status === 'pending'">您的报名正在审核中，审核通过后可查看活动经费</span>
          <span v-else-if="userRegistration.status === 'rejected'">您的报名未通过审核</span>
        </div>
      </div>
      
      <!-- 赞助商 -->
      <div v-if="sponsors.length" class="section">
        <h3 class="section-title">赞助商</h3>
        <div class="sponsor-grid">
          <div v-for="sponsor in sponsors" :key="sponsor.id" class="sponsor-card">
            <div class="sponsor-logo" :style="{ backgroundImage: `url(${getImageUrl(sponsor.logo)})` }"></div>
            <div class="sponsor-name">{{ sponsor.name }}</div>
          </div>
        </div>
      </div>
      
      <!-- 奖品礼品 -->
      <div v-if="prizes.length" class="section">
        <h3 class="section-title">🏆 奖品礼品</h3>
        <div class="prize-list">
          <div v-for="prize in prizes" :key="prize.id" class="prize-card">
            <div class="prize-image" :style="prize.image ? { backgroundImage: `url(${getImageUrl(prize.image)})` } : {}">
              <van-icon v-if="!prize.image" name="gift-o" size="40" color="#ccc" />
            </div>
            <div class="prize-content">
              <div class="prize-header">
                <span class="prize-level" :class="`level-${prize.level}`">{{ prize.level }}</span>
                <span class="prize-name">{{ prize.name }}</span>
                <van-icon 
                  v-if="prize.sponsor" 
                  name="info-o" 
                  class="prize-sponsor-icon"
                  @click="showSponsorInfo(prize)"
                />
              </div>
              <div v-if="prize.description" class="prize-desc">{{ prize.description }}</div>
              <div class="prize-footer">
                <span class="prize-quantity">数量: {{ prize.quantity }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 活动照片与视频 -->
      <div v-if="photos.length || videos.length" class="section">
        <h3 class="section-title">活动照片与视频</h3>
        
        <div v-if="photos.length" class="media-section">
          <div class="media-label">照片</div>
          <div class="photo-grid">
            <div v-for="photo in photos" :key="photo.id" class="photo-item" @click="previewImage(photo.url)">
              <div class="photo-img" :style="{ backgroundImage: `url(${photo.url})` }"></div>
            </div>
          </div>
        </div>
        
        <div v-if="videos.length" class="media-section">
          <div class="media-label">视频</div>
          <div class="video-list">
            <div v-for="video in videos" :key="video.id" class="video-item">
              <video :src="video.url" controls class="video-player"></video>
            </div>
          </div>
        </div>
        
        <div v-if="hasRegistered && isApproved" class="upload-section">
          <van-uploader 
            v-model="userMedia" 
            multiple 
            :max-count="5" 
            :after-read="uploadUserMedia"
            accept="image/*,video/*"
          >
            <van-button icon="photograph" type="primary" size="small">上传照片/视频</van-button>
          </van-uploader>
          <div class="upload-tip">您可以上传活动照片或视频，审核后将展示给所有人</div>
        </div>
        
        <div v-if="hasRegistered && !isApproved" class="upload-section">
          <div class="permission-tip">
            <van-icon name="info-o" />
            <span v-if="userRegistration.status === 'pending'">审核通过后可上传照片/视频</span>
            <span v-else-if="userRegistration.status === 'rejected'">您的报名未通过审核</span>
          </div>
        </div>
      </div>
      
      <!-- 报名名单 -->
      <div class="section">
        <h3 class="section-title">报名名单 <span class="count">({{ totalPeople }}人)</span></h3>
        <div class="member-list">
          <div v-for="reg in registrations" :key="reg.id" class="member-item">
            <div class="member-avatar">{{ reg.name.charAt(0) }}</div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 底部操作按钮 -->
    <div v-if="!hasRegistered && activity.registrationEnabled" class="footer-action">
      <van-button 
        type="primary" 
        block 
        round 
        size="large" 
        @click="$router.push(`/register/${activity.id}`)"
        class="action-button"
      >
        <van-icon name="add-o" /> 立即报名
      </van-button>
      <van-button 
        plain
        type="primary" 
        block 
        round 
        size="large" 
        @click="handleLogin"
        class="action-button login-button"
      >
        <van-icon name="user-o" /> 已报名？点击登录
      </van-button>
    </div>
    
    <div v-else-if="!hasRegistered && !activity.registrationEnabled" class="footer-action">
      <van-button type="default" block round size="large" disabled class="action-button">
        <van-icon name="warning-o" /> 报名已结束
      </van-button>
      <van-button 
        plain
        type="primary" 
        block 
        round 
        size="large" 
        @click="handleLogin"
        class="action-button login-button"
      >
        <van-icon name="user-o" /> 已报名？点击登录
      </van-button>
    </div>
    
    <div v-else-if="!isApproved" class="footer-action">
      <van-button type="default" block round size="large" disabled class="action-button">
        <van-icon name="clock-o" /> 
        <span v-if="userRegistration.status === 'pending'">等待审核中</span>
        <span v-else>报名未通过</span>
      </van-button>
    </div>
    
    <div v-else class="footer-action">
      <van-button type="success" block round size="large" disabled class="action-button">
        <van-icon name="success" /> 已报名
      </van-button>
    </div>
    
    <!-- 分享按钮 -->
    <div class="share-btn" @click="handleShare">
      <van-icon name="share-o" />
      <span>分享</span>
    </div>
    
    <!-- 地图弹窗 -->
    <van-popup v-model:show="showMapPopup" position="bottom" :style="{ height: '70%' }">
      <div class="map-container">
        <div class="map-header">
          <h3>{{ activity.location }}</h3>
          <van-icon name="cross" @click="showMapPopup = false" />
        </div>
        <div id="amap-container" style="width: 100%; height: calc(100% - 50px);"></div>
      </div>
    </van-popup>
    
    <!-- 登录弹窗 -->
    <van-dialog 
      v-model:show="showLoginDialog" 
      title="验证报名信息" 
      show-cancel-button
      @confirm="submitLogin"
    >
      <div class="login-form">
        <van-field 
          v-model="loginForm.phone" 
          label="手机号" 
          placeholder="请输入报名时的手机号"
          type="tel"
          maxlength="11"
        />
        <van-field 
          v-model="loginForm.carNumber"
          label="车牌号"
        >
          <template #input>
            <div class="license-plate-input">
              <span class="plate-prefix">闽</span>
              <input 
                v-model="carLetter"
                @input="handleLetterInput"
                placeholder="_"
                maxlength="1"
                class="plate-letter"
              />
              <span class="plate-dot">·</span>
              <input 
                v-model="carDigits"
                @input="handleDigitsInput"
                placeholder="______"
                maxlength="6"
                class="plate-digits"
              />
            </div>
          </template>
        </van-field>
      </div>
    </van-dialog>
    
    <!-- 经费视频播放弹窗 -->
    <van-popup v-model:show="showExpenseVideoPopup" position="center" round :style="{ width: '90%' }">
      <div class="video-player-popup">
        <video :src="currentExpenseVideo" controls autoplay class="popup-video"></video>
      </div>
    </van-popup>
  </div>
</template>

<script setup>
import { useActivityDetail } from './useActivityDetail';
import SponsorDanmaku from './SponsorDanmaku.vue';
import { gameItems } from '../timeline-data.js';

// 获取完整图片URL的辅助函数
const getImageUrl = (path) => {
  if (!path || typeof path !== 'string') return '';
  if (path.startsWith('http://') || path.startsWith('https://')) {
    return path;
  }
  return import.meta.env.DEV ? `http://localhost:3000${path}` : `https://mi.xyvan.cn${path}`;
};

const {
  activity,
  photos,
  videos,
  sponsors,
  prizes,
  registrations,
  expenses,
  venueImages,
  userMedia,
  showMapPopup,
  showLoginDialog,
  showExpenseVideoPopup,
  currentExpenseVideo,
  loginForm,
  carLetter,
  carDigits,
  userRegistration,
  expandedTimelineIndex,
  expandedGameId,
  totalExpense,
  totalPeople,
  isApproved,
  hasRegistered,
  formatDate,
  previewImage,
  playExpenseVideo,
  showMap,
  uploadUserMedia,
  handleLogin,
  handleLetterInput,
  handleDigitsInput,
  submitLogin,
  handleShare,
  toggleTimeline,
  toggleGame,
  showSponsorInfo
} = useActivityDetail();
</script>

<style src="./styles.css" scoped></style>
