@extends('admin.layouts.admin')

@section('title', '活动管理')
@section('page-title', '活动管理')

@push('styles')
    <!-- Summernote CSS -->
    <link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-bs4.min.css" rel="stylesheet">
    <style>
        /* Vue 可搜索下拉框样式 */
        .vue-searchable-select {
            position: relative;
        }
        .vue-searchable-select .search-input {
            width: 100%;
            padding: 0.375rem 0.75rem;
            font-size: 1rem;
            border: 1px solid #ced4da;
            border-radius: 0.375rem;
            transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
        }
        .vue-searchable-select .search-input:focus {
            border-color: #86b7fe;
            outline: 0;
            box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
        }
        .vue-searchable-select .dropdown-list {
            position: absolute;
            top: 100%;
            left: 0;
            right: 0;
            max-height: 300px;
            overflow-y: auto;
            background: white;
            border: 1px solid #ced4da;
            border-top: none;
            border-radius: 0 0 0.375rem 0.375rem;
            z-index: 1060;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
        .vue-searchable-select .dropdown-item {
            padding: 0.5rem 0.75rem;
            cursor: pointer;
            border-bottom: 1px solid #f0f0f0;
        }
        .vue-searchable-select .dropdown-item:hover {
            background-color: #e9ecef;
        }
        .vue-searchable-select .dropdown-item:last-child {
            border-bottom: none;
        }
        .vue-searchable-select .dropdown-item .item-name {
            font-weight: 500;
        }
        .vue-searchable-select .dropdown-item .item-details {
            font-size: 0.85em;
            color: #6c757d;
        }
        .vue-searchable-select .no-results {
            padding: 0.75rem;
            text-align: center;
            color: #6c757d;
        }
        .vue-searchable-select .loading {
            padding: 0.75rem;
            text-align: center;
            color: #6c757d;
        }
        /* 图片预览样式 */
        .image-preview {
            width: 120px;
            height: 80px;
            object-fit: cover;
            cursor: pointer;
            border-radius: 4px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            transition: transform 0.2s ease;
            background-color: #f8f9fa;
            border: 1px solid #dee2e6;
        }

        .image-preview:hover {
            transform: scale(1.05);
        }

        /* 编辑模态框中的图片预览样式 */
        .modal-image-preview {
            width: 200px;
            height: 120px;
            object-fit: cover;
            cursor: pointer;
            border-radius: 4px;
            background-color: #f8f9fa;
            border: 1px solid #dee2e6;
        }

        .image-modal img {
            max-width: 100%;
            max-height: 80vh;
            object-fit: contain;
        }

        /* 图片预览模态框层级高于编辑模态框 */
        #imageModal {
            z-index: 1060 !important;
        }

        #imageModal .modal-backdrop {
            z-index: 1059 !important;
        }

        .status-badge {
            padding: 0.25rem 0.5rem;
            border-radius: 0.25rem;
            font-size: 0.75rem;
            font-weight: 500;
        }

        .status-draft {
            background-color: #fff3cd;
            color: #856404;
        }

        .status-online {
            background-color: #d4edda;
            color: #155724;
        }

        .status-offline {
            background-color: #f8d7da;
            color: #721c24;
        }

        .loading {
            opacity: 0.6;
            pointer-events: none;
        }

        /* VIK银行过滤器多选下拉样式 */
        .vik-filter-multiselect {
            position: relative;
        }

        .vik-filter-multiselect .multiselect-display {
            border: 1px solid #ced4da;
            border-radius: 0.375rem;
            padding: 0.375rem 0.75rem;
            background-color: #fff;
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
            min-height: 38px;
        }

        .vik-filter-multiselect .multiselect-display:hover {
            border-color: #86b7fe;
        }

        .vik-filter-multiselect .selected-items {
            flex: 1;
            display: flex;
            flex-wrap: wrap;
            gap: 0.25rem;
            overflow: hidden;
        }

        .vik-filter-multiselect .selected-item {
            display: inline-flex;
            align-items: center;
            background-color: #0d6efd;
            color: white;
            padding: 0.125rem 0.375rem;
            border-radius: 0.25rem;
            font-size: 0.75rem;
            gap: 0.25rem;
            white-space: nowrap;
        }

        .vik-filter-multiselect .selected-item .remove-btn {
            background: none;
            border: none;
            color: white;
            cursor: pointer;
            padding: 0;
            margin-left: 0.125rem;
            opacity: 0.7;
            font-size: 0.65rem;
        }

        .vik-filter-multiselect .selected-item .remove-btn:hover {
            opacity: 1;
        }

        .vik-filter-multiselect .multiselect-dropdown {
            position: absolute;
            top: 100%;
            left: 0;
            right: 0;
            z-index: 1050;
            background: white;
            border: 1px solid #ced4da;
            border-radius: 0.375rem;
            box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
            max-height: 300px;
            overflow-y: auto;
            margin-top: 2px;
        }

        .vik-filter-multiselect .dropdown-header {
            padding: 0.5rem;
            border-bottom: 1px solid #e9ecef;
            display: flex;
            gap: 0.5rem;
            position: sticky;
            top: 0;
            background: white;
            z-index: 1;
        }

        .vik-filter-multiselect .dropdown-items {
            padding: 0.25rem 0;
            max-height: 220px;
            overflow-y: auto;
        }

        .vik-filter-multiselect .dropdown-item {
            display: flex;
            align-items: center;
            padding: 0.5rem 0.75rem;
            cursor: pointer;
            gap: 0.5rem;
        }

        .vik-filter-multiselect .dropdown-item:hover {
            background-color: #f8f9fa;
        }

        .vik-filter-multiselect .dropdown-item input[type="checkbox"] {
            margin: 0;
        }

        /* 多选下拉列表样式 */
        .issuer-multiselect {
            position: relative;
            flex: 1;
            margin-left: 1rem;
        }

        .multiselect-display {
            border: 1px solid #ced4da;
            border-radius: 0.375rem;
            padding: 0.5rem 0.75rem;
            background-color: #fff;
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
            min-height: 38px;
        }

        .multiselect-display:hover {
            border-color: #86b7fe;
        }

        .selected-items {
            flex: 1;
            display: flex;
            flex-wrap: wrap;
            gap: 0.25rem;
        }

        .selected-item {
            display: inline-flex;
            align-items: center;
            background-color: #0d6efd;
            color: white;
            padding: 0.25rem 0.5rem;
            border-radius: 0.25rem;
            font-size: 0.875rem;
            gap: 0.25rem;
        }

        .selected-item .remove-btn {
            background: none;
            border: none;
            color: white;
            cursor: pointer;
            padding: 0;
            margin-left: 0.25rem;
            opacity: 0.7;
        }

        .selected-item .remove-btn:hover {
            opacity: 1;
        }

        .dropdown-arrow {
            transition: transform 0.2s;
        }

        .dropdown-arrow.open {
            transform: rotate(180deg);
        }

        .multiselect-dropdown {
            position: absolute;
            top: 100%;
            left: 0;
            right: 0;
            z-index: 1000;
            background: white;
            border: 1px solid #ced4da;
            border-radius: 0.375rem;
            box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
            max-height: 300px;
            overflow-y: auto;
        }

        .dropdown-header {
            padding: 0.5rem;
            border-bottom: 1px solid #e9ecef;
            display: flex;
            gap: 0.5rem;
        }

        .dropdown-items {
            padding: 0.25rem 0;
        }

        .dropdown-item {
            display: flex;
            align-items: center;
            padding: 0.5rem 0.75rem;
            cursor: pointer;
            gap: 0.5rem;
        }

        .dropdown-item:hover {
            background-color: #f8f9fa;
        }

        .dropdown-item input[type="checkbox"] {
            margin: 0;
        }

        /* Rich text editor 样式 */
        .ql-editor {
            min-height: 150px;
        }

        /* 表格响应式 */
        .table-responsive {
            overflow-x: auto;
            min-height: 400px;
        }

        .table {
            min-width: 1600px;
        }

        .table td {
            vertical-align: middle;
        }

        /* 长文本截断 */
        .text-truncate-150 {
            max-width: 150px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .text-truncate-200 {
            max-width: 200px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        /* 富文本内容渲染样式 */
        .summernote-content {
            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
            font-size: 14px;
            line-height: 1.42857143;
            color: #333;
        }

        .summernote-content img {
            max-width: 100%;
            height: auto;
            display: block;
            margin: 10px 0;
        }

        .summernote-content table {
            width: 100%;
            border-collapse: collapse;
            margin: 15px 0;
        }

        .summernote-content table,
        .summernote-content th,
        .summernote-content td {
            border: 1px solid #ddd;
        }

        .summernote-content th,
        .summernote-content td {
            padding: 8px 12px;
            text-align: left;
        }

        .summernote-content th {
            background-color: #f5f5f5;
            font-weight: bold;
        }

        .summernote-content ul,
        .summernote-content ol {
            margin: 10px 0;
            padding-left: 20px;
        }

        .summernote-content p {
            margin: 0 0 10px;
        }

        .summernote-content strong {
            font-weight: bold;
        }

        .summernote-content em {
            font-style: italic;
        }

        .summernote-content u {
            text-decoration: underline;
        }

        /* 富文本编辑器容器 */
        .summernote-editor-container {
            width: 100%;
        }

        /* 配置构建器样式 */
        .config-builder {
            border: 1px solid #dee2e6;
            border-radius: 0.375rem;
            padding: 1rem;
            margin-bottom: 1rem;
            background-color: #f8f9fa;
        }

        .rule-group {
            border: 1px solid #0d6efd;
            border-radius: 0.375rem;
            padding: 1rem;
            margin-bottom: 1rem;
            background-color: #e7f3ff;
            position: relative;
        }

        .rule-group-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1rem;
        }

        .rule-group-label {
            font-weight: bold;
            color: #0d6efd;
            margin: 0;
        }

        .condition-item {
            border: 1px solid #28a745;
            border-radius: 0.25rem;
            padding: 0.75rem;
            margin-bottom: 0.75rem;
            background-color: #f8fff9;
            position: relative;
        }

        .condition-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 0.5rem;
        }

        .condition-label {
            font-size: 0.875rem;
            font-weight: 500;
            color: #28a745;
            margin: 0;
        }

        .btn-remove {
            padding: 0.25rem 0.5rem;
            font-size: 0.75rem;
        }

        .value-input-container {
            margin-top: 0.5rem;
        }

        .value-tag {
            display: inline-block;
            background-color: #6c757d;
            color: white;
            padding: 0.25rem 0.5rem;
            margin: 0.125rem;
            border-radius: 0.25rem;
            font-size: 0.75rem;
        }

        .value-tag .remove-tag {
            margin-left: 0.25rem;
            cursor: pointer;
        }

        /* 渠道内容字段修改状态样式 */
        .channel-field-modified {
            border-left: 3px solid #28a745 !important;
            background-color: #f8fff9 !important;
        }

        .channel-field-default {
            border-left: 3px solid transparent !important;
            background-color: #ffffff !important;
        }

        .channel-field-status {
            font-size: 0.75rem;
            margin-top: 2px;
            font-weight: 500;
        }

        .channel-field-status.modified {
            color: #28a745;
        }

        .channel-field-status.default {
            color: #6c757d;
        }

        .channel-field-label {
            position: relative;
        }

        .channel-field-label .modification-indicator {
            display: inline-block;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            margin-left: 5px;
            vertical-align: middle;
        }

        .channel-field-label .modification-indicator.modified {
            background-color: #28a745;
        }

        .channel-field-label .modification-indicator.default {
            background-color: #dee2e6;
        }
    </style>
@endpush

@section('content')
    <div class="container-fluid">

        <!-- 搜索和过滤器 -->
        <div class="card mb-4">
            <div class="card-body">
                <div class="row">
                    <div class="col-md-3">
                        <label for="searchInput" class="form-label">搜索活动</label>
                        <input type="text" class="form-control" id="searchInput" placeholder="搜索活动名称、ID...">
                    </div>
                    <div class="col-md-2">
                        <label for="statusFilter" class="form-label">状态过滤</label>
                        <select class="form-select" id="statusFilter">
                            <option value="">所有状态</option>
                            <option value="0">草稿</option>
                            <option value="1">上线</option>
                            <option value="2">停用</option>
                        </select>
                    </div>
                    <div class="col-md-2">
                        <label for="typeFilter" class="form-label">类型过滤</label>
                        <select class="form-select" id="typeFilter">
                            <option value="">所有类型</option>
                            <option value="cash">现金</option>
                            <option value="non-cash">非现金</option>
                        </select>
                    </div>
                    <div class="col-md-5">
                        <label class="form-label">VIK银行过滤</label>
                        <div id="vikIssuerFilterApp">
                            <div class="vik-filter-multiselect" v-click-outside="closeDropdown">
                                <div class="multiselect-display" @click="toggleDropdown">
                                    <div class="selected-items">
                                        <span v-if="selectedIssuers.length === 0" class="text-muted">选择VIK银行...</span>
                                        <span v-for="issuer in selectedIssuers" :key="issuer.id" class="selected-item">
                                            @{{ issuer.name }} (@{{ issuer.code }})
                                            <button type="button" class="remove-btn" @click.stop="removeIssuer(issuer.id)">
                                                <i class="fas fa-times"></i>
                                            </button>
                                        </span>
                                    </div>
                                    <i class="fas fa-chevron-down dropdown-arrow" :class="{ open: isOpen }"></i>
                                </div>
                                <div class="multiselect-dropdown" v-if="isOpen">
                                    <div class="dropdown-header">
                                        <input type="text" class="form-control form-control-sm" v-model="searchQuery" placeholder="搜索银行名称或代码..." @input="filterIssuers">
                                        <button type="button" class="btn btn-sm btn-outline-secondary" @click="clearAll" v-if="selectedIssuers.length > 0">清空</button>
                                    </div>
                                    <div class="dropdown-items">
                                        <div v-if="filteredIssuers.length === 0" class="text-center text-muted py-2">无匹配结果</div>
                                        <div v-for="issuer in filteredIssuers" :key="issuer.id" class="dropdown-item" @click="toggleIssuer(issuer)">
                                            <input type="checkbox" :checked="isSelected(issuer.id)" @click.stop>
                                            <label class="mb-0">@{{ issuer.name }} (@{{ issuer.code }})</label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row mt-3">
                    <div class="col">
                        <button type="button" class="btn btn-primary" onclick="loadCampaigns()">
                            <i class="fas fa-search me-1"></i>搜索
                        </button>
                        <button type="button" class="btn btn-success ms-2" onclick="showCreateModal()">
                            <i class="fas fa-plus me-1"></i>新增活动
                        </button>
                        <button type="button" class="btn btn-secondary ms-2" onclick="resetFilters()">
                            <i class="fas fa-refresh me-1"></i>重置
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <!-- 加载中提示 -->
        <div id="loadingIndicator" class="text-center my-4" style="display: none;">
            <div class="spinner-border text-primary" role="status">
                <span class="visually-hidden">加载中...</span>
            </div>
            <p class="mt-2">正在加载活动数据...</p>
        </div>

        <!-- 活动列表 -->
        <div class="card">
            <div class="card-body">
                <!-- 活动类型标签页 -->
                <ul class="nav nav-tabs mb-4" id="campaignTabs" role="tablist">
                    <li class="nav-item" role="presentation">
                        <button class="nav-link active" id="formal-campaigns-tab" data-bs-toggle="tab" data-bs-target="#formal-campaigns" type="button" role="tab" aria-controls="formal-campaigns" aria-selected="true" onclick="switchCampaignTab('formal')">
                            <i class="fas fa-star"></i> 正式活动 <span class="badge bg-secondary ms-1" id="formal-count">0</span>
                        </button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="test-campaigns-tab" data-bs-toggle="tab" data-bs-target="#test-campaigns" type="button" role="tab" aria-controls="test-campaigns" aria-selected="false" onclick="switchCampaignTab('test')">
                            <i class="fas fa-flask"></i> 测试活动 <span class="badge bg-secondary ms-1" id="test-count">0</span>
                        </button>
                    </li>
                </ul>
                <div class="table-responsive">
                    <table class="table table-bordered table-hover">
                        <thead class="table-light">
                            <tr>
                                <th style="width: 70px;">状态</th>
                                <th>活动</th>
                                <th style="width: 140px;">渠道配置</th>
                                <th style="width: 90px;">报名</th>
                                <th style="width: 160px;">时间</th>
                                <th style="width: 260px;">图片</th>
                                <th style="width: 100px;">操作</th>
                            </tr>
                        </thead>
                        <tbody id="campaignTableBody">
                            <!-- 动态内容 -->
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <!-- 分页 -->
        <nav aria-label="分页导航" class="mt-4">
            <ul class="pagination justify-content-center" id="pagination">
                <!-- 动态分页 -->
            </ul>
        </nav>
    </div>

            <!-- 编辑活动模态框 -->
    <div class="modal fade" id="editModal" tabindex="-1">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">编辑活动</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <form id="editForm">
                        <input type="hidden" id="editId">

                        <!-- 基本信息 -->
                        <div class="row mb-3">
                            <div class="col-md-4">
                                <label for="editAcampaignId" class="form-label">VSRA活动ID <span
                                        class="text-danger">*</span></label>
                                <input type="text" class="form-control" id="editAcampaignId" required>
                            </div>
                            <div class="col-md-4">
                                <label for="editVcampaignId" class="form-label">VSRP Campaign ID</label>
                                <input type="text" class="form-control" id="editVcampaignId">
                            </div>
                            <div class="col-md-4">
                                <label for="editVofferId" class="form-label">VSRP Offer ID</label>
                                <input type="text" class="form-control" id="editVofferId" placeholder="用于排名查询">
                            </div>
                        </div>

                        <div class="row mb-3">
                            <div class="col-md-4">
                                <label for="editName" class="form-label">活动名称 <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" id="editName" required>
                            </div>
                            <div class="col-md-4">
                                <label for="editStatus" class="form-label">状态 <span class="text-danger">*</span></label>
                                <select class="form-select" id="editStatus" required>
                                    <option value="0">草稿</option>
                                    <option value="1">上线</option>
                                    <option value="2">停用</option>
                                </select>
                            </div>
                            <div class="col-md-4">
                                <label for="editType" class="form-label">类型 <span class="text-danger">*</span></label>
                                <select class="form-select" id="editType" required>
                                    <option value="cash">现金</option>
                                    <option value="non-cash">非现金</option>
                                </select>
                            </div>
                            <div class="col-md-4">
                                <label for="editCampaignFormat" class="form-label">活动形态 <span class="text-danger">*</span></label>
                                <select class="form-select" id="editCampaignFormat" required onchange="toggleCouponFields('edit', this.value)">
                                    <option value="normal">普通活动</option>
                                    <option value="coupon">优惠券活动</option>
                                    <option value="brand">品牌奖励</option>
                                </select>
                            </div>
                            <div class="col-md-4">
                                <label for="editTemplate" class="form-label">模板</label>
                                <input type="text" class="form-control" id="editTemplate">
                            </div>
                        </div>

                        <div class="row mb-3">
                            <div class="col-md-4">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="editIsTest">
                                    <label class="form-check-label" for="editIsTest">
                                        测试活动
                                        <small class="text-muted d-block">勾选后活动将显示在测试活动标签页中</small>
                                    </label>
                                </div>
                            </div>
                        </div>

                        <div class="row mb-3">
                            <div class="col-md-3">
                                <label for="editStartsAt" class="form-label">活动开始时间</label>
                                <input type="datetime-local" class="form-control" id="editStartsAt">
                            </div>
                            <div class="col-md-3">
                                <label for="editEndsAt" class="form-label">活动结束时间</label>
                                <input type="datetime-local" class="form-control" id="editEndsAt">
                            </div>
                            <div class="col-md-3">
                                <label for="editOpensAt" class="form-label">开放时间</label>
                                <input type="datetime-local" class="form-control" id="editOpensAt">
                            </div>
                            <div class="col-md-3">
                                <label for="editClosesAt" class="form-label">关闭时间</label>
                                <input type="datetime-local" class="form-control" id="editClosesAt">
                            </div>
                        </div>

                        <!-- 报名设置 -->
                        <div class="row mb-3">
                            <div class="col-md-3">
                                <div class="form-check mt-4">
                                    <input class="form-check-input" type="checkbox" id="editEnrollRequired" onchange="updateVikChannelIdRequirementVisibility('edit')">
                                    <label class="form-check-label" for="editEnrollRequired">需要报名</label>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <label for="editVenrollmentGroupId" class="form-label">VSRP报名组ID</label>
                                <input type="text" class="form-control" id="editVenrollmentGroupId" placeholder="用于报名到VSRP" onchange="updateVikChannelIdRequirementVisibility('edit')">
                            </div>
                            <div class="col-md-3" id="editEnrollStartsAtContainer">
                                <label for="editEnrollStartsAt" class="form-label">报名开始时间</label>
                                <input type="datetime-local" class="form-control" id="editEnrollStartsAt">
                            </div>
                            <div class="col-md-3" id="editEnrollEndsAtContainer">
                                <label for="editEnrollEndsAt" class="form-label">报名结束时间</label>
                                <input type="datetime-local" class="form-control" id="editEnrollEndsAt">
                            </div>
                        </div>

                        <!-- 隐藏的时间文本字段（保留后台字段兼容性） -->
                        <input type="hidden" id="editStartsAtText">
                        <input type="hidden" id="editEndsAtText">

                        <div class="row mb-3">
                            <div class="col-md-6">
                                <label for="editEffectiveDateText" class="form-label">生效日期文本</label>
                                <div class="summernote-editor-container">
                                    <textarea id="editEffectiveDateTextEditor" class="form-control"></textarea>
                                    <input type="hidden" id="editEffectiveDateText">
                                </div>
                                <small class="text-muted">在开始时间和结束时间后面的有效日期文本</small>
                            </div>
                        </div>

                        <!-- 富文本字段 -->
                        <div class="mb-3">
                            <label class="form-label">奖励描述</label>
                            <div id="editRewardDescriptionEditor"></div>
                            <input type="hidden" id="editRewardDescription">
                            <div class="mt-2">
                                <button type="button" class="btn btn-sm btn-outline-info" onclick="previewRichContent('editRewardDescription', 'rewardDescriptionPreview')">
                                    <i class="fas fa-eye"></i> 预览效果
                                </button>
                                <div id="rewardDescriptionPreview" class="summernote-content mt-2 p-3 border rounded" style="display: none; background-color: #f8f9fa;"></div>
                            </div>
                        </div>

                        <div class="mb-3">
                            <label class="form-label">活动描述</label>
                            <div id="editDescriptionEditor"></div>
                            <input type="hidden" id="editDescription">
                            <div class="mt-2">
                                <button type="button" class="btn btn-sm btn-outline-info" onclick="previewRichContent('editDescription', 'descriptionPreview')">
                                    <i class="fas fa-eye"></i> 预览效果
                                </button>
                                <div id="descriptionPreview" class="summernote-content mt-2 p-3 border rounded" style="display: none; background-color: #f8f9fa;"></div>
                            </div>
                        </div>
                        
                        <!-- 优惠券相关字段 -->
                        <div id="editCouponFields" style="display: none;">
                            <hr class="my-4">
                            <h6 class="text-primary mb-3"><i class="fas fa-ticket-alt me-2"></i>优惠券信息</h6>
                            
                            <!-- 第一行：3个字段并排 -->
                            <div class="row mb-3">
                                <div class="col-md-4">
                                    <label for="editCouponTitle" class="form-label">券名称</label>
                                    <input type="text" class="form-control" id="editCouponTitle" maxlength="255">
                                </div>
                                <div class="col-md-4">
                                    <label for="editCouponSummary" class="form-label">优惠券简介</label>
                                    <input type="text" class="form-control" id="editCouponSummary" maxlength="255">
                                </div>
                                <div class="col-md-4">
                                    <label for="editRewardContentDescription" class="form-label">奖励内容描述</label>
                                    <input type="text" class="form-control" id="editRewardContentDescription" maxlength="255">
                                </div>
                            </div>
                            
                            <div class="mb-3">
                                <label for="editRewardMethodDescription" class="form-label">奖励方式描述</label>
                                <input type="text" class="form-control" id="editRewardMethodDescription" maxlength="255">
                                <small class="text-muted">说明奖励发放方式（最多255字符）</small>
                            </div>
                            
                            <div class="mb-3">
                                <label for="editApplicableTransactionScope" class="form-label">适用交易范围描述</label>
                                <input type="text" class="form-control" id="editApplicableTransactionScope" maxlength="255">
                                <small class="text-muted">说明适用的交易范围（最多255字符）</small>
                            </div>

                            <div class="mb-3">
                                <label for="editCouponEligibleCardsText" class="form-label">优惠券适用卡片文本</label>
                                <input type="text" class="form-control" id="editCouponEligibleCardsText" maxlength="255">
                                <small class="text-muted">在优惠券信息里显示的券适用卡片文本（最多255字符）</small>
                            </div>
                        </div>


                        <div class="mb-3">
                            <label class="form-label">商户描述</label>
                            <div id="editMerchantDescriptionEditor"></div>
                            <input type="hidden" id="editMerchantDescription">
                        </div>

                        <div class="mb-3">
                            <label class="form-label">条款条件</label>
                            <div id="editTermsAndConditionsEditor"></div>
                            <input type="hidden" id="editTermsAndConditions">
                        </div>

                        <div class="mb-3">
                            <label class="form-label">常见问题</label>
                            <div id="editQnaEditor"></div>
                            <input type="hidden" id="editQna">
                        </div>

                        <!-- 其他字段 -->
                        <div class="row mb-3">
                            <div class="col-md-6">
                                <label for="editEligibleCardsText" class="form-label">适用卡片文本</label>
                                <textarea class="form-control" id="editEligibleCardsText" rows="3"></textarea>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">无适用卡片提示消息</label>
                                <div id="editNoEligibleCardsMessageEditor"></div>
                                <input type="hidden" id="editNoEligibleCardsMessage">
                            </div>
                        </div>

                        <div class="row mb-3">
                            <div class="col-md-12">
                                <label class="form-label">适用卡片配置</label>
                                <div id="editEligibleCardsConfigBuilder">
                                    <!-- 动态生成的配置构建器 -->
                                </div>
                                <div class="mt-2">
                                    <button type="button" class="btn btn-sm btn-primary" onclick="addRuleGroup('edit')">
                                        <i class="fas fa-plus"></i> 添加规则组 (OR)
                                    </button>
                                    <button type="button" class="btn btn-sm btn-secondary"
                                        onclick="toggleConfigJson('edit')">
                                        <i class="fas fa-code"></i> 查看/编辑JSON
                                    </button>
                                </div>
                                <textarea class="form-control mt-2" id="editEligibleCardsConfig" rows="3"
                                    style="display: none;" placeholder="JSON格式的配置"></textarea>
                            </div>
                        </div>

                        <div class="row mb-3">
                            <div class="col-md-6">
                                <label class="form-label">白名单用户</label>
                                <div class="card">
                                    <div class="card-body">
                                        <!-- 全局白名单控制 -->
                                        <div class="mb-3">
                                            <div class="form-check">
                                                <input class="form-check-input" type="checkbox" id="editGlobalWhitelist" onchange="updateWhitelistConfig('edit')">
                                                <label class="form-check-label" for="editGlobalWhitelist">
                                                    启用全局白名单
                                                </label>
                                                <small class="form-text text-muted d-block">勾选后，在全局白名单中的用户都可以查看此活动</small>
                                            </div>
                                        </div>

                                        <!-- 手机号输入 -->
                                        <div class="mb-3">
                                            <label class="form-label small">添加手机号到白名单</label>
                                            <div class="input-group input-group-sm mb-2">
                                                <input type="text" class="form-control" id="editPhoneInput"
                                                    placeholder="输入11位手机号后按回车添加"
                                                    pattern="1[3-9]\d{9}"
                                                    onkeypress="if(event.key==='Enter') {addPhoneToWhitelist('edit', this.value); this.value=''; event.preventDefault();}">
                                                <button type="button" class="btn btn-outline-secondary"
                                                    onclick="const input=document.getElementById('editPhoneInput'); addPhoneToWhitelist('edit', input.value); input.value='';">添加</button>
                                            </div>
                                        </div>
                                        <div id="editWhitelistTags" class="mb-2">
                                            <!-- 白名单用户标签会在这里显示 -->
                                        </div>
                                        <small class="text-muted">留空表示所有用户都可见此活动</small>
                                    </div>
                                </div>
                                <textarea class="form-control mt-2" id="editWhitelist" rows="3" style="display: none;"
                                    placeholder="JSON格式的白名单配置"></textarea>
                                <div class="mt-1">
                                    <button type="button" class="btn btn-sm btn-secondary"
                                        onclick="toggleWhitelistJson('edit')">
                                        <i class="fas fa-code"></i> 查看/编辑JSON
                                    </button>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <label for="editDefaultActionButtonText" class="form-label">默认按钮文本</label>
                                <input type="text" class="form-control" id="editDefaultActionButtonText">
                            </div>
                        </div>

                        <div class="mb-3">
                            <label for="editActionButtonUrlH5" class="form-label">H5按钮链接</label>
                            <input type="url" class="form-control" id="editActionButtonUrlH5">
                        </div>

                        <div class="row mb-3">
                            <div class="col-md-6">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="editClaimRequired">
                                    <label class="form-check-label" for="editClaimRequired">需要领取</label>
                                </div>
                            </div>
                        </div>

                        <!-- 排名配置 -->
                        <div class="card mb-3">
                            <div class="card-header">
                                <h6 class="card-title mb-0">排名配置</h6>
                            </div>
                            <div class="card-body">
                                <div class="row mb-3">
                                    <div class="col-md-4">
                                        <label for="editBillingCycleType" class="form-label">账单周期类型</label>
                                        <select class="form-select" id="editBillingCycleType">
                                            <option value="campaign">整个活动</option>
                                            <option value="monthly">按月</option>
                                            <option value="weekly">按周</option>
                                            <option value="daily">按天</option>
                                        </select>
                                        <div class="form-text">用于排名查询的账单周期划分方式</div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-4">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" id="editShowRankingList">
                                            <label class="form-check-label" for="editShowRankingList">
                                                显示排名名单
                                            </label>
                                            <div class="form-text">前端是否显示实时消费奖励排名名单</div>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" id="editShowSpecificRank">
                                            <label class="form-check-label" for="editShowSpecificRank">
                                                显示指定名次
                                            </label>
                                            <div class="form-text">前端是否显示指定名次消费排名</div>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" id="editShowUserRanking">
                                            <label class="form-check-label" for="editShowUserRanking">
                                                显示本人排名
                                            </label>
                                            <div class="form-text">前端是否显示用户本人的实时排名</div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row mt-3">
                                    <div class="col-md-4">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" id="editDisplayRewardPool">
                                            <label class="form-check-label" for="editDisplayRewardPool">
                                                显示奖励池信息
                                            </label>
                                            <div class="form-text">在活动详情中显示VSRP奖励池的总金额和可用余额（需要配置VSRP Offer ID）</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- VIK银行配置 -->
                        <div class="card mb-3">
                            <div class="card-header">
                                <h6 class="card-title mb-0">VIK银行配置</h6>
                            </div>
                            <div class="card-body">
                                <div class="mb-3">
                                    <div class="d-flex justify-content-between align-items-center">
                                        <label class="form-label mb-0">关联VIK银行</label>
                                        <!-- VIK银行多选下拉列表 -->
                                        <div class="issuer-multiselect" id="editVikIssuerMultiselect">
                                            <div class="multiselect-display" onclick="toggleVikIssuerDropdown('edit')">
                                                <div class="selected-items" id="editSelectedVikIssuers">
                                                    <span class="text-muted">点击选择VIK银行</span>
                                                </div>
                                                <i class="fas fa-chevron-down dropdown-arrow"></i>
                                            </div>
                                            <div class="multiselect-dropdown" id="editVikIssuerDropdown" style="display: none;">
                                                <div class="dropdown-header">
                                                    <button type="button" class="btn btn-sm btn-outline-primary" onclick="selectAllVikIssuers('edit')">
                                                        <i class="fas fa-check-double"></i> 全选
                                                    </button>
                                                    <button type="button" class="btn btn-sm btn-outline-secondary" onclick="clearAllVikIssuersWithConfirm('edit')">
                                                        <i class="fas fa-times"></i> 清空
                                                    </button>
                                                </div>
                                                <div class="dropdown-items" id="editVikIssuerItems">
                                                    <!-- 动态生成选项 -->
                                                </div>
                                            </div>
                                        </div>
                                        <!-- 保留隐藏的原始select用于表单提交 -->
                                        <select class="d-none" id="editVikIssuerIds" multiple>
                                            <!-- 选项将通过JS动态加载 -->
                                        </select>
                                    </div>
                                    <div class="form-text">选择活动的VIK赞助银行（用于触发报名成功通知等业务逻辑）</div>
                                </div>

                                <!-- VIK银行用户限制 -->
                                <div class="mb-3" id="editVikChannelIdRequirement" style="display: none;">
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" id="editRequireVikChannelId" onchange="updateVikChannelIdRequirementVisibility('edit')">
                                        <label class="form-check-label" for="editRequireVikChannelId">
                                            <strong>仅关联银行用户ID的用户可报名</strong>
                                        </label>
                                        <div class="form-text">开启后，用户需要先绑定VIK银行账号才能报名此活动</div>
                                    </div>
                                </div>

                                <!-- VIK银行用户限制的自定义错误提示 -->
                                <div class="mb-3" id="editVikChannelIdErrorMessage" style="display: none;">
                                    <label class="form-label">报名失败提示信息（可选）</label>
                                    <textarea class="form-control" id="editVikChannelIdErrorMessageText" rows="2"
                                        placeholder="留空则使用默认提示：报名失败，活动报名需要用户存在已关联的银行ID"></textarea>
                                    <div class="form-text">自定义用户没有银行ID时的错误提示信息</div>
                                </div>
                            </div>
                        </div>

                        <!-- 渠道配置 -->
                        <div class="card mb-3">
                            <div class="card-header">
                                <h6 class="card-title mb-0">渠道配置</h6>
                            </div>
                            <div class="card-body">

                                <div class="mb-3">
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" id="editIsHiddenFromMiniapp" onchange="generateChannelSelectors('edit')">
                                        <label class="form-check-label" for="editIsHiddenFromMiniapp">
                                            在Visa渠道隐藏
                                        </label>
                                        <div class="form-text">开启此选项且关联了发卡行渠道后，活动仅在发卡行渠道可见</div>
                                    </div>
                                </div>
                                <div class="mb-3">
                                    <div class="d-flex justify-content-between align-items-center">
                                        <label class="form-label mb-0">关联发卡行渠道</label>
                                        <!-- 发卡行多选下拉列表 -->
                                        <div class="issuer-multiselect" id="editIssuerMultiselect">
                                            <div class="multiselect-display" onclick="toggleIssuerDropdown('edit')">
                                                <div class="selected-items" id="editSelectedIssuers">
                                                    <span class="text-muted">点击选择发卡行渠道</span>
                                                </div>
                                                <i class="fas fa-chevron-down dropdown-arrow"></i>
                                            </div>
                                            <div class="multiselect-dropdown" id="editIssuerDropdown" style="display: none;">
                                                <div class="dropdown-header">
                                                    <button type="button" class="btn btn-sm btn-outline-primary" onclick="selectAllIssuers('edit')">
                                                        <i class="fas fa-check-double"></i> 全选
                                                    </button>
                                                    <button type="button" class="btn btn-sm btn-outline-secondary" onclick="clearAllIssuersWithConfirm('edit')">
                                                        <i class="fas fa-times"></i> 清空
                                                    </button>
                                                </div>
                                                <div class="dropdown-items" id="editIssuerItems">
                                                    <!-- 动态生成选项 -->
                                                </div>
                                            </div>
                                        </div>
                                        <!-- 保留隐藏的原始select用于表单提交 -->
                                        <select class="d-none" id="editIssuerIds" multiple>
                                            <!-- 选项将通过JS动态加载 -->
                                        </select>
                                    </div>
                                    <div class="form-text">选择要关联的发卡行渠道</div>
                                </div>
                                <div class="mt-2">
                                    <small class="text-muted">
                                        <strong>渠道可见性说明：</strong><br>
                                        • 默认情况下，活动在Visa渠道（小程序和H5）可见<br>
                                        • 关联发卡行后，活动在对应发卡行渠道可见<br>
                                        • 开启"在Visa渠道隐藏"且关联发卡行后，活动仅在发卡行渠道可见
                                    </small>
                                </div>
                            </div>
                        </div>

                        <!-- 渠道内容差异化配置 -->
                        <div class="card mb-3">
                            <div class="card-header">
                                <div class="d-flex justify-content-between align-items-center">
                                    <h6 class="card-title mb-0">渠道内容差异化配置</h6>
                                    <button type="button" class="btn btn-sm btn-outline-info" onclick="toggleChannelContentConfig('edit')">
                                        <i class="fas fa-cog"></i> 展开配置
                                    </button>
                                </div>
                            </div>
                            <div class="card-body" id="editChannelContentConfig" style="display: none;">
                                <div class="alert alert-info">
                                    <i class="fas fa-info-circle me-2"></i>
                                    <strong>说明：</strong>此处可以为发卡行渠道配置差异化的展示内容。小程序使用默认字段内容，发卡行渠道可以覆盖特定字段。
                                </div>

                                <!-- 渠道选择器 -->
                                <div class="mb-3">
                                    <label class="form-label">选择要配置的渠道</label>
                                    <ul class="nav nav-tabs" id="editChannelTabs" role="tablist">
                                        <!-- 动态生成渠道Tab -->
                                    </ul>
                                </div>

                                <!-- 渠道内容配置区域 -->
                                <div id="editChannelContentTabs" style="display: none;">
                                    <!-- 小程序配置 -->
                                    <div class="channel-content-tab" data-channel="miniapp" style="display: none;">
                                        <h6 class="mb-3"><i class="fas fa-mobile-alt text-primary"></i> 小程序渠道内容配置</h6>
                                        <div class="row">
                                            <div class="col-md-6">
                                                <div class="mb-3">
                                                    <label class="form-label">活动名称</label>
                                                    <input type="text" class="form-control channel-content-field"
                                                           data-field="name" data-channel="miniapp"
                                                           placeholder="留空使用默认内容">
                                                </div>
                                                <div class="mb-3">
                                                    <label class="form-label">奖励描述</label>
                                                    <textarea class="form-control channel-content-field"
                                                              data-field="reward_description" data-channel="miniapp"
                                                              rows="3" placeholder="留空使用默认内容"></textarea>
                                                </div>
                                                <div class="mb-3">
                                                    <label class="form-label">活动描述</label>
                                                    <textarea class="form-control channel-content-field"
                                                              data-field="description" data-channel="miniapp"
                                                              rows="3" placeholder="留空使用默认内容"></textarea>
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="mb-3">
                                                    <label class="form-label">Banner图片</label>
                                                    <div class="card">
                                                        <div class="card-body text-center">
                                                            <img class="modal-image-preview mb-2 channel-image-preview"
                                                                 data-channel="miniapp" data-field="banner_image_url"
                                                                 style="display: none; max-width: 100%; max-height: 150px;"
                                                                 onclick="showImageModal(this.src)">
                                                            <div class="d-grid gap-2">
                                                                <input type="file" class="form-control channel-image-file"
                                                                       data-channel="miniapp" data-field="banner_image_url"
                                                                       accept="image/*,.svg"
                                                                       onchange="uploadChannelImage(this, 'miniapp', 'banner_image_url')">
                                                                <input type="url" class="form-control channel-content-field"
                                                                       data-field="banner_image_url" data-channel="miniapp"
                                                                       placeholder="或输入图片URL"
                                                                       onchange="previewChannelImageFromUrl(this.value, 'miniapp', 'banner_image_url')">
                                                                <button type="button" class="btn btn-outline-secondary btn-sm w-100"
                                                                        onclick="uploadChannelImageFromUrl('miniapp', 'banner_image_url')">从URL上传</button>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="mb-3">
                                                    <label class="form-label">详情图片</label>
                                                    <div class="card">
                                                        <div class="card-body text-center">
                                                            <img class="modal-image-preview mb-2 channel-image-preview"
                                                                 data-channel="miniapp" data-field="detail_image_url"
                                                                 style="display: none; max-width: 100%; max-height: 150px;"
                                                                 onclick="showImageModal(this.src)">
                                                            <div class="d-grid gap-2">
                                                                <input type="file" class="form-control channel-image-file"
                                                                       data-channel="miniapp" data-field="detail_image_url"
                                                                       accept="image/*,.svg"
                                                                       onchange="uploadChannelImage(this, 'miniapp', 'detail_image_url')">
                                                                <input type="url" class="form-control channel-content-field"
                                                                       data-field="detail_image_url" data-channel="miniapp"
                                                                       placeholder="或输入图片URL"
                                                                       onchange="previewChannelImageFromUrl(this.value, 'miniapp', 'detail_image_url')">
                                                                <button type="button" class="btn btn-outline-secondary btn-sm w-100"
                                                                        onclick="uploadChannelImageFromUrl('miniapp', 'detail_image_url')">从URL上传</button>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-6">
                                                <div class="mb-3">
                                                    <label class="form-label">商户描述</label>
                                                    <textarea class="form-control channel-content-field"
                                                              data-field="merchant_description" data-channel="miniapp"
                                                              rows="3" placeholder="留空使用默认内容"></textarea>
                                                </div>
                                                <div class="mb-3">
                                                    <label class="form-label">条款条件</label>
                                                    <textarea class="form-control channel-content-field"
                                                              data-field="terms_and_conditions" data-channel="miniapp"
                                                              rows="3" placeholder="留空使用默认内容"></textarea>
                                                </div>
                                                <div class="mb-3">
                                                    <label class="form-label">常见问题</label>
                                                    <textarea class="form-control channel-content-field"
                                                              data-field="qna" data-channel="miniapp"
                                                              rows="3" placeholder="留空使用默认内容"></textarea>
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="mb-3">
                                                    <label class="form-label">适用卡片文本</label>
                                                    <textarea class="form-control channel-content-field"
                                                              data-field="eligible_cards_text" data-channel="miniapp"
                                                              rows="3" placeholder="留空使用默认内容"></textarea>
                                                </div>
                                                <div class="mb-3">
                                                    <label class="form-label">优惠券适用卡片文本</label>
                                                    <textarea class="form-control channel-content-field"
                                                              data-field="couponEligibleCardsText" data-channel="miniapp"
                                                              rows="3" placeholder="留空使用默认内容"></textarea>
                                                </div>
                                                <div class="mb-3">
                                                    <label class="form-label">生效日期文本</label>
                                                    <input type="text" class="form-control channel-content-field"
                                                           data-field="effectiveDateText" data-channel="miniapp"
                                                           placeholder="留空使用默认内容">
                                                </div>
                                                <div class="mb-3">
                                                    <label class="form-label">无适用卡片提示信息</label>
                                                    <textarea class="form-control channel-content-field"
                                                              data-field="no_eligible_cards_message" data-channel="miniapp"
                                                              rows="3" placeholder="留空使用默认内容"></textarea>
                                                </div>
                                                <div class="mb-3">
                                                    <label class="form-label">默认按钮文本</label>
                                                    <input type="text" class="form-control channel-content-field"
                                                           data-field="default_action_button_text" data-channel="miniapp"
                                                           placeholder="留空使用默认文本">
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- 发卡行配置模板（动态生成） -->
                                    <div id="editIssuerChannelTemplate" style="display: none;">
                                        <h6 class="mb-3"><i class="fas fa-building text-success"></i> <span class="issuer-name"></span> 渠道内容配置</h6>
                                        <div class="row">
                                            <div class="col-md-6">
                                                <div class="mb-3">
                                                    <label class="form-label">活动名称</label>
                                                    <input type="text" class="form-control channel-content-field"
                                                           data-field="name"
                                                           placeholder="留空使用默认内容">
                                                </div>
                                                <div class="mb-3">
                                                    <label class="form-label">奖励描述</label>
                                                    <textarea class="form-control channel-content-field"
                                                              data-field="reward_description"
                                                              rows="3" placeholder="留空使用默认内容"></textarea>
                                                </div>
                                                <div class="mb-3">
                                                    <label class="form-label">活动描述</label>
                                                    <textarea class="form-control channel-content-field"
                                                              data-field="description"
                                                              rows="3" placeholder="留空使用默认内容"></textarea>
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <!-- Banner图片上传卡片 -->
                                                <div class="mb-3">
                                                    <label class="form-label">Banner图片</label>
                                                    <div class="card">
                                                        <div class="card-body p-2">
                                                            <img class="channel-image-preview mb-2" style="display: none; max-width: 100%; max-height: 120px; cursor: pointer;"
                                                                 onclick="showImageModal(this.src)">
                                                            <div class="row g-2">
                                                                <div class="col-4">
                                                                    <input type="file" class="form-control form-control-sm" accept="image/*,.svg">
                                                                </div>
                                                                <div class="col-4">
                                                                    <input type="url" class="form-control form-control-sm channel-content-field"
                                                                           data-field="banner_image_url"
                                                                           placeholder="或输入图片链接"
                                                                           oninput="previewChannelImage(this)">
                                                                </div>
                                                                <div class="col-4">
                                                                    <button type="button" class="btn btn-primary btn-sm w-100"
                                                                            onclick="uploadChannelImageFromFile(this)">上传</button>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>

                                                <!-- 详情图片上传卡片 -->
                                                <div class="mb-3">
                                                    <label class="form-label">详情图片</label>
                                                    <div class="card">
                                                        <div class="card-body p-2">
                                                            <img class="channel-image-preview mb-2" style="display: none; max-width: 100%; max-height: 120px; cursor: pointer;"
                                                                 onclick="showImageModal(this.src)">
                                                            <div class="row g-2">
                                                                <div class="col-4">
                                                                    <input type="file" class="form-control form-control-sm" accept="image/*,.svg">
                                                                </div>
                                                                <div class="col-4">
                                                                    <input type="url" class="form-control form-control-sm channel-content-field"
                                                                           data-field="detail_image_url"
                                                                           placeholder="或输入图片链接"
                                                                           oninput="previewChannelImage(this)">
                                                                </div>
                                                                <div class="col-4">
                                                                    <button type="button" class="btn btn-primary btn-sm w-100"
                                                                            onclick="uploadChannelImageFromFile(this)">上传</button>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <!-- 新增字段行 -->
                                        <div class="row mt-3">
                                            <div class="col-md-6">
                                                <div class="mb-3">
                                                    <label class="form-label">商户描述</label>
                                                    <textarea class="form-control channel-content-field"
                                                              data-field="merchant_description"
                                                              rows="3" placeholder="留空使用默认内容"></textarea>
                                                </div>
                                                <div class="mb-3">
                                                    <label class="form-label">条款条件</label>
                                                    <textarea class="form-control channel-content-field"
                                                              data-field="terms_and_conditions"
                                                              rows="3" placeholder="留空使用默认内容"></textarea>
                                                </div>
                                                <div class="mb-3">
                                                    <label class="form-label">常见问题</label>
                                                    <textarea class="form-control channel-content-field"
                                                              data-field="qna"
                                                              rows="3" placeholder="留空使用默认内容"></textarea>
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="mb-3">
                                                    <label class="form-label">适用卡片文本</label>
                                                    <textarea class="form-control channel-content-field"
                                                              data-field="eligible_cards_text"
                                                              rows="3" placeholder="留空使用默认内容"></textarea>
                                                </div>
                                                <div class="mb-3">
                                                    <label class="form-label">优惠券适用卡片文本</label>
                                                    <textarea class="form-control channel-content-field"
                                                              data-field="couponEligibleCardsText"
                                                              rows="3" placeholder="留空使用默认内容"></textarea>
                                                </div>
                                                <div class="mb-3">
                                                    <label class="form-label">生效日期文本</label>
                                                    <input type="text" class="form-control channel-content-field"
                                                           data-field="effectiveDateText"
                                                           placeholder="留空使用默认内容">
                                                </div>
                                                <div class="mb-3">
                                                    <label class="form-label">无适用卡片提示信息</label>
                                                    <textarea class="form-control channel-content-field"
                                                              data-field="no_eligible_cards_message"
                                                              rows="3" placeholder="留空使用默认内容"></textarea>
                                                </div>
                                                <div class="mb-3">
                                                    <label class="form-label">默认按钮文本</label>
                                                    <input type="text" class="form-control channel-content-field"
                                                           data-field="default_action_button_text"
                                                           placeholder="留空使用默认文本">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- 批量操作 -->
                                <div class="mt-3 pt-3 border-top">
                                    <div class="btn-group" role="group">
                                        <button type="button" class="btn btn-sm btn-outline-warning"
                                                onclick="resetChannelContents('edit')">
                                            <i class="fas fa-undo"></i> 重置所有差异化配置
                                        </button>
                                        <button type="button" class="btn btn-sm btn-outline-info"
                                                onclick="previewChannelContents('edit')">
                                            <i class="fas fa-eye"></i> 预览各渠道内容
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- 图片管理 -->
                        <div class="row mb-3">
                            <div class="col-md-6">
                                <label class="form-label">Banner图片</label>
                                <div class="card">
                                    <div class="card-body text-center">
                                        <img id="editBannerPreview" class="modal-image-preview mb-2" src=""
                                            alt="Banner预览" onclick="showImageModal(this.src)" style="display: none;">
                                        <div class="d-grid gap-2">
                                            <input type="file" class="form-control" id="editBannerFile" accept="image/*,.svg"
                                                onchange="uploadImage(this, 'editBannerPreview', 'editBannerImageUrl')">
                                            <input type="url" class="form-control" id="editBannerImageUrl"
                                                placeholder="或输入图片URL"
                                                onchange="previewImageFromUrl(this.value, 'editBannerPreview')">
                                            <button type="button" class="btn btn-outline-secondary btn-sm w-100"
                                                onclick="uploadImageFromUrl('editBannerImageUrl', 'editBannerPreview')">从URL上传</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">详情图片</label>
                                <div class="card">
                                    <div class="card-body text-center">
                                        <img id="editDetailPreview" class="modal-image-preview mb-2" src="" alt="详情图预览"
                                            onclick="showImageModal(this.src)" style="display: none;">
                                        <div class="d-grid gap-2">
                                            <input type="file" class="form-control" id="editDetailFile" accept="image/*,.svg"
                                                onchange="uploadImage(this, 'editDetailPreview', 'editDetailImageUrl')">
                                            <input type="url" class="form-control" id="editDetailImageUrl"
                                                placeholder="或输入图片URL"
                                                onchange="previewImageFromUrl(this.value, 'editDetailPreview')">
                                            <button type="button" class="btn btn-outline-secondary btn-sm w-100"
                                                onclick="uploadImageFromUrl('editDetailImageUrl', 'editDetailPreview')">从URL上传</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- 关联奖励内容 -->
                        <div class="mb-3">
                            <label class="form-label">关联奖励内容</label>
                            <div class="card">
                                <div class="card-body">
                                    <div class="mb-2">
                                        <small class="text-muted">为非现金类活动选择关联的奖励内容</small>
                                    </div>
                                    <div id="vue-reward-selector-edit"></div>
                                    <div class="mt-3">
                                        <label class="form-label small">已选奖励内容（拖拽排序）</label>
                                        <div class="list-group" id="editSelectedRewardContents" style="min-height: 100px; border: 1px dashed #dee2e6; border-radius: 4px; padding: 10px;">
                                            <!-- 动态加载已选奖励内容 -->
                                        </div>
                                    </div>
                                    <input type="hidden" id="editRewardContentIds">
                                </div>
                            </div>
                        </div>

                        <!-- 奖励邮件模板配置 -->
                        <div class="mb-3">
                            <label class="form-label">奖励邮件模板配置</label>
                            <div class="card">
                                <div class="card-body">
                                    <div class="mb-2">
                                        <small class="text-muted">配置奖励通知时发送的邮件模板，每个模板关联一个奖励代码（reward_code）</small>
                                    </div>
                                    <div class="mb-3">
                                        <div class="input-group">
                                            <select class="form-select" id="editEmailTemplateSelect" style="max-width: 400px;">
                                                <option value="">选择邮件模板...</option>
                                            </select>
                                            <button type="button" class="btn btn-outline-primary" onclick="addEmailTemplate('edit')">
                                                <i class="fas fa-plus"></i> 添加
                                            </button>
                                        </div>
                                    </div>
                                    <div class="mt-3">
                                        <label class="form-label small">已配置的邮件模板（拖拽排序）</label>
                                        <div class="list-group" id="editSelectedEmailTemplates" style="min-height: 80px; border: 1px dashed #dee2e6; border-radius: 4px; padding: 10px;">
                                            <div class="text-muted text-center py-3" id="editNoEmailTemplatesHint">
                                                <i class="fas fa-envelope-open-text"></i> 暂无配置的邮件模板
                                            </div>
                                        </div>
                                    </div>
                                    <input type="hidden" id="editEmailTemplateIds">
                                </div>
                            </div>
                        </div>

                        <!-- 扩展参数配置 -->
                        <div class="row mb-3">
                            <div class="col-md-12">
                                <label class="form-label">扩展参数配置</label>
                                <div class="card">
                                    <div class="card-body">
                                        <div class="mb-3">
                                            <p class="text-muted small mb-2">
                                                <i class="fas fa-info-circle"></i>
                                                添加自定义的key-value参数，这些参数将保存在JSON格式的扩展配置中
                                            </p>
                                            <button type="button" class="btn btn-sm btn-primary" onclick="addExtendedParam('edit')">
                                                <i class="fas fa-plus"></i> 添加参数
                                            </button>
                                        </div>
                                        <div id="editExtendedParamsContainer">
                                            <!-- 动态生成的参数编辑器 -->
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" onclick="updateCampaign()">保存修改</button>
                </div>
            </div>
        </div>
    </div>

            <!-- 新增活动模态框 -->
    <div class="modal fade" id="createModal" tabindex="-1">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">新增活动</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <form id="createForm">
                        <!-- 基本信息 -->
                        <div class="row mb-3">
                            <div class="col-md-4">
                                <label for="createAcampaignId" class="form-label">VSRA活动ID <span
                                        class="text-danger">*</span></label>
                                <input type="text" class="form-control" id="createAcampaignId" required>
                            </div>
                            <div class="col-md-4">
                                <label for="createVcampaignId" class="form-label">VSRP Campaign ID</label>
                                <input type="text" class="form-control" id="createVcampaignId">
                            </div>
                            <div class="col-md-4">
                                <label for="createVofferId" class="form-label">VSRP Offer ID</label>
                                <input type="text" class="form-control" id="createVofferId" placeholder="用于排名查询">
                            </div>
                        </div>

                        <div class="row mb-3">
                            <div class="col-md-4">
                                <label for="createName" class="form-label">活动名称 <span
                                        class="text-danger">*</span></label>
                                <input type="text" class="form-control" id="createName" required>
                            </div>
                        </div>

                        <div class="row mb-3">
                            <div class="col-md-4">
                                <label for="createStatus" class="form-label">状态 <span
                                        class="text-danger">*</span></label>
                                <select class="form-select" id="createStatus" required>
                                    <option value="0">草稿</option>
                                    <option value="1">上线</option>
                                    <option value="2">停用</option>
                                </select>
                            </div>
                            <div class="col-md-4">
                                <label for="createType" class="form-label">类型 <span class="text-danger">*</span></label>
                                <select class="form-select" id="createType" required>
                                    <option value="cash">现金</option>
                                    <option value="non-cash">非现金</option>
                                </select>
                            </div>
                            <div class="col-md-4">
                                <label for="createCampaignFormat" class="form-label">活动形态 <span class="text-danger">*</span></label>
                                <select class="form-select" id="createCampaignFormat" required onchange="toggleCouponFields('create', this.value)">
                                    <option value="normal">普通活动</option>
                                    <option value="coupon">优惠券活动</option>
                                    <option value="brand">品牌奖励</option>
                                </select>
                            </div>
                            <div class="col-md-4">
                                <label for="createTemplate" class="form-label">模板</label>
                                <input type="text" class="form-control" id="createTemplate">
                            </div>
                        </div>

                        <div class="row mb-3">
                            <div class="col-md-4">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="createIsTest">
                                    <label class="form-check-label" for="createIsTest">
                                        测试活动
                                        <small class="text-muted d-block">勾选后活动将显示在测试活动标签页中</small>
                                    </label>
                                </div>
                            </div>
                        </div>

                        <div class="row mb-3">
                            <div class="col-md-3">
                                <label for="createStartsAt" class="form-label">活动开始时间</label>
                                <input type="datetime-local" class="form-control" id="createStartsAt">
                            </div>
                            <div class="col-md-3">
                                <label for="createEndsAt" class="form-label">活动结束时间</label>
                                <input type="datetime-local" class="form-control" id="createEndsAt">
                            </div>
                            <div class="col-md-3">
                                <label for="createOpensAt" class="form-label">开放时间</label>
                                <input type="datetime-local" class="form-control" id="createOpensAt">
                            </div>
                            <div class="col-md-3">
                                <label for="createClosesAt" class="form-label">关闭时间</label>
                                <input type="datetime-local" class="form-control" id="createClosesAt">
                            </div>
                        </div>

                        <!-- 报名设置 -->
                        <div class="row mb-3">
                            <div class="col-md-3">
                                <div class="form-check mt-4">
                                    <input class="form-check-input" type="checkbox" id="createEnrollRequired" onchange="updateVikChannelIdRequirementVisibility('create')">
                                    <label class="form-check-label" for="createEnrollRequired">需要报名</label>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <label for="createVenrollmentGroupId" class="form-label">VSRP报名组ID</label>
                                <input type="text" class="form-control" id="createVenrollmentGroupId" placeholder="用于报名到VSRP" onchange="updateVikChannelIdRequirementVisibility('create')">
                            </div>
                            <div class="col-md-3" id="createEnrollStartsAtContainer">
                                <label for="createEnrollStartsAt" class="form-label">报名开始时间</label>
                                <input type="datetime-local" class="form-control" id="createEnrollStartsAt">
                            </div>
                            <div class="col-md-3" id="createEnrollEndsAtContainer">
                                <label for="createEnrollEndsAt" class="form-label">报名结束时间</label>
                                <input type="datetime-local" class="form-control" id="createEnrollEndsAt">
                            </div>
                        </div>

                        <!-- 隐藏的时间文本字段（保留后台字段兼容性） -->
                        <input type="hidden" id="createStartsAtText">
                        <input type="hidden" id="createEndsAtText">

                        <div class="row mb-3">
                            <div class="col-md-6">
                                <label for="createEffectiveDateText" class="form-label">生效日期文本</label>
                                <div class="summernote-editor-container">
                                    <textarea id="createEffectiveDateTextEditor" class="form-control"></textarea>
                                    <input type="hidden" id="createEffectiveDateText">
                                </div>
                                <small class="text-muted">在开始时间和结束时间后面的有效日期文本</small>
                            </div>
                        </div>

                        <!-- 富文本字段 -->
                        <div class="mb-3">
                            <label class="form-label">奖励描述</label>
                            <div id="createRewardDescriptionEditor"></div>
                            <input type="hidden" id="createRewardDescription">
                        </div>

                        <div class="mb-3">
                            <label class="form-label">活动描述</label>
                            <div id="createDescriptionEditor"></div>
                            <input type="hidden" id="createDescription">
                        </div>
                        
                        <!-- 优惠券相关字段 -->
                        <div id="createCouponFields" style="display: none;">
                            <hr class="my-4">
                            <h6 class="text-primary mb-3"><i class="fas fa-ticket-alt me-2"></i>优惠券信息</h6>
                            
                            <!-- 第一行：3个字段并排 -->
                            <div class="row mb-3">
                                <div class="col-md-4">
                                    <label for="createCouponTitle" class="form-label">券名称</label>
                                    <input type="text" class="form-control" id="createCouponTitle" maxlength="255">
                                </div>
                                <div class="col-md-4">
                                    <label for="createCouponSummary" class="form-label">优惠券简介</label>
                                    <input type="text" class="form-control" id="createCouponSummary" maxlength="255">
                                </div>
                                <div class="col-md-4">
                                    <label for="createRewardContentDescription" class="form-label">奖励内容描述</label>
                                    <input type="text" class="form-control" id="createRewardContentDescription" maxlength="255">
                                </div>
                            </div>
                            
                            <div class="mb-3">
                                <label for="createRewardMethodDescription" class="form-label">奖励方式描述</label>
                                <input type="text" class="form-control" id="createRewardMethodDescription" maxlength="255">
                                <small class="text-muted">说明奖励发放方式（最多255字符）</small>
                            </div>
                            
                            <div class="mb-3">
                                <label for="createApplicableTransactionScope" class="form-label">适用交易范围描述</label>
                                <input type="text" class="form-control" id="createApplicableTransactionScope" maxlength="255">
                                <small class="text-muted">说明适用的交易范围（最多255字符）</small>
                            </div>

                            <div class="mb-3">
                                <label for="createCouponEligibleCardsText" class="form-label">优惠券适用卡片文本</label>
                                <input type="text" class="form-control" id="createCouponEligibleCardsText" maxlength="255">
                                <small class="text-muted">在优惠券信息里显示的券适用卡片文本（最多255字符）</small>
                            </div>
                        </div>


                        <div class="mb-3">
                            <label class="form-label">商户描述</label>
                            <div id="createMerchantDescriptionEditor"></div>
                            <input type="hidden" id="createMerchantDescription">
                        </div>

                        <div class="mb-3">
                            <label class="form-label">条款条件</label>
                            <div id="createTermsAndConditionsEditor"></div>
                            <input type="hidden" id="createTermsAndConditions">
                        </div>

                        <div class="mb-3">
                            <label class="form-label">常见问题</label>
                            <div id="createQnaEditor"></div>
                            <input type="hidden" id="createQna">
                        </div>

                        <!-- 其他字段 -->
                        <div class="row mb-3">
                            <div class="col-md-6">
                                <label for="createEligibleCardsText" class="form-label">适用卡片文本</label>
                                <textarea class="form-control" id="createEligibleCardsText" rows="3"></textarea>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">无适用卡片提示消息</label>
                                <div id="createNoEligibleCardsMessageEditor"></div>
                                <input type="hidden" id="createNoEligibleCardsMessage">
                            </div>
                        </div>

                        <div class="row mb-3">
                            <div class="col-md-12">
                                <label class="form-label">适用卡片配置</label>
                                <div id="createEligibleCardsConfigBuilder">
                                    <!-- 动态生成的配置构建器 -->
                                </div>
                                <div class="mt-2">
                                    <button type="button" class="btn btn-sm btn-primary"
                                        onclick="addRuleGroup('create')">
                                        <i class="fas fa-plus"></i> 添加规则组 (OR)
                                    </button>
                                    <button type="button" class="btn btn-sm btn-secondary"
                                        onclick="toggleConfigJson('create')">
                                        <i class="fas fa-code"></i> 查看/编辑JSON
                                    </button>
                                </div>
                                <textarea class="form-control mt-2" id="createEligibleCardsConfig" rows="3"
                                    style="display: none;" placeholder="JSON格式的配置"></textarea>
                            </div>
                        </div>

                        <div class="row mb-3">
                            <div class="col-md-6">
                                <label class="form-label">白名单用户</label>
                                <div class="card">
                                    <div class="card-body">
                                        <!-- 全局白名单控制 -->
                                        <div class="mb-3">
                                            <div class="form-check">
                                                <input class="form-check-input" type="checkbox" id="createGlobalWhitelist" onchange="updateWhitelistConfig('create')">
                                                <label class="form-check-label" for="createGlobalWhitelist">
                                                    启用全局白名单
                                                </label>
                                                <small class="form-text text-muted d-block">勾选后，在全局白名单中的用户都可以查看此活动</small>
                                            </div>
                                        </div>

                                        <!-- 手机号输入 -->
                                        <div class="mb-3">
                                            <label class="form-label small">添加手机号到白名单</label>
                                            <div class="input-group input-group-sm mb-2">
                                                <input type="text" class="form-control" id="createPhoneInput"
                                                    placeholder="输入11位手机号后按回车添加"
                                                    pattern="1[3-9]\d{9}"
                                                    onkeypress="if(event.key==='Enter') {addPhoneToWhitelist('create', this.value); this.value=''; event.preventDefault();}">
                                                <button type="button" class="btn btn-outline-secondary"
                                                    onclick="const input=document.getElementById('createPhoneInput'); addPhoneToWhitelist('create', input.value); input.value='';">添加</button>
                                            </div>
                                        </div>
                                        <div id="createWhitelistTags" class="mb-2">
                                            <!-- 白名单用户标签会在这里显示 -->
                                        </div>
                                        <small class="text-muted">留空表示所有用户都可见此活动</small>
                                    </div>
                                </div>
                                <textarea class="form-control mt-2" id="createWhitelist" rows="3" style="display: none;"
                                    placeholder="JSON格式的白名单配置"></textarea>
                                <div class="mt-1">
                                    <button type="button" class="btn btn-sm btn-secondary"
                                        onclick="toggleWhitelistJson('create')">
                                        <i class="fas fa-code"></i> 查看/编辑JSON
                                    </button>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <label for="createDefaultActionButtonText" class="form-label">默认按钮文本</label>
                                <input type="text" class="form-control" id="createDefaultActionButtonText">
                            </div>
                        </div>

                        <div class="mb-3">
                            <label for="createActionButtonUrlH5" class="form-label">H5按钮链接</label>
                            <input type="url" class="form-control" id="createActionButtonUrlH5">
                        </div>

                        <div class="row mb-3">
                            <div class="col-md-6">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="createClaimRequired">
                                    <label class="form-check-label" for="createClaimRequired">需要领取</label>
                                </div>
                            </div>
                        </div>

                        <!-- 排名配置 -->
                        <div class="card mb-3">
                            <div class="card-header">
                                <h6 class="card-title mb-0">排名配置</h6>
                            </div>
                            <div class="card-body">
                                <div class="row mb-3">
                                    <div class="col-md-4">
                                        <label for="createBillingCycleType" class="form-label">账单周期类型</label>
                                        <select class="form-select" id="createBillingCycleType">
                                            <option value="campaign">整个活动</option>
                                            <option value="monthly">按月</option>
                                            <option value="weekly">按周</option>
                                            <option value="daily">按天</option>
                                        </select>
                                        <div class="form-text">用于排名查询的账单周期划分方式</div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-4">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" id="createShowRankingList">
                                            <label class="form-check-label" for="createShowRankingList">
                                                显示排名名单
                                            </label>
                                            <div class="form-text">前端是否显示实时消费奖励排名名单</div>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" id="createShowSpecificRank">
                                            <label class="form-check-label" for="createShowSpecificRank">
                                                显示指定名次
                                            </label>
                                            <div class="form-text">前端是否显示指定名次消费排名</div>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" id="createShowUserRanking">
                                            <label class="form-check-label" for="createShowUserRanking">
                                                显示本人排名
                                            </label>
                                            <div class="form-text">前端是否显示用户本人的实时排名</div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row mt-3">
                                    <div class="col-md-4">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" id="createDisplayRewardPool">
                                            <label class="form-check-label" for="createDisplayRewardPool">
                                                显示奖励池信息
                                            </label>
                                            <div class="form-text">在活动详情中显示VSRP奖励池的总金额和可用余额（需要配置VSRP Offer ID）</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- VIK银行配置 -->
                        <div class="card mb-3">
                            <div class="card-header">
                                <h6 class="card-title mb-0">VIK银行配置</h6>
                            </div>
                            <div class="card-body">
                                <div class="mb-3">
                                    <div class="d-flex justify-content-between align-items-center">
                                        <label class="form-label mb-0">关联VIK银行</label>
                                        <!-- VIK银行多选下拉列表 -->
                                        <div class="issuer-multiselect" id="createVikIssuerMultiselect">
                                            <div class="multiselect-display" onclick="toggleVikIssuerDropdown('create')">
                                                <div class="selected-items" id="createSelectedVikIssuers">
                                                    <span class="text-muted">点击选择VIK银行</span>
                                                </div>
                                                <i class="fas fa-chevron-down dropdown-arrow"></i>
                                            </div>
                                            <div class="multiselect-dropdown" id="createVikIssuerDropdown" style="display: none;">
                                                <div class="dropdown-header">
                                                    <button type="button" class="btn btn-sm btn-outline-primary" onclick="selectAllVikIssuers('create')">
                                                        <i class="fas fa-check-double"></i> 全选
                                                    </button>
                                                    <button type="button" class="btn btn-sm btn-outline-secondary" onclick="clearAllVikIssuersWithConfirm('create')">
                                                        <i class="fas fa-times"></i> 清空
                                                    </button>
                                                </div>
                                                <div class="dropdown-items" id="createVikIssuerItems">
                                                    <!-- 动态生成选项 -->
                                                </div>
                                            </div>
                                        </div>
                                        <!-- 保留隐藏的原始select用于表单提交 -->
                                        <select class="d-none" id="createVikIssuerIds" multiple>
                                            <!-- 选项将通过JS动态加载 -->
                                        </select>
                                    </div>
                                    <div class="form-text">选择活动的VIK赞助银行（用于触发报名成功通知等业务逻辑）</div>
                                </div>

                                <!-- VIK银行用户ID限制 -->
                                <div class="mb-3" id="createVikChannelIdRequirement" style="display: none;">
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" id="createRequireVikChannelId" onchange="updateVikChannelIdRequirementVisibility('create')">
                                        <label class="form-check-label" for="createRequireVikChannelId">
                                            <strong>仅关联银行用户ID的用户可报名</strong>
                                        </label>
                                        <div class="form-text">开启后，用户需要先绑定VIK银行账号才能报名此活动</div>
                                    </div>
                                </div>

                                <!-- VIK银行用户限制的自定义错误提示 -->
                                <div class="mb-3" id="createVikChannelIdErrorMessage" style="display: none;">
                                    <label class="form-label">报名失败提示信息（可选）</label>
                                    <textarea class="form-control" id="createVikChannelIdErrorMessageText" rows="2"
                                        placeholder="留空则使用默认提示：报名失败，活动报名需要用户存在已关联的银行ID"></textarea>
                                    <div class="form-text">自定义用户没有银行ID时的错误提示信息</div>
                                </div>
                            </div>
                        </div>

                        <!-- 渠道配置 -->
                        <div class="card mb-3">
                            <div class="card-header">
                                <h6 class="card-title mb-0">渠道配置</h6>
                            </div>
                            <div class="card-body">

                                <div class="mb-3">
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" id="createIsHiddenFromMiniapp" onchange="generateChannelSelectors('create')">
                                        <label class="form-check-label" for="createIsHiddenFromMiniapp">
                                            在Visa渠道隐藏
                                        </label>
                                        <div class="form-text">开启此选项且关联了发卡行渠道后，活动仅在发卡行渠道可见</div>
                                    </div>
                                </div>
                                <div class="mb-3">
                                    <div class="d-flex justify-content-between align-items-center">
                                        <label class="form-label mb-0">关联发卡行渠道</label>
                                        <!-- 发卡行多选下拉列表 -->
                                        <div class="issuer-multiselect" id="createIssuerMultiselect">
                                            <div class="multiselect-display" onclick="toggleIssuerDropdown('create')">
                                                <div class="selected-items" id="createSelectedIssuers">
                                                    <span class="text-muted">点击选择发卡行渠道</span>
                                                </div>
                                                <i class="fas fa-chevron-down dropdown-arrow"></i>
                                            </div>
                                            <div class="multiselect-dropdown" id="createIssuerDropdown" style="display: none;">
                                                <div class="dropdown-header">
                                                    <button type="button" class="btn btn-sm btn-outline-primary" onclick="selectAllIssuers('create')">
                                                        <i class="fas fa-check-double"></i> 全选
                                                    </button>
                                                    <button type="button" class="btn btn-sm btn-outline-secondary" onclick="clearAllIssuersWithConfirm('create')">
                                                        <i class="fas fa-times"></i> 清空
                                                    </button>
                                                </div>
                                                <div class="dropdown-items" id="createIssuerItems">
                                                    <!-- 动态生成选项 -->
                                                </div>
                                            </div>
                                        </div>
                                        <!-- 保留隐藏的原始select用于表单提交 -->
                                        <select class="d-none" id="createIssuerIds" multiple>
                                            <!-- 选项将通过JS动态加载 -->
                                        </select>
                                    </div>
                                    <div class="form-text">选择要关联的发卡行渠道</div>
                                </div>
                                <div class="mt-2">
                                    <small class="text-muted">
                                        <strong>渠道可见性说明：</strong><br>
                                        • 默认情况下，活动在Visa渠道（小程序和H5）可见<br>
                                        • 关联发卡行后，活动在对应发卡行渠道可见<br>
                                        • 开启"在Visa渠道隐藏"且关联发卡行后，活动仅在发卡行渠道可见
                                    </small>
                                </div>
                            </div>
                        </div>

                        <!-- 渠道内容差异化配置 -->
                        <div class="card mb-3">
                            <div class="card-header">
                                <div class="d-flex justify-content-between align-items-center">
                                    <h6 class="card-title mb-0">渠道内容差异化配置</h6>
                                    <button type="button" class="btn btn-sm btn-outline-info" onclick="toggleChannelContentConfig('create')">
                                        <i class="fas fa-cog"></i> 展开配置
                                    </button>
                                </div>
                            </div>
                            <div class="card-body" id="createChannelContentConfig" style="display: none;">
                                <div class="alert alert-info">
                                    <i class="fas fa-info-circle me-2"></i>
                                    <strong>说明：</strong>此处可以为发卡行渠道配置差异化的展示内容。小程序使用默认字段内容，发卡行渠道可以覆盖特定字段。
                                </div>

                                <!-- 渠道选择器 -->
                                <div class="mb-3">
                                    <label class="form-label">选择要配置的渠道</label>
                                    <ul class="nav nav-tabs" id="createChannelTabs" role="tablist">
                                        <!-- 动态生成渠道Tab -->
                                    </ul>
                                </div>

                                <!-- 渠道内容配置区域 -->
                                <div id="createChannelContentTabs" style="display: none;">
                                    <!-- 小程序配置 -->
                                    <div class="channel-content-tab" data-channel="miniapp" style="display: none;">
                                        <h6 class="mb-3"><i class="fas fa-mobile-alt text-primary"></i> 小程序渠道内容配置</h6>
                                        <div class="row">
                                            <div class="col-md-6">
                                                <div class="mb-3">
                                                    <label class="form-label">活动名称</label>
                                                    <input type="text" class="form-control channel-content-field"
                                                           data-field="name" data-channel="miniapp"
                                                           placeholder="留空使用默认内容">
                                                </div>
                                                <div class="mb-3">
                                                    <label class="form-label">奖励描述</label>
                                                    <textarea class="form-control channel-content-field"
                                                              data-field="reward_description" data-channel="miniapp"
                                                              rows="3" placeholder="留空使用默认内容"></textarea>
                                                </div>
                                                <div class="mb-3">
                                                    <label class="form-label">活动描述</label>
                                                    <textarea class="form-control channel-content-field"
                                                              data-field="description" data-channel="miniapp"
                                                              rows="3" placeholder="留空使用默认内容"></textarea>
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <!-- Banner图片上传卡片 -->
                                                <div class="mb-3">
                                                    <label class="form-label">Banner图片</label>
                                                    <div class="card">
                                                        <div class="card-body p-2">
                                                            <img class="channel-image-preview mb-2" style="display: none; max-width: 100%; max-height: 120px; cursor: pointer;"
                                                                 onclick="showImageModal(this.src)">
                                                            <div class="row g-2">
                                                                <div class="col-4">
                                                                    <input type="file" class="form-control form-control-sm" accept="image/*,.svg">
                                                                </div>
                                                                <div class="col-4">
                                                                    <input type="url" class="form-control form-control-sm channel-content-field"
                                                                           data-field="banner_image_url" data-channel="miniapp"
                                                                           placeholder="或输入图片链接"
                                                                           oninput="previewChannelImage(this)">
                                                                </div>
                                                                <div class="col-4">
                                                                    <button type="button" class="btn btn-primary btn-sm w-100"
                                                                            onclick="uploadChannelImageFromFile(this)">上传</button>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>

                                                <!-- 详情图片上传卡片 -->
                                                <div class="mb-3">
                                                    <label class="form-label">详情图片</label>
                                                    <div class="card">
                                                        <div class="card-body p-2">
                                                            <img class="channel-image-preview mb-2" style="display: none; max-width: 100%; max-height: 120px; cursor: pointer;"
                                                                 onclick="showImageModal(this.src)">
                                                            <div class="row g-2">
                                                                <div class="col-4">
                                                                    <input type="file" class="form-control form-control-sm" accept="image/*,.svg">
                                                                </div>
                                                                <div class="col-4">
                                                                    <input type="url" class="form-control form-control-sm channel-content-field"
                                                                           data-field="detail_image_url" data-channel="miniapp"
                                                                           placeholder="或输入图片链接"
                                                                           oninput="previewChannelImage(this)">
                                                                </div>
                                                                <div class="col-4">
                                                                    <button type="button" class="btn btn-primary btn-sm w-100"
                                                                            onclick="uploadChannelImageFromFile(this)">上传</button>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <!-- 新增字段行 -->
                                        <div class="row mt-3">
                                            <div class="col-md-6">
                                                <div class="mb-3">
                                                    <label class="form-label">商户描述</label>
                                                    <textarea class="form-control channel-content-field"
                                                              data-field="merchant_description" data-channel="miniapp"
                                                              rows="3" placeholder="留空使用默认内容"></textarea>
                                                </div>
                                                <div class="mb-3">
                                                    <label class="form-label">条款条件</label>
                                                    <textarea class="form-control channel-content-field"
                                                              data-field="terms_and_conditions" data-channel="miniapp"
                                                              rows="3" placeholder="留空使用默认内容"></textarea>
                                                </div>
                                                <div class="mb-3">
                                                    <label class="form-label">常见问题</label>
                                                    <textarea class="form-control channel-content-field"
                                                              data-field="qna" data-channel="miniapp"
                                                              rows="3" placeholder="留空使用默认内容"></textarea>
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="mb-3">
                                                    <label class="form-label">适用卡片文本</label>
                                                    <textarea class="form-control channel-content-field"
                                                              data-field="eligible_cards_text" data-channel="miniapp"
                                                              rows="3" placeholder="留空使用默认内容"></textarea>
                                                </div>
                                                <div class="mb-3">
                                                    <label class="form-label">优惠券适用卡片文本</label>
                                                    <textarea class="form-control channel-content-field"
                                                              data-field="couponEligibleCardsText" data-channel="miniapp"
                                                              rows="3" placeholder="留空使用默认内容"></textarea>
                                                </div>
                                                <div class="mb-3">
                                                    <label class="form-label">生效日期文本</label>
                                                    <input type="text" class="form-control channel-content-field"
                                                           data-field="effectiveDateText" data-channel="miniapp"
                                                           placeholder="留空使用默认内容">
                                                </div>
                                                <div class="mb-3">
                                                    <label class="form-label">无适用卡片提示信息</label>
                                                    <textarea class="form-control channel-content-field"
                                                              data-field="no_eligible_cards_message" data-channel="miniapp"
                                                              rows="3" placeholder="留空使用默认内容"></textarea>
                                                </div>
                                                <div class="mb-3">
                                                    <label class="form-label">默认按钮文本</label>
                                                    <input type="text" class="form-control channel-content-field"
                                                           data-field="default_action_button_text" data-channel="miniapp"
                                                           placeholder="留空使用默认文本">
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- 发卡行配置模板（动态生成） -->
                                    <div id="createIssuerChannelTemplate" style="display: none;">
                                        <h6 class="mb-3"><i class="fas fa-building text-success"></i> <span class="issuer-name"></span> 渠道内容配置</h6>
                                        <div class="row">
                                            <div class="col-md-6">
                                                <div class="mb-3">
                                                    <label class="form-label">活动名称</label>
                                                    <input type="text" class="form-control channel-content-field"
                                                           data-field="name"
                                                           placeholder="留空使用默认内容">
                                                </div>
                                                <div class="mb-3">
                                                    <label class="form-label">奖励描述</label>
                                                    <textarea class="form-control channel-content-field"
                                                              data-field="reward_description"
                                                              rows="3" placeholder="留空使用默认内容"></textarea>
                                                </div>
                                                <div class="mb-3">
                                                    <label class="form-label">活动描述</label>
                                                    <textarea class="form-control channel-content-field"
                                                              data-field="description"
                                                              rows="3" placeholder="留空使用默认内容"></textarea>
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <!-- Banner图片上传卡片 -->
                                                <div class="mb-3">
                                                    <label class="form-label">Banner图片</label>
                                                    <div class="card">
                                                        <div class="card-body p-2">
                                                            <div class="row g-2">
                                                                <div class="col-4">
                                                                    <input type="file" class="form-control form-control-sm" accept="image/*">
                                                                </div>
                                                                <div class="col-4">
                                                                    <input type="url" class="form-control form-control-sm channel-content-field"
                                                                           data-field="banner_image_url"
                                                                           placeholder="或输入图片链接">
                                                                </div>
                                                                <div class="col-4">
                                                                    <button type="button" class="btn btn-primary btn-sm w-100" disabled>暂不可用</button>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>

                                                <!-- 详情图片上传卡片 -->
                                                <div class="mb-3">
                                                    <label class="form-label">详情图片</label>
                                                    <div class="card">
                                                        <div class="card-body p-2">
                                                            <div class="row g-2">
                                                                <div class="col-4">
                                                                    <input type="file" class="form-control form-control-sm" accept="image/*">
                                                                </div>
                                                                <div class="col-4">
                                                                    <input type="url" class="form-control form-control-sm channel-content-field"
                                                                           data-field="detail_image_url"
                                                                           placeholder="或输入图片链接">
                                                                </div>
                                                                <div class="col-4">
                                                                    <button type="button" class="btn btn-primary btn-sm w-100" disabled>暂不可用</button>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <!-- 新增字段行 -->
                                        <div class="row mt-3">
                                            <div class="col-md-6">
                                                <div class="mb-3">
                                                    <label class="form-label">商户描述</label>
                                                    <textarea class="form-control channel-content-field"
                                                              data-field="merchant_description"
                                                              rows="3" placeholder="留空使用默认内容"></textarea>
                                                </div>
                                                <div class="mb-3">
                                                    <label class="form-label">条款条件</label>
                                                    <textarea class="form-control channel-content-field"
                                                              data-field="terms_and_conditions"
                                                              rows="3" placeholder="留空使用默认内容"></textarea>
                                                </div>
                                                <div class="mb-3">
                                                    <label class="form-label">常见问题</label>
                                                    <textarea class="form-control channel-content-field"
                                                              data-field="qna"
                                                              rows="3" placeholder="留空使用默认内容"></textarea>
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="mb-3">
                                                    <label class="form-label">适用卡片文本</label>
                                                    <textarea class="form-control channel-content-field"
                                                              data-field="eligible_cards_text"
                                                              rows="3" placeholder="留空使用默认内容"></textarea>
                                                </div>
                                                <div class="mb-3">
                                                    <label class="form-label">无适用卡片提示信息</label>
                                                    <textarea class="form-control channel-content-field"
                                                              data-field="no_eligible_cards_message"
                                                              rows="3" placeholder="留空使用默认内容"></textarea>
                                                </div>
                                                <div class="mb-3">
                                                    <label class="form-label">默认按钮文本</label>
                                                    <input type="text" class="form-control channel-content-field"
                                                           data-field="default_action_button_text"
                                                           placeholder="留空使用默认文本">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- 批量操作 -->
                                <div class="mt-3 pt-3 border-top">
                                    <div class="btn-group" role="group">
                                        <button type="button" class="btn btn-sm btn-outline-warning"
                                                onclick="resetChannelContents('create')">
                                            <i class="fas fa-undo"></i> 重置所有差异化配置
                                        </button>
                                        <button type="button" class="btn btn-sm btn-outline-info"
                                                onclick="previewChannelContents('create')">
                                            <i class="fas fa-eye"></i> 预览各渠道内容
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- 图片管理 -->
                        <div class="row mb-3">
                            <div class="col-md-6">
                                <label class="form-label">Banner图片</label>
                                <div class="card">
                                    <div class="card-body text-center">
                                        <img id="createBannerPreview" class="modal-image-preview mb-2" src=""
                                            alt="Banner预览" onclick="showImageModal(this.src)" style="display: none;">
                                        <div class="d-grid gap-2">
                                            <input type="file" class="form-control" id="createBannerFile"
                                                accept="image/*,.svg"
                                                onchange="uploadImage(this, 'createBannerPreview', 'createBannerImageUrl')">
                                            <input type="url" class="form-control" id="createBannerImageUrl"
                                                placeholder="或输入图片URL"
                                                onchange="previewImageFromUrl(this.value, 'createBannerPreview')">
                                            <button type="button" class="btn btn-outline-secondary btn-sm w-100"
                                                onclick="uploadImageFromUrl('createBannerImageUrl', 'createBannerPreview')">从URL上传</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">详情图片</label>
                                <div class="card">
                                    <div class="card-body text-center">
                                        <img id="createDetailPreview" class="modal-image-preview mb-2" src=""
                                            alt="详情图预览" onclick="showImageModal(this.src)" style="display: none;">
                                        <div class="d-grid gap-2">
                                            <input type="file" class="form-control" id="createDetailFile"
                                                accept="image/*,.svg"
                                                onchange="uploadImage(this, 'createDetailPreview', 'createDetailImageUrl')">
                                            <input type="url" class="form-control" id="createDetailImageUrl"
                                                placeholder="或输入图片URL"
                                                onchange="previewImageFromUrl(this.value, 'createDetailPreview')">
                                            <button type="button" class="btn btn-outline-secondary btn-sm w-100"
                                                onclick="uploadImageFromUrl('createDetailImageUrl', 'createDetailPreview')">从URL上传</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- 关联奖励内容 -->
                        <div class="mb-3">
                            <label class="form-label">关联奖励内容</label>
                            <div class="card">
                                <div class="card-body">
                                    <div class="mb-2">
                                        <small class="text-muted">为非现金类活动选择关联的奖励内容</small>
                                    </div>
                                    <div id="vue-reward-selector-create"></div>
                                    <div class="mt-3">
                                        <label class="form-label small">已选奖励内容（拖拽排序）</label>
                                        <div class="list-group" id="createSelectedRewardContents" style="min-height: 100px; border: 1px dashed #dee2e6; border-radius: 4px; padding: 10px;">
                                            <!-- 动态加载已选奖励内容 -->
                                        </div>
                                    </div>
                                    <input type="hidden" id="createRewardContentIds">
                                </div>
                            </div>
                        </div>

                        <!-- 奖励邮件模板配置 -->
                        <div class="mb-3">
                            <label class="form-label">奖励邮件模板配置</label>
                            <div class="card">
                                <div class="card-body">
                                    <div class="mb-2">
                                        <small class="text-muted">配置奖励通知时发送的邮件模板，每个模板关联一个奖励代码（reward_code）</small>
                                    </div>
                                    <div class="mb-3">
                                        <div class="input-group">
                                            <select class="form-select" id="createEmailTemplateSelect" style="max-width: 400px;">
                                                <option value="">选择邮件模板...</option>
                                            </select>
                                            <button type="button" class="btn btn-outline-primary" onclick="addEmailTemplate('create')">
                                                <i class="fas fa-plus"></i> 添加
                                            </button>
                                        </div>
                                    </div>
                                    <div class="mt-3">
                                        <label class="form-label small">已配置的邮件模板（拖拽排序）</label>
                                        <div class="list-group" id="createSelectedEmailTemplates" style="min-height: 80px; border: 1px dashed #dee2e6; border-radius: 4px; padding: 10px;">
                                            <div class="text-muted text-center py-3" id="createNoEmailTemplatesHint">
                                                <i class="fas fa-envelope-open-text"></i> 暂无配置的邮件模板
                                            </div>
                                        </div>
                                    </div>
                                    <input type="hidden" id="createEmailTemplateIds">
                                </div>
                            </div>
                        </div>

                        <!-- 扩展参数配置 -->
                        <div class="row mb-3">
                            <div class="col-md-12">
                                <label class="form-label">扩展参数配置</label>
                                <div class="card">
                                    <div class="card-body">
                                        <div class="mb-3">
                                            <p class="text-muted small mb-2">
                                                <i class="fas fa-info-circle"></i>
                                                添加自定义的key-value参数，这些参数将保存在JSON格式的扩展配置中
                                            </p>
                                            <button type="button" class="btn btn-sm btn-primary" onclick="addExtendedParam('create')">
                                                <i class="fas fa-plus"></i> 添加参数
                                            </button>
                                        </div>
                                        <div id="createExtendedParamsContainer">
                                            <!-- 动态生成的参数编辑器 -->
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-success" onclick="createCampaign()">创建活动</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 图片预览模态框 -->
    <div class="modal fade" id="imageModal" tabindex="-1">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">图片预览</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body text-center">
                    <img id="modalImage" class="img-fluid" src="" alt="预览图片">
                </div>
                <div class="modal-footer">
                    <a id="downloadImageBtn" href="" download class="btn btn-primary">下载图片</a>
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 删除确认模态框 -->
    <div class="modal fade" id="deleteModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">确认删除</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <p>您确定要删除以下活动吗？</p>
                    <p class="fw-bold text-danger" id="deleteConfirmText">活动名称</p>
                    <p class="text-muted">注意：删除后的活动将不再显示在列表中，但可以通过数据库恢复。</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-danger" id="confirmDeleteBtn"
                        onclick="deleteCampaign()">确认删除</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 报名详情模态框 -->
    <div class="modal fade" id="enrollmentDetailsModal" tabindex="-1">
        <div class="modal-dialog" style="max-width: 95%; width: 1400px;">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">
                        <i class="fas fa-users me-2"></i>
                        报名详情 - <span id="enrollmentCampaignName"></span>
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <!-- 趋势图区域 -->
                    <div class="card mb-3">
                        <div class="card-header py-2">
                            <h6 class="mb-0"><i class="fas fa-chart-line me-2"></i>报名趋势</h6>
                        </div>
                        <div class="card-body" style="height: 280px;">
                            <canvas id="enrollmentTrendChart"></canvas>
                        </div>
                    </div>

                    <!-- 搜索区域 -->
                    <div class="d-flex justify-content-between align-items-center mb-3">
                        <div class="d-flex align-items-center gap-2">
                            <div class="input-group" style="width: 320px;">
                                <span class="input-group-text"><i class="fas fa-search"></i></span>
                                <input type="text" class="form-control" id="enrollmentSearchInput"
                                    placeholder="搜索 VUID / 手机号 / 卡号后4位 / 卡ID"
                                    onkeypress="if(event.key==='Enter') searchEnrollments()">
                                <button class="btn btn-outline-secondary" type="button" onclick="clearEnrollmentSearch()">
                                    <i class="fas fa-times"></i>
                                </button>
                            </div>
                            <button class="btn btn-primary" onclick="searchEnrollments()">搜索</button>
                        </div>
                        <div class="text-muted">
                            共 <span id="enrollmentTotalCount" class="fw-bold text-primary">0</span> 条记录
                        </div>
                    </div>

                    <!-- 报名列表表格 -->
                    <div class="table-responsive">
                        <table class="table table-hover table-striped">
                            <thead class="table-light">
                                <tr>
                                    <th style="width: 160px;">VUID</th>
                                    <th style="width: 130px;">手机号</th>
                                    <th style="width: 180px;">卡号</th>
                                    <th style="width: 200px;">卡ID</th>
                                    <th style="width: 120px;">发卡行</th>
                                    <th style="width: 160px;">报名时间</th>
                                </tr>
                            </thead>
                            <tbody id="enrollmentTableBody">
                                <tr>
                                    <td colspan="6" class="text-center py-4">
                                        <i class="fas fa-spinner fa-spin me-2"></i>加载中...
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>

                    <!-- 分页 -->
                    <nav id="enrollmentPagination" class="d-flex justify-content-center">
                        <ul class="pagination mb-0"></ul>
                    </nav>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Bootstrap JS already loaded in layout -->

    <!-- CryptoJS for SHA256 hashing -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.1.1/crypto-js.min.js"></script>

    <!-- Vue.js 3 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@3.4.21/dist/vue.global.prod.js"></script>

    <!-- Chart.js -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>

    <!-- 动态加载jQuery和Summernote -->
    <script>
        // 动态加载脚本的函数
        function loadScript(src, callback) {
            const script = document.createElement('script');
            script.src = src;
            script.onload = callback;
            script.onerror = function() {
                console.error('Failed to load script:', src);
            };
            document.head.appendChild(script);
        }

        // 确保jQuery加载
        function ensureJQuery(callback) {
            if (typeof jQuery === 'undefined') {
                console.log('Loading jQuery...');
                loadScript('https://code.jquery.com/jquery-3.6.0.min.js', function() {
                    console.log('jQuery loaded successfully');
                    callback();
                });
            } else {
                console.log('jQuery already loaded');
                callback();
            }
        }

        // 加载Summernote
        function loadSummernote(callback) {
            console.log('Loading Summernote...');
            loadScript('https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-bs4.min.js', function() {
                console.log('Summernote loaded');
                loadScript('https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/lang/summernote-zh-CN.min.js', function() {
                    console.log('Summernote Chinese language loaded');
                    callback();
                });
            });
        }

        // 初始化加载链
        window.initializeSummernoteLibraries = function(callback) {
            ensureJQuery(function() {
                loadSummernote(callback);
            });
        };
    </script>

    <script>
        // 全局变量
        let currentPage = 1;
        let perPage = 20;
        let searchQuery = '';
        let statusFilter = '';
        let typeFilter = '';
        let vikIssuerFilter = []; // VIK发卡行过滤
        let vikIssuerFilterApp = null; // Vue 组件实例
        let currentTab = localStorage.getItem('campaignTab') || 'formal'; // 'formal' or 'test'
        let campaignCounts = { formal: 0, test: 0 };
        let summernoteEditors = {};
        let issuers = [];
        let eligibleCardsConfigs = {
            edit: [],
            create: []
        };
        let whitelists = {
            edit: { entries: [], global: false },
            create: { entries: [], global: false }
        };

        // 设置日期时间的默认时间部分
        // 开始时间类默认 00:00，结束时间类默认 23:59
        function setDefaultTime(value, isEndTime) {
            if (!value) return value;
            // datetime-local 格式: YYYY-MM-DDTHH:MM
            const parts = value.split('T');
            if (parts.length === 2) {
                const datePart = parts[0];
                const timePart = isEndTime ? '23:59' : '00:00';
                return datePart + 'T' + timePart;
            }
            return value;
        }

        // 检查时间是否接近当前时间（5分钟内），说明是浏览器自动填入的
        function isTimeNearNow(datetimeValue) {
            if (!datetimeValue) return false;
            const selectedTime = new Date(datetimeValue);
            const now = new Date();
            // 只比较时间部分（小时和分钟）
            const selectedMinutes = selectedTime.getHours() * 60 + selectedTime.getMinutes();
            const nowMinutes = now.getHours() * 60 + now.getMinutes();
            return Math.abs(selectedMinutes - nowMinutes) <= 5;
        }

        // 为日期时间输入框添加默认时间逻辑
        function initDateTimeDefaults() {
            const prefixes = ['edit', 'create'];

            // 开始时间类字段（默认 00:00）
            const startFields = ['StartsAt', 'OpensAt', 'EnrollStartsAt'];
            // 结束时间类字段（默认 23:59）
            const endFields = ['EndsAt', 'ClosesAt', 'EnrollEndsAt'];

            prefixes.forEach(prefix => {
                // 为开始时间类字段添加默认时间
                startFields.forEach(field => {
                    const input = document.getElementById(prefix + field);
                    if (input) {
                        // 记录初始值，用于判断是否是首次填写
                        input._wasEmpty = !input.value;

                        // 使用 change 事件，在用户完成选择后触发
                        input.addEventListener('change', function() {
                            // 如果之前为空，现在有值了，且时间接近当前时间（说明是浏览器默认填入的）
                            if (this._wasEmpty && this.value && isTimeNearNow(this.value)) {
                                this.value = setDefaultTime(this.value, false);
                            }
                            // 无论是否设置默认时间，都标记为已填写
                            if (this.value) {
                                this._wasEmpty = false;
                            }
                        });
                    }
                });

                // 为结束时间类字段添加默认时间
                endFields.forEach(field => {
                    const input = document.getElementById(prefix + field);
                    if (input) {
                        input._wasEmpty = !input.value;

                        input.addEventListener('change', function() {
                            // 如果之前为空，现在有值了，且时间接近当前时间
                            if (this._wasEmpty && this.value && isTimeNearNow(this.value)) {
                                this.value = setDefaultTime(this.value, true);
                            }
                            if (this.value) {
                                this._wasEmpty = false;
                            }
                        });
                    }
                });
            });
        }

        // 初始化日期自动填充逻辑
        // 当用户设置活动开始时间时，自动填充开放时间和报名开始时间
        // 当用户设置活动结束时间时，自动填充关闭时间和报名结束时间
        function initDateAutoFill() {
            const prefixes = ['edit', 'create'];

            prefixes.forEach(prefix => {
                const startsAtInput = document.getElementById(prefix + 'StartsAt');
                const endsAtInput = document.getElementById(prefix + 'EndsAt');
                const opensAtInput = document.getElementById(prefix + 'OpensAt');
                const closesAtInput = document.getElementById(prefix + 'ClosesAt');
                const enrollStartsAtInput = document.getElementById(prefix + 'EnrollStartsAt');
                const enrollEndsAtInput = document.getElementById(prefix + 'EnrollEndsAt');

                if (startsAtInput) {
                    startsAtInput.addEventListener('change', function() {
                        const value = this.value;
                        // 只有当目标字段为空时才自动填充
                        if (opensAtInput && !opensAtInput.value) {
                            opensAtInput.value = value;
                        }
                        if (enrollStartsAtInput && !enrollStartsAtInput.value) {
                            enrollStartsAtInput.value = value;
                        }
                    });
                }

                if (endsAtInput) {
                    endsAtInput.addEventListener('change', function() {
                        const value = this.value;
                        // 只有当目标字段为空时才自动填充
                        if (closesAtInput && !closesAtInput.value) {
                            closesAtInput.value = value;
                        }
                        if (enrollEndsAtInput && !enrollEndsAtInput.value) {
                            enrollEndsAtInput.value = value;
                        }
                    });
                }
            });
        }

        // 初始化报名时间字段的显示/隐藏逻辑
        function initEnrollmentFieldsVisibility() {
            const prefixes = ['edit', 'create'];

            prefixes.forEach(prefix => {
                const enrollRequiredCheckbox = document.getElementById(prefix + 'EnrollRequired');
                const enrollStartsAtContainer = document.getElementById(prefix + 'EnrollStartsAtContainer');
                const enrollEndsAtContainer = document.getElementById(prefix + 'EnrollEndsAtContainer');

                if (enrollRequiredCheckbox && enrollStartsAtContainer && enrollEndsAtContainer) {
                    // 根据复选框状态更新可见性
                    function updateVisibility() {
                        const isChecked = enrollRequiredCheckbox.checked;
                        enrollStartsAtContainer.style.display = isChecked ? 'block' : 'none';
                        enrollEndsAtContainer.style.display = isChecked ? 'block' : 'none';
                    }

                    // 监听复选框变化
                    enrollRequiredCheckbox.addEventListener('change', updateVisibility);

                    // 初始化时更新一次
                    updateVisibility();
                }
            });
        }

        // 页面加载完成后初始化
        document.addEventListener('DOMContentLoaded', function() {
            // 动态加载所需库并初始化
            window.initializeSummernoteLibraries(function() {
                console.log('所有库加载完成，开始初始化编辑器');
                setTimeout(() => {
                    initializeSummernoteEditors();
                }, 500);
            });

            // 恢复保存的标签页状态
            updateTabStyles();

            loadCampaigns();
            loadAllTabCounts();
            loadIssuers();
            loadIssuersForChannels();

            // 初始化VIK发卡行过滤器Vue组件
            initVikIssuerFilterApp();

            // 初始化日期时间默认值、自动填充和报名时间字段显示/隐藏逻辑
            initDateTimeDefaults();
            initDateAutoFill();
            initEnrollmentFieldsVisibility();

            // 搜索输入框事件
            document.getElementById('searchInput').addEventListener('input', debounce(function () {
                searchQuery = this.value;
                currentPage = 1;
                loadCampaigns();
                loadAllTabCounts();
            }, 500));
        });

        // 初始化Summernote富文本编辑器
        function initializeSummernoteEditors() {
            console.log('开始初始化Summernote编辑器...');
            console.log('jQuery版本:', typeof jQuery !== 'undefined' ? jQuery.fn.jquery : 'undefined');
            console.log('Summernote:', typeof jQuery.fn.summernote !== 'undefined' ? 'loaded' : 'not loaded');

            const fields = [
                'RewardDescription',
                'Description',
                'MerchantDescription',
                'TermsAndConditions',
                'Qna',
                'NoEligibleCardsMessage',
                'EffectiveDateText'
            ];
            const prefixes = ['edit', 'create'];

            prefixes.forEach(prefix => {
                fields.forEach(field => {
                    const editorId = prefix + field + 'Editor';
                    const hiddenInputId = prefix + field;

                    const $editor = jQuery('#' + editorId);

                    // 检查元素是否存在
                    if ($editor.length === 0) {
                        console.warn('编辑器元素不存在:', editorId);
                        return;
                    }

                    try {
                        $editor.summernote({
                            lang: 'zh-CN',
                            height: 150,
                            minHeight: 100,
                            placeholder: '请输入内容...',

                            // 工具栏配置
                            toolbar: [
                                ['style', ['style']],
                                ['font', ['bold', 'italic', 'underline', 'clear']],
                                ['fontname', ['fontname']],
                                ['fontsize', ['fontsize']],
                                ['color', ['color']],
                                ['para', ['ul', 'ol', 'paragraph']],
                                ['table', ['table']],
                                ['insert', ['link', 'picture', 'video']],
                                ['view', ['fullscreen', 'codeview', 'help']]
                            ],

                            // 图片上传配置
                            callbacks: {
                                onChange: function(contents, $editable) {
                                    // 同步内容到隐藏输入框
                                    const hiddenInputId = editorId.replace('Editor', '');
                                    const hiddenInput = document.getElementById(hiddenInputId);
                                    if (hiddenInput) {
                                        hiddenInput.value = contents;
                                    }
                                },
                                onImageUpload: function(files) {
                                    // 检查是否正在进行粘贴操作
                                    if (isPasteOperationInProgress) {
                                        console.log('粘贴操作正在进行中，跳过onImageUpload [' + editorId + ']');
                                        return;
                                    }

                                    // 处理图片上传
                                    console.log('onImageUpload 触发 [' + editorId + ']，文件数量:', files.length);
                                    for (let i = 0; i < files.length; i++) {
                                        console.log('onImageUpload 处理文件 [' + editorId + ']:', files[i].name, '大小:', files[i].size);
                                        uploadImageToOSS(files[i], this, editorId);
                                    }
                                },
                                onChange: function(contents, $editable) {
                                    // 内容变化时更新隐藏输入框
                                    document.getElementById(hiddenInputId).value = contents;
                                },
                                onPaste: function(e) {
                                    // 处理粘贴事件，支持图片粘贴
                                    console.log('onPaste 触发 [' + editorId + ']');
                                    const clipboardData = e.originalEvent.clipboardData;
                                    if (clipboardData && clipboardData.items) {
                                        const items = clipboardData.items;
                                        let hasImage = false;

                                        console.log('剪贴板项目数量 [' + editorId + ']:', items.length);
                                        for (let i = 0; i < items.length; i++) {
                                            console.log('剪贴板项目 [' + editorId + ']', i, '类型:', items[i].type);
                                            if (items[i].type.indexOf('image') !== -1) {
                                                hasImage = true;
                                                const file = items[i].getAsFile();
                                                console.log('onPaste 处理图片文件 [' + editorId + ']:', file.name, '大小:', file.size);

                                                // 设置粘贴操作标志
                                                isPasteOperationInProgress = true;
                                                uploadImageToOSS(file, this, editorId);

                                                // 500ms后清除标志
                                                setTimeout(() => {
                                                    isPasteOperationInProgress = false;
                                                    console.log('粘贴操作标志已清除');
                                                }, 500);
                                            }
                                        }

                                        // 如果有图片，阻止默认粘贴行为
                                        if (hasImage) {
                                            console.log('阻止默认粘贴行为 [' + editorId + ']');
                                            e.preventDefault();
                                            return false;
                                        }
                                    }
                                }
                            },

                            // 表格相关配置
                            tableClassName: 'table table-bordered',

                            // 字体设置
                            fontNames: ['Arial', 'Arial Black', 'Comic Sans MS', 'Courier New', 'Helvetica Neue', 'Impact', 'Lucida Grande', 'Tahoma', 'Times New Roman', 'Verdana', '微软雅黑', '宋体', '黑体', '楷体'],
                            fontSizes: ['8', '9', '10', '11', '12', '14', '16', '18', '20', '24', '36', '48']
                        });

                        // 保存编辑器实例
                        summernoteEditors[editorId] = $editor;
                        console.log('初始化成功:', editorId);
                    } catch (error) {
                        console.error('初始化编辑器失败:', editorId, error);
                    }
                });
            });
        }

        // 上传中的文件追踪（防止重复上传）
        const uploadingFiles = new Set();

        // 粘贴操作标志（防止onPaste后立即触发onImageUpload）
        let isPasteOperationInProgress = false;

        // 图片上传到OSS的函数
        function uploadImageToOSS(file, editor, editorId) {
            // 生成文件唯一标识符
            const fileId = file.name + '_' + file.size + '_' + file.lastModified;
            console.log('uploadImageToOSS 被调用 [' + (editorId || 'unknown') + ']，文件ID:', fileId);
            console.log('当前上传中的文件数量:', uploadingFiles.size);

            // 检查是否正在上传
            if (uploadingFiles.has(fileId)) {
                console.log('文件正在上传中，跳过重复上传:', file.name);
                return;
            }

            // 标记为上传中
            uploadingFiles.add(fileId);
            console.log('标记文件为上传中，当前上传队列:', Array.from(uploadingFiles));

            const formData = new FormData();
            formData.append('image', file);

            // 尝试获取管理员认证信息
            console.log('正在上传图片到:', '/admin/campaigns/upload-image');
            console.log('CSRF Token:', document.querySelector('meta[name="csrf-token"]')?.getAttribute('content'));

            fetch('/admin/campaigns/upload-image', {
                method: 'POST',
                body: formData,
                headers: {
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                    'Accept': 'application/json'
                },
                credentials: 'include'  // 包含cookies
            })
            .then(response => response.json())
            .then(result => {
                // 无论成功失败都从追踪集合中移除
                uploadingFiles.delete(fileId);

                if (result.success) {
                    // 插入图片到编辑器 - 后端返回的字段是url，不是imageUrl
                    jQuery(editor).summernote('insertImage', result.url);
                    console.log('图片上传成功:', result.url);
                } else {
                    console.error('图片上传失败:', result.message);
                    alert('图片上传失败: ' + (result.message || '未知错误'));
                }
            })
            .catch(error => {
                // 上传失败时也要从追踪集合中移除
                uploadingFiles.delete(fileId);
                console.error('图片上传错误:', error);
                alert('图片上传失败，请重试');
            });
        }

        // 渲染富文本内容摘要
        function renderContentSummary(htmlContent, maxLength = 60) {
            if (!htmlContent) return '-';

            // 创建临时元素来提取纯文本
            const tempDiv = document.createElement('div');
            tempDiv.innerHTML = htmlContent;
            const textContent = tempDiv.textContent || tempDiv.innerText || '';

            // 截断文本并添加省略号
            if (textContent.length > maxLength) {
                return textContent.substring(0, maxLength) + '...';
            }
            return textContent || '-';
        }

        // 渲染完整富文本内容（用于模态框等）
        function renderRichContent(htmlContent, containerId) {
            const container = document.getElementById(containerId);
            if (container && htmlContent) {
                container.innerHTML = htmlContent;
                container.className = 'summernote-content';
            }
        }

        // 预览富文本内容
        function previewRichContent(hiddenInputId, previewContainerId) {
            const hiddenInput = document.getElementById(hiddenInputId);
            const previewContainer = document.getElementById(previewContainerId);

            if (!hiddenInput || !previewContainer) return;

            // 获取当前编辑器的内容
            const editorId = hiddenInputId + 'Editor';
            const editor = summernoteEditors[editorId];
            let content = '';

            if (editor) {
                content = editor.summernote('code');
            } else {
                content = hiddenInput.value;
            }

            if (content && content.trim() !== '') {
                previewContainer.innerHTML = content;
                previewContainer.style.display = 'block';
            } else {
                previewContainer.innerHTML = '<em class="text-muted">暂无内容</em>';
                previewContainer.style.display = 'block';
            }
        }

        // 防抖函数
        function debounce(func, delay) {
            let timeoutId;
            return function (...args) {
                clearTimeout(timeoutId);
                timeoutId = setTimeout(() => func.apply(this, args), delay);
            };
        }

        // 显示加载中
        function showLoading() {
            document.getElementById('loadingIndicator').style.display = 'block';
            document.querySelector('.table-responsive').classList.add('loading');
        }

        // 隐藏加载中
        function hideLoading() {
            document.getElementById('loadingIndicator').style.display = 'none';
            document.querySelector('.table-responsive').classList.remove('loading');
        }

        // 切换活动标签页
        function switchCampaignTab(tab) {
            if (currentTab === tab) return; // 避免重复切换

            currentTab = tab;
            currentPage = 1; // 重置到第一页

            // 保存到 localStorage
            localStorage.setItem('campaignTab', tab);

            // 更新tab样式
            updateTabStyles();

            loadCampaigns();
        }

        // 更新标签页样式
        function updateTabStyles() {
            const formalTab = document.getElementById('formal-campaigns-tab');
            const testTab = document.getElementById('test-campaigns-tab');

            if (currentTab === 'formal') {
                formalTab.classList.add('active');
                formalTab.setAttribute('aria-selected', 'true');
                testTab.classList.remove('active');
                testTab.setAttribute('aria-selected', 'false');
            } else {
                testTab.classList.add('active');
                testTab.setAttribute('aria-selected', 'true');
                formalTab.classList.remove('active');
                formalTab.setAttribute('aria-selected', 'false');
            }
        }

        // 更新标签页数量显示
        function updateTabCount(tab, count) {
            campaignCounts[tab] = count;
            const countElement = document.getElementById(tab + '-count');
            if (countElement) {
                countElement.textContent = count;
            }
        }

        // 加载所有标签页的数量
        function loadAllTabCounts() {
            // 加载正式活动数量
            loadTabCount('formal');
            // 加载测试活动数量
            loadTabCount('test');
        }

        // 加载指定标签页的数量
        function loadTabCount(tab) {
            const params = new URLSearchParams({
                page: 1,
                per_page: 1, // 只需要获取总数，不需要数据
                search: searchQuery
            });

            if (statusFilter) params.append('status', statusFilter);
            if (typeFilter) params.append('type', typeFilter);

            if (tab === 'test') {
                params.append('is_test', '1');
            } else {
                params.append('is_test', '0');
            }

            fetch(`/api/admin/campaigns/api?${params}`, {
                headers: {
                    'Accept': 'application/json'
                }
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    updateTabCount(tab, data.pagination.total);
                }
            })
            .catch(error => {
                console.error(`Error loading ${tab} campaigns count:`, error);
            });
        }

        // 加载活动列表
        function loadCampaigns() {
            showLoading();

            const params = new URLSearchParams({
                page: currentPage,
                per_page: perPage,
                search: searchQuery
            });

            if (statusFilter) params.append('status', statusFilter);
            if (typeFilter) params.append('type', typeFilter);
            if (vikIssuerFilter.length > 0) params.append('vik_issuer_ids', vikIssuerFilter.join(','));

            // 添加测试活动过滤
            if (currentTab === 'test') {
                params.append('is_test', '1');
            } else {
                params.append('is_test', '0');
            }

            fetch(`/api/admin/campaigns/api?${params}`, {
                headers: {
                    'Accept': 'application/json'
                }
            })
                .then(response => response.json())
                .then(data => {
                    hideLoading();
                    if (data.success) {
                        displayCampaigns(data.data);
                        displayPagination(data.pagination);
                        // 更新当前标签页的活动数量
                        updateTabCount(currentTab, data.pagination.total);
                    } else {
                        showAlert('加载失败: ' + (data.message || '未知错误'), 'danger');
                    }
                })
                .catch(error => {
                    hideLoading();
                    console.error('Error loading campaigns:', error);
                    showAlert('加载活动列表失败', 'danger');
                });
        }

        // 显示活动列表
        function displayCampaigns(campaigns) {
            const tbody = document.getElementById('campaignTableBody');
            tbody.innerHTML = '';

            if (campaigns.length === 0) {
                tbody.innerHTML = '<tr><td colspan="7" class="text-center">暂无活动数据</td></tr>';
                return;
            }

            campaigns.forEach(campaign => {
                const row = document.createElement('tr');
                row.innerHTML = `
                    <td>${getStatusCell(campaign)}</td>
                    <td>${getCampaignMainCell(campaign)}</td>
                    <td>${getConfigCell(campaign)}</td>
                    <td>${getEnrollmentCell(campaign)}</td>
                    <td>${getTimeCell(campaign)}</td>
                    <td>${getImagesCell(campaign)}</td>
                    <td>${getActionsCell(campaign)}</td>
                `;
                tbody.appendChild(row);
            });
        }

        // 获取状态单元格
        function getStatusCell(campaign) {
            // 动态计算显示状态
            let displayStatus = campaign.status;
            if (campaign.status === 1 && campaign.closes_at) {
                const closesAt = new Date(campaign.closes_at);
                if (new Date() > closesAt) {
                    displayStatus = 3;
                }
            }

            // 状态徽章
            const statusBadges = {
                0: '<span class="badge bg-secondary"><i class="fas fa-pencil-alt me-1"></i>草稿</span>',
                1: '<span class="badge bg-success"><i class="fas fa-check-circle me-1"></i>上线</span>',
                2: '<span class="badge bg-danger"><i class="fas fa-ban me-1"></i>停用</span>',
                3: '<span class="badge bg-warning text-dark"><i class="fas fa-clock me-1"></i>下线</span>'
            };

            return `<div style="text-align: center;">${statusBadges[displayStatus] || ''}</div>`;
        }

        // 获取活动主信息单元格（标题 + ID + 类型标签）
        function getCampaignMainCell(campaign) {
            // 活动形态标签
            const formatLabels = {
                'normal': '<span class="badge" style="background-color: #e0e7ff; color: #3730a3;">普通</span>',
                'coupon': '<span class="badge" style="background-color: #fef3c7; color: #92400e;">优惠券</span>',
                'brand': '<span class="badge" style="background-color: #ede9fe; color: #6d28d9;">品牌</span>'
            };
            const formatBadge = formatLabels[campaign.format] || '';

            // 奖励类型徽章
            const typeBadge = campaign.type === 'cash'
                ? '<span class="badge" style="background-color: #d1fae5; color: #065f46;">返现</span>'
                : '<span class="badge" style="background-color: #f3f4f6; color: #6b7280;">非现金</span>';

            // 白名单徽章（只有有白名单时才显示）
            const whitelistBadge = getWhitelistBadgeSimple(campaign.whitelist);

            return `
                <div style="line-height: 1.6;">
                    <div style="display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-bottom: 6px;">
                        ${formatBadge}${typeBadge}
                        <span style="font-size: 15px; font-weight: 600; word-break: break-word;" title="${campaign.name}">${campaign.name || ''}</span>
                        ${whitelistBadge}
                    </div>
                    <div style="font-size: 13px; color: #6b7280;">
                        <span title="VSRA活动ID">${campaign.acampaign_id || ''}</span>
                        ${campaign.vcampaign_id ? `<span class="ms-2" title="VSRP Campaign ID">C:${campaign.vcampaign_id}</span>` : ''}
                    </div>
                </div>
            `;
        }

        // 获取白名单徽章（简化版，只有有白名单时才显示）
        function getWhitelistBadgeSimple(whitelist) {
            try {
                if (!whitelist) return '';

                let parsed = typeof whitelist === 'string' ? JSON.parse(whitelist) : whitelist;
                if (!parsed) return '';

                const entries = parsed.entries || [];
                const globalEnabled = parsed.global || false;

                if (entries.length === 0 && !globalEnabled) return '';

                if (globalEnabled) {
                    return '<span class="badge" style="background-color: #fef3c7; color: #92400e;" title="全局白名单"><i class="fas fa-lock"></i></span>';
                } else if (entries.length > 0) {
                    return `<span class="badge" style="background-color: #fef3c7; color: #92400e;" title="白名单"><i class="fas fa-lock me-1"></i>${entries.length}</span>`;
                }

                return '';
            } catch (e) {
                return '';
            }
        }

        // 获取白名单徽章
        function getWhitelistBadge(whitelist) {
            try {
                if (!whitelist) return '';

                let parsed = typeof whitelist === 'string' ? JSON.parse(whitelist) : whitelist;
                if (!parsed) return '';

                const entries = parsed.entries || [];
                const globalEnabled = parsed.global || false;

                if (entries.length === 0 && !globalEnabled) return '';

                if (globalEnabled) {
                    return '<span class="badge" style="background-color: #fef3c7; color: #92400e;"><i class="fas fa-lock me-1"></i>全局白名单</span>';
                } else if (entries.length > 0) {
                    return `<span class="badge" style="background-color: #fef3c7; color: #92400e;"><i class="fas fa-lock me-1"></i>白名单(${entries.length}人)</span>`;
                }

                return '';
            } catch (e) {
                return '';
            }
        }

        // 获取配置单元格
        function getConfigCell(campaign) {
            let lines = [];

            // VIK标识
            const vikBadge = (campaign.vik_issuers && campaign.vik_issuers.length > 0)
                ? '<span class="badge bg-info"><i class="fas fa-university me-1"></i>VIK</span>' : '';

            if (vikBadge) {
                lines.push(`<div style="margin-bottom: 6px;">${vikBadge}</div>`);
            }

            // Visa渠道显示
            if (campaign.is_hidden_from_miniapp) {
                lines.push('<div style="margin-bottom: 4px;"><span class="badge bg-secondary">Visa渠道隐藏</span></div>');
            } else {
                lines.push('<div style="margin-bottom: 4px;"><span class="badge bg-primary">Visa渠道显示</span></div>');
            }

            // 发卡行数量
            const hasIssuers = campaign.issuers && campaign.issuers.length > 0;
            if (hasIssuers) {
                lines.push(`<div><span class="badge bg-success">发卡行(${campaign.issuers.length})</span></div>`);
            }

            return `<div style="line-height: 1.6;">${lines.join('')}</div>`;
        }

        // 获取报名统计单元格
        function getEnrollmentCell(campaign) {
            const cardCount = campaign.enrollment_card_count || 0;
            const userCount = campaign.enrollment_user_count || 0;

            if (cardCount === 0 && userCount === 0) {
                return '<span class="text-muted">-</span>';
            }

            const campaignName = (campaign.name || '').replace(/'/g, "\\'").replace(/"/g, '&quot;');
            return `
                <div style="font-size: 13px; line-height: 1.8; cursor: pointer;"
                     onclick="showEnrollmentDetails(${campaign.id}, '${campaignName}')"
                     title="点击查看报名详情">
                    <div style="color: #059669; font-weight: 500;"><i class="fas fa-credit-card me-1"></i>${cardCount}卡</div>
                    <div style="color: #2563eb; font-weight: 500;"><i class="fas fa-user me-1"></i>${userCount}人</div>
                </div>
            `;
        }

        // 获取时间单元格
        function getTimeCell(campaign) {
            const formatDate = (dateStr) => {
                if (!dateStr) return '-';
                const d = new Date(dateStr);
                return `${(d.getMonth()+1).toString().padStart(2,'0')}/${d.getDate().toString().padStart(2,'0')}`;
            };

            const formatFull = (dateStr) => {
                if (!dateStr) return '-';
                const d = new Date(dateStr);
                return `${d.getFullYear()}/${(d.getMonth()+1).toString().padStart(2,'0')}/${d.getDate().toString().padStart(2,'0')} ${d.getHours().toString().padStart(2,'0')}:${d.getMinutes().toString().padStart(2,'0')}`;
            };

            const openStart = formatFull(campaign.opens_at);
            const openEnd = formatFull(campaign.closes_at);

            return `
                <div style="font-size: 13px; line-height: 1.5;" title="开放时间: ${openStart} ~ ${openEnd}">
                    <div><span class="text-muted">活动:</span> ${formatDate(campaign.starts_at)} - ${formatDate(campaign.ends_at)}</div>
                    <div><span class="text-muted">开放:</span> ${formatDate(campaign.opens_at)} - ${formatDate(campaign.closes_at)}</div>
                </div>
            `;
        }

        // 获取图片单元格
        function getImagesCell(campaign) {
            const bannerUrl = campaign.banner_image_url;
            const detailUrl = campaign.detail_image_url;

            if (!bannerUrl && !detailUrl) {
                return '<span class="text-muted">无图片</span>';
            }

            let html = '<div style="display: flex; gap: 8px;">';
            if (bannerUrl) {
                html += `<img src="${bannerUrl}" alt="Banner" class="image-preview" onclick="showImageModal('${bannerUrl}')" title="Banner图">`;
            }
            if (detailUrl) {
                html += `<img src="${detailUrl}" alt="详情" class="image-preview" onclick="showImageModal('${detailUrl}')" title="详情图">`;
            }
            html += '</div>';
            return html;
        }

        // 获取操作单元格
        function getActionsCell(campaign) {
            return `
                <div style="display: flex; gap: 4px;">
                    <button type="button" class="btn btn-sm btn-outline-primary" onclick="editCampaign(${campaign.id})" title="编辑">
                        <i class="fas fa-edit"></i>
                    </button>
                    <button type="button" class="btn btn-sm btn-outline-danger" onclick="confirmDeleteCampaign(${campaign.id}, '${(campaign.name || '').replace(/'/g, "\\'")}')" title="删除">
                        <i class="fas fa-trash"></i>
                    </button>
                </div>
            `;
        }

        // 获取活动信息合并单元格（图标+文字徽章风格）- 保留用于兼容
        function getCampaignInfoCell(campaign) {
            // 动态计算显示状态（上线+过期=下线）
            let displayStatus = campaign.status;
            if (campaign.status === 1 && campaign.closes_at) {
                const closesAt = new Date(campaign.closes_at);
                if (new Date() > closesAt) {
                    displayStatus = 3;
                }
            }

            // 状态徽章（图标+文字）
            const statusBadges = {
                0: '<span class="badge bg-secondary"><i class="fas fa-pencil-alt me-1"></i>草稿</span>',
                1: '<span class="badge bg-success"><i class="fas fa-check-circle me-1"></i>上线</span>',
                2: '<span class="badge bg-danger"><i class="fas fa-ban me-1"></i>停用</span>',
                3: '<span class="badge bg-warning text-dark"><i class="fas fa-clock me-1"></i>下线</span>'
            };
            const statusBadge = statusBadges[displayStatus] || '<span class="badge bg-secondary">未知</span>';

            // 类型徽章（图标+文字）
            const typeBadge = campaign.type === 'cash'
                ? '<span class="badge" style="background-color: #d1fae5; color: #065f46;"><i class="fas fa-dollar-sign me-1"></i>返现</span>'
                : '<span class="badge" style="background-color: #dbeafe; color: #1e40af;"><i class="fas fa-gift me-1"></i>非返现</span>';

            // 形态徽章（图标+文字）
            const formatBadges = {
                'normal': '<span class="badge" style="background-color: #e0e7ff; color: #3730a3;"><i class="fas fa-file-alt me-1"></i>普通</span>',
                'coupon': '<span class="badge" style="background-color: #fef3c7; color: #92400e;"><i class="fas fa-ticket-alt me-1"></i>优惠券</span>',
                'brand': '<span class="badge" style="background-color: #ede9fe; color: #6d28d9;"><i class="fas fa-tag me-1"></i>品牌</span>'
            };
            const formatBadge = formatBadges[campaign.format] || '<span class="badge bg-secondary">未知</span>';

            // 白名单徽章
            const whitelistBadge = getWhitelistBadgeCompact(campaign.whitelist);

            // VIK标识
            const vikBadge = (campaign.vik_issuers && campaign.vik_issuers.length > 0)
                ? '<span class="badge bg-info"><i class="fas fa-university me-1"></i>VIK</span>' : '';

            // 报名统计（卡数绿色，用户数蓝色）
            const cardCount = campaign.enrollment_card_count || 0;
            const userCount = campaign.enrollment_user_count || 0;
            const enrollmentInfo = (cardCount > 0 || userCount > 0)
                ? `<div style="font-size: 12px; margin-top: 5px;">
                    <i class="fas fa-chart-bar me-1" style="color: #666;"></i>
                    <span style="color: #059669; font-weight: 500;">${cardCount}卡</span>
                    <span style="color: #999; margin: 0 3px;">/</span>
                    <span style="color: #2563eb; font-weight: 500;">${userCount}人</span>
                   </div>`
                : '';

            return `
                <div style="line-height: 1.6;">
                    <div style="font-size: 14px; font-weight: 600; word-break: break-word; margin-bottom: 6px;" title="${campaign.name}">${campaign.name || ''}</div>
                    <div style="display: flex; flex-wrap: wrap; gap: 4px; font-size: 11px;">
                        ${statusBadge}
                        ${typeBadge}
                        ${formatBadge}
                        ${whitelistBadge}
                        ${vikBadge}
                    </div>
                    ${enrollmentInfo}
                </div>
            `;
        }

        // 获取白名单徽章（紧凑版，图标+文字）
        function getWhitelistBadgeCompact(whitelist) {
            try {
                if (!whitelist) return '';

                let parsed = typeof whitelist === 'string' ? JSON.parse(whitelist) : whitelist;
                if (!parsed) return '';

                const entries = parsed.entries || [];
                const globalEnabled = parsed.global || false;

                if (entries.length === 0 && !globalEnabled) return '';

                let text = '';
                if (entries.length > 0) text = entries.length + '人';
                if (globalEnabled) text = (entries.length > 0 ? text + '+' : '') + '全局';

                return `<span class="badge" style="background-color: #f3f4f6; color: #374151;"><i class="fas fa-users me-1"></i>${text}</span>`;
            } catch (e) {
                return '';
            }
        }

        // 格式化显示日期时间
        function formatDisplayDateTime(dateTimeStr) {
            if (!dateTimeStr) return '';
            try {
                const date = new Date(dateTimeStr);
                return date.toLocaleString('zh-CN', {
                    year: 'numeric',
                    month: '2-digit',
                    day: '2-digit',
                    hour: '2-digit',
                    minute: '2-digit'
                });
            } catch (e) {
                return dateTimeStr;
            }
        }

        // 格式化时间范围显示
        function formatDateTimeRange(startTime, endTime) {
            const start = formatDisplayDateTime(startTime) || '-';
            const end = formatDisplayDateTime(endTime) || '-';
            return `<div style="font-size: 12px; line-height: 1.3;">
                        <div><strong>开始:</strong> ${start}</div>
                        <div><strong>结束:</strong> ${end}</div>
                    </div>`;
        }

        // 获取状态徽章
        function getStatusBadge(status) {
            switch (status) {
                case 0: return '<span class="status-badge status-draft">草稿</span>';
                case 1: return '<span class="status-badge status-online">上线</span>';
                case 2: return '<span class="status-badge status-offline">停用</span>';
                default: return '<span class="status-badge">未知</span>';
            }
        }

        // 获取类型徽章
        function getTypeBadge(type) {
            switch (type) {
                case 'cash': return '<span class="badge bg-success">现金</span>';
                case 'non-cash': return '<span class="badge bg-info">非现金</span>';
                default: return '<span class="badge bg-secondary">未知</span>';
            }
        }
        
        // 获取活动形态徽章
        function getCampaignFormatBadge(format) {
            switch (format) {
                case 'coupon': return '<span class="badge bg-warning">优惠券</span>';
                case 'normal': return '<span class="badge bg-primary">普通</span>';
                case 'brand': return '<span class="badge bg-success">品牌奖励</span>';
                default: return '<span class="badge bg-secondary">未知</span>';
            }
        }

        // 切换优惠券相关字段显示
        function toggleCouponFields(prefix, campaignFormat) {
            const couponFields = document.getElementById(prefix + 'CouponFields');
            if (campaignFormat === 'coupon') {
                couponFields.style.display = 'block';
                // Banner图提示信息
                const bannerHint = document.getElementById(prefix + 'BannerHint');
                if (bannerHint) {
                    bannerHint.innerHTML = '<small class="text-warning">* 优惠券活动Banner图建议尺寸：315x435（竖版）</small>';
                }
            } else {
                couponFields.style.display = 'none';
                // Banner图提示信息
                const bannerHint = document.getElementById(prefix + 'BannerHint');
                if (bannerHint) {
                    bannerHint.innerHTML = '<small class="text-muted">建议尺寸：750x300</small>';
                }
            }
        }

        // 获取白名单状态徽章
        function getWhitelistBadge(whitelist) {
            try {
                // 如果whitelist为空或null
                if (!whitelist) {
                    return '<span class="badge bg-secondary">无限制</span>';
                }

                // 解析whitelist
                let parsedWhitelist;
                if (typeof whitelist === 'string') {
                    // 如果是空字符串或只包含空白字符
                    if (!whitelist.trim()) {
                        return '<span class="badge bg-secondary">无限制</span>';
                    }
                    try {
                        parsedWhitelist = JSON.parse(whitelist);
                    } catch (e) {
                        return '<span class="badge bg-warning">格式错误</span>';
                    }
                } else if (typeof whitelist === 'object' && whitelist !== null) {
                    parsedWhitelist = whitelist;
                } else {
                    return '<span class="badge bg-secondary">无限制</span>';
                }

                // 新的白名单格式检查
                const entries = parsedWhitelist.entries || [];
                const globalEnabled = parsedWhitelist.global || false;

                if (entries.length === 0 && !globalEnabled) {
                    return '<span class="badge bg-secondary">无限制</span>';
                }

                let badgeText = '';
                if (entries.length > 0) {
                    badgeText += `${entries.length}人`;
                }
                if (globalEnabled) {
                    badgeText += (badgeText ? ' + ' : '') + '全局';
                }

                return `<span class="badge bg-warning">${badgeText}</span>`;
            } catch (e) {
                console.warn('解析白名单数据失败:', e);
                return '<span class="badge bg-danger">解析失败</span>';
            }
        }

        // 获取渠道配置徽章
        function getChannelBadge(campaign) {
            let badges = [];

            // 检查Visa渠道可见性
            if (campaign.is_hidden_from_miniapp) {
                badges.push('<span class="badge bg-secondary">Visa渠道隐藏</span>');
            } else {
                badges.push('<span class="badge bg-primary">Visa渠道</span>');
            }

            // 检查发卡行渠道
            // 注意：这里需要从后端获取关联的发卡行信息
            // 暂时用一个简单的指示
            const hasIssuers = campaign.issuers && campaign.issuers.length > 0;
            if (hasIssuers) {
                badges.push(`<span class="badge bg-success">发卡行(${campaign.issuers.length})</span>`);
            }

            return badges.length > 0 ? badges.join('<br>') : '<span class="text-muted">未配置</span>';
        }

        // 获取图片预览
        function getImagePreview(url, alt) {
            if (!url) {
                return '<span class="text-muted">无图片</span>';
            }
            return `<img src="${url}" alt="${alt}" class="image-preview" onclick="showImageModal('\\${url}')">`;
        }

        // 显示分页
        function displayPagination(pagination) {
            const paginationElement = document.getElementById('pagination');
            paginationElement.innerHTML = '';

            if (pagination.last_page <= 1) return;

            // 上一页
            const prevItem = document.createElement('li');
            prevItem.className = `page-item ${pagination.current_page === 1 ? 'disabled' : ''}`;
            prevItem.innerHTML = `<a class="page-link" href="#" onclick="changePage(${pagination.current_page - 1})">上一页</a>`;
            paginationElement.appendChild(prevItem);

            // 页码
            const startPage = Math.max(1, pagination.current_page - 2);
            const endPage = Math.min(pagination.last_page, pagination.current_page + 2);

            for (let i = startPage; i <= endPage; i++) {
                const item = document.createElement('li');
                item.className = `page-item ${i === pagination.current_page ? 'active' : ''}`;
                item.innerHTML = `<a class="page-link" href="#" onclick="changePage(${i})">${i}</a>`;
                paginationElement.appendChild(item);
            }

            // 下一页
            const nextItem = document.createElement('li');
            nextItem.className = `page-item ${pagination.current_page === pagination.last_page ? 'disabled' : ''}`;
            nextItem.innerHTML = `<a class="page-link" href="#" onclick="changePage(${pagination.current_page + 1})">下一页</a>`;
            paginationElement.appendChild(nextItem);
        }

        // 改变页码
        function changePage(page) {
            currentPage = page;
            loadCampaigns();
        }

        // 重置过滤器
        function resetFilters() {
            document.getElementById('searchInput').value = '';
            document.getElementById('statusFilter').value = '';
            document.getElementById('typeFilter').value = '';

            searchQuery = '';
            statusFilter = '';
            typeFilter = '';
            vikIssuerFilter = [];
            currentPage = 1;

            // 重置 VIK 发卡行过滤器
            if (vikIssuerFilterApp) {
                vikIssuerFilterApp.clearAll();
            }

            loadCampaigns();
            loadAllTabCounts();
        }

        // 应用过滤器
        function applyFilters() {
            statusFilter = document.getElementById('statusFilter').value;
            typeFilter = document.getElementById('typeFilter').value;
            currentPage = 1;
            loadCampaigns();
            loadAllTabCounts();
        }

        // 监听过滤器变化
        document.getElementById('statusFilter').addEventListener('change', applyFilters);
        document.getElementById('typeFilter').addEventListener('change', applyFilters);

        // 显示新增模态框
        function showCreateModal() {
            // 清空表单
            document.getElementById('createForm').reset();

            // 重置所有日期时间字段的 _wasEmpty 标记，使默认时间能够生效
            const dateTimeFields = ['StartsAt', 'EndsAt', 'OpensAt', 'ClosesAt', 'EnrollStartsAt', 'EnrollEndsAt'];
            dateTimeFields.forEach(field => {
                const input = document.getElementById('create' + field);
                if (input) {
                    input._wasEmpty = true;
                }
            });

            // 清空富文本编辑器
            Object.keys(summernoteEditors).forEach(editorId => {
                if (editorId.startsWith('create')) {
                    const $editor = summernoteEditors[editorId];
                    if ($editor) {
                        $editor.summernote('code', '');
                    }
                }
            });

            // 清空图片预览
            document.getElementById('createBannerPreview').style.display = 'none';
            document.getElementById('createDetailPreview').style.display = 'none';

            // 清空适用卡片配置构建器
            initializeConfigBuilder('create', []);

            // 清空白名单
            initializeWhitelist('create', {});

            // 初始化VIK银行用户ID限制字段显示状态
            updateVikChannelIdRequirementVisibility('create');

            const modal = new bootstrap.Modal(document.getElementById('createModal'));
            modal.show();
        }

        // 编辑活动
        function editCampaign(id) {
            adminFetch(`/api/admin/campaigns/${id}`, {
                method: 'GET'
            })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        populateEditForm(data.data);
                        const modal = new bootstrap.Modal(document.getElementById('editModal'));
                        modal.show();
                    } else {
                        showAlert('获取活动详情失败: ' + (data.message || '未知错误'), 'danger');
                    }
                })
                .catch(error => {
                    console.error('Error fetching campaign:', error);
                    showAlert('获取活动详情失败', 'danger');
                });
        }

        // 重置编辑表单（确保每次打开编辑框时状态都是干净的）
        function resetEditForm() {
            // 首先清空全局活动变量，防止后续函数访问到旧数据
            window.currentCampaign = null;

            // 1. 清空发卡行选择
            clearAllIssuers('edit');

            // 2. 清空VIK银行选择
            clearAllVikIssuers('edit');

            // 3. 重置渠道内容差异化配置
            const channelContentConfig = document.getElementById('editChannelContentConfig');
            if (channelContentConfig) {
                channelContentConfig.style.display = 'none';
                // 清空所有渠道内容字段
                channelContentConfig.querySelectorAll('.channel-content-field').forEach(field => {
                    field.value = '';
                });
                // 清空渠道图片预览
                channelContentConfig.querySelectorAll('.channel-image-preview').forEach(img => {
                    img.src = '';
                    img.style.display = 'none';
                });
            }

            // 4. 清空渠道Tab
            const channelTabs = document.getElementById('editChannelTabs');
            if (channelTabs) {
                channelTabs.innerHTML = '';
            }
            const channelContentTabs = document.getElementById('editChannelContentTabs');
            if (channelContentTabs) {
                channelContentTabs.innerHTML = '';
                channelContentTabs.style.display = 'none';
            }

            // 5. 清空主图片预览
            const bannerPreview = document.getElementById('editBannerPreview');
            if (bannerPreview) {
                bannerPreview.src = '';
                bannerPreview.style.display = 'none';
            }
            const detailPreview = document.getElementById('editDetailPreview');
            if (detailPreview) {
                detailPreview.src = '';
                detailPreview.style.display = 'none';
            }

            // 6. 重置适用卡片配置
            eligibleCardsConfigs.edit = [];
            const configBuilder = document.getElementById('editEligibleCardsConfigBuilder');
            if (configBuilder) {
                configBuilder.innerHTML = '';
            }

            // 7. 重置白名单
            whitelists.edit = { entries: [], global: false };
            const whitelistCheckbox = document.getElementById('editEnableWhitelist');
            if (whitelistCheckbox) {
                whitelistCheckbox.checked = false;
            }
            const whitelistContainer = document.getElementById('editWhitelistTags');
            if (whitelistContainer) {
                whitelistContainer.innerHTML = '';
            }

            // 8. 重置奖励内容选择
            selectedRewardContents.edit = [];
            const rewardContainer = document.getElementById('editSelectedRewardContents');
            if (rewardContainer) {
                rewardContainer.innerHTML = '';
            }

            // 8.1 重置邮件模板选择
            if (typeof resetEmailTemplates === 'function') {
                resetEmailTemplates('edit');
            }

            // 9. 重置富文本编辑器
            if (summernoteEditors.editRewardDescriptionEditor) {
                summernoteEditors.editRewardDescriptionEditor.summernote('code', '');
            }
            if (summernoteEditors.editDescriptionEditor) {
                summernoteEditors.editDescriptionEditor.summernote('code', '');
            }
            if (summernoteEditors.editMerchantDescriptionEditor) {
                summernoteEditors.editMerchantDescriptionEditor.summernote('code', '');
            }
            if (summernoteEditors.editTermsAndConditionsEditor) {
                summernoteEditors.editTermsAndConditionsEditor.summernote('code', '');
            }
            if (summernoteEditors.editQnaEditor) {
                summernoteEditors.editQnaEditor.summernote('code', '');
            }
            if (summernoteEditors.editNoEligibleCardsMessageEditor) {
                summernoteEditors.editNoEligibleCardsMessageEditor.summernote('code', '');
            }
            if (summernoteEditors.editEffectiveDateTextEditor) {
                summernoteEditors.editEffectiveDateTextEditor.summernote('code', '');
            }

            // 10. 重置扩展参数
            const extendedParamsContainer = document.getElementById('editExtendedParamsContainer');
            if (extendedParamsContainer) {
                extendedParamsContainer.innerHTML = '';
            }
        }

        // 填充编辑表单
        function populateEditForm(campaign) {
            // 首先重置表单，确保没有之前编辑的残留数据
            resetEditForm();

            // 保存当前活动数据到全局变量，供其他函数使用
            window.currentCampaign = campaign;

            document.getElementById('editId').value = campaign.id;
            document.getElementById('editAcampaignId').value = campaign.acampaignId || '';
            document.getElementById('editVcampaignId').value = campaign.vcampaignId || '';
            document.getElementById('editName').value = campaign.name || '';
            document.getElementById('editStatus').value = campaign.status !== undefined && campaign.status !== null ? campaign.status.toString() : '0';
            document.getElementById('editType').value = campaign.type || '';
            document.getElementById('editCampaignFormat').value = campaign.format || 'normal';
            document.getElementById('editCouponTitle').value = campaign.couponTitle || campaign.coupon_title || '';
            document.getElementById('editTemplate').value = campaign.template || '';
            document.getElementById('editIsTest').checked = Boolean(campaign.isTest || campaign.is_test);

            // 根据活动形态显示/隐藏优惠券字段
            toggleCouponFields('edit', campaign.format || 'normal');

            // 处理日期时间（无论是否有值都要设置，确保清空旧值）
            document.getElementById('editStartsAt').value = campaign.startsAt ? formatDateTimeLocal(campaign.startsAt) : '';
            document.getElementById('editEndsAt').value = campaign.endsAt ? formatDateTimeLocal(campaign.endsAt) : '';
            document.getElementById('editOpensAt').value = campaign.opensAt ? formatDateTimeLocal(campaign.opensAt) : '';
            document.getElementById('editClosesAt').value = campaign.closesAt ? formatDateTimeLocal(campaign.closesAt) : '';

            // 处理报名时间字段
            document.getElementById('editEnrollStartsAt').value = campaign.enrollStartsAt ? formatDateTimeLocal(campaign.enrollStartsAt) : '';
            document.getElementById('editEnrollEndsAt').value = campaign.enrollEndsAt ? formatDateTimeLocal(campaign.enrollEndsAt) : '';

            // 处理时间文本字段
            document.getElementById('editStartsAtText').value = campaign.startsAtText || '';
            document.getElementById('editEndsAtText').value = campaign.endsAtText || '';

            // 重置日期时间字段的 _wasEmpty 标记，根据当前值判断
            const dateTimeFields = ['StartsAt', 'EndsAt', 'OpensAt', 'ClosesAt', 'EnrollStartsAt', 'EnrollEndsAt'];
            dateTimeFields.forEach(field => {
                const input = document.getElementById('edit' + field);
                if (input) {
                    input._wasEmpty = !input.value;
                }
            });

            // 更新报名时间字段的显示状态
            const editEnrollRequired = document.getElementById('editEnrollRequired');
            const editEnrollStartsAtContainer = document.getElementById('editEnrollStartsAtContainer');
            const editEnrollEndsAtContainer = document.getElementById('editEnrollEndsAtContainer');
            if (editEnrollRequired && editEnrollStartsAtContainer && editEnrollEndsAtContainer) {
                const isChecked = campaign.enrollRequired;
                editEnrollStartsAtContainer.style.display = isChecked ? 'block' : 'none';
                editEnrollEndsAtContainer.style.display = isChecked ? 'block' : 'none';
            }

            // 填充富文本字段
            setTimeout(() => {
                if (summernoteEditors.editRewardDescriptionEditor) {
                    summernoteEditors.editRewardDescriptionEditor.summernote('code', campaign.rewardDescription || '');
                }
                if (summernoteEditors.editDescriptionEditor) {
                    summernoteEditors.editDescriptionEditor.summernote('code', campaign.description || '');
                }
                if (summernoteEditors.editMerchantDescriptionEditor) {
                    summernoteEditors.editMerchantDescriptionEditor.summernote('code', campaign.merchantDescription || '');
                }
                if (summernoteEditors.editTermsAndConditionsEditor) {
                    summernoteEditors.editTermsAndConditionsEditor.summernote('code', campaign.termsAndConditions || '');
                }
                if (summernoteEditors.editQnaEditor) {
                    summernoteEditors.editQnaEditor.summernote('code', campaign.qna || '');
                }
                if (summernoteEditors.editNoEligibleCardsMessageEditor) {
                    summernoteEditors.editNoEligibleCardsMessageEditor.summernote('code', campaign.noEligibleCardsMessage || '');
                }
                if (summernoteEditors.editEffectiveDateTextEditor) {
                    summernoteEditors.editEffectiveDateTextEditor.summernote('code', campaign.effectiveDateText || '');
                }
            }, 500); // 等待Summernote编辑器完全初始化
            
            // 优惠券相关普通文本字段
            document.getElementById('editCouponSummary').value = campaign.couponSummary || campaign.coupon_summary || '';
            document.getElementById('editRewardContentDescription').value = campaign.rewardContentDescription || campaign.reward_content_description || '';
            document.getElementById('editRewardMethodDescription').value = campaign.rewardMethodDescription || campaign.reward_method_description || '';
            document.getElementById('editApplicableTransactionScope').value = campaign.applicableTransactionScope || campaign.applicable_transaction_scope || '';
            document.getElementById('editCouponEligibleCardsText').value = campaign.couponEligibleCardsText || '';

            // 其他字段
            document.getElementById('editEligibleCardsText').value = campaign.eligibleCardsText || '';

            // 初始化适用卡片配置构建器
            initializeConfigBuilder('edit', campaign.eligibleCardsConfig);

            // 初始化白名单
            initializeWhitelist('edit', campaign.whitelist);
            document.getElementById('editDefaultActionButtonText').value = campaign.defaultActionButtonText || '';
            document.getElementById('editActionButtonUrlH5').value = campaign.actionButtonUrlH5 || '';

            // 复选框和VSRP字段
            document.getElementById('editEnrollRequired').checked = campaign.enrollRequired || false;
            document.getElementById('editClaimRequired').checked = campaign.claimRequired || false;
            document.getElementById('editVenrollmentGroupId').value = campaign.venrollmentGroupId || '';
            document.getElementById('editVofferId').value = campaign.vofferId || '';

            // 排名配置字段
            document.getElementById('editBillingCycleType').value = campaign.billingCycleType || 'campaign';
            document.getElementById('editShowRankingList').checked = campaign.showRankingList || false;
            document.getElementById('editShowSpecificRank').checked = campaign.showSpecificRank || false;
            document.getElementById('editShowUserRanking').checked = campaign.showUserRanking || false;
            document.getElementById('editDisplayRewardPool').checked = campaign.displayRewardPool || false;

            // 渠道配置字段
            document.getElementById('editIsHiddenFromMiniapp').checked = campaign.isHiddenFromMiniapp || false;
            // 填充发卡行选择（resetEditForm已清空，这里只需填充）
            if (campaign.issuers && campaign.issuers.length > 0) {
                const selectedIssuerIds = campaign.issuers.map(issuer => issuer.id);
                const issuerSelect = document.getElementById('editIssuerIds');

                // 选中隐藏select的选项
                Array.from(issuerSelect.options).forEach(option => {
                    if (selectedIssuerIds.includes(parseInt(option.value))) {
                        option.selected = true;
                    }
                });

                // 勾选多选下拉列表的复选框
                selectedIssuerIds.forEach(issuerId => {
                    const checkbox = document.getElementById(`editIssuer${issuerId}`);
                    if (checkbox) {
                        checkbox.checked = true;
                    }
                });

                // 更新显示
                updateSelectedDisplay('edit');
            }

            // 填充VIK银行选择（resetEditForm已清空，这里只需填充）
            if (campaign.vikIssuers && campaign.vikIssuers.length > 0) {
                const selectedVikIssuerIds = campaign.vikIssuers.map(issuer => issuer.id);
                const vikIssuerSelect = document.getElementById('editVikIssuerIds');

                // 选中隐藏select的选项
                Array.from(vikIssuerSelect.options).forEach(option => {
                    if (selectedVikIssuerIds.includes(parseInt(option.value))) {
                        option.selected = true;
                    }
                });

                // 勾选多选下拉列表的复选框
                selectedVikIssuerIds.forEach(issuerId => {
                    const checkbox = document.getElementById(`editVikIssuer${issuerId}`);
                    if (checkbox) {
                        checkbox.checked = true;
                    }
                });

                // 更新VIK银行显示
                updateVikIssuerDisplay('edit');
            }

            // VIK银行用户限制配置
            document.getElementById('editRequireVikChannelId').checked = campaign.requireVikChannelId || false;
            document.getElementById('editVikChannelIdErrorMessageText').value = campaign.vikChannelIdErrorMessage || '';

            // 控制VIK银行用户限制字段的显示
            updateVikChannelIdRequirementVisibility('edit');

            // 加载关联的奖励内容
            selectedRewardContents.edit = [];
            if (campaign.rewardContents && campaign.rewardContents.length > 0) {
                selectedRewardContents.edit = campaign.rewardContents.map((item, index) => ({
                    ...item,
                    sortOrder: item.pivot ? item.pivot.sort_order : index,
                    isActive: item.pivot ? (item.pivot.is_active !== undefined ? item.pivot.is_active : true) : true,
                    noticeMessage: item.pivot ? (item.pivot.notice_message || '') : ''
                }));
            }

            // 渲染已选内容和更新选项
            renderSelectedRewardContents('edit');
            updateRewardContentIds('edit');
            // 选项会在 shown.bs.modal 事件中由 initRewardContentSelect2ForModal 更新

            // 加载关联的邮件模板
            loadEmailTemplatesForEdit(campaign.emailTemplates || []);

            // 图片预览（无论是否有值都要设置，确保清空旧值）
            document.getElementById('editBannerImageUrl').value = campaign.bannerImageUrl || '';
            if (campaign.bannerImageUrl) {
                previewImageFromUrl(campaign.bannerImageUrl, 'editBannerPreview');
            }
            document.getElementById('editDetailImageUrl').value = campaign.detailImageUrl || '';
            if (campaign.detailImageUrl) {
                previewImageFromUrl(campaign.detailImageUrl, 'editDetailPreview');
            }

            // 初始化扩展参数
            renderExtendedParams('edit', campaign.extendedParams);


            // 生成渠道选择器并填充渠道内容配置
            if (campaign.channelContents) {
                // 先生成渠道选择器以确保DOM元素存在
                generateChannelSelectors('edit');

                // 延迟填充渠道内容，确保Tab生成完成
                setTimeout(() => {
                    populateChannelContents('edit', campaign.channelContents);
                    // 填充内容后刷新所有Tab的黄点标识
                    refreshAllTabIndicators('edit');
                }, 100);
            } else {
                // 即使没有渠道内容，也要生成渠道选择器
                generateChannelSelectors('edit');
            }
        }

        // 格式化日期时间为本地格式 (用于datetime-local输入框)
        function formatDateTimeLocal(dateString) {
            if (!dateString) return '';
            const date = new Date(dateString);
            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}`;
        }

        // 创建活动
        function createCampaign() {
            // 收集表单数据
            const formData = collectFormData('create');

            // 验证必填字段
            if (!formData.acampaignId) {
                                        showAlert('请填写VSRA活动ID', 'warning');
                return;
            }
            if (!formData.name) {
                showAlert('请填写活动名称', 'warning');
                return;
            }

            fetch('/api/admin/campaigns', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'Accept': 'application/json'
                },
                body: JSON.stringify(formData)
            })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        showAlert('活动创建成功', 'success');
                        bootstrap.Modal.getInstance(document.getElementById('createModal')).hide();
                        loadCampaigns();
                    } else {
                        showAlert('创建失败: ' + (data.message || '未知错误'), 'danger');
                    }
                })
                .catch(error => {
                    console.error('Error creating campaign:', error);
                    showAlert('创建活动失败', 'danger');
                });
        }

        // 更新活动
        function updateCampaign() {
            const id = document.getElementById('editId').value;
            const formData = collectFormData('edit');

            // 调试：输出状态信息
            console.log('Update campaign - Status value:', formData.status, 'Type:', typeof formData.status);

            // 验证必填字段
            if (!formData.acampaignId) {
                                        showAlert('请填写VSRA活动ID', 'warning');
                return;
            }
            if (!formData.name) {
                showAlert('请填写活动名称', 'warning');
                return;
            }

            adminFetch(`/api/admin/campaigns/${id}`, {
                method: 'PUT',
                body: JSON.stringify(formData)
            })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        showAlert('活动更新成功', 'success');
                        bootstrap.Modal.getInstance(document.getElementById('editModal')).hide();
                        loadCampaigns();
                    } else {
                        showAlert('更新失败: ' + (data.message || '未知错误'), 'danger');
                    }
                })
                .catch(error => {
                    console.error('Error updating campaign:', error);
                    showAlert('更新活动失败', 'danger');
                });
        }

        // 收集表单数据
        function collectFormData(prefix) {
            return {
                acampaignId: document.getElementById(prefix + 'AcampaignId').value,
                vcampaignId: document.getElementById(prefix + 'VcampaignId').value,
                name: document.getElementById(prefix + 'Name').value,
                status: (() => {
                    const statusElement = document.getElementById(prefix + 'Status');
                    const statusValue = statusElement ? statusElement.value : '0';
                    const parsedStatus = parseInt(statusValue);
                    return !isNaN(parsedStatus) ? parsedStatus : 0;
                })(),
                type: document.getElementById(prefix + 'Type').value,
                format: document.getElementById(prefix + 'CampaignFormat').value,
                couponTitle: document.getElementById(prefix + 'CouponTitle').value,
                couponSummary: document.getElementById(prefix + 'CouponSummary').value,
                rewardContentDescription: document.getElementById(prefix + 'RewardContentDescription').value,
                rewardMethodDescription: document.getElementById(prefix + 'RewardMethodDescription').value,
                applicableTransactionScope: document.getElementById(prefix + 'ApplicableTransactionScope').value,
                couponEligibleCardsText: document.getElementById(prefix + 'CouponEligibleCardsText').value,
                template: document.getElementById(prefix + 'Template').value,
                isTest: document.getElementById(prefix + 'IsTest').checked,
                startsAt: document.getElementById(prefix + 'StartsAt').value,
                endsAt: document.getElementById(prefix + 'EndsAt').value,
                startsAtText: document.getElementById(prefix + 'StartsAtText').value,
                endsAtText: document.getElementById(prefix + 'EndsAtText').value,
                effectiveDateText: document.getElementById(prefix + 'EffectiveDateText').value,
                opensAt: document.getElementById(prefix + 'OpensAt').value,
                closesAt: document.getElementById(prefix + 'ClosesAt').value,
                enrollStartsAt: document.getElementById(prefix + 'EnrollStartsAt')?.value || '',
                enrollEndsAt: document.getElementById(prefix + 'EnrollEndsAt')?.value || '',
                rewardDescription: document.getElementById(prefix + 'RewardDescription').value,
                description: document.getElementById(prefix + 'Description').value,
                merchantDescription: document.getElementById(prefix + 'MerchantDescription').value,
                termsAndConditions: document.getElementById(prefix + 'TermsAndConditions').value,
                qna: document.getElementById(prefix + 'Qna').value,
                eligibleCardsText: document.getElementById(prefix + 'EligibleCardsText').value,
                noEligibleCardsMessage: document.getElementById(prefix + 'NoEligibleCardsMessage').value,
                eligibleCardsConfig: document.getElementById(prefix + 'EligibleCardsConfig').value,
                whitelist: document.getElementById(prefix + 'Whitelist').value,
                defaultActionButtonText: document.getElementById(prefix + 'DefaultActionButtonText').value,
                actionButtonUrlH5: document.getElementById(prefix + 'ActionButtonUrlH5').value,
                enrollRequired: document.getElementById(prefix + 'EnrollRequired').checked,
                claimRequired: document.getElementById(prefix + 'ClaimRequired').checked,
                venrollmentGroupId: document.getElementById(prefix + 'VenrollmentGroupId').value,
                vofferId: document.getElementById(prefix + 'VofferId').value,
                billingCycleType: document.getElementById(prefix + 'BillingCycleType').value,
                showRankingList: document.getElementById(prefix + 'ShowRankingList').checked,
                showSpecificRank: document.getElementById(prefix + 'ShowSpecificRank').checked,
                showUserRanking: document.getElementById(prefix + 'ShowUserRanking').checked,
                displayRewardPool: document.getElementById(prefix + 'DisplayRewardPool').checked,
                bannerImageUrl: document.getElementById(prefix + 'BannerImageUrl').value,
                detailImageUrl: document.getElementById(prefix + 'DetailImageUrl').value,
                extendedParams: getExtendedParams(prefix),
                rewardContentIds: document.getElementById(prefix + 'RewardContentIds').value,
                isHiddenFromMiniapp: document.getElementById(prefix + 'IsHiddenFromMiniapp').checked,
                issuerIds: Array.from(document.getElementById(prefix + 'IssuerIds').selectedOptions).map(option => parseInt(option.value)),
                vikIssuerIds: Array.from(document.getElementById(prefix + 'VikIssuerIds').selectedOptions).map(option => parseInt(option.value)),
                requireVikChannelId: document.getElementById(prefix + 'RequireVikChannelId').checked,
                vikChannelIdErrorMessage: document.getElementById(prefix + 'VikChannelIdErrorMessageText').value.trim() || null,
                channelContents: collectChannelContents(prefix),
                emailTemplateIds: document.getElementById(prefix + 'EmailTemplateIds').value
            };
        }

        // 上传图片
        function uploadImage(fileInput, previewId, urlInputId) {
            const file = fileInput.files[0];
            if (!file) return;

            const formData = new FormData();
            formData.append('image', file);

            fetch('/api/admin/campaigns/upload-image', {
                method: 'POST',
                body: formData
            })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        document.getElementById(urlInputId).value = data.url;
                        previewImageFromUrl(data.url, previewId);
                        showAlert('图片上传成功', 'success');
                    } else {
                        showAlert('图片上传失败: ' + (data.message || '未知错误'), 'danger');
                    }
                })
                .catch(error => {
                    console.error('Error uploading image:', error);
                    showAlert('图片上传失败', 'danger');
                });
        }

        // 从URL上传图片
        function uploadImageFromUrl(urlInputId, previewId) {
            const url = document.getElementById(urlInputId).value;
            if (!url) {
                showAlert('请输入图片URL', 'warning');
                return;
            }

            fetch('/api/admin/campaigns/upload-image-from-url', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ url: url })
            })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        document.getElementById(urlInputId).value = data.url;
                        previewImageFromUrl(data.url, previewId);
                        showAlert('图片上传成功', 'success');
                    } else {
                        showAlert('图片上传失败: ' + (data.message || '未知错误'), 'danger');
                    }
                })
                .catch(error => {
                    console.error('Error uploading image from URL:', error);
                    showAlert('图片上传失败', 'danger');
                });
        }

        // 从URL预览图片
        function previewImageFromUrl(url, previewId) {
            if (url) {
                const previewImg = document.getElementById(previewId);
                previewImg.src = url;
                previewImg.style.display = 'block';
            }
        }

        // 渠道内容配置专用的图片上传函数
        function uploadChannelImageFromFile(buttonElement) {
            // 获取同一卡片内的文件输入框和URL输入框
            const card = buttonElement.closest('.card');
            const fileInput = card.querySelector('input[type="file"]');
            const urlInput = card.querySelector('input[type="url"]');
            const previewImg = card.querySelector('.channel-image-preview');

            const file = fileInput.files[0];
            if (!file) {
                showAlert('请选择文件', 'warning');
                return;
            }

            const formData = new FormData();
            formData.append('image', file);

            // 显示上传中状态
            const originalText = buttonElement.textContent;
            buttonElement.textContent = '上传中...';
            buttonElement.disabled = true;

            fetch('/api/admin/campaigns/upload-image', {
                method: 'POST',
                body: formData,
                headers: {
                    'Accept': 'application/json'
                }
            })
                .then(response => response.json())
                .then(data => {
                    if (data.success && data.url) {
                        urlInput.value = data.url;

                        // 显示预览图片
                        if (previewImg) {
                            previewImg.src = data.url;
                            previewImg.style.display = 'block';
                        }

                        // 更新修改状态指示器
                        updateFieldModificationStatus(urlInput);

                        // 触发change事件以更新渠道内容字段
                        urlInput.dispatchEvent(new Event('change'));

                        showAlert('图片上传成功', 'success');
                    } else {
                        showAlert('上传失败: ' + (data.message || '未知错误'), 'danger');
                    }
                })
                .catch(error => {
                    console.error('Upload error:', error);
                    showAlert('上传失败，请重试', 'danger');
                })
                .finally(() => {
                    buttonElement.textContent = originalText;
                    buttonElement.disabled = false;
                });
        }

        // 渠道图片URL预览函数
        function previewChannelImage(urlInput) {
            const card = urlInput.closest('.card');
            const previewImg = card.querySelector('.channel-image-preview');

            if (previewImg && urlInput.value) {
                previewImg.src = urlInput.value;
                previewImg.style.display = 'block';
            } else if (previewImg) {
                previewImg.style.display = 'none';
            }
        }

        // 更新字段修改状态指示器
        function updateFieldModificationStatus(inputElement) {
            const fieldName = inputElement.getAttribute('data-field');
            const fieldValue = inputElement.value.trim();
            const isModified = fieldValue !== '';

            // 查找相关的指示器元素
            const container = inputElement.closest('.mb-3');
            if (!container) return;

            const indicator = container.querySelector('.modification-indicator[data-field="' + fieldName + '"]');
            const fieldStatus = container.querySelector('.channel-field-status[data-field="' + fieldName + '"]');

            if (indicator) {
                if (isModified) {
                    indicator.classList.remove('default');
                    indicator.classList.add('modified');
                } else {
                    indicator.classList.remove('modified');
                    indicator.classList.add('default');
                }
            }

            if (fieldStatus) {
                if (isModified) {
                    fieldStatus.textContent = '已自定义内容';
                    fieldStatus.classList.remove('default');
                    fieldStatus.classList.add('modified');
                } else {
                    fieldStatus.textContent = '使用默认内容';
                    fieldStatus.classList.remove('modified');
                    fieldStatus.classList.add('default');
                }
            }

            // 更新输入框样式
            if (isModified) {
                inputElement.classList.remove('channel-field-default');
                inputElement.classList.add('channel-field-modified');
            } else {
                inputElement.classList.remove('channel-field-modified');
                inputElement.classList.add('channel-field-default');
            }

            // 更新Tab上的黄点标识
            updateTabModificationIndicator(inputElement);
        }

        // 更新Tab上的修改标识
        function updateTabModificationIndicator(inputElement) {
            const channelKey = inputElement.getAttribute('data-channel');
            if (!channelKey) return;

            // 确定前缀（edit 或 create）
            const prefix = inputElement.closest('[id*="edit"]') ? 'edit' : 'create';

            // 检查该渠道是否有自定义配置
            const hasCustomConfig = hasChannelCustomConfig(prefix, channelKey);

            // 查找对应的Tab按钮
            const tabButton = document.querySelector(`#${prefix}ChannelTab${channelKey}`);
            if (!tabButton) return;

            // 查找或创建黄点标识
            let badge = tabButton.querySelector('.badge.bg-warning');

            if (hasCustomConfig) {
                // 如果有自定义配置但没有黄点，创建一个
                if (!badge) {
                    badge = document.createElement('span');
                    badge.className = 'position-absolute top-0 start-100 translate-middle badge rounded-pill bg-warning text-dark';
                    badge.style.fontSize = '0.6em';
                    badge.textContent = '●';
                    tabButton.appendChild(badge);
                }
            } else {
                // 如果没有自定义配置但有黄点，移除它
                if (badge) {
                    badge.remove();
                }
            }
        }

        // 刷新所有Tab的黄点标识
        function refreshAllTabIndicators(prefix) {
            // 获取所有渠道Tab按钮
            const tabButtons = document.querySelectorAll(`[id^="${prefix}ChannelTab"]`);

            tabButtons.forEach(tabButton => {
                // 从Tab ID中提取渠道键
                const tabId = tabButton.getAttribute('id');
                const channelKey = tabId.replace(`${prefix}ChannelTab`, '');

                // 检查该渠道是否有自定义配置
                const hasCustomConfig = hasChannelCustomConfig(prefix, channelKey);

                // 查找现有的黄点标识
                let badge = tabButton.querySelector('.badge.bg-warning');

                if (hasCustomConfig) {
                    // 如果有自定义配置但没有黄点，创建一个
                    if (!badge) {
                        badge = document.createElement('span');
                        badge.className = 'position-absolute top-0 start-100 translate-middle badge rounded-pill bg-warning text-dark';
                        badge.style.fontSize = '0.6em';
                        badge.textContent = '●';
                        tabButton.appendChild(badge);
                    }
                } else {
                    // 如果没有自定义配置但有黄点，移除它
                    if (badge) {
                        badge.remove();
                    }
                }
            });
        }

        // 显示图片模态框
        function showImageModal(src) {
            if (!src) return;

            document.getElementById('modalImage').src = src;
            document.getElementById('downloadImageBtn').href = src;

            const modal = new bootstrap.Modal(document.getElementById('imageModal'));
            modal.show();
        }

        // 确认删除活动
        let campaignToDelete = null;

        function confirmDeleteCampaign(id, name) {
            campaignToDelete = id;
            document.getElementById('deleteConfirmText').textContent = name;

            const modal = new bootstrap.Modal(document.getElementById('deleteModal'));
            modal.show();
        }

        // 删除活动
        function deleteCampaign() {
            if (!campaignToDelete) return;

            fetch(`/api/admin/campaigns/${campaignToDelete}`, {
                method: 'DELETE',
                headers: {
                    'Accept': 'application/json'
                }
            })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        showAlert('活动删除成功', 'success');
                        bootstrap.Modal.getInstance(document.getElementById('deleteModal')).hide();
                        loadCampaigns(); // 重新加载列表
                        campaignToDelete = null;
                    } else {
                        showAlert('删除失败: ' + (data.message || '未知错误'), 'danger');
                    }
                })
                .catch(error => {
                    console.error('Error deleting campaign:', error);
                    showAlert('删除活动失败', 'danger');
                });
        }

        // 奖励内容相关功能
        let availableRewardContents = [];
        let selectedRewardContents = {
            create: [],
            edit: []
        };

        // 从下拉列表添加奖励内容 (由 Vue 组件调用)
        function addRewardContentFromSelect(prefix, content) {
            if (!content) {
                return;
            }

            selectedRewardContents[prefix].push({
                ...content,
                sortOrder: selectedRewardContents[prefix].length,
                isActive: true,
                noticeMessage: ''
            });

            renderSelectedRewardContents(prefix);
            updateRewardContentIds(prefix);

            // 通知 Vue 组件刷新
            if (window.vueRewardSelectors && window.vueRewardSelectors[prefix]) {
                window.vueRewardSelectors[prefix].refreshOptions();
            }
        }

        // 渲染已选奖励内容列表
        function renderSelectedRewardContents(prefix) {
            const container = document.getElementById(prefix + 'SelectedRewardContents');

            // 按sortOrder排序
            selectedRewardContents[prefix].sort((a, b) => a.sortOrder - b.sortOrder);

            container.innerHTML = '';

            selectedRewardContents[prefix].forEach((content, index) => {
                const item = document.createElement('div');
                item.className = 'list-group-item';
                item.draggable = true;
                item.dataset.id = content.id;
                item.dataset.index = index;
                
                // 构建详细信息文本
                let detailText = `代码: ${content.code}`;
                
                // 添加合作伙伴信息
                if (content.partner && content.partner.name) {
                    detailText += ` | 合作伙伴: ${content.partner.name}`;
                } else if (content.partner_code) {
                    detailText += ` | 合作伙伴: ${content.partner_code}`;
                }
                
                // 添加价值和单位（如果存在）
                if (content.value !== null && content.value !== undefined && content.value !== '') {
                    detailText += ` | 价值: ${content.value}`;
                    if (content.unit) {
                        detailText += ` ${content.unit}`;
                    }
                }
                
                const isActive = content.isActive !== undefined ? content.isActive : true;
                const noticeMessage = content.noticeMessage || '';

                item.innerHTML = `
                    <div class="reward-content-item">
                        <div class="d-flex align-items-center">
                            <i class="fas fa-grip-vertical text-muted me-2" style="cursor: move;"></i>
                            ${content.logo_url ? `<img src="${content.logo_url}" alt="" style="width: 30px; height: 30px; object-fit: contain; margin-right: 10px;">` : ''}
                            <div class="flex-grow-1">
                                <div class="fw-bold">${content.name}</div>
                                <small class="text-muted">${detailText}</small>
                            </div>
                            <button type="button" class="btn btn-sm btn-danger" onclick="removeRewardContent('${prefix}', ${content.id})">
                                <i class="fas fa-times"></i>
                            </button>
                        </div>
                        <div class="mt-2 ps-4">
                            <div class="row align-items-center">
                                <div class="col-auto">
                                    <div class="form-check form-switch">
                                        <input class="form-check-input" type="checkbox" id="${prefix}RewardActive${content.id}"
                                            ${isActive ? 'checked' : ''}
                                            onchange="updateRewardContentActive('${prefix}', ${content.id}, this.checked)">
                                        <label class="form-check-label" for="${prefix}RewardActive${content.id}">
                                            ${isActive ? '<span class="text-success">启用</span>' : '<span class="text-danger">停用</span>'}
                                        </label>
                                    </div>
                                </div>
                                <div class="col">
                                    <input type="text" class="form-control form-control-sm"
                                        placeholder="提示说明（可选）"
                                        value="${noticeMessage}"
                                        onchange="updateRewardContentNotice('${prefix}', ${content.id}, this.value)">
                                </div>
                            </div>
                        </div>
                    </div>
                `;
                
                // 添加拖拽事件
                item.addEventListener('dragstart', (e) => {
                    e.dataTransfer.effectAllowed = 'move';
                    e.dataTransfer.setData('text/html', e.target.innerHTML);
                    e.target.classList.add('opacity-50');
                });
                
                item.addEventListener('dragend', (e) => {
                    e.target.classList.remove('opacity-50');
                });
                
                item.addEventListener('dragover', (e) => {
                    if (e.preventDefault) {
                        e.preventDefault();
                    }
                    e.dataTransfer.dropEffect = 'move';
                    
                    const draggedItem = container.querySelector('.opacity-50');
                    if (draggedItem && draggedItem !== item) {
                        const rect = item.getBoundingClientRect();
                        const y = e.clientY - rect.top;
                        if (y < rect.height / 2) {
                            container.insertBefore(draggedItem, item);
                        } else {
                            container.insertBefore(draggedItem, item.nextSibling);
                        }
                    }
                });
                
                item.addEventListener('drop', (e) => {
                    if (e.stopPropagation) {
                        e.stopPropagation();
                    }
                    updateSortOrder(prefix);
                    return false;
                });
                
                container.appendChild(item);
            });
            
            if (container.children.length === 0) {
                container.innerHTML = '<div class="text-muted text-center p-3">暂无已选奖励内容，请从上方下拉列表选择</div>';
            }
        }

        // 移除奖励内容
        function removeRewardContent(prefix, contentId) {
            selectedRewardContents[prefix] = selectedRewardContents[prefix].filter(item => item.id !== contentId);
            renderSelectedRewardContents(prefix);
            updateRewardContentIds(prefix);
            // 使用全局刷新函数
            if (window.refreshRewardSelect2) {
                window.refreshRewardSelect2(prefix);
            }
        }

        // 更新排序
        function updateSortOrder(prefix) {
            const container = document.getElementById(prefix + 'SelectedRewardContents');
            const items = container.querySelectorAll('.list-group-item');
            
            const newOrder = [];
            items.forEach((item, index) => {
                const contentId = parseInt(item.dataset.id);
                const content = selectedRewardContents[prefix].find(c => c.id === contentId);
                if (content) {
                    content.sortOrder = index;
                    newOrder.push(content);
                }
            });
            
            selectedRewardContents[prefix] = newOrder;
            updateRewardContentIds(prefix);
        }

        // 更新隐藏字段中的奖励内容ID
        function updateRewardContentIds(prefix) {
            const ids = selectedRewardContents[prefix]
                .sort((a, b) => a.sortOrder - b.sortOrder)
                .map(content => ({
                    id: content.id,
                    sort_order: content.sortOrder,
                    is_active: content.isActive !== undefined ? content.isActive : true,
                    notice_message: content.noticeMessage || null
                }));
            document.getElementById(prefix + 'RewardContentIds').value = JSON.stringify(ids);
        }

        // 更新奖励内容的启用状态
        function updateRewardContentActive(prefix, contentId, isActive) {
            const content = selectedRewardContents[prefix].find(c => c.id === contentId);
            if (content) {
                content.isActive = isActive;
                // 更新标签显示
                const label = document.querySelector(`label[for="${prefix}RewardActive${contentId}"]`);
                if (label) {
                    label.innerHTML = isActive
                        ? '<span class="text-success">启用</span>'
                        : '<span class="text-danger">停用</span>';
                }
                updateRewardContentIds(prefix);
            }
        }

        // 更新奖励内容的提示说明
        function updateRewardContentNotice(prefix, contentId, noticeMessage) {
            const content = selectedRewardContents[prefix].find(c => c.id === contentId);
            if (content) {
                content.noticeMessage = noticeMessage;
                updateRewardContentIds(prefix);
            }
        }

        // Clear form data when modals are hidden
        document.getElementById('createModal').addEventListener('hidden.bs.modal', function() {
            // Reset create form
            document.getElementById('createCampaignForm').reset();
            selectedRewardContents.create = [];
            renderSelectedRewardContents('create');
            // Clear image previews
            document.getElementById('createBannerPreview').style.display = 'none';
            document.getElementById('createBannerPreview').src = '';
            document.getElementById('createDetailPreview').style.display = 'none';
            document.getElementById('createDetailPreview').src = '';
        });

        document.getElementById('editModal').addEventListener('hidden.bs.modal', function() {
            // Reset edit form
            document.getElementById('editCampaignForm').reset();
            selectedRewardContents.edit = [];
            renderSelectedRewardContents('edit');
            // Clear image previews
            document.getElementById('editBannerPreview').style.display = 'none';
            document.getElementById('editBannerPreview').src = '';
            document.getElementById('editDetailPreview').style.display = 'none';
            document.getElementById('editDetailPreview').src = '';
            // 重置VIK银行选择
            clearAllVikIssuers('edit');
            // 重置渠道发卡行选择
            clearAllIssuers('edit');
        });

        // 显示提示消息
        function showAlert(message, type = 'info') {
            // 移除现有的提示
            const existingAlert = document.querySelector('.alert-dismissible');
            if (existingAlert) {
                existingAlert.remove();
            }

            // 创建新的提示
            const alertDiv = document.createElement('div');
            alertDiv.className = `alert alert-${type} alert-dismissible fade show position-fixed top-0 start-50 translate-middle-x`;
            alertDiv.style.zIndex = '9999';
            alertDiv.style.marginTop = '20px';
            alertDiv.innerHTML = `
                ${message}
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            `;

            document.body.appendChild(alertDiv);

            // 自动隐藏
            setTimeout(() => {
                if (alertDiv.parentNode) {
                    alertDiv.remove();
                }
            }, 5000);
        }

        // ===== 配置构建器相关功能 =====

        // 加载issuers数据
        function loadIssuers() {
            fetch('/api/admin/campaigns/issuers', {
                headers: {
                    'Accept': 'application/json'
                }
            })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        issuers = data.data;
                    } else {
                        console.error('Failed to load issuers:', data.message);
                    }
                })
                .catch(error => {
                    console.error('Error loading issuers:', error);
                });
        }

        // 加载发卡行列表用于渠道配置
        function loadIssuersForChannels() {
            fetch('/api/admin/campaigns/issuers-admin', {
                headers: {
                    'Accept': 'application/json'
                }
            })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        populateIssuerSelects(data.data);
                        // 同时更新 VIK 过滤器的发卡行列表
                        if (vikIssuerFilterApp) {
                            vikIssuerFilterApp.setIssuers(data.data);
                        }
                    } else {
                        console.error('Failed to load issuers for channels:', data.message);
                    }
                })
                .catch(error => {
                    console.error('Error loading issuers for channels:', error);
                });
        }

        // 初始化 VIK 发卡行过滤器 Vue 组件
        function initVikIssuerFilterApp() {
            vikIssuerFilterApp = Vue.createApp({
                data() {
                    return {
                        isOpen: false,
                        searchQuery: '',
                        allIssuers: [],
                        selectedIssuers: []
                    };
                },
                computed: {
                    filteredIssuers() {
                        if (!this.searchQuery) {
                            return this.allIssuers;
                        }
                        const query = this.searchQuery.toLowerCase();
                        return this.allIssuers.filter(issuer => {
                            const name = (issuer.name || '').toLowerCase();
                            const code = (issuer.code || '').toLowerCase();
                            return name.includes(query) || code.includes(query);
                        });
                    }
                },
                methods: {
                    toggleDropdown() {
                        this.isOpen = !this.isOpen;
                    },
                    closeDropdown() {
                        this.isOpen = false;
                    },
                    isSelected(issuerId) {
                        return this.selectedIssuers.some(i => i.id === issuerId);
                    },
                    toggleIssuer(issuer) {
                        const index = this.selectedIssuers.findIndex(i => i.id === issuer.id);
                        if (index === -1) {
                            this.selectedIssuers.push(issuer);
                        } else {
                            this.selectedIssuers.splice(index, 1);
                        }
                        this.updateFilter();
                    },
                    removeIssuer(issuerId) {
                        const index = this.selectedIssuers.findIndex(i => i.id === issuerId);
                        if (index !== -1) {
                            this.selectedIssuers.splice(index, 1);
                        }
                        this.updateFilter();
                    },
                    clearAll() {
                        this.selectedIssuers = [];
                        this.searchQuery = '';
                        this.updateFilter();
                    },
                    updateFilter() {
                        vikIssuerFilter = this.selectedIssuers.map(i => i.id);
                        currentPage = 1;
                        loadCampaigns();
                        loadAllTabCounts();
                    },
                    setIssuers(issuers) {
                        this.allIssuers = issuers.map(i => ({
                            id: i.id,
                            name: (i.name || '').replace(/\s*\(updated\)\s*/gi, '').replace(/\s*\(Updated\)\s*/gi, '').trim(),
                            code: (i.code || '').replace(/\s*\(updated\)\s*/gi, '').replace(/\s*\(Updated\)\s*/gi, '').trim()
                        }));
                    },
                    filterIssuers() {
                        // 搜索时自动过滤，computed 属性会处理
                    }
                },
                directives: {
                    'click-outside': {
                        mounted(el, binding) {
                            el._clickOutside = (event) => {
                                if (!(el === event.target || el.contains(event.target))) {
                                    binding.value();
                                }
                            };
                            document.addEventListener('click', el._clickOutside);
                        },
                        unmounted(el) {
                            document.removeEventListener('click', el._clickOutside);
                        }
                    }
                }
            }).mount('#vikIssuerFilterApp');
        }

        // 填充发卡行选择框（渠道配置和VIK银行）
        function populateIssuerSelects(issuers) {
            const editSelect = document.getElementById('editIssuerIds');
            const createSelect = document.getElementById('createIssuerIds');
            const editItems = document.getElementById('editIssuerItems');
            const createItems = document.getElementById('createIssuerItems');

            // VIK银行选择框
            const editVikSelect = document.getElementById('editVikIssuerIds');
            const createVikSelect = document.getElementById('createVikIssuerIds');
            const editVikItems = document.getElementById('editVikIssuerItems');
            const createVikItems = document.getElementById('createVikIssuerItems');

            // 清空现有选项
            editSelect.innerHTML = '';
            createSelect.innerHTML = '';
            editItems.innerHTML = '';
            createItems.innerHTML = '';

            // 清空VIK银行选项
            editVikSelect.innerHTML = '';
            createVikSelect.innerHTML = '';
            editVikItems.innerHTML = '';
            createVikItems.innerHTML = '';

            // 添加发卡行选项
            issuers.forEach(issuer => {
                // 清理名称中可能的重复 updated 标识
                const cleanName = issuer.name.replace(/\s*\(updated\)\s*/gi, '').replace(/\s*\(Updated\)\s*/gi, '').trim();
                const cleanCode = issuer.code.replace(/\s*\(updated\)\s*/gi, '').replace(/\s*\(Updated\)\s*/gi, '').trim();
                const displayName = `${cleanName} (${cleanCode})`;

                // 为隐藏的select添加选项（用于表单提交）- 渠道配置
                const editOption = document.createElement('option');
                editOption.value = issuer.id;
                editOption.textContent = displayName;

                const createOption = document.createElement('option');
                createOption.value = issuer.id;
                createOption.textContent = displayName;

                editSelect.appendChild(editOption);
                createSelect.appendChild(createOption);

                // 为隐藏的select添加选项（用于表单提交）- VIK银行
                const editVikOption = document.createElement('option');
                editVikOption.value = issuer.id;
                editVikOption.textContent = displayName;

                const createVikOption = document.createElement('option');
                createVikOption.value = issuer.id;
                createVikOption.textContent = displayName;

                editVikSelect.appendChild(editVikOption);
                createVikSelect.appendChild(createVikOption);

                // 为多选下拉列表添加项目 - 渠道配置
                const editItemHtml = `
                    <div class="dropdown-item" onclick="toggleIssuerSelection('edit', ${issuer.id})">
                        <input type="checkbox" id="editIssuer${issuer.id}" onchange="toggleIssuerSelection('edit', ${issuer.id})">
                        <label for="editIssuer${issuer.id}" class="mb-0">${displayName}</label>
                    </div>
                `;

                const createItemHtml = `
                    <div class="dropdown-item" onclick="toggleIssuerSelection('create', ${issuer.id})">
                        <input type="checkbox" id="createIssuer${issuer.id}" onchange="toggleIssuerSelection('create', ${issuer.id})">
                        <label for="createIssuer${issuer.id}" class="mb-0">${displayName}</label>
                    </div>
                `;

                editItems.insertAdjacentHTML('beforeend', editItemHtml);
                createItems.insertAdjacentHTML('beforeend', createItemHtml);

                // 为多选下拉列表添加项目 - VIK银行
                const editVikItemHtml = `
                    <div class="dropdown-item" onclick="toggleVikIssuerSelection('edit', ${issuer.id})">
                        <input type="checkbox" id="editVikIssuer${issuer.id}" onchange="toggleVikIssuerSelection('edit', ${issuer.id})">
                        <label for="editVikIssuer${issuer.id}" class="mb-0">${displayName}</label>
                    </div>
                `;

                const createVikItemHtml = `
                    <div class="dropdown-item" onclick="toggleVikIssuerSelection('create', ${issuer.id})">
                        <input type="checkbox" id="createVikIssuer${issuer.id}" onchange="toggleVikIssuerSelection('create', ${issuer.id})">
                        <label for="createVikIssuer${issuer.id}" class="mb-0">${displayName}</label>
                    </div>
                `;

                editVikItems.insertAdjacentHTML('beforeend', editVikItemHtml);
                createVikItems.insertAdjacentHTML('beforeend', createVikItemHtml);
            });

        }

        // 全选发卡行渠道
        function selectAllIssuers(prefix) {
            const select = document.getElementById(prefix + 'IssuerIds');
            const items = document.getElementById(prefix + 'IssuerItems');

            // 选中所有选项
            Array.from(select.options).forEach(option => {
                option.selected = true;
            });

            // 勾选所有复选框
            items.querySelectorAll('input[type="checkbox"]').forEach(checkbox => {
                checkbox.checked = true;
            });

            updateSelectedDisplay(prefix);
            generateChannelSelectors(prefix);
        }

        // 清空发卡行渠道选择
        function clearAllIssuers(prefix) {
            const select = document.getElementById(prefix + 'IssuerIds');
            const items = document.getElementById(prefix + 'IssuerItems');

            // 取消选中所有选项
            Array.from(select.options).forEach(option => {
                option.selected = false;
            });

            // 取消勾选所有复选框
            items.querySelectorAll('input[type="checkbox"]').forEach(checkbox => {
                checkbox.checked = false;
            });

            updateSelectedDisplay(prefix);
            generateChannelSelectors(prefix);
        }

        // 多渠道内容配置功能
        function toggleChannelContentConfig(prefix) {
            const configDiv = document.getElementById(prefix + 'ChannelContentConfig');
            if (configDiv.style.display === 'none') {
                configDiv.style.display = 'block';
                generateChannelSelectors(prefix);
            } else {
                configDiv.style.display = 'none';
            }
        }

        function generateChannelSelectors(prefix) {
            const tabsContainer = document.getElementById(prefix + 'ChannelTabs');
            const selectedIssuerIds = Array.from(document.getElementById(prefix + 'IssuerIds').selectedOptions).map(option => option.value);

            let channels = [];

            // 添加发卡行渠道（所有关联的发卡行都可以有差异化配置）
            selectedIssuerIds.forEach(issuerId => {
                const option = document.querySelector(`#${prefix}IssuerIds option[value="${issuerId}"]`);
                if (option) {
                    channels.push({
                        type: 'issuer',
                        id: issuerId,
                        name: option.textContent,
                        key: `issuer_${issuerId}`
                    });
                }
            });

            // 在编辑模式下，还需要为所有有channel_contents配置的渠道创建tab（即使它们现在没有被关联）
            if (prefix === 'edit' && window.currentCampaign && window.currentCampaign.channelContents) {
                const channelContents = window.currentCampaign.channelContents;
                console.log('Adding tabs for existing channel contents:', Object.keys(channelContents));

                Object.keys(channelContents).forEach(channelKey => {
                    if (channelKey.startsWith('issuer_')) {
                        const issuerId = channelKey.replace('issuer_', '');

                        // 检查是否已经添加了这个渠道
                        if (!channels.find(ch => ch.key === channelKey)) {
                            // 查找发卡行名称
                            const option = document.querySelector(`#${prefix}IssuerIds option[value="${issuerId}"]`);
                            if (option) {
                                channels.push({
                                    type: 'issuer',
                                    id: issuerId,
                                    name: option.textContent,
                                    key: channelKey,
                                    isFromData: true // 标记这是从数据中添加的
                                });
                                console.log(`Added channel from data: ${channelKey} - ${option.textContent}`);
                            } else {
                                console.warn(`Could not find issuer option for ${issuerId}`);
                            }
                        }
                    } else if (channelKey === 'miniapp') {
                        // 小程序渠道（如果需要的话）
                        if (!channels.find(ch => ch.key === 'miniapp')) {
                            channels.push({
                                type: 'miniapp',
                                id: '',
                                name: '小程序',
                                key: 'miniapp',
                                isFromData: true
                            });
                        }
                    }
                });
            }

            // 清空现有Tab
            tabsContainer.innerHTML = '';

            // 如果没有可配置的渠道，显示提示
            if (channels.length === 0) {
                tabsContainer.innerHTML = `<li class="nav-item"><span class="nav-link text-muted">
                    <i class="fas fa-info-circle me-1"></i>
                    小程序使用默认字段内容，发卡行渠道可在此配置差异化内容。请先关联发卡行渠道。
                </span></li>`;
                document.getElementById(prefix + 'ChannelContentTabs').style.display = 'none';
                return;
            }

            // 生成渠道Tab
            channels.forEach((channel, index) => {
                const hasCustomConfig = hasChannelCustomConfig(prefix, channel.key);
                const tabId = `${prefix}ChannelTab${channel.key}`;

                const tabHtml = `
                    <li class="nav-item" role="presentation">
                        <button class="nav-link position-relative ${index === 0 ? 'active' : ''} ${channel.isFromData ? 'text-muted' : ''}"
                                id="${tabId}"
                                type="button"
                                onclick="showChannelContentTab('${prefix}', '${channel.key}', '${channel.type}', '${channel.id}'); updateTabActiveState('${prefix}', '${tabId}');"
                                ${channel.isFromData ? 'title="此渠道有历史配置数据，但当前未关联"' : ''}>
                            <i class="fas fa-${channel.type === 'miniapp' ? 'mobile-alt' : 'building'} me-1"></i>
                            ${channel.name}${channel.isFromData ? ' (历史)' : ''}
                            ${hasCustomConfig ? '<span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-warning text-dark" style="font-size: 0.6em;">●</span>' : ''}
                        </button>
                    </li>
                `;
                tabsContainer.insertAdjacentHTML('beforeend', tabHtml);
            });

            // 默认显示第一个Tab
            if (channels.length > 0) {
                const firstChannel = channels[0];
                setTimeout(() => {
                    showChannelContentTab(prefix, firstChannel.key, firstChannel.type, firstChannel.id);
                }, 100);
            }
        }

        // 检查渠道是否有自定义配置
        function hasChannelCustomConfig(prefix, channelKey) {
            // 优先从DOM收集当前修改的内容
            const domChannelContents = collectChannelContents(prefix);
            if (domChannelContents[channelKey] && Object.keys(domChannelContents[channelKey]).length > 0) {
                return true;
            }

            // 如果DOM中没有，检查从服务器加载的原始数据
            if (prefix === 'edit' && window.currentCampaign && window.currentCampaign.channelContents) {
                const serverChannelContents = window.currentCampaign.channelContents;
                return serverChannelContents[channelKey] && Object.keys(serverChannelContents[channelKey]).length > 0;
            }

            return false;
        }

        // ===== 多选下拉列表功能 =====

        // 切换下拉菜单显示
        function toggleIssuerDropdown(prefix) {
            const dropdown = document.getElementById(prefix + 'IssuerDropdown');
            const arrow = document.querySelector(`#${prefix}IssuerMultiselect .dropdown-arrow`);

            if (dropdown.style.display === 'none') {
                dropdown.style.display = 'block';
                arrow.classList.add('open');
                // 点击外部关闭下拉菜单
                setTimeout(() => {
                    document.addEventListener('click', function closeDropdown(e) {
                        if (!document.getElementById(prefix + 'IssuerMultiselect').contains(e.target)) {
                            dropdown.style.display = 'none';
                            arrow.classList.remove('open');
                            document.removeEventListener('click', closeDropdown);
                        }
                    });
                }, 100);
            } else {
                dropdown.style.display = 'none';
                arrow.classList.remove('open');
            }
        }

        // 切换单个发卡行选择
        function toggleIssuerSelection(prefix, issuerId) {
            const checkbox = document.getElementById(`${prefix}Issuer${issuerId}`);
            const hiddenSelect = document.getElementById(prefix + 'IssuerIds');
            const option = hiddenSelect.querySelector(`option[value="${issuerId}"]`);

            if (checkbox.checked) {
                option.selected = true;
            } else {
                option.selected = false;
            }

            updateSelectedDisplay(prefix);
            generateChannelSelectors(prefix);
        }

        // 更新选中项显示
        function updateSelectedDisplay(prefix) {
            const selectedContainer = document.getElementById(prefix + 'SelectedIssuers');
            const hiddenSelect = document.getElementById(prefix + 'IssuerIds');
            const selectedOptions = Array.from(hiddenSelect.selectedOptions);

            if (selectedOptions.length === 0) {
                selectedContainer.innerHTML = '<span class="text-muted">点击选择发卡行渠道</span>';
                return;
            }

            selectedContainer.innerHTML = '';
            selectedOptions.forEach(option => {
                const selectedItem = document.createElement('span');
                selectedItem.className = 'selected-item';
                selectedItem.innerHTML = `
                    ${option.textContent}
                    <button type="button" class="remove-btn" onclick="removeIssuerSelection('${prefix}', ${option.value})" title="移除">
                        <i class="fas fa-times"></i>
                    </button>
                `;
                selectedContainer.appendChild(selectedItem);
            });
        }

        // 移除单个发卡行选择（带确认）
        function removeIssuerSelection(prefix, issuerId) {
            const hiddenSelect = document.getElementById(prefix + 'IssuerIds');
            const option = hiddenSelect.querySelector(`option[value="${issuerId}"]`);
            const issuerName = option ? option.textContent : '发卡行';

            if (confirm(`确定要移除 "${issuerName}" 吗？\n\n移除后该发卡行的渠道配置也将被清除。`)) {
                const checkbox = document.getElementById(`${prefix}Issuer${issuerId}`);
                checkbox.checked = false;
                option.selected = false;

                updateSelectedDisplay(prefix);
                generateChannelSelectors(prefix);
            }
        }

        // 带确认的清空所有发卡行
        function clearAllIssuersWithConfirm(prefix) {
            const hiddenSelect = document.getElementById(prefix + 'IssuerIds');
            const selectedCount = hiddenSelect.selectedOptions.length;

            if (selectedCount === 0) {
                showAlert('没有已选择的发卡行', 'info');
                return;
            }

            if (confirm(`确定要清空所有已选择的发卡行吗？\n\n将清空 ${selectedCount} 个发卡行及其渠道配置。`)) {
                clearAllIssuers(prefix);
                // 关闭下拉菜单
                const dropdown = document.getElementById(prefix + 'IssuerDropdown');
                const arrow = document.querySelector(`#${prefix}IssuerMultiselect .dropdown-arrow`);
                dropdown.style.display = 'none';
                arrow.classList.remove('open');
            }
        }

        // ===== VIK银行相关函数 =====

        // 切换VIK银行下拉菜单
        function toggleVikIssuerDropdown(prefix) {
            const dropdown = document.getElementById(prefix + 'VikIssuerDropdown');
            const arrow = document.querySelector(`#${prefix}VikIssuerMultiselect .dropdown-arrow`);

            if (dropdown.style.display === 'none') {
                dropdown.style.display = 'block';
                arrow.classList.add('open');

                // 点击外部关闭下拉菜单
                document.addEventListener('click', function closeDropdown(e) {
                    if (!document.getElementById(prefix + 'VikIssuerMultiselect').contains(e.target)) {
                        dropdown.style.display = 'none';
                        arrow.classList.remove('open');
                        document.removeEventListener('click', closeDropdown);
                    }
                });
            } else {
                dropdown.style.display = 'none';
                arrow.classList.remove('open');
            }
        }

        // 切换VIK银行选择
        function toggleVikIssuerSelection(prefix, issuerId) {
            const checkbox = document.getElementById(`${prefix}VikIssuer${issuerId}`);
            const hiddenSelect = document.getElementById(prefix + 'VikIssuerIds');
            const option = hiddenSelect.querySelector(`option[value="${issuerId}"]`);

            checkbox.checked = !checkbox.checked;

            if (checkbox.checked) {
                option.selected = true;
            } else {
                option.selected = false;
            }

            updateVikIssuerDisplay(prefix);
        }

        // 更新VIK银行显示
        function updateVikIssuerDisplay(prefix) {
            const selectedContainer = document.getElementById(prefix + 'SelectedVikIssuers');
            const hiddenSelect = document.getElementById(prefix + 'VikIssuerIds');
            const selectedOptions = Array.from(hiddenSelect.selectedOptions);

            if (selectedOptions.length === 0) {
                selectedContainer.innerHTML = '<span class="text-muted">点击选择VIK银行</span>';
            } else {
                selectedContainer.innerHTML = selectedOptions.map(option => `
                    <span class="badge bg-warning text-dark me-1 mb-1">
                        ${option.textContent}
                        <button type="button" class="remove-btn" onclick="removeVikIssuerSelection('${prefix}', ${option.value})" title="移除">
                            <i class="fas fa-times"></i>
                        </button>
                    </span>
                `).join('');
            }

            // 自动更新VIK银行用户限制字段的显示
            updateVikChannelIdRequirementVisibility(prefix);
        }

        // 移除VIK银行选择
        function removeVikIssuerSelection(prefix, issuerId) {
            const hiddenSelect = document.getElementById(prefix + 'VikIssuerIds');
            const option = hiddenSelect.querySelector(`option[value="${issuerId}"]`);
            const vikIssuerName = option ? option.textContent : 'VIK银行';

            if (confirm(`确定要移除 "${vikIssuerName}" 吗？`)) {
                const checkbox = document.getElementById(`${prefix}VikIssuer${issuerId}`);
                if (checkbox) checkbox.checked = false;
                if (option) option.selected = false;
                updateVikIssuerDisplay(prefix);
            }
        }

        // 全选VIK银行
        function selectAllVikIssuers(prefix) {
            const select = document.getElementById(prefix + 'VikIssuerIds');
            const items = document.getElementById(prefix + 'VikIssuerItems');

            Array.from(select.options).forEach(option => {
                option.selected = true;
            });

            items.querySelectorAll('input[type="checkbox"]').forEach(checkbox => {
                checkbox.checked = true;
            });

            updateVikIssuerDisplay(prefix);
        }

        // 清空VIK银行选择
        function clearAllVikIssuers(prefix) {
            const select = document.getElementById(prefix + 'VikIssuerIds');
            const items = document.getElementById(prefix + 'VikIssuerItems');

            Array.from(select.options).forEach(option => {
                option.selected = false;
            });

            items.querySelectorAll('input[type="checkbox"]').forEach(checkbox => {
                checkbox.checked = false;
            });

            updateVikIssuerDisplay(prefix);
        }

        // 带确认的清空所有VIK银行
        function clearAllVikIssuersWithConfirm(prefix) {
            const hiddenSelect = document.getElementById(prefix + 'VikIssuerIds');
            const selectedCount = hiddenSelect.selectedOptions.length;

            if (selectedCount === 0) {
                showAlert('没有已选择的VIK银行', 'info');
                return;
            }

            if (confirm(`确定要清空所有已选择的VIK银行吗？\n\n将清空 ${selectedCount} 个VIK银行。`)) {
                clearAllVikIssuers(prefix);
                const dropdown = document.getElementById(prefix + 'VikIssuerDropdown');
                const arrow = document.querySelector(`#${prefix}VikIssuerMultiselect .dropdown-arrow`);
                dropdown.style.display = 'none';
                arrow.classList.remove('open');
            }
        }

        // 控制VIK银行用户限制字段的显示
        function updateVikChannelIdRequirementVisibility(prefix) {
            const requirementDiv = document.getElementById(prefix + 'VikChannelIdRequirement');
            const errorMessageDiv = document.getElementById(prefix + 'VikChannelIdErrorMessage');
            const vikIssuerSelect = document.getElementById(prefix + 'VikIssuerIds');
            const enrollRequired = document.getElementById(prefix + 'EnrollRequired');
            const venrollmentGroupId = document.getElementById(prefix + 'VenrollmentGroupId');

            // 判断是否需要显示这些字段
            // 条件：1. 活动需要报名（enrollRequired或有venrollmentGroupId）2. 且关联了VIK银行
            const hasEnrollment = enrollRequired?.checked || venrollmentGroupId?.value;
            const hasVikIssuers = vikIssuerSelect && vikIssuerSelect.selectedOptions.length > 0;

            if (hasEnrollment && hasVikIssuers) {
                requirementDiv.style.display = 'block';
                // 只有勾选了"仅关联银行用户ID的用户可报名"时才显示错误提示配置
                const requireVikChannelIdCheckbox = document.getElementById(prefix + 'RequireVikChannelId');
                errorMessageDiv.style.display = requireVikChannelIdCheckbox?.checked ? 'block' : 'none';
            } else {
                requirementDiv.style.display = 'none';
                errorMessageDiv.style.display = 'none';
            }
        }

        function showChannelContentTab(prefix, channelKey, channelType, channelId) {
            console.log(`Showing channel tab: ${channelKey}, type: ${channelType}, id: ${channelId}`);

            const tabContentContainer = document.getElementById(prefix + 'ChannelContentTabs');
            if (!tabContentContainer) {
                console.error(`Tab content container not found: ${prefix}ChannelContentTabs`);
                return;
            }

            // 隐藏所有现有的tab内容
            tabContentContainer.querySelectorAll('.tab-pane, .channel-tab-content').forEach(pane => {
                pane.classList.remove('show', 'active');
                pane.style.display = 'none';
            });

            // 隐藏旧的channel-content-tab
            tabContentContainer.querySelectorAll('.channel-content-tab').forEach(tab => {
                tab.style.display = 'none';
            });

            // 获取或创建对应的Tab内容
            let tabContent = document.getElementById(`${prefix}ChannelContent${channelKey}`);
            if (!tabContent) {
                console.log(`Creating new tab content for ${channelKey}`);
                // 创建新的Tab内容
                if (channelType === 'miniapp') {
                    tabContent = createMiniprogramTabContent(prefix, channelKey);
                } else if (channelType === 'issuer') {
                    tabContent = createIssuerTabContent(prefix, channelKey, channelId);
                }

                if (tabContent) {
                    tabContentContainer.appendChild(tabContent);
                    console.log(`Tab content created and appended for ${channelKey}`);

                    // 为新创建的Tab填充数据（如果有的话）
                    if (prefix === 'edit' && window.currentCampaign && window.currentCampaign.channelContents) {
                        const channelData = window.currentCampaign.channelContents[channelKey];
                        if (channelData && typeof channelData === 'object') {
                            console.log(`Populating new tab ${channelKey} with data:`, channelData);
                            Object.keys(channelData).forEach(fieldName => {
                                const fieldSelector = `.channel-content-field[data-field="${fieldName}"]`;
                                const field = tabContent.querySelector(fieldSelector);
                                if (field && channelData[fieldName]) {
                                    field.value = channelData[fieldName];

                                    // 如果是图片字段，显示预览
                                    if ((fieldName === 'banner_image_url' || fieldName === 'detail_image_url') && field.type === 'url') {
                                        previewChannelImage(field);
                                    }

                                    // 更新修改状态指示器
                                    updateFieldModificationStatus(field);
                                }
                            });
                        }
                    }
                } else {
                    console.error(`Failed to create tab content for ${channelKey}`);
                    return;
                }
            } else {
                console.log(`Using existing tab content for ${channelKey}`);
            }

            // 显示对应的Tab内容
            if (tabContent) {
                tabContent.style.display = 'block';
                tabContent.classList.add('show', 'active');
                console.log(`Tab content activated for ${channelKey}`);

                // 确保容器也是可见的
                tabContentContainer.style.display = 'block';
            } else {
                console.error(`No tab content found or created for ${channelKey}`);
            }
        }

        function updateTabActiveState(prefix, activeTabId) {
            // 移除所有Tab的active状态
            document.querySelectorAll(`#${prefix}ChannelTabs .nav-link`).forEach(tab => {
                tab.classList.remove('active');
            });

            // 设置当前Tab为active
            const activeTab = document.getElementById(activeTabId);
            if (activeTab) {
                activeTab.classList.add('active');
            }
        }

        function createMiniprogramTabContent(prefix, channelKey) {
            console.log(`Creating miniapp content for ${channelKey}`);

            const tabContent = document.createElement('div');
            tabContent.className = 'channel-tab-content';
            tabContent.id = `${prefix}ChannelContent${channelKey}`;
            tabContent.style.display = 'none';

            // 从现有的小程序模板复制内容
            const template = document.querySelector(`#${prefix}ChannelContentTabs .channel-content-tab[data-channel="miniapp"]`);
            console.log(`Miniapp template found:`, !!template);

            if (template) {
                tabContent.innerHTML = template.innerHTML;

                // 更新字段的data-channel属性
                tabContent.querySelectorAll('.channel-content-field').forEach(field => {
                    field.setAttribute('data-channel', channelKey);
                });
                console.log(`Updated ${tabContent.querySelectorAll('.channel-content-field').length} fields for ${channelKey}`);
            } else {
                console.error(`Miniapp template not found for prefix: ${prefix}`);
                // 如果找不到模板，直接显示静态模板
                tabContent.innerHTML = createMiniprogramFormHTML(channelKey);
            }

            return tabContent;
        }

        function createMiniprogramFormHTML(channelKey) {
            return `
                <h6 class="mb-3"><i class="fas fa-mobile-alt text-primary"></i> 小程序渠道内容配置</h6>
                <div class="row">
                    <div class="col-md-6">
                        <div class="mb-3">
                            <label class="form-label channel-field-label">
                                活动名称
                                <span class="modification-indicator default" data-field="name"></span>
                            </label>
                            <input type="text" class="form-control channel-content-field channel-field-default" data-channel="${channelKey}" data-field="name" placeholder="留空使用默认内容" oninput="updateFieldModificationStatus(this)">
                            <div class="channel-field-status default" data-field="name">使用默认内容</div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="mb-3">
                            <label class="form-label channel-field-label">
                                奖励描述
                                <span class="modification-indicator default" data-field="reward_description"></span>
                            </label>
                            <input type="text" class="form-control channel-content-field channel-field-default" data-channel="${channelKey}" data-field="reward_description" placeholder="留空使用默认内容" oninput="updateFieldModificationStatus(this)">
                            <div class="channel-field-status default" data-field="reward_description">使用默认内容</div>
                        </div>
                    </div>
                </div>
                <div class="mb-3">
                    <label class="form-label channel-field-label">
                        活动描述
                        <span class="modification-indicator default" data-field="description"></span>
                    </label>
                    <textarea class="form-control channel-content-field channel-field-default" data-channel="${channelKey}" data-field="description" rows="3" placeholder="留空使用默认内容" oninput="updateFieldModificationStatus(this)"></textarea>
                    <div class="channel-field-status default" data-field="description">使用默认内容</div>
                </div>
                <div class="row">
                    <div class="col-md-6">
                        <div class="mb-3">
                            <label class="form-label channel-field-label">
                                Banner图片
                                <span class="modification-indicator default" data-field="banner_image_url"></span>
                            </label>
                            <div class="row">
                                <div class="col-4">
                                    <input type="file" class="form-control" accept="image/*" style="display:none;">
                                </div>
                                <div class="col-8">
                                    <input type="url" class="form-control channel-content-field channel-field-default" data-channel="${channelKey}" data-field="banner_image_url" placeholder="或输入图片链接" oninput="previewChannelImage(this); updateFieldModificationStatus(this)">
                                </div>
                                <div class="col-4">
                                    <button type="button" class="btn btn-primary btn-sm w-100" onclick="uploadChannelImageFromFile(this)">上传</button>
                                </div>
                            </div>
                            <div class="mt-2">
                                <img class="channel-image-preview" style="max-width: 100px; max-height: 100px; display: none;" alt="预览">
                            </div>
                            <div class="channel-field-status default" data-field="banner_image_url">使用默认内容</div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="mb-3">
                            <label class="form-label channel-field-label">
                                详情图片
                                <span class="modification-indicator default" data-field="detail_image_url"></span>
                            </label>
                            <div class="row">
                                <div class="col-4">
                                    <input type="file" class="form-control" accept="image/*" style="display:none;">
                                </div>
                                <div class="col-8">
                                    <input type="url" class="form-control channel-content-field channel-field-default" data-channel="${channelKey}" data-field="detail_image_url" placeholder="或输入图片链接" oninput="previewChannelImage(this); updateFieldModificationStatus(this)">
                                </div>
                                <div class="col-4">
                                    <button type="button" class="btn btn-primary btn-sm w-100" onclick="uploadChannelImageFromFile(this)">上传</button>
                                </div>
                            </div>
                            <div class="mt-2">
                                <img class="channel-image-preview" style="max-width: 100px; max-height: 100px; display: none;" alt="预览">
                            </div>
                            <div class="channel-field-status default" data-field="detail_image_url">使用默认内容</div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6">
                        <div class="mb-3">
                            <label class="form-label channel-field-label">
                                商户描述
                                <span class="modification-indicator default" data-field="merchant_description"></span>
                            </label>
                            <textarea class="form-control channel-content-field channel-field-default" data-channel="${channelKey}" data-field="merchant_description" rows="2" placeholder="留空使用默认内容" oninput="updateFieldModificationStatus(this)"></textarea>
                            <div class="channel-field-status default" data-field="merchant_description">使用默认内容</div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="mb-3">
                            <label class="form-label channel-field-label">
                                条款条件
                                <span class="modification-indicator default" data-field="terms_and_conditions"></span>
                            </label>
                            <textarea class="form-control channel-content-field channel-field-default" data-channel="${channelKey}" data-field="terms_and_conditions" rows="2" placeholder="留空使用默认内容" oninput="updateFieldModificationStatus(this)"></textarea>
                            <div class="channel-field-status default" data-field="terms_and_conditions">使用默认内容</div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6">
                        <div class="mb-3">
                            <label class="form-label channel-field-label">
                                常见问题
                                <span class="modification-indicator default" data-field="qna"></span>
                            </label>
                            <textarea class="form-control channel-content-field channel-field-default" data-channel="${channelKey}" data-field="qna" rows="2" placeholder="留空使用默认内容" oninput="updateFieldModificationStatus(this)"></textarea>
                            <div class="channel-field-status default" data-field="qna">使用默认内容</div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="mb-3">
                            <label class="form-label channel-field-label">
                                适用卡片文本
                                <span class="modification-indicator default" data-field="eligible_cards_text"></span>
                            </label>
                            <input type="text" class="form-control channel-content-field channel-field-default" data-channel="${channelKey}" data-field="eligible_cards_text" placeholder="留空使用默认内容" oninput="updateFieldModificationStatus(this)">
                            <div class="channel-field-status default" data-field="eligible_cards_text">使用默认内容</div>
                        </div>
                        <div class="mb-3">
                            <label class="form-label channel-field-label">
                                生效日期文本
                                <span class="modification-indicator default" data-field="effectiveDateText"></span>
                            </label>
                            <input type="text" class="form-control channel-content-field channel-field-default" data-channel="${channelKey}" data-field="effectiveDateText" placeholder="留空使用默认内容" oninput="updateFieldModificationStatus(this)">
                            <div class="channel-field-status default" data-field="effectiveDateText">使用默认内容</div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6">
                        <div class="mb-3">
                            <label class="form-label channel-field-label">
                                无适用卡片提示信息
                                <span class="modification-indicator default" data-field="no_eligible_cards_message"></span>
                            </label>
                            <input type="text" class="form-control channel-content-field channel-field-default" data-channel="${channelKey}" data-field="no_eligible_cards_message" placeholder="留空使用默认内容" oninput="updateFieldModificationStatus(this)">
                            <div class="channel-field-status default" data-field="no_eligible_cards_message">使用默认内容</div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="mb-3">
                            <label class="form-label channel-field-label">
                                默认按钮文本
                                <span class="modification-indicator default" data-field="default_action_button_text"></span>
                            </label>
                            <input type="text" class="form-control channel-content-field channel-field-default" data-channel="${channelKey}" data-field="default_action_button_text" placeholder="留空使用默认内容" oninput="updateFieldModificationStatus(this)">
                            <div class="channel-field-status default" data-field="default_action_button_text">使用默认内容</div>
                        </div>
                    </div>
                </div>
            `;
        }

        function createIssuerFormHTML(channelKey, issuerName) {
            return `
                <h6 class="mb-3"><i class="fas fa-building text-success"></i> <span class="issuer-name">${issuerName}</span> 渠道内容配置</h6>
                <div class="row">
                    <div class="col-md-6">
                        <div class="mb-3">
                            <label class="form-label channel-field-label">
                                活动名称
                                <span class="modification-indicator default" data-field="name"></span>
                            </label>
                            <input type="text" class="form-control channel-content-field channel-field-default" data-channel="${channelKey}" data-field="name" placeholder="留空使用默认内容" oninput="updateFieldModificationStatus(this)">
                            <div class="channel-field-status default" data-field="name">使用默认内容</div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="mb-3">
                            <label class="form-label channel-field-label">
                                奖励描述
                                <span class="modification-indicator default" data-field="reward_description"></span>
                            </label>
                            <input type="text" class="form-control channel-content-field channel-field-default" data-channel="${channelKey}" data-field="reward_description" placeholder="留空使用默认内容" oninput="updateFieldModificationStatus(this)">
                            <div class="channel-field-status default" data-field="reward_description">使用默认内容</div>
                        </div>
                    </div>
                </div>
                <div class="mb-3">
                    <label class="form-label channel-field-label">
                        活动描述
                        <span class="modification-indicator default" data-field="description"></span>
                    </label>
                    <textarea class="form-control channel-content-field channel-field-default" data-channel="${channelKey}" data-field="description" rows="3" placeholder="留空使用默认内容" oninput="updateFieldModificationStatus(this)"></textarea>
                    <div class="channel-field-status default" data-field="description">使用默认内容</div>
                </div>
                <div class="row">
                    <div class="col-md-6">
                        <div class="mb-3">
                            <label class="form-label channel-field-label">
                                Banner图片
                                <span class="modification-indicator default" data-field="banner_image_url"></span>
                            </label>
                            <div class="row">
                                <div class="col-4">
                                    <input type="file" class="form-control" accept="image/*" style="display:none;">
                                </div>
                                <div class="col-8">
                                    <input type="url" class="form-control channel-content-field channel-field-default" data-channel="${channelKey}" data-field="banner_image_url" placeholder="或输入图片链接" oninput="previewChannelImage(this); updateFieldModificationStatus(this)">
                                </div>
                                <div class="col-4">
                                    <button type="button" class="btn btn-primary btn-sm w-100" onclick="uploadChannelImageFromFile(this)">上传</button>
                                </div>
                            </div>
                            <div class="mt-2">
                                <img class="channel-image-preview" style="max-width: 100px; max-height: 100px; display: none;" alt="预览">
                            </div>
                            <div class="channel-field-status default" data-field="banner_image_url">使用默认内容</div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="mb-3">
                            <label class="form-label channel-field-label">
                                详情图片
                                <span class="modification-indicator default" data-field="detail_image_url"></span>
                            </label>
                            <div class="row">
                                <div class="col-4">
                                    <input type="file" class="form-control" accept="image/*" style="display:none;">
                                </div>
                                <div class="col-8">
                                    <input type="url" class="form-control channel-content-field channel-field-default" data-channel="${channelKey}" data-field="detail_image_url" placeholder="或输入图片链接" oninput="previewChannelImage(this); updateFieldModificationStatus(this)">
                                </div>
                                <div class="col-4">
                                    <button type="button" class="btn btn-primary btn-sm w-100" onclick="uploadChannelImageFromFile(this)">上传</button>
                                </div>
                            </div>
                            <div class="mt-2">
                                <img class="channel-image-preview" style="max-width: 100px; max-height: 100px; display: none;" alt="预览">
                            </div>
                            <div class="channel-field-status default" data-field="detail_image_url">使用默认内容</div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6">
                        <div class="mb-3">
                            <label class="form-label channel-field-label">
                                商户描述
                                <span class="modification-indicator default" data-field="merchant_description"></span>
                            </label>
                            <textarea class="form-control channel-content-field channel-field-default" data-channel="${channelKey}" data-field="merchant_description" rows="2" placeholder="留空使用默认内容" oninput="updateFieldModificationStatus(this)"></textarea>
                            <div class="channel-field-status default" data-field="merchant_description">使用默认内容</div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="mb-3">
                            <label class="form-label channel-field-label">
                                条款条件
                                <span class="modification-indicator default" data-field="terms_and_conditions"></span>
                            </label>
                            <textarea class="form-control channel-content-field channel-field-default" data-channel="${channelKey}" data-field="terms_and_conditions" rows="2" placeholder="留空使用默认内容" oninput="updateFieldModificationStatus(this)"></textarea>
                            <div class="channel-field-status default" data-field="terms_and_conditions">使用默认内容</div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6">
                        <div class="mb-3">
                            <label class="form-label channel-field-label">
                                常见问题
                                <span class="modification-indicator default" data-field="qna"></span>
                            </label>
                            <textarea class="form-control channel-content-field channel-field-default" data-channel="${channelKey}" data-field="qna" rows="2" placeholder="留空使用默认内容" oninput="updateFieldModificationStatus(this)"></textarea>
                            <div class="channel-field-status default" data-field="qna">使用默认内容</div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="mb-3">
                            <label class="form-label channel-field-label">
                                适用卡片文本
                                <span class="modification-indicator default" data-field="eligible_cards_text"></span>
                            </label>
                            <input type="text" class="form-control channel-content-field channel-field-default" data-channel="${channelKey}" data-field="eligible_cards_text" placeholder="留空使用默认内容" oninput="updateFieldModificationStatus(this)">
                            <div class="channel-field-status default" data-field="eligible_cards_text">使用默认内容</div>
                        </div>
                        <div class="mb-3">
                            <label class="form-label channel-field-label">
                                生效日期文本
                                <span class="modification-indicator default" data-field="effectiveDateText"></span>
                            </label>
                            <input type="text" class="form-control channel-content-field channel-field-default" data-channel="${channelKey}" data-field="effectiveDateText" placeholder="留空使用默认内容" oninput="updateFieldModificationStatus(this)">
                            <div class="channel-field-status default" data-field="effectiveDateText">使用默认内容</div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6">
                        <div class="mb-3">
                            <label class="form-label channel-field-label">
                                无适用卡片提示信息
                                <span class="modification-indicator default" data-field="no_eligible_cards_message"></span>
                            </label>
                            <input type="text" class="form-control channel-content-field channel-field-default" data-channel="${channelKey}" data-field="no_eligible_cards_message" placeholder="留空使用默认内容" oninput="updateFieldModificationStatus(this)">
                            <div class="channel-field-status default" data-field="no_eligible_cards_message">使用默认内容</div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="mb-3">
                            <label class="form-label channel-field-label">
                                默认按钮文本
                                <span class="modification-indicator default" data-field="default_action_button_text"></span>
                            </label>
                            <input type="text" class="form-control channel-content-field channel-field-default" data-channel="${channelKey}" data-field="default_action_button_text" placeholder="留空使用默认内容" oninput="updateFieldModificationStatus(this)">
                            <div class="channel-field-status default" data-field="default_action_button_text">使用默认内容</div>
                        </div>
                    </div>
                </div>
            `;
        }

        function createIssuerTabContent(prefix, channelKey, issuerId) {
            console.log(`Creating issuer content for ${channelKey}, issuer ID: ${issuerId}`);

            const tabContent = document.createElement('div');
            tabContent.className = 'channel-tab-content';
            tabContent.id = `${prefix}ChannelContent${channelKey}`;
            tabContent.style.display = 'none';

            // 从发卡行模板复制内容
            const template = document.getElementById(`${prefix}IssuerChannelTemplate`);
            console.log(`Issuer template found:`, !!template);

            if (template) {
                tabContent.innerHTML = template.innerHTML;

                // 设置发卡行名称
                const option = document.querySelector(`#${prefix}IssuerIds option[value="${issuerId}"]`);
                const issuerName = option ? option.textContent : '未知发卡行';
                const issuerNameElement = tabContent.querySelector('.issuer-name');
                if (issuerNameElement) {
                    issuerNameElement.textContent = issuerName;
                }

                // 更新字段的data-channel属性
                tabContent.querySelectorAll('.channel-content-field').forEach(field => {
                    field.setAttribute('data-channel', channelKey);
                });
                console.log(`Updated ${tabContent.querySelectorAll('.channel-content-field').length} fields for ${channelKey}`);
            } else {
                console.error(`Issuer template not found for prefix: ${prefix}`);
                // 如果找不到模板，使用静态模板
                const option = document.querySelector(`#${prefix}IssuerIds option[value="${issuerId}"]`);
                const issuerName = option ? option.textContent : '未知发卡行';
                tabContent.innerHTML = createIssuerFormHTML(channelKey, issuerName);
            }

            return tabContent;
        }

        function showIssuerChannelTab(prefix, issuerId, channelKey) {
            const tabsDiv = document.getElementById(prefix + 'ChannelContentTabs');
            let issuerTab = tabsDiv.querySelector(`.channel-content-tab[data-channel="${channelKey}"]`);

            if (!issuerTab) {
                // 创建新的发卡行标签页
                const template = document.getElementById(prefix + 'IssuerChannelTemplate');
                issuerTab = template.cloneNode(true);
                issuerTab.id = prefix + 'ChannelTab' + channelKey;
                issuerTab.className = 'channel-content-tab';
                issuerTab.setAttribute('data-channel', channelKey);
                issuerTab.style.display = 'block';

                // 设置发卡行名称
                const option = document.querySelector(`#${prefix}IssuerIds option[value="${issuerId}"]`);
                const issuerName = option ? option.textContent : '未知发卡行';
                issuerTab.querySelector('.issuer-name').textContent = issuerName;

                // 设置字段的data-channel属性
                issuerTab.querySelectorAll('.channel-content-field').forEach(field => {
                    field.setAttribute('data-channel', channelKey);
                });

                tabsDiv.appendChild(issuerTab);
            } else {
                issuerTab.style.display = 'block';
            }
        }

        function resetChannelContents(prefix) {
            if (confirm('确定要重置所有渠道的差异化配置吗？')) {
                document.querySelectorAll(`#${prefix}ChannelContentConfig .channel-content-field`).forEach(field => {
                    field.value = '';
                });
                showAlert('已重置所有渠道差异化配置', 'success');
            }
        }

        function previewChannelContents(prefix) {
            const channelContents = collectChannelContents(prefix);

            let previewHtml = '<div class="modal fade" id="channelPreviewModal" tabindex="-1">';
            previewHtml += '<div class="modal-dialog modal-lg">';
            previewHtml += '<div class="modal-content">';
            previewHtml += '<div class="modal-header">';
            previewHtml += '<h5 class="modal-title">渠道内容预览</h5>';
            previewHtml += '<button type="button" class="btn-close" data-bs-dismiss="modal"></button>';
            previewHtml += '</div>';
            previewHtml += '<div class="modal-body">';

            Object.keys(channelContents).forEach(channelKey => {
                const content = channelContents[channelKey];
                const channelName = channelKey === 'miniapp' ? '小程序' :
                    channelKey.startsWith('issuer_') ? `发卡行 ${channelKey.replace('issuer_', '')}` : channelKey;

                previewHtml += `<h6><i class="fas fa-${channelKey === 'miniapp' ? 'mobile-alt' : 'building'} me-2"></i>${channelName}</h6>`;
                previewHtml += '<div class="row mb-3">';

                Object.keys(content).forEach(field => {
                    if (content[field]) {
                        previewHtml += `<div class="col-md-6 mb-2">`;
                        previewHtml += `<strong>${getFieldLabel(field)}:</strong><br>`;
                        previewHtml += `<span class="text-muted">${content[field]}</span>`;
                        previewHtml += `</div>`;
                    }
                });

                previewHtml += '</div><hr>';
            });

            previewHtml += '</div>';
            previewHtml += '<div class="modal-footer">';
            previewHtml += '<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>';
            previewHtml += '</div>';
            previewHtml += '</div></div></div>';

            // 移除旧的预览模态框
            const oldModal = document.getElementById('channelPreviewModal');
            if (oldModal) {
                oldModal.remove();
            }

            // 添加新的预览模态框
            document.body.insertAdjacentHTML('beforeend', previewHtml);

            // 显示模态框
            const modal = new bootstrap.Modal(document.getElementById('channelPreviewModal'));
            modal.show();
        }

        function collectChannelContents(prefix) {
            const channelContents = {};

            document.querySelectorAll(`#${prefix}ChannelContentConfig .channel-content-field`).forEach(field => {
                const channel = field.getAttribute('data-channel');
                const fieldName = field.getAttribute('data-field');
                const value = field.value.trim();

                if (value && channel && fieldName) {
                    if (!channelContents[channel]) {
                        channelContents[channel] = {};
                    }
                    channelContents[channel][fieldName] = value;
                }
            });

            return channelContents;
        }

        function getFieldLabel(field) {
            const labels = {
                'name': '活动名称',
                'reward_description': '奖励描述',
                'description': '活动描述',
                'banner_image_url': 'Banner图片',
                'detail_image_url': '详情图片',
                'default_action_button_text': '默认按钮文本',
                'merchant_description': '商户描述',
                'terms_and_conditions': '条款条件',
                'qna': '常见问题',
                'eligible_cards_text': '适用卡片文本',
                'couponEligibleCardsText': '优惠券适用卡片文本',
                'effectiveDateText': '生效日期文本',
                'no_eligible_cards_message': '无适用卡片提示信息'
            };
            return labels[field] || field;
        }

        // 填充渠道内容配置
        function populateChannelContents(prefix, channelContents) {
            if (!channelContents || typeof channelContents !== 'object') {
                return;
            }

            Object.keys(channelContents).forEach(channelKey => {
                const content = channelContents[channelKey];
                if (content && typeof content === 'object') {
                    Object.keys(content).forEach(fieldName => {
                        // 在指定的Tab容器内查找字段
                        const tabContent = document.getElementById(`${prefix}ChannelContent${channelKey}`);
                        if (tabContent) {
                            const fieldSelector = `.channel-content-field[data-field="${fieldName}"]`;
                            const field = tabContent.querySelector(fieldSelector);
                            if (field && content[fieldName]) {
                                field.value = content[fieldName];

                                // 如果是图片字段，显示预览
                                if ((fieldName === 'banner_image_url' || fieldName === 'detail_image_url') && field.type === 'url') {
                                    previewChannelImage(field);
                                }

                                // 更新修改状态指示器
                                updateFieldModificationStatus(field);
                            }
                        }
                    });
                }
            });
        }


        // 配置字段定义
        const configFields = {
            'issuer_code': {
                label: '发卡行代码',
                type: 'select',
                options: () => issuers.map(issuer => ({ value: issuer.code, label: `${issuer.name} (${issuer.code})` }))
            },
            'issuer_bid': {
                label: '发卡行BID',
                type: 'text'
            },
            'bin': {
                label: 'BIN号',
                type: 'text'
            },
            'funding_source': {
                label: '资金来源',
                type: 'select',
                options: [
                    { value: 'C', label: '信用卡 (C)' },
                    { value: 'D', label: '借记卡 (D)' },
                    { value: 'P', label: '预付卡 (P)' }
                ]
            },
            'product_code': {
                label: '产品代码',
                type: 'text'
            },
            'issuer_product_code': {
                label: '发卡行产品代码',
                type: 'text'
            },
            'is_dcdb': {
                label: '是否双币卡',
                type: 'select',
                options: [
                    { value: true, label: '是' },
                    { value: false, label: '否' }
                ]
            },
            'is_chip': {
                label: '是否芯片卡',
                type: 'select',
                options: [
                    { value: true, label: '是' },
                    { value: false, label: '否' }
                ]
            }
        };

        const operators = [
            { value: 'equal', label: '等于' },
            { value: 'not equal', label: '不等于' },
            { value: 'in', label: '包含在' },
            { value: 'not in', label: '不包含在' },
            { value: 'starts with', label: '开头是' }
        ];

        // 添加规则组
        function addRuleGroup(prefix) {
            const configBuilder = document.getElementById(prefix + 'EligibleCardsConfigBuilder');
            const ruleIndex = eligibleCardsConfigs[prefix].length;

            eligibleCardsConfigs[prefix].push([]);

            const ruleGroupDiv = document.createElement('div');
            ruleGroupDiv.className = 'rule-group';
            ruleGroupDiv.id = `${prefix}-rule-group-${ruleIndex}`;

            ruleGroupDiv.innerHTML = `
                <div class="rule-group-header">
                    <h6 class="rule-group-label">规则组 ${ruleIndex + 1} (OR)</h6>
                    <button type="button" class="btn btn-sm btn-outline-danger btn-remove" onclick="removeRuleGroup('${prefix}', ${ruleIndex})">
                        <i class="fas fa-trash"></i> 删除规则组
                    </button>
                </div>
                <div id="${prefix}-conditions-${ruleIndex}">
                    <!-- 条件会在这里动态添加 -->
                </div>
                <button type="button" class="btn btn-sm btn-success" onclick="addCondition('${prefix}', ${ruleIndex})">
                    <i class="fas fa-plus"></i> 添加条件 (AND)
                </button>
            `;

            configBuilder.appendChild(ruleGroupDiv);
            updateConfigJson(prefix);
        }

        // 删除规则组
        function removeRuleGroup(prefix, ruleIndex) {
            if (eligibleCardsConfigs[prefix][ruleIndex]) {
                eligibleCardsConfigs[prefix].splice(ruleIndex, 1);
                rebuildConfigBuilder(prefix);
            }
        }

        // 添加条件
        function addCondition(prefix, ruleIndex) {
            if (!eligibleCardsConfigs[prefix][ruleIndex]) {
                eligibleCardsConfigs[prefix][ruleIndex] = [];
            }

            const conditionIndex = eligibleCardsConfigs[prefix][ruleIndex].length;
            eligibleCardsConfigs[prefix][ruleIndex].push({
                condition: 'issuer_code',
                operator: 'in',
                value: []
            });

            const conditionsContainer = document.getElementById(`${prefix}-conditions-${ruleIndex}`);
            const conditionDiv = document.createElement('div');
            conditionDiv.className = 'condition-item';
            conditionDiv.id = `${prefix}-condition-${ruleIndex}-${conditionIndex}`;

            const currentCondition = eligibleCardsConfigs[prefix][ruleIndex][conditionIndex];

            conditionDiv.innerHTML = `
                <div class="condition-header">
                    <h6 class="condition-label">条件 ${conditionIndex + 1} (AND)</h6>
                    <button type="button" class="btn btn-sm btn-outline-danger btn-remove" onclick="removeCondition('${prefix}', ${ruleIndex}, ${conditionIndex})">
                        <i class="fas fa-times"></i> 删除
                    </button>
                </div>
                <div class="row">
                    <div class="col-md-4">
                        <label class="form-label">字段</label>
                        <select class="form-select form-select-sm" onchange="updateConditionField('${prefix}', ${ruleIndex}, ${conditionIndex}, this.value)">
                            ${Object.keys(configFields).map(key => `<option value="${key}"${key === currentCondition.condition ? ' selected' : ''}>${configFields[key].label}</option>`).join('')}
                        </select>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label">操作符</label>
                        <select class="form-select form-select-sm" onchange="updateConditionOperator('${prefix}', ${ruleIndex}, ${conditionIndex}, this.value)">
                            ${operators.map(op => `<option value="${op.value}"${op.value === currentCondition.operator ? ' selected' : ''}>${op.label}</option>`).join('')}
                        </select>
                    </div>
                    <div class="col-md-5">
                        <label class="form-label">值</label>
                        <div id="${prefix}-value-container-${ruleIndex}-${conditionIndex}">
                            <!-- 值输入控件会在这里动态生成 -->
                        </div>
                    </div>
                </div>
            `;

            conditionsContainer.appendChild(conditionDiv);
            renderValueInput(prefix, ruleIndex, conditionIndex);
            updateConfigJson(prefix);
        }

        // 删除条件
        function removeCondition(prefix, ruleIndex, conditionIndex) {
            if (eligibleCardsConfigs[prefix][ruleIndex] && eligibleCardsConfigs[prefix][ruleIndex][conditionIndex]) {
                eligibleCardsConfigs[prefix][ruleIndex].splice(conditionIndex, 1);
                // 如果规则组中没有条件了，删除整个规则组
                if (eligibleCardsConfigs[prefix][ruleIndex].length === 0) {
                    eligibleCardsConfigs[prefix].splice(ruleIndex, 1);
                }
                rebuildConfigBuilder(prefix);
            }
        }

        // 更新条件字段
        function updateConditionField(prefix, ruleIndex, conditionIndex, field) {
            eligibleCardsConfigs[prefix][ruleIndex][conditionIndex].condition = field;
            eligibleCardsConfigs[prefix][ruleIndex][conditionIndex].value = [];
            renderValueInput(prefix, ruleIndex, conditionIndex);
            updateConfigJson(prefix);
        }

        // 更新条件操作符
        function updateConditionOperator(prefix, ruleIndex, conditionIndex, operator) {
            eligibleCardsConfigs[prefix][ruleIndex][conditionIndex].operator = operator;
            eligibleCardsConfigs[prefix][ruleIndex][conditionIndex].value = operator === 'in' || operator === 'not in' ? [] : '';
            renderValueInput(prefix, ruleIndex, conditionIndex);
            updateConfigJson(prefix);
        }

        // 渲染值输入控件
        function renderValueInput(prefix, ruleIndex, conditionIndex) {
            const condition = eligibleCardsConfigs[prefix][ruleIndex][conditionIndex];
            const container = document.getElementById(`${prefix}-value-container-${ruleIndex}-${conditionIndex}`);

            if (!container) return;

            const field = configFields[condition.condition];
            const isArrayOperator = condition.operator === 'in' || condition.operator === 'not in';

            // 确保值的类型正确
            if (isArrayOperator && !Array.isArray(condition.value)) {
                condition.value = condition.value ? [condition.value] : [];
            } else if (!isArrayOperator && Array.isArray(condition.value)) {
                condition.value = condition.value.length > 0 ? condition.value[0] : '';
            }

            if (isArrayOperator) {
                // 数组类型输入
                if (field.type === 'select' && field.options) {
                    const options = typeof field.options === 'function' ? field.options() : field.options;
                    container.innerHTML = `
                        <select class="form-select form-select-sm" onchange="addValueToArray('${prefix}', ${ruleIndex}, ${conditionIndex}, this.value); this.value='';">
                            <option value="">选择要添加的值...</option>
                            ${options.map(opt => `<option value="${opt.value}">${opt.label}</option>`).join('')}
                        </select>
                        <div id="${prefix}-value-tags-${ruleIndex}-${conditionIndex}" class="mt-2">
                            <!-- 值标签会在这里显示 -->
                        </div>
                    `;
                } else {
                    container.innerHTML = `
                        <div class="input-group input-group-sm mb-2">
                            <input type="text" class="form-control" placeholder="输入值后按回车添加" onkeypress="if(event.key==='Enter') {addValueToArray('${prefix}', ${ruleIndex}, ${conditionIndex}, this.value); this.value=''; event.preventDefault();}">
                            <button type="button" class="btn btn-outline-secondary" onclick="const input=this.previousElementSibling; addValueToArray('${prefix}', ${ruleIndex}, ${conditionIndex}, input.value); input.value='';">添加</button>
                        </div>
                        <div class="input-group input-group-sm">
                            <textarea class="form-control" rows="2" placeholder="批量输入：粘贴多个值，用逗号分隔" style="resize: vertical;"></textarea>
                            <button type="button" class="btn btn-outline-primary" onclick="const textarea=this.previousElementSibling; addBatchValuesToArray('${prefix}', ${ruleIndex}, ${conditionIndex}, textarea.value); textarea.value='';">批量添加</button>
                        </div>
                        <div id="${prefix}-value-tags-${ruleIndex}-${conditionIndex}" class="mt-2">
                            <!-- 值标签会在这里显示 -->
                        </div>
                    `;
                }
                renderValueTags(prefix, ruleIndex, conditionIndex);
            } else {
                // 单值输入
                if (field.type === 'select' && field.options) {
                    const options = typeof field.options === 'function' ? field.options() : field.options;
                    container.innerHTML = `
                        <select class="form-select form-select-sm" onchange="updateSingleValue('${prefix}', ${ruleIndex}, ${conditionIndex}, this.value)">
                            <option value="">请选择...</option>
                            ${options.map(opt => `<option value="${opt.value}"${condition.value == opt.value ? ' selected' : ''}>${opt.label}</option>`).join('')}
                        </select>
                    `;
                } else {
                    container.innerHTML = `
                        <input type="text" class="form-control form-control-sm" value="${condition.value || ''}" onchange="updateSingleValue('${prefix}', ${ruleIndex}, ${conditionIndex}, this.value)" placeholder="输入值">
                    `;
                }
            }
        }

        // 添加值到数组
        function addValueToArray(prefix, ruleIndex, conditionIndex, value) {
            if (!value) return;

            const condition = eligibleCardsConfigs[prefix][ruleIndex][conditionIndex];
            if (!Array.isArray(condition.value)) {
                condition.value = [];
            }

            if (!condition.value.includes(value)) {
                condition.value.push(value);
                renderValueTags(prefix, ruleIndex, conditionIndex);
                updateConfigJson(prefix);
            }
        }

        // 批量添加值到数组
        function addBatchValuesToArray(prefix, ruleIndex, conditionIndex, batchText) {
            if (!batchText) return;

            const condition = eligibleCardsConfigs[prefix][ruleIndex][conditionIndex];
            if (!Array.isArray(condition.value)) {
                condition.value = [];
            }

            // 分割、去空白、过滤空值
            const values = batchText.split(',')
                .map(value => value.trim())
                .filter(value => value.length > 0);

            let addedCount = 0;
            // 添加每个不重复的值
            values.forEach(value => {
                if (!condition.value.includes(value)) {
                    condition.value.push(value);
                    addedCount++;
                }
            });

            if (addedCount > 0) {
                renderValueTags(prefix, ruleIndex, conditionIndex);
                updateConfigJson(prefix);
            }

            // 显示添加结果
            if (addedCount > 0) {
                // 可以在这里添加成功提示，但为了简洁暂时省略
                console.log(`成功添加 ${addedCount} 个值`);
            }
        }

        // 删除数组中的值
        function removeValueFromArray(prefix, ruleIndex, conditionIndex, valueIndex) {
            const condition = eligibleCardsConfigs[prefix][ruleIndex][conditionIndex];
            if (condition.value && Array.isArray(condition.value) && valueIndex >= 0 && valueIndex < condition.value.length) {
                condition.value.splice(valueIndex, 1);
                renderValueTags(prefix, ruleIndex, conditionIndex);
                updateConfigJson(prefix);
            }
        }

        // 更新单个值
        function updateSingleValue(prefix, ruleIndex, conditionIndex, value) {
            eligibleCardsConfigs[prefix][ruleIndex][conditionIndex].value = value;
            updateConfigJson(prefix);
        }

        // 渲染值标签
        function renderValueTags(prefix, ruleIndex, conditionIndex) {
            const condition = eligibleCardsConfigs[prefix][ruleIndex][conditionIndex];
            const container = document.getElementById(`${prefix}-value-tags-${ruleIndex}-${conditionIndex}`);

            if (!container || !Array.isArray(condition.value)) return;

            container.innerHTML = condition.value.map((value, valueIndex) => `
                <span class="value-tag">
                    ${escapeHtml(value)}
                    <span class="remove-tag" onclick="removeValueFromArray('${prefix}', ${ruleIndex}, ${conditionIndex}, ${valueIndex})">×</span>
                </span>
            `).join('');
        }

        // HTML转义函数
        function escapeHtml(text) {
            const div = document.createElement('div');
            div.textContent = text;
            return div.innerHTML;
        }

        // 重建配置构建器
        function rebuildConfigBuilder(prefix) {
            const configBuilder = document.getElementById(prefix + 'EligibleCardsConfigBuilder');
            configBuilder.innerHTML = '';

            eligibleCardsConfigs[prefix].forEach((ruleGroup, ruleIndex) => {
                // 直接创建规则组DOM，不调用addRuleGroup避免修改配置数组
                createRuleGroupDOM(prefix, ruleIndex);

                ruleGroup.forEach((condition, conditionIndex) => {
                    // 直接创建条件DOM，不调用addCondition避免修改配置数组
                    createConditionDOM(prefix, ruleIndex, conditionIndex);

                    // 更新界面显示现有数据
                    const conditionDiv = document.getElementById(`${prefix}-condition-${ruleIndex}-${conditionIndex}`);
                    const fieldSelect = conditionDiv.querySelector('select');
                    const operatorSelect = conditionDiv.querySelectorAll('select')[1];

                    fieldSelect.value = condition.condition;
                    operatorSelect.value = condition.operator;

                    renderValueInput(prefix, ruleIndex, conditionIndex);
                });
            });

            updateConfigJson(prefix);
        }

        // 创建规则组DOM（不修改配置数组）
        function createRuleGroupDOM(prefix, ruleIndex) {
            const configBuilder = document.getElementById(prefix + 'EligibleCardsConfigBuilder');

            const ruleGroupDiv = document.createElement('div');
            ruleGroupDiv.className = 'rule-group';
            ruleGroupDiv.id = `${prefix}-rule-group-${ruleIndex}`;

            ruleGroupDiv.innerHTML = `
                <div class="rule-group-header">
                    <h6 class="rule-group-label">规则组 ${ruleIndex + 1} (OR)</h6>
                    <button type="button" class="btn btn-sm btn-outline-danger btn-remove" onclick="removeRuleGroup('${prefix}', ${ruleIndex})">
                        <i class="fas fa-trash"></i> 删除规则组
                    </button>
                </div>
                <div id="${prefix}-conditions-${ruleIndex}">
                    <!-- 条件会在这里动态添加 -->
                </div>
                <button type="button" class="btn btn-sm btn-success" onclick="addCondition('${prefix}', ${ruleIndex})">
                    <i class="fas fa-plus"></i> 添加条件 (AND)
                </button>
            `;

            configBuilder.appendChild(ruleGroupDiv);
        }

        // 创建条件DOM（不修改配置数组）
        function createConditionDOM(prefix, ruleIndex, conditionIndex) {
            const conditionsContainer = document.getElementById(`${prefix}-conditions-${ruleIndex}`);
            const conditionDiv = document.createElement('div');
            conditionDiv.className = 'condition-item';
            conditionDiv.id = `${prefix}-condition-${ruleIndex}-${conditionIndex}`;

            conditionDiv.innerHTML = `
                <div class="condition-header">
                    <h6 class="condition-label">条件 ${conditionIndex + 1} (AND)</h6>
                    <button type="button" class="btn btn-sm btn-outline-danger btn-remove" onclick="removeCondition('\\${prefix}', \\${ruleIndex}, \\${conditionIndex})">
                        <i class="fas fa-times"></i> 删除
                    </button>
                </div>
                <div class="row">
                    <div class="col-md-4">
                        <label class="form-label">字段</label>
                        <select class="form-select form-select-sm" onchange="updateConditionField('\\${prefix}', \\${ruleIndex}, \\${conditionIndex}, this.value)">
                            ${Object.keys(configFields).map(key => `<option value="${key}">${configFields[key].label}</option>`).join('')}
                        </select>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label">操作符</label>
                        <select class="form-select form-select-sm" onchange="updateConditionOperator('\\${prefix}', \\${ruleIndex}, \\${conditionIndex}, this.value)">
                            ${operators.map(op => `<option value="${op.value}">${op.label}</option>`).join('')}
                        </select>
                    </div>
                    <div class="col-md-5">
                        <label class="form-label">值</label>
                        <div id="${prefix}-value-container-${ruleIndex}-${conditionIndex}">
                            <!-- 值输入控件会在这里动态生成 -->
                        </div>
                    </div>
                </div>
            `;

            conditionsContainer.appendChild(conditionDiv);
        }

        // 更新JSON配置
        function updateConfigJson(prefix) {
            const textarea = document.getElementById(prefix + 'EligibleCardsConfig');
            textarea.value = JSON.stringify(eligibleCardsConfigs[prefix], null, 2);
        }

        // 切换JSON编辑模式
        function toggleConfigJson(prefix) {
            const textarea = document.getElementById(prefix + 'EligibleCardsConfig');
            const builder = document.getElementById(prefix + 'EligibleCardsConfigBuilder');

            if (textarea.style.display === 'none') {
                // 显示JSON编辑器
                textarea.style.display = 'block';
                builder.style.display = 'none';

                // 尝试解析JSON并同步到配置
                try {
                    const config = JSON.parse(textarea.value || '[]');
                    eligibleCardsConfigs[prefix] = config;
                } catch (e) {
                    console.warn('Invalid JSON in textarea');
                }
            } else {
                // 显示可视化构建器
                textarea.style.display = 'none';
                builder.style.display = 'block';

                // 尝试解析JSON并重建构建器
                try {
                    const config = JSON.parse(textarea.value || '[]');
                    eligibleCardsConfigs[prefix] = config;
                    rebuildConfigBuilder(prefix);
                } catch (e) {
                    showAlert('JSON格式错误，无法解析', 'danger');
                }
            }
        }

        // 从现有配置初始化构建器
        function initializeConfigBuilder(prefix, config) {
            try {
                let parsedConfig;
                if (typeof config === 'string') {
                    parsedConfig = JSON.parse(config || '[]');
                } else if (Array.isArray(config)) {
                    parsedConfig = config;
                } else {
                    parsedConfig = [];
                }

                // 确保配置格式正确
                if (!Array.isArray(parsedConfig)) {
                    parsedConfig = [];
                }

                // 过滤掉空的规则组
                parsedConfig = parsedConfig.filter(ruleGroup => Array.isArray(ruleGroup) && ruleGroup.length > 0);

                eligibleCardsConfigs[prefix] = parsedConfig;
                rebuildConfigBuilder(prefix);
            } catch (e) {
                console.warn('Failed to parse existing config:', e);
                eligibleCardsConfigs[prefix] = [];
                rebuildConfigBuilder(prefix);
            }
        }

        // ===== 白名单管理相关功能 =====

        // 添加手机号到白名单
        function addPhoneToWhitelist(prefix, phone) {
            if (!phone || !phone.trim()) return;

            phone = phone.trim();

            // 验证手机号格式
            if (!/^1[3-9]\d{9}$/.test(phone)) {
                showAlert('请输入正确的11位手机号', 'warning');
                return;
            }

            // 检查是否已存在
            const hashedMobile = CryptoJS.SHA256(phone).toString();
            const existingEntry = whitelists[prefix].entries.find(entry => entry.hashed_mobile === hashedMobile);
            if (existingEntry) {
                showAlert('该手机号已存在于白名单中', 'warning');
                return;
            }

            // 如果是编辑模式，通过API添加手机号（获取用户信息）
            if (prefix === 'edit') {
                const campaignId = document.getElementById('editId').value;
                if (campaignId) {
                    // 通过API添加，这样能获取到用户信息
                    adminFetch('/admin/global-whitelist/content/add-phone', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                        },
                        body: JSON.stringify({
                            phone: phone,
                            content_type: 'campaign',
                            content_id: parseInt(campaignId)
                        })
                    })
                    .then(response => response.json())
                    .then(data => {
                        if (data.success) {
                            // 更新本地白名单数据
                            whitelists[prefix] = {
                                entries: data.whitelist.entries || [],
                                global: data.whitelist.global || false
                            };
                            renderWhitelistTags(prefix);
                            updateWhitelistConfig(prefix);
                            showAlert('添加成功', 'success');
                        } else {
                            showAlert('添加失败: ' + (data.message || '未知错误'), 'danger');
                        }
                    })
                    .catch(error => {
                        console.error('Error adding phone to whitelist:', error);
                        showAlert('添加失败', 'danger');
                    });
                    return;
                }
            }

            // 如果是创建模式，直接在前端创建（用户信息为null）
            const phoneDisplay = phone.substring(0, 3) + '****' + phone.substring(phone.length - 4);
            const newEntry = {
                hashed_mobile: hashedMobile,
                phone_display: phoneDisplay,
                uid: null,
                nickname: null
            };

            whitelists[prefix].entries.push(newEntry);
            renderWhitelistTags(prefix);
            updateWhitelistConfig(prefix);
        }

        // 从白名单删除条目
        function removeFromWhitelist(prefix, index) {
            if (index >= 0 && index < whitelists[prefix].entries.length) {
                whitelists[prefix].entries.splice(index, 1);
                renderWhitelistTags(prefix);
                updateWhitelistConfig(prefix);
            }
        }

        // 渲染白名单条目标签
        function renderWhitelistTags(prefix) {
            const container = document.getElementById(prefix + 'WhitelistTags');
            if (!container) return;

            const entries = whitelists[prefix].entries || [];
            const globalEnabled = whitelists[prefix].global || false;

            if (entries.length === 0 && !globalEnabled) {
                container.innerHTML = '<small class="text-muted">暂无白名单设置</small>';
                return;
            }

            let html = '';

            // 显示全局白名单状态
            if (globalEnabled) {
                html += `<span class="value-tag bg-success">
                    <i class="fas fa-globe"></i> 全局白名单已启用
                </span>`;
            }

            // 显示具体条目
            entries.forEach((entry, index) => {
                const userInfo = entry.uid ? `${entry.nickname || '用户'} (${entry.uid})` : '待注册';
                const tagClass = entry.uid ? 'value-tag bg-info' : 'value-tag bg-secondary';

                html += `<span class="${tagClass}">
                    ${escapeHtml(entry.phone_display)} - ${escapeHtml(userInfo)}
                    <span class="remove-tag" onclick="removeFromWhitelist('${prefix}', ${index})">×</span>
                </span>`;
            });

            container.innerHTML = html;
        }

        // 更新白名单配置
        function updateWhitelistConfig(prefix) {
            const textarea = document.getElementById(prefix + 'Whitelist');
            const checkbox = document.getElementById(prefix + 'GlobalWhitelist');

            if (!textarea) return;

            // 从复选框获取全局白名单状态
            if (checkbox) {
                whitelists[prefix].global = checkbox.checked;
            }

            const whitelistConfig = {
                entries: whitelists[prefix].entries || [],
                global: whitelists[prefix].global || false
            };

            textarea.value = JSON.stringify(whitelistConfig, null, 2);
        }

        // 切换白名单JSON编辑模式
        function toggleWhitelistJson(prefix) {
            const textarea = document.getElementById(prefix + 'Whitelist');
            const tagsContainer = document.getElementById(prefix + 'WhitelistTags').parentElement.parentElement;

            if (textarea.style.display === 'none') {
                // 显示JSON编辑器
                textarea.style.display = 'block';
                tagsContainer.style.display = 'none';

                // 尝试解析JSON并同步到白名单数组
                try {
                    const config = JSON.parse(textarea.value || '{}');
                    if (!whitelists[prefix]) {
                        whitelists[prefix] = { entries: [], global: false };
                    }
                    whitelists[prefix].entries = config.entries || [];

                    // 同步全局白名单状态
                    const globalCheckbox = document.getElementById(prefix + 'GlobalWhitelist');
                    if (globalCheckbox) {
                        globalCheckbox.checked = config.global || false;
                    }
                } catch (e) {
                    console.warn('Invalid JSON in whitelist textarea');
                }
            } else {
                // 显示可视化编辑器
                textarea.style.display = 'none';
                tagsContainer.style.display = 'block';

                // 尝试解析JSON并重建标签
                try {
                    const config = JSON.parse(textarea.value || '{}');
                    if (!whitelists[prefix]) {
                        whitelists[prefix] = { entries: [], global: false };
                    }
                    whitelists[prefix].entries = config.entries || [];

                    // 同步全局白名单状态
                    const globalCheckbox = document.getElementById(prefix + 'GlobalWhitelist');
                    if (globalCheckbox) {
                        globalCheckbox.checked = config.global || false;
                    }

                    renderWhitelistTags(prefix);
                } catch (e) {
                    showAlert('JSON格式错误，无法解析', 'danger');
                }
            }
        }

        // 从现有白名单初始化
        function initializeWhitelist(prefix, whitelist) {
            try {
                let parsedWhitelist;
                if (typeof whitelist === 'string') {
                    parsedWhitelist = JSON.parse(whitelist || '{}');
                } else if (typeof whitelist === 'object' && whitelist !== null) {
                    parsedWhitelist = whitelist;
                } else {
                    parsedWhitelist = {};
                }

                // 初始化手机号白名单数组
                whitelists[prefix] = {
                    entries: parsedWhitelist.entries || [],
                    global: parsedWhitelist.global || false
                };

                // 设置全局白名单状态
                const globalCheckbox = document.getElementById(prefix + 'GlobalWhitelist');
                if (globalCheckbox) {
                    globalCheckbox.checked = whitelists[prefix].global;
                }

                renderWhitelistTags(prefix);
                updateWhitelistConfig(prefix);
            } catch (e) {
                console.warn('Failed to parse existing whitelist:', e);
                whitelists[prefix] = { entries: [], global: false };

                // 重置全局白名单状态
                const globalCheckbox = document.getElementById(prefix + 'GlobalWhitelist');
                if (globalCheckbox) {
                    globalCheckbox.checked = false;
                }

                renderWhitelistTags(prefix);
                updateWhitelistConfig(prefix);
            }
        }

        // ===== 用户搜索功能 =====
        let searchTimeouts = {}; // 防抖计时器

        // 搜索用户用于白名单选择
        function searchUsersForWhitelist(prefix, searchTerm) {
            // 清除之前的防抖计时器
            if (searchTimeouts[prefix]) {
                clearTimeout(searchTimeouts[prefix]);
            }

            const resultsContainer = document.getElementById(prefix + 'UserSearchResults');
            
            if (!searchTerm || searchTerm.trim().length < 2) {
                resultsContainer.style.display = 'none';
                return;
            }

            // 防抖：延迟执行搜索
            searchTimeouts[prefix] = setTimeout(() => {
                doUserSearch(prefix, searchTerm.trim());
            }, 300);
        }

        // 执行用户搜索
        function doUserSearch(prefix, searchTerm) {
            const resultsContainer = document.getElementById(prefix + 'UserSearchResults');
            
            // 显示加载状态
            resultsContainer.style.display = 'block';
            resultsContainer.innerHTML = '<div class="text-center py-2"><i class="fas fa-spinner fa-spin"></i> 搜索中...</div>';

            adminFetch(`/api/admin/users/search-for-whitelist?search=${encodeURIComponent(searchTerm)}&limit=10`)
                .then(response => {
                    if (!response.ok) {
                        throw new Error(`HTTP ${response.status}: ${response.statusText}`);
                    }
                    return response.json();
                })
                .then(data => {
                    if (data.success) {
                        renderUserSearchResults(prefix, data.data, searchTerm);
                    } else {
                        resultsContainer.innerHTML = `<div class="alert alert-warning py-2 mb-0 small">${data.message || '搜索失败'}</div>`;
                    }
                })
                .catch(error => {
                    console.error('User search error:', error);
                    let errorMessage = '搜索失败，请稍后重试';
                    if (error.message.includes('401')) {
                        errorMessage = '认证失败，请重新登录';
                    } else if (error.message.includes('403')) {
                        errorMessage = '权限不足';
                    }
                    resultsContainer.innerHTML = `<div class="alert alert-danger py-2 mb-0 small">${errorMessage}</div>`;
                });
        }

        // 渲染用户搜索结果
        function renderUserSearchResults(prefix, users, searchTerm) {
            const resultsContainer = document.getElementById(prefix + 'UserSearchResults');
            
            if (!users || users.length === 0) {
                resultsContainer.innerHTML = '<div class="alert alert-info py-2 mb-0 small">没有找到匹配的用户</div>';
                return;
            }

            let html = '<div class="list-group list-group-flush border rounded">';
            
            users.forEach(user => {
                // 检查用户是否已在白名单中
                const isInWhitelist = whitelists[prefix].includes(user.uid);
                const buttonClass = isInWhitelist ? 'btn-success disabled' : 'btn-outline-primary';
                const buttonText = isInWhitelist ? '已添加' : '添加';
                const buttonDisabled = isInWhitelist ? 'disabled' : '';
                
                html += `
                    <div class="list-group-item d-flex justify-content-between align-items-center py-2">
                        <div class="flex-grow-1">
                            <div class="fw-bold small">${escapeHtml(user.name || '未设置姓名')}</div>
                            <div class="text-muted small">
                                UID: ${escapeHtml(user.uid)}
                                ${user.email ? `<br>邮箱: ${escapeHtml(user.email)}` : ''}
                                ${user.mobile_last_4 ? `<br>手机尾号: ****${escapeHtml(user.mobile_last_4)}` : ''}
                            </div>
                        </div>
                        <button type="button" 
                                class="btn btn-sm ${buttonClass}" 
                                ${buttonDisabled}
                                onclick="addUserToWhitelistFromSearch('${prefix}', '${user.uid}', '${escapeHtml(user.name || '')}')">
                            ${buttonText}
                        </button>
                    </div>
                `;
            });
            
            html += '</div>';
            html += `<div class="text-muted small mt-2">找到 ${users.length} 个用户</div>`;
            
            resultsContainer.innerHTML = html;
        }

        // 从搜索结果添加用户到白名单
        function addUserToWhitelistFromSearch(prefix, uid, userName) {
            // 检查是否已存在
            if (whitelists[prefix].includes(uid)) {
                showAlert('用户已在白名单中', 'warning');
                return;
            }

            // 添加到白名单
            addToWhitelist(prefix, uid);
            
            // 更新搜索结果中的按钮状态
            const button = event.target;
            button.classList.remove('btn-outline-primary');
            button.classList.add('btn-success', 'disabled');
            button.textContent = '已添加';
            button.disabled = true;
            
            // 清空搜索框
            const searchInput = document.getElementById(prefix + 'UserSearchInput');
            if (searchInput) {
                searchInput.value = '';
            }
            
            // 隐藏搜索结果
            const resultsContainer = document.getElementById(prefix + 'UserSearchResults');
            if (resultsContainer) {
                resultsContainer.style.display = 'none';
            }
            
            showAlert(`用户 ${userName || uid} 已添加到白名单`, 'success');
        }

        // HTML转义函数
        function escapeHtml(text) {
            const div = document.createElement('div');
            div.textContent = text;
            return div.innerHTML;
        }

        // ==================== 扩展参数管理功能 ====================
        
        // 全局变量存储扩展参数
        let extendedParams = {
            edit: {},
            create: {}
        };

        // 添加扩展参数
        function addExtendedParam(prefix, key = '', value = '') {
            const container = document.getElementById(prefix + 'ExtendedParamsContainer');
            const paramId = 'param_' + Date.now() + '_' + Math.random().toString(36).substr(2, 9);
            
            const paramHtml = `
                <div class="row mb-2 extended-param-item" data-param-id="${paramId}">
                    <div class="col-md-4">
                        <input type="text" class="form-control extended-param-key" placeholder="参数键 (Key)" 
                               value="${escapeHtml(key)}" onchange="updateExtendedParam('${prefix}')">
                    </div>
                    <div class="col-md-6">
                        <textarea class="form-control extended-param-value" placeholder="参数值 (Value)" rows="3"
                                  onchange="updateExtendedParam('${prefix}')">${escapeHtml(value)}</textarea>
                    </div>
                    <div class="col-md-2">
                        <button type="button" class="btn btn-sm btn-outline-danger" 
                                onclick="removeExtendedParam('${prefix}', '${paramId}')">
                            <i class="fas fa-trash"></i>
                        </button>
                    </div>
                </div>
            `;
            
            container.insertAdjacentHTML('beforeend', paramHtml);
            updateExtendedParam(prefix);
        }

        // 删除扩展参数
        function removeExtendedParam(prefix, paramId) {
            const paramElement = document.querySelector(`[data-param-id="${paramId}"]`);
            if (paramElement) {
                paramElement.remove();
                updateExtendedParam(prefix);
                showAlert('参数已删除', 'success');
            }
        }

        // 更新扩展参数数据
        function updateExtendedParam(prefix) {
            const container = document.getElementById(prefix + 'ExtendedParamsContainer');
            const paramItems = container.querySelectorAll('.extended-param-item');
            const params = {};
            
            paramItems.forEach(item => {
                const keyInput = item.querySelector('.extended-param-key');
                const valueInput = item.querySelector('.extended-param-value');
                const key = keyInput.value.trim();
                const value = valueInput.value.trim();
                
                if (key && value) {
                    params[key] = value;
                }
            });
            
            extendedParams[prefix] = params;
        }

        // 渲染扩展参数列表
        function renderExtendedParams(prefix, params) {
            const container = document.getElementById(prefix + 'ExtendedParamsContainer');
            container.innerHTML = '';
            
            if (params && typeof params === 'object') {
                Object.entries(params).forEach(([key, value]) => {
                    addExtendedParam(prefix, key, value);
                });
            }
        }

        // 获取扩展参数数据
        function getExtendedParams(prefix) {
            updateExtendedParam(prefix);
            return extendedParams[prefix];
        }

        // ==================== Vue 可搜索奖励内容选择器 ====================

        // 全局存储 Vue 实例
        window.vueRewardSelectors = {};

        // 奖励内容数据缓存
        window.rewardContentsData = [];

        // 加载奖励内容数据
        function loadRewardContentsData() {
            return fetch('/api/admin/reward-contents', {
                credentials: 'include',
                headers: {
                    'Accept': 'application/json',
                    'X-Requested-With': 'XMLHttpRequest'
                }
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    window.rewardContentsData = data.data || [];
                    console.log('[Vue] Reward contents loaded:', window.rewardContentsData.length);
                }
                return window.rewardContentsData;
            })
            .catch(error => {
                console.error('[Vue] Failed to load reward contents:', error);
                return [];
            });
        }

        // 初始化 Vue 奖励内容选择器
        function initVueRewardSelectors() {
            // 检查 Vue 是否可用
            if (typeof Vue === 'undefined') {
                console.error('[Vue] Vue.js not loaded');
                return;
            }

            // 加载数据后初始化组件
            loadRewardContentsData().then(() => {
                ['edit', 'create'].forEach(prefix => {
                    const mountEl = document.getElementById('vue-reward-selector-' + prefix);
                    console.log('[Vue] Looking for mount element:', 'vue-reward-selector-' + prefix, 'Found:', !!mountEl);
                    if (!mountEl) {
                        console.error('[Vue] Mount element not found for:', prefix);
                        return;
                    }

                    try {
                    const currentPrefix = prefix; // 保存当前循环的 prefix 值
                    const app = Vue.createApp({
                        data() {
                            return {
                                componentPrefix: currentPrefix,
                                searchQuery: '',
                                isOpen: false,
                                isLoading: false,
                                allContents: window.rewardContentsData || []
                            };
                        },
                        computed: {
                            filteredContents() {
                                const query = this.searchQuery.toLowerCase().trim();
                                const selectedIds = (selectedRewardContents && selectedRewardContents[this.componentPrefix])
                                    ? selectedRewardContents[this.componentPrefix].map(item => item.id)
                                    : [];

                                return this.allContents.filter(content => {
                                    // 排除已选择的
                                    if (selectedIds.includes(content.id)) return false;

                                    // 如果没有搜索词，返回所有
                                    if (!query) return true;

                                    // 搜索名称、代码、合作伙伴
                                    const name = (content.name || '').toLowerCase();
                                    const code = (content.code || '').toLowerCase();
                                    const partner = (content.partner && content.partner.name) ? content.partner.name.toLowerCase() : '';

                                    return name.includes(query) || code.includes(query) || partner.includes(query);
                                });
                            }
                        },
                        methods: {
                            selectItem(content) {
                                addRewardContentFromSelect(this.componentPrefix, content);
                                this.searchQuery = '';
                                this.isOpen = false;
                            },
                            onFocus() {
                                this.isOpen = true;
                            },
                            onBlur() {
                                // 延迟关闭，以便点击事件能够触发
                                setTimeout(() => {
                                    this.isOpen = false;
                                }, 200);
                            },
                            refreshOptions() {
                                // 强制更新视图
                                this.$forceUpdate();
                            },
                            getDisplayText(content) {
                                let text = content.name + ' (' + content.code + ')';
                                if (content.partner && content.partner.name) {
                                    text += ' - ' + content.partner.name;
                                }
                                return text;
                            }
                        },
                        template: `
                            <div class="vue-searchable-select">
                                <input
                                    type="text"
                                    class="search-input form-control"
                                    v-model="searchQuery"
                                    v-on:focus="onFocus"
                                    v-on:blur="onBlur"
                                    placeholder="搜索奖励内容名称、代码或合作伙伴..."
                                >
                                <div v-if="isOpen" class="dropdown-list">
                                    <div v-if="isLoading" class="loading">
                                        <i class="fas fa-spinner fa-spin"></i> 加载中...
                                    </div>
                                    <div v-else-if="filteredContents.length === 0" class="no-results">
                                        没有找到匹配的奖励内容
                                    </div>
                                    <div
                                        v-else
                                        v-for="content in filteredContents.slice(0, 50)"
                                        :key="content.id"
                                        class="dropdown-item"
                                        v-on:mousedown.prevent="selectItem(content)"
                                    >
                                        <div class="item-name">@{{ content.name }}</div>
                                        <div class="item-details">
                                            <span class="badge bg-secondary me-1">@{{ content.code }}</span>
                                            <span v-if="content.partner" class="text-muted">@{{ content.partner.name }}</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        `
                    });

                    const vm = app.mount(mountEl);
                    window.vueRewardSelectors[prefix] = vm;
                    console.log('[Vue] Reward selector initialized for:', prefix);
                    } catch (e) {
                        console.error('[Vue] Error initializing reward selector for:', prefix, e);
                    }
                });
            });
        }

        // 页面加载后初始化 Vue 组件
        document.addEventListener('DOMContentLoaded', function() {
            // 延迟初始化以确保所有脚本都已加载
            setTimeout(initVueRewardSelectors, 100);
        });

        // ========== 邮件模板配置相关函数 ==========

        // 存储已选邮件模板数据
        let selectedEmailTemplates = {
            edit: [],
            create: []
        };

        // 存储所有可用的邮件模板
        let availableEmailTemplates = [];

        // 加载邮件模板选项
        async function loadEmailTemplateOptions() {
            try {
                const response = await adminFetch('/api/admin/email-templates/active');
                const data = await response.json();
                if (data.success) {
                    availableEmailTemplates = data.data;
                    updateEmailTemplateSelectOptions('edit');
                    updateEmailTemplateSelectOptions('create');
                }
            } catch (error) {
                console.error('Error loading email templates:', error);
            }
        }

        // 更新邮件模板下拉选项
        function updateEmailTemplateSelectOptions(prefix) {
            const select = document.getElementById(prefix + 'EmailTemplateSelect');
            if (!select) return;

            // 获取已选择的模板ID
            const selectedIds = selectedEmailTemplates[prefix].map(item => item.id);

            // 清空并重新填充选项
            select.innerHTML = '<option value="">选择邮件模板...</option>';
            availableEmailTemplates.forEach(template => {
                if (!selectedIds.includes(template.id)) {
                    const option = document.createElement('option');
                    option.value = template.id;
                    option.textContent = `${template.template_code} - ${template.subject}`;
                    option.dataset.templateCode = template.template_code;
                    option.dataset.subject = template.subject;
                    select.appendChild(option);
                }
            });
        }

        // 添加邮件模板
        function addEmailTemplate(prefix) {
            const select = document.getElementById(prefix + 'EmailTemplateSelect');
            const templateId = parseInt(select.value);

            if (!templateId) {
                showAlert('请选择一个邮件模板', 'warning');
                return;
            }

            const selectedOption = select.options[select.selectedIndex];
            const template = {
                id: templateId,
                template_code: selectedOption.dataset.templateCode,
                subject: selectedOption.dataset.subject,
                reward_code: '',
                sort_order: selectedEmailTemplates[prefix].length,
                is_active: true,
                generate_qrcode: false
            };

            selectedEmailTemplates[prefix].push(template);
            renderSelectedEmailTemplates(prefix);
            updateEmailTemplateIds(prefix);
            updateEmailTemplateSelectOptions(prefix);

            // 重置下拉框
            select.value = '';
        }

        // 移除邮件模板
        function removeEmailTemplate(prefix, index) {
            selectedEmailTemplates[prefix].splice(index, 1);
            // 重新计算排序
            selectedEmailTemplates[prefix].forEach((item, idx) => {
                item.sort_order = idx;
            });
            renderSelectedEmailTemplates(prefix);
            updateEmailTemplateIds(prefix);
            updateEmailTemplateSelectOptions(prefix);
        }

        // 渲染已选邮件模板列表
        function renderSelectedEmailTemplates(prefix) {
            const container = document.getElementById(prefix + 'SelectedEmailTemplates');
            const hint = document.getElementById(prefix + 'NoEmailTemplatesHint');

            if (selectedEmailTemplates[prefix].length === 0) {
                container.innerHTML = `
                    <div class="text-muted text-center py-3" id="${prefix}NoEmailTemplatesHint">
                        <i class="fas fa-envelope-open-text"></i> 暂无配置的邮件模板
                    </div>
                `;
                return;
            }

            let html = '';
            selectedEmailTemplates[prefix].forEach((item, index) => {
                html += `
                    <div class="list-group-item email-template-item" data-index="${index}" style="cursor: move;">
                        <div class="d-flex justify-content-between align-items-start">
                            <div class="flex-grow-1">
                                <div class="d-flex align-items-center mb-2">
                                    <i class="fas fa-grip-vertical text-muted me-2" style="cursor: grab;"></i>
                                    <strong>${item.template_code}</strong>
                                    <span class="badge bg-info ms-2">${item.subject}</span>
                                </div>
                                <div class="row g-2 align-items-center">
                                    <div class="col-md-4">
                                        <div class="input-group input-group-sm">
                                            <span class="input-group-text">奖励代码</span>
                                            <input type="text" class="form-control" value="${item.reward_code || ''}"
                                                   placeholder="匹配 notification 中的 code"
                                                   onchange="updateEmailTemplateRewardCode('${prefix}', ${index}, this.value)">
                                        </div>
                                    </div>
                                    <div class="col-auto">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" id="${prefix}EmailTemplateActive${index}"
                                                   ${item.is_active ? 'checked' : ''}
                                                   onchange="updateEmailTemplateActive('${prefix}', ${index}, this.checked)">
                                            <label class="form-check-label" for="${prefix}EmailTemplateActive${index}">启用</label>
                                        </div>
                                    </div>
                                    <div class="col-auto">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" id="${prefix}EmailTemplateQrcode${index}"
                                                   ${item.generate_qrcode ? 'checked' : ''}
                                                   onchange="updateEmailTemplateQrcode('${prefix}', ${index}, this.checked)">
                                            <label class="form-check-label" for="${prefix}EmailTemplateQrcode${index}">生成二维码</label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <button type="button" class="btn btn-sm btn-outline-danger ms-2" onclick="removeEmailTemplate('${prefix}', ${index})">
                                <i class="fas fa-times"></i>
                            </button>
                        </div>
                    </div>
                `;
            });

            container.innerHTML = html;

            // 初始化拖拽排序
            initEmailTemplateSortable(prefix);
        }

        // 更新邮件模板的奖励代码
        function updateEmailTemplateRewardCode(prefix, index, value) {
            selectedEmailTemplates[prefix][index].reward_code = value;
            updateEmailTemplateIds(prefix);
        }

        // 更新邮件模板的启用状态
        function updateEmailTemplateActive(prefix, index, value) {
            selectedEmailTemplates[prefix][index].is_active = value;
            updateEmailTemplateIds(prefix);
        }

        // 更新邮件模板的二维码生成配置
        function updateEmailTemplateQrcode(prefix, index, value) {
            selectedEmailTemplates[prefix][index].generate_qrcode = value;
            updateEmailTemplateIds(prefix);
        }

        // 更新隐藏的邮件模板ID字段
        function updateEmailTemplateIds(prefix) {
            const input = document.getElementById(prefix + 'EmailTemplateIds');
            if (input) {
                const data = selectedEmailTemplates[prefix].map((item, index) => ({
                    id: item.id,
                    reward_code: item.reward_code || '',
                    sort_order: index,
                    is_active: item.is_active,
                    generate_qrcode: item.generate_qrcode
                }));
                input.value = JSON.stringify(data);
            }
        }

        // 初始化邮件模板拖拽排序
        function initEmailTemplateSortable(prefix) {
            const container = document.getElementById(prefix + 'SelectedEmailTemplates');
            if (!container || typeof Sortable === 'undefined') return;

            // 销毁旧的 Sortable 实例（如果存在）
            if (container.sortableInstance) {
                container.sortableInstance.destroy();
            }

            container.sortableInstance = new Sortable(container, {
                animation: 150,
                handle: '.fa-grip-vertical',
                ghostClass: 'sortable-ghost',
                onEnd: function(evt) {
                    // 更新数据顺序
                    const items = selectedEmailTemplates[prefix];
                    const movedItem = items.splice(evt.oldIndex, 1)[0];
                    items.splice(evt.newIndex, 0, movedItem);

                    // 重新计算排序
                    items.forEach((item, idx) => {
                        item.sort_order = idx;
                    });

                    updateEmailTemplateIds(prefix);
                }
            });
        }

        // 在编辑模态框打开时加载邮件模板数据
        function loadEmailTemplatesForEdit(campaignEmailTemplates) {
            selectedEmailTemplates.edit = [];

            if (campaignEmailTemplates && campaignEmailTemplates.length > 0) {
                selectedEmailTemplates.edit = campaignEmailTemplates.map((item, index) => ({
                    id: item.id,
                    template_code: item.template_code,
                    subject: item.subject,
                    reward_code: item.reward_code || '',
                    sort_order: item.sort_order || index,
                    is_active: item.is_active !== undefined ? item.is_active : true,
                    generate_qrcode: item.generate_qrcode || false
                }));
            }

            renderSelectedEmailTemplates('edit');
            updateEmailTemplateIds('edit');
            updateEmailTemplateSelectOptions('edit');
        }

        // 重置邮件模板选择（用于创建模态框）
        function resetEmailTemplates(prefix) {
            selectedEmailTemplates[prefix] = [];
            renderSelectedEmailTemplates(prefix);
            updateEmailTemplateIds(prefix);
            updateEmailTemplateSelectOptions(prefix);
        }

        // 页面加载时加载邮件模板选项
        document.addEventListener('DOMContentLoaded', function() {
            loadEmailTemplateOptions();
        });

        // ==================== 报名详情弹窗相关 ====================

        // 报名详情相关全局变量
        let enrollmentCurrentCampaignId = null;
        let enrollmentCurrentPage = 1;
        let enrollmentSearchQuery = '';
        let enrollmentTrendChart = null;

        // 打开报名详情弹窗
        function showEnrollmentDetails(campaignId, campaignName) {
            enrollmentCurrentCampaignId = campaignId;
            enrollmentCurrentPage = 1;
            enrollmentSearchQuery = '';

            document.getElementById('enrollmentCampaignName').textContent = campaignName;
            document.getElementById('enrollmentSearchInput').value = '';

            const modal = new bootstrap.Modal(document.getElementById('enrollmentDetailsModal'));
            modal.show();

            // 加载数据
            loadEnrollmentTrend();
            loadEnrollmentList(1);
        }

        // 加载报名趋势数据
        function loadEnrollmentTrend() {
            fetch(`/api/admin/campaigns/${enrollmentCurrentCampaignId}/enrollment-trend`)
                .then(response => response.json())
                .then(result => {
                    if (result.success) {
                        renderEnrollmentTrendChart(result.data);
                    }
                })
                .catch(error => {
                    console.error('加载报名趋势失败:', error);
                });
        }

        // 渲染报名趋势双轴图表
        function renderEnrollmentTrendChart(data) {
            const ctx = document.getElementById('enrollmentTrendChart').getContext('2d');

            // 销毁旧图表
            if (enrollmentTrendChart) {
                enrollmentTrendChart.destroy();
            }

            if (!data.dates || data.dates.length === 0) {
                // 无数据时显示空状态
                ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
                ctx.font = '14px sans-serif';
                ctx.fillStyle = '#6c757d';
                ctx.textAlign = 'center';
                ctx.fillText('暂无报名数据', ctx.canvas.width / 2, ctx.canvas.height / 2);
                return;
            }

            // 格式化日期标签 (MM/DD)
            const labels = data.dates.map(d => {
                const date = new Date(d);
                return `${(date.getMonth()+1).toString().padStart(2,'0')}/${date.getDate().toString().padStart(2,'0')}`;
            });

            enrollmentTrendChart = new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: labels,
                    datasets: [
                        {
                            label: '每日新增',
                            data: data.daily_counts,
                            backgroundColor: 'rgba(59, 130, 246, 0.7)',
                            borderColor: 'rgba(59, 130, 246, 1)',
                            borderWidth: 1,
                            yAxisID: 'y',
                            order: 2
                        },
                        {
                            label: '累计报名',
                            data: data.cumulative_counts,
                            type: 'line',
                            borderColor: 'rgba(16, 185, 129, 1)',
                            backgroundColor: 'rgba(16, 185, 129, 0.1)',
                            borderWidth: 2,
                            pointRadius: 3,
                            pointBackgroundColor: 'rgba(16, 185, 129, 1)',
                            fill: true,
                            yAxisID: 'y1',
                            order: 1
                        }
                    ]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    interaction: {
                        mode: 'index',
                        intersect: false
                    },
                    plugins: {
                        legend: {
                            position: 'top',
                        },
                        tooltip: {
                            callbacks: {
                                title: function(context) {
                                    return data.dates[context[0].dataIndex];
                                }
                            }
                        }
                    },
                    scales: {
                        x: {
                            grid: {
                                display: false
                            }
                        },
                        y: {
                            type: 'linear',
                            display: true,
                            position: 'left',
                            title: {
                                display: true,
                                text: '每日新增'
                            },
                            beginAtZero: true,
                            ticks: {
                                stepSize: 1,
                                precision: 0
                            }
                        },
                        y1: {
                            type: 'linear',
                            display: true,
                            position: 'right',
                            title: {
                                display: true,
                                text: '累计报名'
                            },
                            beginAtZero: true,
                            ticks: {
                                stepSize: 1,
                                precision: 0
                            },
                            grid: {
                                drawOnChartArea: false
                            }
                        }
                    }
                }
            });
        }

        // 加载报名列表
        function loadEnrollmentList(page) {
            enrollmentCurrentPage = page;
            const tbody = document.getElementById('enrollmentTableBody');
            tbody.innerHTML = `
                <tr>
                    <td colspan="6" class="text-center py-4">
                        <i class="fas fa-spinner fa-spin me-2"></i>加载中...
                    </td>
                </tr>
            `;

            const params = new URLSearchParams({
                page: page,
                per_page: 10,
                search: enrollmentSearchQuery
            });

            fetch(`/api/admin/campaigns/${enrollmentCurrentCampaignId}/enrollment-details?${params}`)
                .then(response => response.json())
                .then(result => {
                    if (result.success) {
                        renderEnrollmentTable(result.data.items);
                        renderEnrollmentPagination(result.data.pagination);
                        document.getElementById('enrollmentTotalCount').textContent = result.data.pagination.total;
                    } else {
                        tbody.innerHTML = `
                            <tr>
                                <td colspan="6" class="text-center py-4 text-danger">
                                    <i class="fas fa-exclamation-circle me-2"></i>加载失败
                                </td>
                            </tr>
                        `;
                    }
                })
                .catch(error => {
                    console.error('加载报名列表失败:', error);
                    tbody.innerHTML = `
                        <tr>
                            <td colspan="6" class="text-center py-4 text-danger">
                                <i class="fas fa-exclamation-circle me-2"></i>加载失败
                            </td>
                        </tr>
                    `;
                });
        }

        // 渲染报名表格
        function renderEnrollmentTable(items) {
            const tbody = document.getElementById('enrollmentTableBody');

            if (!items || items.length === 0) {
                tbody.innerHTML = `
                    <tr>
                        <td colspan="6" class="text-center py-4 text-muted">
                            <i class="fas fa-inbox me-2"></i>暂无报名记录
                        </td>
                    </tr>
                `;
                return;
            }

            tbody.innerHTML = items.map(item => {
                const enrolledAt = item.enrolled_at ? new Date(item.enrolled_at).toLocaleString('zh-CN') : '-';
                return `
                    <tr>
                        <td><code style="font-size: 12px;">${item.vuid}</code></td>
                        <td>${item.mobile}</td>
                        <td><code style="font-size: 12px;">${item.masked_pan}</code></td>
                        <td><code style="font-size: 11px;">${item.vcard_id}</code></td>
                        <td>${item.issuer_name}</td>
                        <td style="font-size: 12px;">${enrolledAt}</td>
                    </tr>
                `;
            }).join('');
        }

        // 渲染分页
        function renderEnrollmentPagination(pagination) {
            const container = document.querySelector('#enrollmentPagination ul');
            const { current_page, last_page, total } = pagination;

            if (last_page <= 1) {
                container.innerHTML = '';
                return;
            }

            let html = '';

            // 上一页
            html += `
                <li class="page-item ${current_page === 1 ? 'disabled' : ''}">
                    <a class="page-link" href="javascript:void(0)" onclick="loadEnrollmentList(${current_page - 1})">&laquo;</a>
                </li>
            `;

            // 页码
            const maxVisiblePages = 5;
            let startPage = Math.max(1, current_page - Math.floor(maxVisiblePages / 2));
            let endPage = Math.min(last_page, startPage + maxVisiblePages - 1);

            if (endPage - startPage + 1 < maxVisiblePages) {
                startPage = Math.max(1, endPage - maxVisiblePages + 1);
            }

            if (startPage > 1) {
                html += `<li class="page-item"><a class="page-link" href="javascript:void(0)" onclick="loadEnrollmentList(1)">1</a></li>`;
                if (startPage > 2) {
                    html += `<li class="page-item disabled"><span class="page-link">...</span></li>`;
                }
            }

            for (let i = startPage; i <= endPage; i++) {
                html += `
                    <li class="page-item ${i === current_page ? 'active' : ''}">
                        <a class="page-link" href="javascript:void(0)" onclick="loadEnrollmentList(${i})">${i}</a>
                    </li>
                `;
            }

            if (endPage < last_page) {
                if (endPage < last_page - 1) {
                    html += `<li class="page-item disabled"><span class="page-link">...</span></li>`;
                }
                html += `<li class="page-item"><a class="page-link" href="javascript:void(0)" onclick="loadEnrollmentList(${last_page})">${last_page}</a></li>`;
            }

            // 下一页
            html += `
                <li class="page-item ${current_page === last_page ? 'disabled' : ''}">
                    <a class="page-link" href="javascript:void(0)" onclick="loadEnrollmentList(${current_page + 1})">&raquo;</a>
                </li>
            `;

            container.innerHTML = html;
        }

        // 搜索报名
        function searchEnrollments() {
            enrollmentSearchQuery = document.getElementById('enrollmentSearchInput').value.trim();
            loadEnrollmentList(1);
        }

        // 清除搜索
        function clearEnrollmentSearch() {
            document.getElementById('enrollmentSearchInput').value = '';
            enrollmentSearchQuery = '';
            loadEnrollmentList(1);
        }

    </script>
@endsection