<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>
      
      <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="openTimelineDetail(0)">
              <div class="timeline-time">
                14:00 - 14:30
                <van-icon name="arrow" class="detail-arrow" />
              </div>
              <div class="timeline-title">签到与集�?/div>
              <div class="timeline-brief">车辆到场 �?签到处签�?�?扫码入群 �?领取积分�?/div>
            </div>
          </div>
          
          <div class="timeline-item">
            <div class="timeline-dot"></div>
            <div class="timeline-content" @click="openTimelineDetail(1)">
              <div class="timeline-time">
                14:30 - 16:30
                <van-icon name="arrow" class="detail-arrow" />
              </div>
              <div class="timeline-title">观赏素材拍摄</div>
              <div class="timeline-brief">全员车前合影、签到墙合照、地标合�?/div>
            </div>
          </div>
          
          <div class="timeline-item">
            <div class="timeline-dot"></div>
            <div class="timeline-content" @click="openTimelineDetail(2)">
              <div class="timeline-time">
                16:30 - 18:00
                <van-icon name="arrow" class="detail-arrow" />
              </div>
              <div class="timeline-title">互动游戏时间</div>
              <div class="timeline-brief">套圈圈、投壶、摇筛子、足球射门等10+游戏项目</div>
            </div>
          </div>
          
          <div class="timeline-item">
            <div class="timeline-dot"></div>
            <div class="timeline-content" @click="openTimelineDetail(3)">
              <div class="timeline-time">
                18:00 - 19:30
                <van-icon name="arrow" class="detail-arrow" />
              </div>
              <div class="timeline-title">落日BBQ</div>
              <div class="timeline-brief">落日余晖下烤肉、拍摄氛围感大片</div>
            </div>
          </div>
          
          <div class="timeline-item">
            <div class="timeline-dot"></div>
            <div class="timeline-content" @click="openTimelineDetail(4)">
              <div class="timeline-time">
                19:00 - 20:00
                <van-icon name="arrow" class="detail-arrow" />
              </div>
              <div class="timeline-title">篝火歌舞�?/div>
              <div class="timeline-brief">击鼓传花、喊数抱团、才艺表演等互动游戏</div>
            </div>
          </div>
          
          <div class="timeline-item">
            <div class="timeline-dot"></div>
            <div class="timeline-content" @click="openTimelineDetail(5)">
              <div class="timeline-time">
                20:00 - 20:30
                <van-icon name="arrow" class="detail-arrow" />
              </div>
              <div class="timeline-title">璀璨烟火秀</div>
              <div class="timeline-brief">米兰之夜、仙女棒、加特林压轴</div>
            </div>
          </div>
          
          <div class="timeline-item timeline-item-last">
            <div class="timeline-dot"></div>
            <div class="timeline-content" @click="openTimelineDetail(6)">
              <div class="timeline-time">
                20:30 以后
                <van-icon name="arrow" class="detail-arrow" />
              </div>
              <div class="timeline-title">积分兑奖 & 自由交流</div>
              <div class="timeline-brief">积分兑换礼品、自由合影、安全返�?/div>
            </div>
          </div>
        </div>
      </div>
        <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(${sponsor.logo})` }"></div>
            <div class="sponsor-name">{{ sponsor.name }}</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">({{ registrations.length }}�?</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 class="member-info">
              <div class="member-name">{{ reg.name }}</div>
              <div class="member-car">{{ reg.carModel }}</div>
            </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 
          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>
    
    <!-- 活动流程详情弹窗 -->
    <van-popup v-model:show="showTimelinePopup" position="bottom" round :style="{ height: '70%' }">
      <div class="timeline-popup">
        <div class="popup-header">
          <h3>{{ timelineData[currentTimelineIndex]?.title }}</h3>
          <van-icon name="cross" @click="showTimelinePopup = false" />
        </div>
        <div class="popup-content">
          <div class="popup-time">
            <van-icon name="clock-o" />
            {{ timelineData[currentTimelineIndex]?.time }}
          </div>
          <div class="popup-detail" v-html="timelineData[currentTimelineIndex]?.detail"></div>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import { useRoute } from 'vue-router';
import { showImagePreview, showToast } from 'vant';
import api from '../api';

const route = useRoute();
const activity = ref({});
const photos = ref([]);
const videos = ref([]);
const sponsors = ref([]);
const registrations = ref([]);
const expenses = ref([]);
const userMedia = ref([]);
const showMapPopup = ref(false);
const showLoginDialog = ref(false);
const showExpenseVideoPopup = ref(false);
const showTimelinePopup = ref(false);
const currentExpenseVideo = ref('');
const currentTimelineIndex = ref(0);
const loginForm = ref({ phone: '', carNumber: '' });
const carLetter = ref('');
const carDigits = ref('');
const userRegistration = ref(null);
let map = null;

// 活动流程详细数据
const timelineData = ref([
  {
    title: '签到与集�?,
    time: '14:00 - 14:30',
    detail: `
      <div class="game-rule">
        <div class="rule-title">📋 积分卡说�?/div>
        <div class="rule-content">
          �?每人领取一张积分卡（红绿双色章�?br>
          �?初始积分�?�?br>
          �?游戏得分范围�?1�?5�?br>
          �?游戏扣分范围�?1�?5�?br>
          �?最终积分可兑换礼品
        </div>
      </div>
    `
  },
  {
    title: '观赏素材拍摄',
    time: '14:30 - 16:30',
    detail: `
      <div class="game-rule">
        <div class="rule-title">📸 拍照打卡点位</div>
        <div class="rule-content">
          <strong>1. 宝船门口</strong> - 全员车前合影、签到墙合照<br>
          <strong>2. 隧道三个点位</strong> - 地标合影、动态全员上车、点�?br>
          <strong>3. 特色造型</strong> - �?泉州"两个字造型<br>
          <br>
          💡 提示：完成所有点位拍照可获得 <span class="score-badge">+2�?/span>
        </div>
      </div>
    `
  },
  {
    title: '互动游戏时间',
    time: '16:30 - 18:00',
    detail: `
      <div class="game-rule">
        <div class="rule-title">🎮 游戏项目清单</div>
        
        <div class="game-item">
          <div class="game-name">🎯 套圈�?/div>
          <div class="game-score">得分规则：套�?�?1分，套中3�?3分，套中5�?5�?/div>
        </div>
        
        <div class="game-item">
          <div class="game-name">🏺 投壶</div>
          <div class="game-score">得分规则：投�?�?2分，投中5�?4分，全中+5�?/div>
        </div>
        
        <div class="game-item">
          <div class="game-name">🎲 摇筛�?/div>
          <div class="game-score">得分规则：豹�?5分，顺子+3分，对子+1�?/div>
        </div>
        
        <div class="game-item">
          <div class="game-name">🃏 牛牛/划拳</div>
          <div class="game-score">得分规则：赢一局+1分，连赢3局+3分，连赢5局+5�?/div>
        </div>
        
        <div class="game-item">
          <div class="game-name">�?足球射门</div>
          <div class="game-score">得分规则：进1�?1分，�?�?3分，�?�?5�?/div>
        </div>
        
        <div class="game-item">
          <div class="game-name">🎮 王者荣耀</div>
          <div class="game-score">得分规则：获�?3分，MVP+5分，失败-1�?/div>
        </div>
        
        <div class="game-item">
          <div class="game-name">💧 抛水�?/div>
          <div class="game-score">得分规则：立�?�?2分，立住3�?4分，立住5�?5�?/div>
        </div>
        
        <div class="game-item">
          <div class="game-name">🎴 扑克游戏</div>
          <div class="game-score">得分规则：根据游戏类型，赢家+2分，输家-1�?/div>
        </div>
        
        <div class="game-item">
          <div class="game-name">🐊 鳄鱼/插剑玩具</div>
          <div class="game-score">得分规则：挑战成�?3分，失败-2�?/div>
        </div>
        
        <div class="game-item highlight-game">
          <div class="game-name">🪑 最终复活挑�?- 抢椅�?/div>
          <div class="game-score">
            规则：音乐停止时抢座位，未抢到者淘�?br>
            得分：冠�?5分，亚军+3分，季军+2分，淘汰-1�?
          </div>
        </div>
      </div>
    `
  },
  {
    title: '落日BBQ',
    time: '18:00 - 19:30',
    detail: `
      <div class="game-rule">
        <div class="rule-content">
          落日余晖下午餐串成一排、齐开大灯、拍摄氛围感大片、边烤肉边欣赏晚�?br>
          <br>
          💡 提示：分享美食照片到朋友圈并@活动官方账号可获�?<span class="score-badge">+1�?/span>
        </div>
      </div>
    `
  },
  {
    title: '篝火歌舞�?,
    time: '19:00 - 20:00',
    detail: `
      <div class="game-rule">
        <div class="rule-title">🎤 互动游戏环节</div>
        
        <div class="game-item">
          <div class="game-name">🥁 击鼓传花�?0轮）</div>
          <div class="game-score">
            规则：音乐停止时持花者上台，吃柠檬或苦瓜<br>
            得分：勇敢完�?2分，拒绝挑战-3�?
          </div>
        </div>
        
        <div class="game-item">
          <div class="game-name">🤝 喊数抱团�?0轮）</div>
          <div class="game-score">
            规则：主持人喊数字，参与者按数字抱团，落单者淘�?br>
            惩罚：上台自我介绍（1分钟�?br>
            得分：成功抱�?1分，落单但完成自我介�?2分，拒绝-2�?
          </div>
        </div>
        
        <div class="game-item">
          <div class="game-name">🎵 大合�?/div>
          <div class="game-score">
            全员参与，气氛热烈，每人+1�?
          </div>
        </div>
        
        <div class="game-item">
          <div class="game-name">🎭 个人才艺表演</div>
          <div class="game-score">
            规则：自愿上台唱歌、跳舞、表演才�?br>
            提示：需提前到后台准备BGM<br>
            得分：参与表�?3分，精彩表演+5�?
          </div>
        </div>
        
        <div class="game-item">
          <div class="game-name">👶 小朋友互�?/div>
          <div class="game-score">
            主持人邀请小朋友上台互动，参与即有礼�?br>
            家长陪同参与+2�?
          </div>
        </div>
      </div>
    `
  },
  {
    title: '璀璨烟火秀',
    time: '20:00 - 20:30',
    detail: `
      <div class="game-rule">
        <div class="rule-title">🎆 烟花表演</div>
        <div class="rule-content">
          <strong>1. 米兰之夜</strong> - 大型专业烟火表演<br>
          <strong>2. 仙女�?/strong> - 每车配发手持烟花，拍照打�?br>
          <strong>3. 加特林压�?/strong> - 震撼收尾，全场欢�?br>
          <br>
          💡 提示：拍摄烟花视频并分享可获�?<span class="score-badge">+2�?/span>
        </div>
      </div>
    `
  },
  {
    title: '积分兑奖 & 自由交流',
    time: '20:30 以后',
    detail: `
      <div class="game-rule">
        <div class="rule-title">🏆 积分兑换礼品</div>
        <div class="rule-content">
          <strong>积分排行榜：</strong><br>
          �?�?名（20分以上）：神秘大�?br>
          �?�?-3名（15-19分）：精美礼�?br>
          �?�?-10名（10-14分）：纪念品<br>
          �?参与奖（5-9分）：小礼物<br>
          <br>
          随后自由合影、整理垃圾、提醒安全驾驶返�?
        </div>
      </div>
    `
  }
]);

const handleLetterInput = (e) => {
  const value = e.target.value.toUpperCase().replace(/[^A-Z]/g, '');
  carLetter.value = value;
  loginForm.value.carNumber = value + carDigits.value;
  
  // 自动聚焦到数字输入框
  if (value.length === 1) {
    e.target.nextElementSibling?.nextElementSibling?.focus();
  }
};

const handleDigitsInput = (e) => {
  const value = e.target.value.toUpperCase().replace(/[^A-Z0-9]/g, '');
  carDigits.value = value;
  loginForm.value.carNumber = carLetter.value + value;
};

// 打开时间线详情弹�?
const openTimelineDetail = (index) => {
  currentTimelineIndex.value = index;
  showTimelinePopup.value = true;
};

const totalExpense = computed(() => {
  return expenses.value.reduce((sum, e) => sum + parseFloat(e.amount), 0).toFixed(2);
});

// 检查是否已登录且审核通过
const isApproved = computed(() => {
  return userRegistration.value && userRegistration.value.status === 'approved';
});

// 检查是否已报名（任何状态）
const hasRegistered = computed(() => {
  return userRegistration.value !== null;
});

const loadData = async () => {
  const { data } = await api.getActivity(route.params.id);
  activity.value = data.activity;
  
  // 分离照片和视�?
  const allMedia = data.photos || [];
  photos.value = allMedia.filter(m => m.type === 'image');
  videos.value = allMedia.filter(m => m.type === 'video');
  
  sponsors.value = data.sponsors;
  
  // 加载经费数据(所有已报名用户都可以看�?
  expenses.value = data.expenses || [];
  
  const { data: regs } = await api.getActivityRegistrations(route.params.id);
  registrations.value = regs;
  
  // 从localStorage恢复登录状�?
  const savedReg = localStorage.getItem(`user_reg_${route.params.id}`);
  if (savedReg) {
    userRegistration.value = JSON.parse(savedReg);
  }
};

const formatDate = (date) => {
  return new Date(date).toLocaleString('zh-CN');
};

const previewImage = (url) => {
  showImagePreview([url]);
};

const playExpenseVideo = (url) => {
  currentExpenseVideo.value = url;
  showExpenseVideoPopup.value = true;
};

const showMap = () => {
  if (!activity.value.locationLat || !activity.value.locationLng) {
    showToast('暂无地图信息');
    return;
  }
  showMapPopup.value = true;
  setTimeout(() => {
    initMap();
  }, 300);
};

const initMap = async () => {
  try {
    console.log('开始初始化活动详情地图...');
    const AMap = await window.loadAMap();
    console.log('地图API加载完成');
    
    if (map) {
      console.log('销毁旧地图实例');
      map.destroy();
    }
    
    const center = [activity.value.locationLng, activity.value.locationLat];
    console.log('地图中心�?', center);
    
    map = new AMap.Map('amap-container', { zoom: 15, center });
    new AMap.Marker({ position: center, map, title: activity.value.location });
    
    console.log('地图初始化完�?);
  } catch (e) {
    console.error('地图加载失败:', e);
    showToast('地图加载失败: ' + e.message);
  }
};

const uploadUserMedia = async (files) => {
  if (!isApproved.value) {
    showToast('请先登录并等待审核通过');
    return;
  }
  
  const loadingToast = showToast({
    type: 'loading',
    message: '上传�?..',
    forbidClick: true,
    duration: 0
  });
  
  try {
    const formData = new FormData();
    formData.append('uploadedBy', userRegistration.value.name);
    
    if (Array.isArray(files)) {
      files.forEach(file => formData.append('photos', file.file));
    } else {
      formData.append('photos', files.file);
    }
    
    await api.uploadUserPhotos(route.params.id, formData);
    loadingToast.clear();
    showToast('上传成功，等待审�?);
    userMedia.value = [];
  } catch (error) {
    loadingToast.clear();
    showToast('上传失败');
  }
};

const handleLogin = () => {
  showLoginDialog.value = true;
};

// 删除formatCarNumber，已被handleLetterInput和handleDigitsInput替代

const submitLogin = async () => {
  if (!loginForm.value.phone || !loginForm.value.carNumber) {
    showToast('请输入手机号和车牌号');
    return;
  }
  
  try {
    // 添加"�?前缀到车牌号
    const carNumberWithPrefix = `�?{loginForm.value.carNumber}`;
    
    console.log('登录验证:', {
      phone: loginForm.value.phone,
      carNumber: carNumberWithPrefix,
      activityId: route.params.id
    });
    
    const { data } = await api.verifyUser(route.params.id, {
      phone: loginForm.value.phone,
      carNumber: carNumberWithPrefix
    });
    
    console.log('验证成功:', data.registration);
    
    userRegistration.value = data.registration;
    
    // 保存到localStorage
    localStorage.setItem(`user_reg_${route.params.id}`, JSON.stringify(data.registration));
    
    showLoginDialog.value = false;
    
    if (data.registration.status === 'approved') {
      showToast('登录成功');
      // 重新加载数据无需调用,因为经费已经加载�?
    } else if (data.registration.status === 'pending') {
      showToast('您的报名正在审核�?);
    } else {
      showToast('您的报名未通过审核');
    }
  } catch (error) {
    console.error('登录验证失败:', error.response?.data);
    showToast(error.response?.data?.error || '验证失败');
  }
};

const handleShare = () => {
  const shareUrl = `${window.location.origin}/share/${route.params.id}`;
  
  if (navigator.share) {
    navigator.share({
      title: activity.value.title,
      text: `${activity.value.title} - 泉友米车友会`,
      url: shareUrl
    }).catch(() => {
      copyShareLink(shareUrl);
    });
  } else {
    copyShareLink(shareUrl);
  }
};

const copyShareLink = (url) => {
  navigator.clipboard.writeText(url).then(() => {
    showToast('分享链接已复�?);
  }).catch(() => {
    showToast('复制失败，请手动复制�? + url);
  });
};

onMounted(loadData);
</script>

<style scoped>
.detail {
  min-height: 100vh;
  background: #f8f9fa;
  padding-bottom: 140px;
}

.detail-header {
  position: relative;
  height: 280px;
  background-size: cover;
  background-position: center;
  background-color: #e8e8e8;
}

.header-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.6) 100%);
}

.header-back {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 2;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.3);
  border-radius: 50%;
  color: #fff;
  font-size: 20px;
  backdrop-filter: blur(10px);
}

.header-content {
  position: absolute;
  bottom: 24px;
  left: 16px;
  right: 16px;
  z-index: 1;
}

.activity-title {
  font-size: 24px;
  font-weight: bold;
  color: #fff;
  margin: 0;
  text-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.content {
  padding: 16px;
  margin-top: -20px;
  position: relative;
  z-index: 1;
}

.info-card {
  background: #fff;
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
  margin-bottom: 16px;
}

.info-item {
  display: flex;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #f0f0f0;
}

.info-item:last-child {
  border-bottom: none;
}

.info-arrow {
  font-size: 16px;
  color: #999;
  margin-left: 8px;
}

.info-icon {
  font-size: 24px;
  color: #FF6700;
  margin-right: 12px;
}

.info-text {
  flex: 1;
}

.info-label {
  font-size: 12px;
  color: #999;
  margin-bottom: 4px;
}

.info-value {
  font-size: 14px;
  color: #333;
  font-weight: 500;
}

.price-value {
  color: #FF6700;
  font-weight: 600;
  font-size: 16px;
}

.section {
  background: #fff;
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 16px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}

.section-title {
  font-size: 16px;
  font-weight: bold;
  margin: 0 0 16px;
  color: #333;
}

.section-title .count {
  color: #FF6700;
  font-size: 14px;
}

.description {
  font-size: 14px;
  line-height: 1.8;
  color: #666;
  white-space: pre-line;
}

.sponsor-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}

.sponsor-card {
  text-align: center;
}

.sponsor-logo {
  width: 50px;
  height: 50px;
  margin: 0 auto 6px;
  background-size: cover;
  background-position: center;
  background-color: #f5f5f5;
  border-radius: 10px;
}

.sponsor-name {
  font-size: 11px;
  color: #666;
  line-height: 1.3;
}

.photo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.photo-item {
  aspect-ratio: 1;
  border-radius: 8px;
  overflow: hidden;
}

.photo-img {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-color: #f5f5f5;
}

.media-section {
  margin-bottom: 20px;
}

.media-label {
  font-size: 14px;
  font-weight: 500;
  color: #666;
  margin-bottom: 12px;
}

.video-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.video-item {
  border-radius: 12px;
  overflow: hidden;
  background: #000;
}

.video-player {
  width: 100%;
  max-height: 300px;
  display: block;
}

.member-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.member-item {
  display: flex;
  align-items: center;
  gap: 12px;
}

.member-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #FF6700 0%, #FF8533 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: bold;
}

.member-info {
  flex: 1;
}

.member-name {
  font-size: 14px;
  color: #333;
  font-weight: 500;
  margin-bottom: 4px;
}

.member-car {
  font-size: 12px;
  color: #999;
}

.expense-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.expense-item {
  display: flex;
  flex-direction: column;
  padding: 16px;
  background: #fff;
  border-radius: 12px;
  border: 1px solid #f0f0f0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.expense-info {
  flex: 1;
}

.expense-name {
  font-size: 15px;
  color: #333;
  font-weight: 600;
  margin-bottom: 6px;
}

.expense-category {
  display: inline-block;
  font-size: 11px;
  color: #FF6700;
  background: #fff7e6;
  padding: 2px 8px;
  border-radius: 4px;
  margin-bottom: 8px;
}

.expense-media {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin-top: 12px;
}

.expense-media-item {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 8px;
  overflow: hidden;
  background: #f5f5f5;
  cursor: pointer;
  transition: transform 0.2s;
}

.expense-media-item:active {
  transform: scale(0.95);
}

.expense-media-item .van-image {
  width: 100%;
  height: 100%;
}

.expense-video {
  position: relative;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.expense-video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.expense-video .play-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 28px;
  color: #fff;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
}

.expense-amount {
  font-size: 15px;
  color: #FF6700;
  font-weight: bold;
  text-align: right;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed #f0f0f0;
}

.upload-section {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #f0f0f0;
}

.upload-tip {
  font-size: 12px;
  color: #999;
  margin-top: 8px;
}

.map-container {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.map-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  border-bottom: 1px solid #f0f0f0;
}

.map-header h3 {
  margin: 0;
  font-size: 16px;
}

.map-header .van-icon {
  font-size: 20px;
  color: #999;
}

.footer-action {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 12px 16px;
  background: #fff;
  box-shadow: 0 -2px 12px rgba(0,0,0,0.08);
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.action-button {
  height: 48px;
  background: linear-gradient(135deg, #FF6700 0%, #FF8533 100%);
  border: none;
  font-weight: 600;
}

.action-button .van-icon {
  margin-right: 4px;
}

.login-button {
  margin-top: 0;
  background: linear-gradient(135deg, #FF6700 0%, #FF8533 100%) !important;
  color: #fff !important;
}

.share-btn {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 16px;
  background: rgba(255,255,255,0.95);
  border-radius: 20px;
  color: #FF6700;
  font-size: 14px;
  font-weight: 500;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  backdrop-filter: blur(10px);
  cursor: pointer;
}

.login-form {
  padding: 16px;
}

.permission-tip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px;
  background: #fff7e6;
  border-radius: 8px;
  color: #ff9800;
  font-size: 14px;
}

.permission-tip .van-icon {
  font-size: 18px;
}

.video-player-popup {
  padding: 20px;
  background: #000;
  border-radius: 16px;
}

.popup-video {
  width: 100%;
  max-height: 60vh;
  border-radius: 12px;
}

/* 车牌输入样式 */
.license-plate-input {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  background: linear-gradient(135deg, #FF6700 0%, #FF8533 100%);
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(255, 103, 0, 0.3);
  width: fit-content;
  margin-left: auto;
}

.plate-prefix {
  color: #fff;
  font-weight: 700;
  font-size: 16px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

.plate-letter {
  width: 22px;
  height: 28px;
  border: 2px solid rgba(255,255,255,0.9);
  border-radius: 3px;
  background: #fff;
  text-align: center;
  font-size: 16px;
  font-weight: 700;
  color: #333;
  outline: none;
  text-transform: uppercase;
  padding: 0;
}

.plate-dot {
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  margin: 0 1px;
}

.plate-digits {
  width: 110px;
  height: 28px;
  border: 2px solid rgba(255,255,255,0.9);
  border-radius: 3px;
  background: #fff;
  text-align: center;
  font-size: 16px;
  font-weight: 700;
  color: #333;
  outline: none;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 0;
}

.plate-letter::placeholder,
.plate-digits::placeholder {
  color: #ddd;
  font-weight: 400;
}

.timeline {
  position: relative;
  padding-left: 32px;
}

.timeline::before {
  content: '';
  position: absolute;
  left: 8px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: linear-gradient(180deg, #FF6700 0%, #FF8533 100%);
}

.timeline-item {
  position: relative;
  padding-bottom: 24px;
}

.timeline-item-last {
  padding-bottom: 0;
}

.timeline-dot {
  position: absolute;
  left: -28px;
  top: 4px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid #FF6700;
  box-shadow: 0 0 0 3px rgba(255, 103, 0, 0.1);
  z-index: 1;
}

.timeline-content {
  background: #fff;
  border-radius: 12px;
  padding: 12px 16px;
  border: 1px solid #f0f0f0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  transition: all 0.2s;
  cursor: pointer;
}

.timeline-content:active {
  transform: scale(0.98);
  box-shadow: 0 4px 12px rgba(255, 103, 0, 0.15);
}

.timeline-time {
  font-size: 13px;
  color: #FF6700;
  font-weight: 600;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.timeline-time::before {
  content: '🕐';
  margin-right: 4px;
}

.detail-arrow {
  font-size: 14px;
  color: #FF6700;
  transition: transform 0.2s;
}

.timeline-content:active .detail-arrow {
  transform: translateX(3px);
}

.timeline-title {
  font-size: 15px;
  color: #333;
  font-weight: 600;
  margin-bottom: 8px;
}

.timeline-desc {
  font-size: 13px;
  color: #666;
  line-height: 1.6;
}

.timeline-brief {
  font-size: 13px;
  color: #666;
  line-height: 1.6;
  margin-bottom: 0;
}

/* 弹窗样式 */
.timeline-popup {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #fff;
}

.popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid #f0f0f0;
  background: linear-gradient(135deg, #FF6700 0%, #FF8533 100%);
}

.popup-header h3 {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  color: #fff;
}

.popup-header .van-icon {
  font-size: 22px;
  color: #fff;
  cursor: pointer;
}

.popup-content {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}

.popup-time {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: #FF6700;
  font-weight: 600;
  margin-bottom: 16px;
  padding: 8px 12px;
  background: #fff7e6;
  border-radius: 8px;
  width: fit-content;
}

.popup-time .van-icon {
  font-size: 16px;
}

.popup-detail {
  font-size: 14px;
  line-height: 1.8;
  color: #333;
}

/* 游戏规则样式 */
.game-rule {
  margin-top: 12px;
  padding: 12px;
  background: #f8f9fa;
  border-radius: 8px;
  border-left: 3px solid #FF6700;
}

.rule-title {
  font-size: 14px;
  font-weight: 600;
  color: #333;
  margin-bottom: 8px;
}

.rule-content {
  font-size: 13px;
  color: #666;
  line-height: 1.8;
}

.game-item {
  margin-bottom: 12px;
  padding: 10px;
  background: #fff;
  border-radius: 6px;
  border: 1px solid #e8e8e8;
}

.game-item:last-child {
  margin-bottom: 0;
}

.highlight-game {
  background: linear-gradient(135deg, #fff7e6 0%, #fff 100%);
  border-color: #FF6700;
}

.game-name {
  font-size: 14px;
  font-weight: 600;
  color: #333;
  margin-bottom: 6px;
}

.game-score {
  font-size: 12px;
  color: #666;
  line-height: 1.6;
}

.score-badge {
  display: inline-block;
  padding: 2px 8px;
  background: linear-gradient(135deg, #FF6700 0%, #FF8533 100%);
  color: #fff;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
  margin: 0 2px;
}

</style>
