<template>
  <div class="activity-manage">
    <van-nav-bar 
      :title="activity.title" 
      left-arrow 
      @click-left="$router.back()"
    >
      <template #right>
        <van-icon name="edit" @click="editActivity" />
      </template>
    </van-nav-bar>
    
    <van-tabs v-model:active="activeTab" color="#FF6700" title-active-color="#FF6700">
      <van-tab title="基本信息" name="info">
        <div class="tab-content">
          <!-- 统计摘要 -->
          <div class="info-stats">
            <div class="stat-box">
              <van-icon name="bill-o" color="#FF6700" />
              <div class="stat-text">
                <div class="stat-num">¥{{ totalExpense }}</div>
                <div class="stat-desc">总支出</div>
              </div>
            </div>
            <div class="stat-box">
              <van-icon name="friends-o" color="#f5576c" />
              <div class="stat-text">
                <div class="stat-num">{{ registrations.length }}</div>
                <div class="stat-desc">报名人数</div>
              </div>
            </div>
            <div class="stat-box">
              <van-icon name="photo-o" color="#00f2fe" />
              <div class="stat-text">
                <div class="stat-num">{{ approvedPhotos.length + pendingPhotos.length }}</div>
                <div class="stat-desc">媒体数量</div>
              </div>
            </div>
            <div class="stat-box">
              <van-icon name="clock-o" color="#ffa940" />
              <div class="stat-text">
                <div class="stat-num">{{ registrations.filter(r => r.status === 'pending').length + pendingPhotos.length }}</div>
                <div class="stat-desc">待审核</div>
              </div>
            </div>
          </div>
          
          <!-- 基本信息 -->
          <van-cell-group>
            <van-cell title="活动标题" :value="activity.title" />
            <van-cell title="人均费用" :value="activity.price ? `¥${activity.price}` : '免费'" />
            <van-cell title="活动预算" :value="activity.budget ? `¥${activity.budget}` : '未设置'" />
            <van-cell title="活动地点" :value="activity.location" />
            <van-cell title="开始时间" :value="formatDate(activity.startTime)" />
            <van-cell title="报名截止" :value="formatDate(activity.registrationDeadline)" />
            <van-cell title="状态" :value="activity.status === 'upcoming' ? '进行中' : '已结束'" />
            <van-cell title="报名开关" center>
              <template #right-icon>
                <van-switch 
                  v-model="activity.registrationEnabled" 
                  size="24px"
                  @change="toggleRegistration"
                  active-color="#FF6700"
                />
              </template>
            </van-cell>
            <van-cell title="活动描述" :label="activity.description" />
          </van-cell-group>
        </div>
      </van-tab>
      
      <van-tab title="经费管理" name="expenses">
        <div class="tab-content">
          <!-- 经费统计 -->
          <div class="info-stats">
            <div class="stat-box">
              <van-icon name="balance-pay" color="#FF6700" />
              <div class="stat-text">
                <div class="stat-num">¥{{ totalExpense }}</div>
                <div class="stat-desc">总支出</div>
              </div>
            </div>
            <div class="stat-box">
              <van-icon name="balance-o" color="#07c160" />
              <div class="stat-text">
                <div class="stat-num">¥{{ activity.budget || '0' }}</div>
                <div class="stat-desc">预算</div>
              </div>
            </div>
            <div class="stat-box">
              <van-icon name="chart-trending-o" :color="activity.budget && totalExpense > activity.budget ? '#ee0a24' : '#ffa940'" />
              <div class="stat-text">
                <div class="stat-num" :style="{ color: activity.budget && totalExpense > activity.budget ? '#ee0a24' : '#333' }">
                  {{ activity.budget ? ((totalExpense / activity.budget) * 100).toFixed(1) : '0' }}%
                </div>
                <div class="stat-desc">使用率</div>
              </div>
            </div>
            <div class="stat-box">
              <van-icon name="records" color="#f5576c" />
              <div class="stat-text">
                <div class="stat-num">{{ expenses.length }}</div>
                <div class="stat-desc">经费项</div>
              </div>
            </div>
          </div>
          
          <div class="expense-list">
            <div v-for="expense in expenses" :key="expense.id" class="expense-item">
              <div class="expense-icon" :style="{ background: getCategoryStyle(expense.category).gradient }">
                <van-icon :name="getCategoryStyle(expense.category).icon" />
              </div>
              <div class="expense-content">
                <div class="expense-name">{{ expense.item }}</div>
                <div class="expense-meta">
                  <span class="expense-cat">{{ expense.category }}</span>
                  <span v-if="expense.note" class="expense-note">{{ expense.note }}</span>
                </div>
              </div>
              <div class="expense-right">
                <div class="expense-amount">¥{{ expense.amount }}</div>
                <div class="expense-actions">
                  <van-icon name="edit" @click="editExpense(expense)" />
                  <van-icon name="delete-o" @click="deleteExpenseItem(expense.id)" />
                </div>
              </div>
            </div>
          </div>
          
          <!-- 悬浮添加按钮 -->
          <div class="float-add-btn" @click="showExpenseForm = true">
            <van-icon name="plus" />
          </div>
        </div>
      </van-tab>
      
      <van-tab title="赞助商" name="sponsors">
        <div class="tab-content">
          <div class="sponsor-list">
            <div v-for="sponsor in sponsors" :key="sponsor.id" class="sponsor-card">
              <div class="sponsor-logo-wrapper">
                <div class="sponsor-logo" :style="sponsor.logo ? { backgroundImage: `url(${sponsor.logo})` } : {}">
                  <van-icon v-if="!sponsor.logo" name="shop-o" />
                </div>
              </div>
              <div class="sponsor-details">
                <div class="sponsor-header">
                  <span class="sponsor-name">{{ sponsor.name }}</span>
                  <span class="sponsor-badge" :class="sponsor.type === 'title' ? 'badge-title' : 'badge-sponsor'">
                    {{ sponsor.type === 'title' ? '冠名' : '赞助' }}
                  </span>
                </div>
                <div v-if="sponsor.link" class="sponsor-link">
                  <van-icon name="link-o" />
                  <span>{{ sponsor.link }}</span>
                </div>
              </div>
              <div class="sponsor-ops">
                <van-icon name="edit" @click="editSponsor(sponsor)" />
                <van-icon name="delete-o" @click="deleteSponsorItem(sponsor.id)" />
              </div>
            </div>
          </div>
          
          <van-empty v-if="!sponsors.length" description="暂无赞助商" />
          
          <!-- 悬浮添加按钮 -->
          <div class="float-add-btn" @click="showSponsorForm = true">
            <van-icon name="plus" />
          </div>
        </div>
      </van-tab>
      
      <van-tab title="报名情况" name="registrations">
        <div class="tab-content">
          <!-- 统计栏 -->
          <div class="info-stats reg-stats">
            <div class="stat-box" :class="{ active: activeFilter === 'pending' }" @click="setFilter('pending')">
              <van-icon name="clock-o" color="#ffa940" />
              <div class="stat-text">
                <div class="stat-num">{{ registrations.filter(r => r.status === 'pending').length }}</div>
                <div class="stat-desc">待审核</div>
              </div>
            </div>
            <div class="stat-box" :class="{ active: activeFilter === 'approved' }" @click="setFilter('approved')">
              <van-icon name="passed" color="#07c160" />
              <div class="stat-text">
                <div class="stat-num">{{ registrations.filter(r => r.status === 'approved').length }}</div>
                <div class="stat-desc">已通过</div>
              </div>
            </div>
            <div class="stat-box" :class="{ active: activeFilter === 'rejected' }" @click="setFilter('rejected')">
              <van-icon name="close" color="#ee0a24" />
              <div class="stat-text">
                <div class="stat-num">{{ registrations.filter(r => r.status === 'rejected').length }}</div>
                <div class="stat-desc">已拒绝</div>
              </div>
            </div>
            <div class="stat-box" :class="{ active: activeFilter === 'all' }" @click="setFilter('all')">
              <van-icon name="friends-o" color="#FF6700" />
              <div class="stat-text">
                <div class="stat-num">{{ registrations.length }}</div>
                <div class="stat-desc">总报名</div>
              </div>
            </div>
            <div class="stat-box" :class="{ active: activeFilter === 'checkedIn' }" @click="setFilter('checkedIn')">
              <van-icon name="success" color="#07c160" />
              <div class="stat-text">
                <div class="stat-num">{{ registrations.filter(r => r.checkInStatus).length }}</div>
                <div class="stat-desc">已签到</div>
              </div>
            </div>
            <div class="stat-box" :class="{ active: activeFilter === 'notCheckedIn' }" @click="setFilter('notCheckedIn')">
              <van-icon name="clock" color="#999" />
              <div class="stat-text">
                <div class="stat-num">{{ registrations.filter(r => !r.checkInStatus).length }}</div>
                <div class="stat-desc">未签到</div>
              </div>
            </div>
          </div>
          
          <!-- 搜索框 -->
          <div class="search-box">
            <van-search 
              v-model="regSearchKeyword" 
              placeholder="搜索手机号或车牌号"
              @search="onRegSearch"
              @clear="onRegSearchClear"
            />
          </div>
          
          <div class="reg-list">
            <div v-for="reg in filteredRegistrations" :key="reg.id" class="reg-item" :class="{ 'checked-in': reg.checkInStatus, 'status-approved': reg.status === 'approved', 'status-rejected': reg.status === 'rejected' }" @click="showRegDetail(reg)">
              <div class="reg-left">
                <div class="reg-avatar">{{ reg.name ? reg.name.charAt(0) : '?' }}</div>
                <div class="reg-main">
                  <div class="reg-top">
                    <span class="reg-name">{{ reg.name || '未知' }}</span>
                    <div class="reg-tags">
                      <van-tag v-if="reg.checkInStatus" type="success" size="medium">
                        <van-icon name="success" /> 已签到
                      </van-tag>
                    </div>
                  </div>
                  <div class="reg-info">
                    <a :href="`tel:${reg.phone}`" class="info-link" @click.stop>
                      <van-icon name="phone-o" />{{ reg.phone }}
                    </a>
                    <span v-if="reg.carNumber" class="info-text car-number" @click.stop="copyCarNumber(reg.carNumber)">
                      <van-icon name="certificate" />{{ reg.carNumber }}
                    </span>
                    <span class="info-text people-count">
                      <van-icon name="friends-o" />{{ reg.peopleCount || 1 }}人
                    </span>
                  </div>
                </div>
              </div>
              <div class="reg-right">
                <van-icon name="arrow" color="#ccc" />
              </div>
            </div>
          </div>
          
          <van-empty v-if="filteredRegistrations.length === 0" :description="regSearchKeyword ? '未找到匹配的报名' : '暂无报名'" />
        </div>
      </van-tab>
      
      <van-tab title="媒体管理" name="media">
        <div class="tab-content">
          <!-- 统计摘要 -->
          <div class="info-stats">
            <div class="stat-box">
              <van-icon name="photo-o" color="#FF6700" />
              <div class="stat-text">
                <div class="stat-num">{{ approvedPhotos.filter(p => p.type === 'image').length + pendingPhotos.filter(p => p.type === 'image').length }}</div>
                <div class="stat-desc">图片</div>
              </div>
            </div>
            <div class="stat-box">
              <van-icon name="video-o" color="#f5576c" />
              <div class="stat-text">
                <div class="stat-num">{{ approvedPhotos.filter(p => p.type === 'video').length + pendingPhotos.filter(p => p.type === 'video').length }}</div>
                <div class="stat-desc">视频</div>
              </div>
            </div>
            <div class="stat-box">
              <van-icon name="clock-o" color="#ffa940" />
              <div class="stat-text">
                <div class="stat-num">{{ pendingPhotos.length }}</div>
                <div class="stat-desc">待审核</div>
              </div>
            </div>
            <div class="stat-box">
              <van-icon name="passed" color="#07c160" />
              <div class="stat-text">
                <div class="stat-num">{{ approvedPhotos.length }}</div>
                <div class="stat-desc">已通过</div>
              </div>
            </div>
          </div>
          
          <!-- 待审核 -->
          <div v-if="pendingPhotos.length" class="media-section">
            <div class="section-title">
              <span>待审核</span>
              <van-badge :content="pendingPhotos.length" />
            </div>
            <div class="media-list">
              <div v-for="photo in pendingPhotos" :key="photo.id" class="media-card">
                <div class="card-thumb" @click="photo.type === 'image' ? previewImage(photo.url) : playVideo(photo.url)">
                  <van-image v-if="photo.type === 'image'" :src="photo.url" fit="cover" />
                  <div v-else class="video-thumb">
                    <video :src="photo.url"></video>
                    <van-icon name="play-circle-o" class="play-btn" />
                  </div>
                </div>
                <div class="card-info">
                  <div class="info-row">
                    <van-tag :type="photo.type === 'image' ? 'primary' : 'success'" plain size="mini">
                      {{ photo.type === 'image' ? '图片' : '视频' }}
                    </van-tag>
                    <span class="uploader">{{ photo.uploadedBy || '用户' }}</span>
                  </div>
                  <div class="action-row">
                    <van-button size="mini" type="success" plain @click="approvePhoto(photo.id, 'approved')">通过</van-button>
                    <van-button size="mini" type="danger" plain @click="approvePhoto(photo.id, 'rejected')">拒绝</van-button>
                    <van-button size="mini" type="warning" plain @click="deletePhoto(photo.id)">删除</van-button>
                  </div>
                </div>
              </div>
            </div>
          </div>
          
          <!-- 已通过 -->
          <div v-if="approvedPhotos.length" class="media-section">
            <div class="section-title">
              <span>已通过</span>
              <van-badge :content="approvedPhotos.length" color="#07c160" />
            </div>
            <div class="media-grid">
              <div v-for="photo in approvedPhotos" :key="photo.id" class="grid-item" @click="photo.type === 'image' ? previewImage(photo.url) : playVideo(photo.url)">
                <van-image v-if="photo.type === 'image'" :src="photo.url" fit="cover" />
                <div v-else class="video-thumb">
                  <video :src="photo.url"></video>
                  <van-icon name="play-circle-o" class="play-btn" />
                </div>
                <van-icon name="cross" class="del-btn" @click.stop="deletePhoto(photo.id)" />
              </div>
            </div>
          </div>
          
          <van-empty v-if="!pendingPhotos.length && !approvedPhotos.length" description="暂无媒体" />
          
          <!-- 悬浮上传按钮 -->
          <van-uploader 
            v-model="photoFiles" 
            multiple 
            :max-count="10" 
            :after-read="uploadPhotos"
            accept="image/*,video/*"
          >
            <div class="float-add-btn">
              <van-icon name="photograph" />
            </div>
          </van-uploader>
        </div>
      </van-tab>
    </van-tabs>
    
    <!-- 编辑活动弹窗 -->
    <van-popup v-model:show="showActivityForm" position="bottom" round>
      <div class="form-popup">
        <div class="popup-header">
          <h3>编辑活动</h3>
          <van-icon name="cross" @click="showActivityForm = false" />
        </div>
        <van-form @submit="submitActivity" class="popup-form">
          <van-cell-group>
            <van-field v-model="activityForm.title" label="活动标题" placeholder="请输入活动标题" required />
            <van-field v-model="activityForm.description" label="活动描述" type="textarea" placeholder="请输入活动描述" rows="3" autosize />
            <van-field 
              v-model="activityForm.price" 
              label="人均费用" 
              type="number" 
              placeholder="请输入人均费用"
            >
              <template #left-icon>
                <van-icon name="gold-coin-o" style="margin-right: 8px;" />
              </template>
              <template #button>
                <span style="color: #999;">元</span>
              </template>
            </van-field>
            <van-field 
              v-model="activityForm.budget" 
              label="活动预算" 
              type="number" 
              placeholder="请输入预算金额"
            >
              <template #left-icon>
                <van-icon name="balance-o" style="margin-right: 8px;" />
              </template>
            </van-field>
            <van-field 
              v-model="activityForm.location" 
              label="活动地点" 
              placeholder="点击选择地点"
              readonly
              is-link
              required
              :rules="[{ required: true, message: '请选择活动地点' }]"
              @click="showMapPicker = true"
            >
              <template #left-icon>
                <van-icon name="location-o" style="margin-right: 8px;" />
              </template>
            </van-field>
            <van-field 
              v-model="startTimeDisplay" 
              label="开始时间" 
              placeholder="请选择开始时间"
              readonly
              is-link
              required
              :rules="[{ required: true, message: '请选择开始时间' }]"
              @click="showStartTimePicker = true"
            >
              <template #left-icon>
                <van-icon name="clock-o" style="margin-right: 8px;" />
              </template>
            </van-field>
            <van-field 
              v-model="deadlineDisplay" 
              label="报名截止" 
              placeholder="请选择报名截止时间"
              readonly
              is-link
              required
              :rules="[{ required: true, message: '请选择报名截止时间' }]"
              @click="showDeadlinePicker = true"
            >
              <template #left-icon>
                <van-icon name="calendar-o" style="margin-right: 8px;" />
              </template>
            </van-field>
          </van-cell-group>
          <div class="form-actions">
            <van-button round block type="primary" native-type="submit" size="large">保存修改</van-button>
          </div>
        </van-form>
      </div>
    </van-popup>
    
    <!-- 开始时间选择器 -->
    <van-popup v-model:show="showStartTimePicker" position="bottom" round>
      <div class="datetime-picker-popup">
        <div class="picker-header">
          <van-button size="small" @click="showStartTimePicker = false">取消</van-button>
          <h3>选择开始时间</h3>
          <van-button size="small" type="primary" @click="confirmStartTime">确定</van-button>
        </div>
        <div class="picker-body">
          <input 
            type="datetime-local" 
            v-model="startTimeInput"
            class="datetime-input"
          />
        </div>
      </div>
    </van-popup>
    
    <!-- 报名截止时间选择器 -->
    <van-popup v-model:show="showDeadlinePicker" position="bottom" round>
      <div class="datetime-picker-popup">
        <div class="picker-header">
          <van-button size="small" @click="showDeadlinePicker = false">取消</van-button>
          <h3>选择报名截止时间</h3>
          <van-button size="small" type="primary" @click="confirmDeadline">确定</van-button>
        </div>
        <div class="picker-body">
          <input 
            type="datetime-local" 
            v-model="deadlineInput"
            class="datetime-input"
          />
        </div>
      </div>
    </van-popup>
    
    <!-- 地图选点弹窗 -->
    <van-popup v-model:show="showMapPicker" position="bottom" round :style="{ height: '80%' }">
      <div class="map-picker">
        <div class="map-picker-header">
          <van-icon name="arrow-left" @click="showMapPicker = false" />
          <h3>选择地点</h3>
          <van-button type="primary" size="small" @click="confirmLocation">确定</van-button>
        </div>
        <div class="map-search">
          <van-search 
            v-model="searchKeyword" 
            placeholder="搜索地点" 
            @search="searchLocation"
            @clear="clearSearch"
            show-action
            action-text="搜索"
            @click-right-icon="searchLocation"
          />
        </div>
        <div v-if="searchResults.length" class="search-results">
          <div 
            v-for="(result, index) in searchResults" 
            :key="index" 
            class="search-result-item"
            @click="selectSearchResult(result)"
          >
            <div class="result-name">{{ result.name }}</div>
            <div class="result-address">{{ result.address }}</div>
          </div>
        </div>
        <div id="map-picker-container-manage" class="map-container"></div>
        <div class="selected-location">
          <van-icon name="location-o" />
          <span>{{ selectedLocation.name || '请在地图上选择位置' }}</span>
        </div>
      </div>
    </van-popup>
    
    <!-- 经费表单弹窗 -->
    <van-popup v-model:show="showExpenseForm" position="bottom" round>
      <div class="form-popup">
        <div class="popup-header">
          <h3>{{ expenseForm.id ? '编辑经费' : '添加经费' }}</h3>
          <van-icon name="cross" @click="showExpenseForm = false" />
        </div>
        <van-form @submit="submitExpense" class="popup-form">
          <van-cell-group>
            <van-field v-model="expenseForm.item" label="项目" placeholder="例如：场地费" required />
            <van-field v-model="expenseForm.amount" label="金额" type="number" placeholder="请输入金额" required />
            <van-field 
              v-model="expenseForm.category" 
              label="分类" 
              placeholder="选择或输入分类"
              is-link
              readonly
              @click="showCategoryPicker = true"
            />
            <van-field v-model="expenseForm.note" label="备注" type="textarea" placeholder="备注信息" rows="2" autosize />
            <van-field name="media" label="照片/视频">
              <template #input>
                <div class="expense-media-upload">
                  <van-uploader 
                    v-model="expenseMediaFiles" 
                    multiple 
                    :max-count="5"
                    accept="image/*,video/*"
                    :after-read="onExpenseMediaRead"
                  >
                    <van-button icon="photograph" type="primary" size="small">
                      上传 ({{ expenseForm.media.length + expenseMediaFiles.length }}/5)
                    </van-button>
                  </van-uploader>
                  <div v-if="expenseForm.media.length" class="existing-media">
                    <div v-for="(item, index) in expenseForm.media" :key="index" class="media-thumb">
                      <van-image v-if="item.type === 'image'" :src="item.url" fit="cover" />
                      <video v-else :src="item.url" class="video-thumb"></video>
                      <van-icon name="cross" class="remove-icon" @click="removeExpenseMedia(index)" />
                    </div>
                  </div>
                </div>
              </template>
            </van-field>
          </van-cell-group>
          <div class="form-actions">
            <van-button round block type="primary" native-type="submit" size="large">保存</van-button>
          </div>
        </van-form>
      </div>
    </van-popup>
    
    <!-- 分类选择器 -->
    <van-popup v-model:show="showCategoryPicker" position="bottom" round>
      <div class="category-picker">
        <div class="picker-header">
          <h3>选择分类</h3>
          <van-icon name="cross" @click="showCategoryPicker = false" />
        </div>
        <div class="category-list">
          <div 
            v-for="cat in expenseCategories" 
            :key="cat.name" 
            class="category-item"
            @click="selectCategory(cat.name)"
          >
            <div class="category-icon" :style="{ background: cat.gradient }">
              <van-icon :name="cat.icon" />
            </div>
            <span>{{ cat.name }}</span>
          </div>
          <div class="category-item" @click="showCustomCategory = true">
            <div class="category-icon" style="background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);">
              <van-icon name="add-o" />
            </div>
            <span>自定义</span>
          </div>
        </div>
      </div>
    </van-popup>
    
    <!-- 自定义分类输入 -->
    <van-dialog 
      v-model:show="showCustomCategory" 
      title="自定义分类" 
      show-cancel-button
      @confirm="confirmCustomCategory"
    >
      <div style="padding: 16px;">
        <van-field v-model="customCategoryName" placeholder="请输入分类名称" />
      </div>
    </van-dialog>
    
    <!-- 赞助商表单弹窗 -->
    <van-popup v-model:show="showSponsorForm" position="bottom" round>
      <div class="form-popup">
        <div class="popup-header">
          <h3>{{ sponsorForm.id ? '编辑赞助商' : '添加赞助商' }}</h3>
          <van-icon name="cross" @click="showSponsorForm = false" />
        </div>
        <van-form @submit="submitSponsor" class="popup-form">
          <van-cell-group>
            <van-field v-model="sponsorForm.name" label="名称" placeholder="请输入赞助商名称" required />
            <van-field name="type" label="类型">
              <template #input>
                <van-radio-group v-model="sponsorForm.type" direction="horizontal">
                  <van-radio name="sponsor">赞助</van-radio>
                  <van-radio name="title">冠名</van-radio>
                </van-radio-group>
              </template>
            </van-field>
            <van-field v-model="sponsorForm.link" label="链接" placeholder="官网链接（选填）" />
            <van-field name="logo" label="Logo">
              <template #input>
                <van-uploader 
                  v-model="sponsorLogo" 
                  :max-count="1"
                  :after-read="onLogoRead"
                  accept="image/*"
                >
                  <van-button icon="plus" type="primary" size="small">选择图片</van-button>
                </van-uploader>
              </template>
            </van-field>
          </van-cell-group>
          <div class="form-actions">
            <van-button round block type="primary" native-type="submit" size="large">保存</van-button>
          </div>
        </van-form>
      </div>
    </van-popup>
    
    <!-- 视频播放弹窗 -->
    <van-popup v-model:show="showVideoPlayer" position="center" round :style="{ width: '90%' }">
      <div class="video-player-popup">
        <video :src="currentVideoUrl" controls autoplay class="popup-video"></video>
      </div>
    </van-popup>
    
    <!-- 修改人数弹窗 -->
    <van-popup v-model:show="showPeopleCountDialog" position="center" round :style="{ width: '80%' }">
      <div class="people-count-dialog">
        <div class="dialog-header">
          <h3>修改人数</h3>
          <van-icon name="cross" @click="showPeopleCountDialog = false" />
        </div>
        <div class="dialog-content">
          <div class="count-info">
            <span class="info-label">{{ currentEditReg.name }}</span>
            <span class="info-desc">当前人数：{{ currentEditReg.peopleCount || 1 }}人</span>
          </div>
          <van-stepper v-model="newPeopleCount" min="1" max="20" />
        </div>
        <div class="dialog-actions">
          <van-button block type="primary" @click="confirmPeopleCount">确定</van-button>
        </div>
      </div>
    </van-popup>
    
    <!-- 报名详情弹窗 -->
    <van-popup v-model:show="showRegDetailDialog" position="bottom" round>
      <div class="reg-detail-popup">
        <div class="popup-header">
          <h3>报名详情</h3>
          <van-icon name="cross" @click="showRegDetailDialog = false" />
        </div>
        <div class="detail-content">
          <div class="detail-section">
            <div class="detail-row">
              <span class="detail-label">姓名</span>
              <span class="detail-value">{{ currentReg.name || '未知' }}</span>
            </div>
            <div class="detail-row">
              <span class="detail-label">电话</span>
              <a :href="`tel:${currentReg.phone}`" class="detail-value detail-link">
                <van-icon name="phone-o" />{{ currentReg.phone }}
              </a>
            </div>
            <div class="detail-row" v-if="currentReg.carNumber">
              <span class="detail-label">车牌号</span>
              <span class="detail-value detail-link" @click="copyCarNumber(currentReg.carNumber)">
                <van-icon name="certificate" />{{ currentReg.carNumber }}
              </span>
            </div>
            <div class="detail-row" v-if="currentReg.carModel">
              <span class="detail-label">车型</span>
              <span class="detail-value">{{ currentReg.carModel }}</span>
            </div>
            <div class="detail-row">
              <span class="detail-label">人数</span>
              <span class="detail-value detail-link" @click="editPeopleCount(currentReg)">
                <van-icon name="friends-o" />{{ currentReg.peopleCount || 1 }}人
                <van-icon name="edit" size="14" />
              </span>
            </div>
            <div class="detail-row" v-if="currentReg.checkInTime">
              <span class="detail-label">签到时间</span>
              <span class="detail-value">{{ formatDate(currentReg.checkInTime) }}</span>
            </div>
            <div class="detail-row">
              <span class="detail-label">审核状态</span>
              <van-tag :type="currentReg.status === 'approved' ? 'success' : currentReg.status === 'rejected' ? 'danger' : 'warning'">
                {{ currentReg.status === 'approved' ? '已通过' : currentReg.status === 'rejected' ? '已拒绝' : '待审核' }}
              </van-tag>
            </div>
            <div class="detail-row">
              <span class="detail-label">签到状态</span>
              <van-tag :type="currentReg.checkInStatus ? 'success' : 'default'">
                {{ currentReg.checkInStatus ? '已签到' : '未签到' }}
              </van-tag>
            </div>
          </div>
        </div>
        <div class="detail-actions">
          <van-button 
            v-if="currentReg.status === 'approved'" 
            block
            size="large"
            :type="currentReg.checkInStatus ? 'default' : 'success'" 
            @click="toggleCheckInFromDetail"
          >
            {{ currentReg.checkInStatus ? '取消签到' : '签到' }}
          </van-button>
          <div v-if="currentReg.status === 'pending'" class="action-buttons">
            <van-button size="large" type="success" @click="approveFromDetail('approved')">通过</van-button>
            <van-button size="large" type="danger" @click="approveFromDetail('rejected')">拒绝</van-button>
          </div>
        </div>
      </div>
    </van-popup>
  </div>
</template>

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

const route = useRoute();
const router = useRouter();
const activeTab = ref('info');

const activity = ref({});
const expenses = ref([]);
const sponsors = ref([]);
const registrations = ref([]);
const sponsorLogo = ref([]);
const photoFiles = ref([]);
const pendingPhotos = ref([]);
const expenseMediaFiles = ref([]);
const approvedPhotos = ref([]);
const showVideoPlayer = ref(false);
const currentVideoUrl = ref('');
const regSearchKeyword = ref('');
const showPeopleCountDialog = ref(false);
const currentEditReg = ref({});
const newPeopleCount = ref(1);
const showRegDetailDialog = ref(false);
const currentReg = ref({});
const activeFilter = ref('all'); // 过滤器状态

const showActivityForm = ref(false);
const showExpenseForm = ref(false);
const showSponsorForm = ref(false);
const showMapPicker = ref(false);
const showStartTimePicker = ref(false);
const showDeadlinePicker = ref(false);
const showCategoryPicker = ref(false);
const showCustomCategory = ref(false);
const customCategoryName = ref('');
const searchKeyword = ref('');
const searchResults = ref([]);
const selectedLocation = ref({});

// 经费分类预设
const expenseCategories = ref([
  { name: '场地', icon: 'shop-o', gradient: 'linear-gradient(135deg, #FF6700 0%, #FF8533 100%)' },
  { name: '餐饮', icon: 'food-o', gradient: 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)' },
  { name: '交通', icon: 'logistics', gradient: 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)' },
  { name: '住宿', icon: 'hotel-o', gradient: 'linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)' },
  { name: '物料', icon: 'gift-o', gradient: 'linear-gradient(135deg, #fa709a 0%, #fee140 100%)' },
  { name: '人员', icon: 'friends-o', gradient: 'linear-gradient(135deg, #30cfd0 0%, #330867 100%)' },
  { name: '其他', icon: 'more-o', gradient: 'linear-gradient(135deg, #a8edea 0%, #fed6e3 100%)' }
]);
let pickerMap = null;
let pickerMarker = null;
let geocoder = null;

const activityForm = ref({
  title: '',
  description: '',
  location: '',
  locationLat: null,
  locationLng: null,
  startTime: '',
  registrationDeadline: ''
});

// 日期时间选择器的值
const startTimeInput = ref('');
const deadlineInput = ref('');

// 显示格式化的日期时间
const startTimeDisplay = computed(() => {
  if (!activityForm.value.startTime) return '';
  return formatDateTime(activityForm.value.startTime);
});

const deadlineDisplay = computed(() => {
  if (!activityForm.value.registrationDeadline) return '';
  return formatDateTime(activityForm.value.registrationDeadline);
});

const expenseForm = ref({
  id: null,
  item: '',
  amount: '',
  category: '',
  note: '',
  media: []
});

const sponsorForm = ref({
  id: null,
  name: '',
  type: 'sponsor',
  link: ''
});

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

// 过滤报名列表
const filteredRegistrations = computed(() => {
  let result = registrations.value;
  
  // 应用过滤器
  if (activeFilter.value === 'pending') {
    result = result.filter(r => r.status === 'pending');
  } else if (activeFilter.value === 'approved') {
    result = result.filter(r => r.status === 'approved');
  } else if (activeFilter.value === 'rejected') {
    result = result.filter(r => r.status === 'rejected');
  } else if (activeFilter.value === 'checkedIn') {
    result = result.filter(r => r.checkInStatus);
  } else if (activeFilter.value === 'notCheckedIn') {
    result = result.filter(r => !r.checkInStatus);
  }
  
  // 应用搜索关键词
  if (!regSearchKeyword.value || !regSearchKeyword.value.trim()) {
    return result;
  }
  
  const keyword = regSearchKeyword.value.toLowerCase().trim();
  return result.filter(reg => {
    const phone = reg.phone ? reg.phone.toLowerCase() : '';
    const carNumber = reg.carNumber ? reg.carNumber.toLowerCase() : '';
    const name = reg.name ? reg.name.toLowerCase() : '';
    
    return phone.includes(keyword) || 
           carNumber.includes(keyword) || 
           name.includes(keyword);
  });
});

// 设置过滤器
const setFilter = (filter) => {
  if (activeFilter.value === filter) {
    activeFilter.value = 'all'; // 再次点击取消过滤
  } else {
    activeFilter.value = filter;
  }
};

const onRegSearch = () => {
  // 搜索逻辑已在 computed 中处理
};

const onRegSearchClear = () => {
  regSearchKeyword.value = '';
};

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

// 格式化日期时间显示
const formatDateTime = (dateTime) => {
  if (!dateTime) return '';
  const date = new Date(dateTime);
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  const hours = String(date.getHours()).padStart(2, '0');
  const minutes = String(date.getMinutes()).padStart(2, '0');
  return `${year}-${month}-${day} ${hours}:${minutes}`;
};

// 开始时间确认
const confirmStartTime = () => {
  if (!startTimeInput.value) {
    showToast('请选择开始时间');
    return;
  }
  const selectedDate = new Date(startTimeInput.value);
  activityForm.value.startTime = selectedDate.toISOString();
  showStartTimePicker.value = false;
};

// 报名截止时间确认
const confirmDeadline = () => {
  if (!deadlineInput.value) {
    showToast('请选择报名截止时间');
    return;
  }
  const selectedDate = new Date(deadlineInput.value);
  if (activityForm.value.startTime && selectedDate > new Date(activityForm.value.startTime)) {
    showToast('报名截止时间不能晚于活动开始时间');
    return;
  }
  activityForm.value.registrationDeadline = selectedDate.toISOString();
  showDeadlinePicker.value = false;
};

// 获取分类样式
const getCategoryStyle = (categoryName) => {
  const category = expenseCategories.value.find(c => c.name === categoryName);
  if (category) {
    return { icon: category.icon, gradient: category.gradient };
  }
  // 默认样式
  return { 
    icon: 'bill-o', 
    gradient: 'linear-gradient(135deg, #a8edea 0%, #fed6e3 100%)' 
  };
};

// 选择分类
const selectCategory = (categoryName) => {
  expenseForm.value.category = categoryName;
  showCategoryPicker.value = false;
};

// 确认自定义分类
const confirmCustomCategory = () => {
  if (customCategoryName.value.trim()) {
    expenseForm.value.category = customCategoryName.value.trim();
    showCategoryPicker.value = false;
    customCategoryName.value = '';
  } else {
    showToast('请输入分类名称');
  }
};

const loadData = async () => {
  try {
    const { data } = await api.getActivity(route.params.id);
    activity.value = data.activity;
    expenses.value = data.expenses || [];
    sponsors.value = data.sponsors || [];
    
    // 加载媒体
    const allPhotos = data.photos || [];
    pendingPhotos.value = allPhotos.filter(p => p.status === 'pending');
    approvedPhotos.value = allPhotos.filter(p => p.status === 'approved');
    
    const { data: regs } = await api.getAllRegistrations({ activityId: route.params.id });
    registrations.value = regs;
  } catch (error) {
    showToast('加载失败');
  }
};

const editActivity = () => {
  activityForm.value = { ...activity.value };
  
  // 设置日期时间选择器的值
  if (activity.value.startTime) {
    const startDate = new Date(activity.value.startTime);
    startTimeInput.value = formatDateTimeLocal(startDate);
  }
  if (activity.value.registrationDeadline) {
    const deadlineDate = new Date(activity.value.registrationDeadline);
    deadlineInput.value = formatDateTimeLocal(deadlineDate);
  }
  
  showActivityForm.value = true;
};

// 格式化为 datetime-local 输入格式
const formatDateTimeLocal = (date) => {
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  const hours = String(date.getHours()).padStart(2, '0');
  const minutes = String(date.getMinutes()).padStart(2, '0');
  return `${year}-${month}-${day}T${hours}:${minutes}`;
};

const submitActivity = async () => {
  try {
    const formData = { ...activityForm.value };
    // 清理空字符串，转换为null
    if (formData.budget === '' || formData.budget === undefined) {
      formData.budget = null;
    }
    if (formData.price === '' || formData.price === undefined) {
      formData.price = null;
    }
    
    await api.updateActivity(activity.value.id, formData);
    showToast('保存成功');
    showActivityForm.value = false;
    loadData();
  } catch (error) {
    showToast('保存失败');
  }
};

const toggleRegistration = async (value) => {
  try {
    await api.updateActivity(activity.value.id, { registrationEnabled: value });
    showToast(value ? '报名已开启' : '报名已关闭');
  } catch (error) {
    showToast('操作失败');
    activity.value.registrationEnabled = !value;
  }
};

const submitExpense = async () => {
  try {
    const formData = new FormData();
    formData.append('activityId', activity.value.id);
    formData.append('item', expenseForm.value.item);
    formData.append('amount', expenseForm.value.amount);
    formData.append('category', expenseForm.value.category);
    formData.append('note', expenseForm.value.note);
    
    // 添加现有媒体
    if (expenseForm.value.media && expenseForm.value.media.length > 0) {
      formData.append('existingMedia', JSON.stringify(expenseForm.value.media));
    }
    
    // 添加新上传的媒体文件
    expenseMediaFiles.value.forEach(item => {
      if (item.file) {
        formData.append('media', item.file);
      }
    });
    
    if (expenseForm.value.id) {
      await api.updateExpense(expenseForm.value.id, formData);
      showToast('更新成功');
    } else {
      await api.addExpense(formData);
      showToast('添加成功');
    }
    showExpenseForm.value = false;
    expenseForm.value = { id: null, item: '', amount: '', category: '', note: '', media: [] };
    expenseMediaFiles.value = [];
    loadData();
  } catch (error) {
    showToast(expenseForm.value.id ? '更新失败' : '添加失败');
  }
};

const editExpense = (expense) => {
  expenseForm.value = { 
    ...expense,
    media: expense.media || []
  };
  expenseMediaFiles.value = [];
  showExpenseForm.value = true;
};

const onExpenseMediaRead = (file) => {
  // 文件读取后的处理,Vant会自动处理
};

const removeExpenseMedia = (index) => {
  expenseForm.value.media.splice(index, 1);
};

const deleteExpenseItem = async (id) => {
  try {
    await import('vant').then(({ showConfirmDialog }) => {
      showConfirmDialog({
        title: '确认删除',
        message: '确定要删除这条经费记录吗？',
      }).then(async () => {
        await api.deleteExpense(id);
        showToast('删除成功');
        loadData();
      }).catch(() => {});
    });
  } catch (error) {
    showToast('删除失败');
  }
};

const submitSponsor = async () => {
  // 验证必填字段
  if (!sponsorForm.value.name || !sponsorForm.value.name.trim()) {
    showToast('请输入赞助商名称');
    return;
  }
  
  console.log('开始提交赞助商...');
  console.log('表单数据:', sponsorForm.value);
  console.log('Logo 文件:', sponsorLogo.value);
  
  try {
    const formData = new FormData();
    if (!sponsorForm.value.id) {
      formData.append('activityId', activity.value.id);
    }
    formData.append('name', sponsorForm.value.name);
    formData.append('type', sponsorForm.value.type);
    formData.append('link', sponsorForm.value.link || '');
    
    // 检查是否有 Logo 需要上传
    const hasLogo = sponsorLogo.value.length > 0 && sponsorLogo.value[0].file;
    
    if (hasLogo) {
      const logoSize = (sponsorLogo.value[0].file.size / 1024 / 1024).toFixed(2);
      console.log('准备上传 Logo，大小:', logoSize, 'MB');
      showToast({
        type: 'loading',
        message: `正在上传 Logo (${logoSize}MB)...`,
        forbidClick: true,
        duration: 0
      });
      formData.append('logo', sponsorLogo.value[0].file);
    } else {
      console.log('没有 Logo，仅保存数据');
      showToast({
        type: 'loading',
        message: '正在保存...',
        forbidClick: true,
        duration: 0
      });
    }
    
    console.log('开始调用 API...');
    const startTime = Date.now();
    
    if (sponsorForm.value.id) {
      await api.updateSponsor(sponsorForm.value.id, formData);
    } else {
      await api.addSponsor(formData);
    }
    
    const endTime = Date.now();
    console.log('API 调用完成，耗时:', (endTime - startTime) / 1000, '秒');
    
    // 使用 closeToast 关闭所有 Toast
    const { closeToast } = await import('vant');
    closeToast();
    
    // 显示成功提示
    showToast({
      type: 'success',
      message: sponsorForm.value.id ? '更新成功' : '添加成功',
      duration: 2000
    });
    
    // 关闭弹窗并重置表单
    showSponsorForm.value = false;
    sponsorForm.value = { id: null, name: '', type: 'sponsor', link: '' };
    sponsorLogo.value = [];
    
    console.log('开始重新加载数据...');
    // 重新加载数据
    await loadData();
    console.log('数据加载完成');
  } catch (error) {
    // 使用 closeToast 关闭所有 Toast
    const { closeToast } = await import('vant');
    closeToast();
    
    console.error('赞助商提交失败:', error);
    console.error('错误详情:', error.response);
    const errorMsg = error.response?.data?.error || error.message || '操作失败';
    showToast({
      type: 'fail',
      message: errorMsg,
      duration: 3000
    });
  }
};

const editSponsor = (sponsor) => {
  sponsorForm.value = { ...sponsor };
  showSponsorForm.value = true;
};

const onLogoRead = (file) => {
  // 文件选择后的回调，显示文件已选择
  if (file.file) {
    const sizeMB = (file.file.size / 1024 / 1024).toFixed(2);
    showToast(`已选择: ${file.file.name} (${sizeMB}MB)`);
  }
};

const deleteSponsorItem = async (id) => {
  try {
    await import('vant').then(({ showConfirmDialog }) => {
      showConfirmDialog({
        title: '确认删除',
        message: '确定要删除这个赞助商吗？',
      }).then(async () => {
        await api.deleteSponsor(id);
        showToast('删除成功');
        loadData();
      }).catch(() => {});
    });
  } catch (error) {
    showToast('删除失败');
  }
};

const approve = async (id, status) => {
  try {
    await api.approveRegistration(id, status);
    showToast('操作成功');
    loadData();
  } catch (error) {
    showToast('操作失败');
  }
};

// 签到/取消签到
const toggleCheckIn = async (id) => {
  try {
    await api.checkInRegistration(id);
    showToast('操作成功');
    loadData();
  } catch (error) {
    showToast('操作失败');
  }
};

// 复制车牌号
const copyCarNumber = async (carNumber) => {
  try {
    await navigator.clipboard.writeText(carNumber);
    showToast('车牌号已复制');
  } catch (error) {
    showToast('复制失败');
  }
};

// 修改人数
const editPeopleCount = (reg) => {
  currentEditReg.value = reg;
  newPeopleCount.value = reg.peopleCount || 1;
  showPeopleCountDialog.value = true;
};

const confirmPeopleCount = async () => {
  try {
    await api.updateRegistration(currentEditReg.value.id, { peopleCount: newPeopleCount.value });
    showToast('修改成功');
    showPeopleCountDialog.value = false;
    loadData();
  } catch (error) {
    showToast('修改失败');
  }
};

// 显示报名详情
const showRegDetail = (reg) => {
  currentReg.value = reg;
  showRegDetailDialog.value = true;
};

// 从详情弹窗签到
const toggleCheckInFromDetail = async () => {
  try {
    await api.checkInRegistration(currentReg.value.id);
    showToast('操作成功');
    showRegDetailDialog.value = false;
    loadData();
  } catch (error) {
    showToast('操作失败');
  }
};

// 从详情弹窗审核
const approveFromDetail = async (status) => {
  try {
    await api.approveRegistration(currentReg.value.id, status);
    showToast('操作成功');
    showRegDetailDialog.value = false;
    loadData();
  } catch (error) {
    showToast('操作失败');
  }
};

// 媒体管理相关方法
const uploadPhotos = async (files) => {
  const fileArray = Array.isArray(files) ? files : [files];
  const totalSize = fileArray.reduce((sum, f) => sum + f.file.size, 0);
  const totalSizeMB = (totalSize / 1024 / 1024).toFixed(2);
  const fileCount = fileArray.length;
  
  showToast({
    type: 'loading',
    message: `正在上传 ${fileCount} 个文件 (${totalSizeMB}MB)...`,
    forbidClick: true,
    duration: 0
  });
  
  try {
    const formData = new FormData();
    formData.append('activityId', activity.value.id);
    
    fileArray.forEach(file => formData.append('photos', file.file));
    
    await api.uploadPhotos(formData);
    
    // 使用 closeToast 关闭所有 Toast
    const { closeToast } = await import('vant');
    closeToast();
    
    // 显示成功提示
    showToast({
      type: 'success',
      message: `成功上传 ${fileCount} 个文件`,
      duration: 2000
    });
    
    // 清空文件列表
    photoFiles.value = [];
    
    // 重新加载数据
    await loadData();
  } catch (error) {
    // 使用 closeToast 关闭所有 Toast
    const { closeToast } = await import('vant');
    closeToast();
    
    console.error('上传失败:', error);
    showToast({
      type: 'fail',
      message: error.response?.data?.error || '上传失败',
      duration: 3000
    });
  }
};

const approvePhoto = async (id, status) => {
  try {
    await api.approvePhoto(id, status);
    showToast(status === 'approved' ? '已通过' : '已拒绝');
    loadData();
  } catch (error) {
    console.error('操作失败:', error);
    showToast('操作失败');
  }
};

const deletePhoto = async (id) => {
  try {
    await import('vant').then(({ showConfirmDialog }) => {
      showConfirmDialog({
        title: '确认删除',
        message: '删除后无法恢复，确定要删除吗？',
      }).then(async () => {
        await api.deletePhoto(id);
        showToast('删除成功');
        loadData();
      }).catch(() => {});
    });
  } catch (error) {
    console.error('删除失败:', error);
    showToast('删除失败');
  }
};

const previewImage = (url) => {
  import('vant').then(({ ImagePreview }) => {
    ImagePreview([url]);
  });
};

const playVideo = (url) => {
  currentVideoUrl.value = url;
  showVideoPlayer.value = true;
};

// 地图选点相关（与Dashboard相同）
const initMapPicker = async () => {
  try {
    console.log('开始初始化地图选择器...');
    // 等待地图加载
    const AMap = await window.loadAMap();
    console.log('地图API加载完成');
    
    if (pickerMap) {
      console.log('销毁旧地图实例');
      pickerMap.destroy();
    }
    
    const center = activityForm.value.locationLat && activityForm.value.locationLng
      ? [activityForm.value.locationLng, activityForm.value.locationLat]
      : [118.6762, 24.8742];
    
    console.log('地图中心点:', center);
    
    pickerMap = new AMap.Map('map-picker-container-manage', {
      zoom: 15,
      center: center
    });
    
    console.log('地图实例创建完成');
    
    geocoder = new AMap.Geocoder();
    console.log('地理编码器创建完成');
    
    pickerMarker = new AMap.Marker({
      position: center,
      map: pickerMap,
      draggable: true
    });
    
    console.log('地图标记创建完成');
    
    if (activityForm.value.location) {
      selectedLocation.value = {
        name: activityForm.value.location,
        lat: activityForm.value.locationLat,
        lng: activityForm.value.locationLng
      };
    }
    
    pickerMap.on('click', (e) => {
      const { lng, lat } = e.lnglat;
      pickerMarker.setPosition([lng, lat]);
      
      selectedLocation.value = {
        name: '获取地址中...',
        lat: lat,
        lng: lng
      };
      
      if (geocoder) {
        geocoder.getAddress([lng, lat], (status, result) => {
          if (status === 'complete' && result.info === 'OK') {
            const address = result.regeocode.formattedAddress;
            selectedLocation.value.name = address;
          } else {
            console.warn('逆地理编码失败:', status, result);
            selectedLocation.value.name = `泉州市区 (${lat.toFixed(4)}, ${lng.toFixed(4)})`;
          }
        });
      } else {
        selectedLocation.value.name = `泉州市区 (${lat.toFixed(4)}, ${lng.toFixed(4)})`;
      }
    });
    
    pickerMarker.on('dragend', (e) => {
      const { lng, lat } = e.lnglat;
      
      selectedLocation.value = {
        name: '获取地址中...',
        lat: lat,
        lng: lng
      };
      
      if (geocoder) {
        geocoder.getAddress([lng, lat], (status, result) => {
          if (status === 'complete' && result.info === 'OK') {
            const address = result.regeocode.formattedAddress;
            selectedLocation.value.name = address;
          } else {
            console.warn('逆地理编码失败:', status, result);
            selectedLocation.value.name = `泉州市区 (${lat.toFixed(4)}, ${lng.toFixed(4)})`;
          }
        });
      } else {
        selectedLocation.value.name = `泉州市区 (${lat.toFixed(4)}, ${lng.toFixed(4)})`;
      }
    });
    
    console.log('地图初始化完成');
  } catch (error) {
    console.error('地图初始化失败:', error);
    showToast('地图加载失败: ' + error.message);
  }
};

const searchLocation = async () => {
  if (!searchKeyword.value.trim()) {
    showToast('请输入搜索关键词');
    return;
  }
  
  try {
    console.log('开始搜索地点:', searchKeyword.value);
    const AMap = await window.loadAMap();
    
    if (!AMap.PlaceSearch) {
      console.error('PlaceSearch插件未加载');
      showToast('地图搜索功能未就绪');
      return;
    }
    
    const placeSearch = new AMap.PlaceSearch({ 
      pageSize: 10, 
      pageIndex: 1,
      city: '泉州',
      citylimit: false,
      extensions: 'base'
    });
    
    placeSearch.search(searchKeyword.value, (status, result) => {
      console.log('搜索状态:', status);
      console.log('搜索结果:', result);
      
      if (status === 'complete' && result.info === 'OK') {
        if (result.poiList && result.poiList.pois && result.poiList.pois.length > 0) {
          searchResults.value = result.poiList.pois.map(poi => ({
            name: poi.name,
            address: poi.address || poi.district || '',
            lat: poi.location.lat,
            lng: poi.location.lng
          }));
          console.log('搜索成功，找到', searchResults.value.length, '个结果');
        } else {
          searchResults.value = [];
          showToast('未找到相关地点');
        }
      } else if (status === 'no_data') {
        searchResults.value = [];
        showToast('未找到相关地点');
      } else {
        console.error('搜索失败:', status, result);
        searchResults.value = [];
        showToast('搜索失败: ' + (result.info || status));
      }
    });
  } catch (error) {
    console.error('搜索异常:', error);
    showToast('搜索失败: ' + error.message);
  }
};

const selectSearchResult = (result) => {
  selectedLocation.value = result;
  pickerMarker.setPosition([result.lng, result.lat]);
  pickerMap.setCenter([result.lng, result.lat]);
  searchResults.value = [];
  searchKeyword.value = '';
};

const clearSearch = () => {
  searchResults.value = [];
};

const confirmLocation = () => {
  if (selectedLocation.value.name) {
    activityForm.value.location = selectedLocation.value.name;
    activityForm.value.locationLat = selectedLocation.value.lat;
    activityForm.value.locationLng = selectedLocation.value.lng;
    showMapPicker.value = false;
  } else {
    showToast('请选择地点');
  }
};

watch(showMapPicker, (val) => {
  if (val) {
    setTimeout(() => {
      initMapPicker();
    }, 300);
  }
});

onMounted(loadData);
</script>

<style scoped>
.activity-manage {
  min-height: 100vh;
  background: #f8f9fa;
}

/* 活动描述换行支持 */
.activity-manage :deep(.van-cell__label) {
  white-space: pre-line;
}

/* Tab 样式优化 */
.activity-manage :deep(.van-tabs__nav) {
  background: #fff;
}

.activity-manage :deep(.van-tabs__line) {
  background: linear-gradient(135deg, #FF6700 0%, #FF8533 100%);
  height: 3px;
  border-radius: 3px;
}

.activity-manage :deep(.van-tab) {
  font-weight: 500;
  color: #666;
}

.activity-manage :deep(.van-tab--active) {
  font-weight: 700;
  color: #FF6700;
}

.tab-content {
  padding: 16px;
  min-height: calc(100vh - 140px);
  position: relative;
}

/* 悬浮添加按钮 */
.float-add-btn {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, #FF6700 0%, #FF8533 100%);
  box-shadow: 0 4px 12px rgba(255, 103, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 24px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.float-add-btn:active {
  transform: scale(0.9);
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.4);
}

/* 媒体管理页面的悬浮按钮需要固定定位 */
.tab-content .van-uploader {
  position: fixed;
  right: 20px;
  bottom: 80px;
  z-index: 100;
}

/* 其他页面的悬浮按钮 */
.tab-content > .float-add-btn {
  position: fixed;
  right: 20px;
  bottom: 80px;
  z-index: 100;
}

/* 统一的信息统计卡片 */
.info-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}

/* 报名情况tab的统计栏使用3列布局 */
.tab-content .info-stats.reg-stats {
  grid-template-columns: repeat(3, 1fr);
}

.stat-box {
  background: #fff;
  border-radius: 12px;
  padding: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  border: 1px solid #f5f5f5;
  cursor: pointer;
  transition: all 0.2s ease;
}

.stat-box:active {
  transform: scale(0.98);
}

.stat-box.active {
  border-color: #FF6700;
  background: #fff7f0;
  box-shadow: 0 2px 8px rgba(255, 103, 0, 0.15);
}

.stat-box .van-icon {
  font-size: 26px;
  flex-shrink: 0;
}

.stat-text {
  flex: 1;
  min-width: 0;
}

.stat-num {
  font-size: 20px;
  font-weight: 600;
  color: #333;
  margin-bottom: 2px;
  line-height: 1.2;
}

.stat-desc {
  font-size: 12px;
  color: #999;
}

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

.expense-item {
  background: #fff;
  border-radius: 12px;
  padding: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.expense-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 18px;
  flex-shrink: 0;
}

.expense-content {
  flex: 1;
  min-width: 0;
}

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

.expense-meta {
  display: flex;
  gap: 8px;
  font-size: 12px;
  color: #999;
}

.expense-cat {
  color: #FF6700;
}

.expense-note {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.expense-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

.expense-amount {
  font-size: 16px;
  font-weight: 700;
  color: #333;
}

.expense-actions {
  display: flex;
  gap: 10px;
  color: #999;
  font-size: 16px;
}

.expense-actions .van-icon:active {
  color: #FF6700;
}

/* 赞助商 */
.sponsor-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 80px;
}

.sponsor-card {
  background: #fff;
  border-radius: 12px;
  padding: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  border: 1px solid #f0f0f0;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.sponsor-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(135deg, #FF6700 0%, #FF8533 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.sponsor-card:active::before {
  opacity: 1;
}

.sponsor-logo-wrapper {
  flex-shrink: 0;
}

.sponsor-logo {
  width: 50px;
  height: 50px;
  border-radius: 8px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-color: #f8f9fa;
  border: 2px solid #e8e8e8;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  transition: all 0.3s ease;
}

.sponsor-logo .van-icon {
  font-size: 24px;
  color: #bbb;
}

.sponsor-card:active .sponsor-logo {
  transform: scale(0.95);
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}

.sponsor-details {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sponsor-header {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.sponsor-name {
  font-size: 14px;
  font-weight: 600;
  color: #1a1a1a;
  line-height: 1.4;
}

.sponsor-badge {
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}

.badge-title {
  background: linear-gradient(135deg, #FF6700 0%, #FF8533 100%);
}

.badge-sponsor {
  background: linear-gradient(135deg, #07c160 0%, #00d68f 100%);
}

.sponsor-link {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: #FF6700;
  overflow: hidden;
}

.sponsor-link .van-icon {
  font-size: 13px;
  flex-shrink: 0;
}

.sponsor-link span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sponsor-ops {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex-shrink: 0;
}

.sponsor-ops .van-icon {
  font-size: 20px;
  color: #999;
  cursor: pointer;
  transition: all 0.2s ease;
  padding: 8px;
  border-radius: 8px;
  background: #f8f9fa;
}

.sponsor-ops .van-icon:first-child:active {
  color: #FF6700;
  background: #fff7f0;
  transform: scale(0.9);
}

.sponsor-ops .van-icon:last-child:active {
  color: #ee0a24;
  background: #fff0f1;
  transform: scale(0.9);
}

/* 报名列表 */
.search-box {
  margin-bottom: 12px;
}

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

.reg-item {
  background: #fff;
  border-radius: 16px;
  padding: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  border: 2px solid #f5f5f5;
  cursor: pointer;
  transition: all 0.2s ease;
}

.reg-item:active {
  background: #fafafa;
}

.reg-item.status-approved {
  border-color: #52c41a;
}

.reg-item.status-rejected {
  border-color: #ff4d4f;
}

.reg-item.checked-in {
  border-color: #FF6700;
  background: #fff7f0;
}

.reg-left {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

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

.reg-main {
  flex: 1;
  min-width: 0;
}

.reg-top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.reg-name {
  font-size: 15px;
  font-weight: 600;
  color: #333;
}

.reg-tags {
  display: flex;
  gap: 6px;
}

.reg-info {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  font-size: 13px;
}

.info-link,
.info-text {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #666;
}

.info-link {
  color: #FF6700;
  text-decoration: none;
}

.info-link:active {
  opacity: 0.7;
}

.info-text .van-icon,
.info-link .van-icon {
  font-size: 13px;
  color: #999;
}

.car-number {
  color: #FF6700;
  cursor: pointer;
}

.car-number:active {
  opacity: 0.7;
}

.people-count {
  color: #FF6700;
  cursor: pointer;
}

.people-count:active {
  opacity: 0.7;
}

.reg-right {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.reg-right .van-icon {
  font-size: 16px;
}

/* 弹窗 */
.form-popup {
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 16px 16px 0 0;
}

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

.popup-header h3 {
  font-size: 18px;
  margin: 0;
  color: #1a1a1a;
  font-weight: 700;
}

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

.popup-form {
  padding: 0;
  overflow-y: auto;
  flex: 1;
}

.popup-form .van-cell-group {
  margin: 0;
  background: #fff;
}

.popup-form .van-cell {
  padding: 14px 20px;
}

.popup-form .van-field__label {
  width: 80px;
  color: #333;
  font-weight: 600;
  font-size: 14px;
}

.popup-form .van-field__control {
  color: #1a1a1a;
  font-size: 14px;
}

.popup-form .van-field__control::placeholder {
  color: #bbb;
}

.form-actions {
  margin: 0;
  padding: 16px 20px 20px;
  flex-shrink: 0;
  background: #fff;
  border-top: 1px solid #f5f5f5;
}

.form-actions .van-button {
  height: 48px;
  font-size: 16px;
  font-weight: 600;
}

/* 地图选点 */
.map-picker {
  height: 100%;
  display: flex;
  flex-direction: column;
}

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

.map-picker-header h3 {
  flex: 1;
  text-align: center;
  font-size: 16px;
  margin: 0;
  color: #333;
}

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

.map-search {
  padding: 12px 16px;
  background: #fff;
}

.search-results {
  max-height: 200px;
  overflow-y: auto;
  background: #fff;
  border-bottom: 1px solid #f0f0f0;
}

.search-result-item {
  padding: 12px 16px;
  border-bottom: 1px solid #f5f5f5;
  cursor: pointer;
}

.search-result-item:active {
  background: #f5f5f5;
}

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

.result-address {
  font-size: 12px;
  color: #999;
}

.map-container {
  flex: 1;
  width: 100%;
}

.selected-location {
  padding: 12px 16px;
  background: #fff;
  border-top: 1px solid #f0f0f0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.selected-location .van-icon {
  color: #667eea;
  font-size: 18px;
}

.selected-location span {
  flex: 1;
  font-size: 14px;
  color: #333;
}

/* 媒体管理 */
.media-section {
  margin-top: 20px;
}

.section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  font-size: 15px;
  font-weight: 700;
  color: #333;
}

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

.media-card {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  border: 1px solid #f0f0f0;
}

.card-thumb {
  width: 100%;
  height: 180px;
  position: relative;
  background: #f5f5f5;
  cursor: pointer;
}

.card-thumb .van-image {
  width: 100%;
  height: 100%;
}

.video-thumb {
  width: 100%;
  height: 100%;
  position: relative;
}

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

.play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 36px;
  color: rgba(255,255,255,0.9);
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
  pointer-events: none;
}

.card-info {
  padding: 10px 12px;
}

.info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

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

.action-row {
  display: flex;
  gap: 6px;
}

.action-row .van-button {
  flex: 1;
}

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

.grid-item {
  position: relative;
  width: 100%;
  padding-top: 100%;
  background: #f5f5f5;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
}

.grid-item .van-image,
.grid-item .video-thumb {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.del-btn {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 22px;
  height: 22px;
  background: rgba(0,0,0,0.6);
  border-radius: 50%;
  color: #fff;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

.del-btn:active {
  background: rgba(0,0,0,0.8);
}

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

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

/* 分类选择器 */
.category-picker {
  padding: 20px;
  max-height: 60vh;
  overflow-y: auto;
}

.picker-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.picker-header h3 {
  font-size: 18px;
  margin: 0;
  color: #1a1a1a;
  font-weight: 700;
}

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

.category-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.category-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 8px;
  background: #f8f9fa;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.category-item:active {
  transform: scale(0.95);
  background: #f0f0f0;
}

.category-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 22px;
}

.category-item span {
  font-size: 13px;
  color: #333;
  font-weight: 500;
}

.datetime-picker-popup {
  background: #fff;
  border-radius: 16px 16px 0 0;
  overflow: hidden;
}

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

.picker-header h3 {
  font-size: 16px;
  margin: 0;
  color: #333;
  font-weight: 600;
}

.picker-body {
  padding: 20px;
}

.datetime-input {
  width: 100%;
  padding: 12px;
  font-size: 16px;
  border: 1px solid #e8e8e8;
  border-radius: 8px;
  outline: none;
  color: #333;
}

.datetime-input:focus {
  border-color: #667eea;
}

.category-item:active {
  transform: scale(0.95);
  background: #e9ecef;
}

.category-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 24px;
}

/* 经费媒体上传 */
.expense-media-upload {
  width: 100%;
}

.existing-media {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  flex-wrap: wrap;
}

.media-thumb {
  position: relative;
  width: 80px;
  height: 80px;
  border-radius: 8px;
  overflow: hidden;
  background: #f5f5f5;
}

.media-thumb .van-image,
.media-thumb .video-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.media-thumb .remove-icon {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 20px;
  height: 20px;
  background: rgba(0,0,0,0.6);
  border-radius: 50%;
  color: #fff;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/* 人数修改弹窗 */
.people-count-dialog {
  padding: 20px;
  background: #fff;
  border-radius: 16px;
}

.people-count-dialog .dialog-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.people-count-dialog .dialog-header h3 {
  font-size: 18px;
  font-weight: 700;
  color: #333;
  margin: 0;
}

.people-count-dialog .dialog-header .van-icon {
  font-size: 20px;
  color: #999;
  cursor: pointer;
}

.people-count-dialog .dialog-content {
  margin-bottom: 20px;
}

.people-count-dialog .count-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 20px;
  padding: 12px;
  background: #f8f9fa;
  border-radius: 8px;
}

.people-count-dialog .info-label {
  font-size: 15px;
  font-weight: 600;
  color: #333;
}

.people-count-dialog .info-desc {
  font-size: 13px;
  color: #666;
}

.people-count-dialog .van-stepper {
  margin: 0 auto;
}

.people-count-dialog .dialog-actions {
  margin-top: 20px;
}

.people-count-dialog .dialog-actions .van-button {
  height: 44px;
  font-size: 16px;
  font-weight: 600;
}

/* 已签到状态特殊样式 */
.reg-item.checked-in {
  border-color: #FF6700;
  background: #fff7f0;
}

/* 报名详情弹窗 */
.reg-detail-popup {
  max-height: 70vh;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 16px 16px 0 0;
}

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

.detail-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.detail-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #f5f5f5;
}

.detail-row:last-child {
  border-bottom: none;
}

.detail-label {
  font-size: 14px;
  color: #666;
  font-weight: 500;
}

.detail-value {
  font-size: 14px;
  color: #333;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 4px;
}

.detail-link {
  color: #FF6700;
  cursor: pointer;
}

.detail-link:active {
  opacity: 0.7;
}

.detail-actions {
  padding: 16px 20px 20px;
  border-top: 1px solid #f5f5f5;
}

.action-buttons {
  display: flex;
  gap: 12px;
}

.action-buttons .van-button {
  flex: 1;
}
</style>
