// Tab系统管理 - 会员管理模块

// Tab管理器类
class MemberTabManager {
    constructor() {
        this.tabs = [];
        this.activeTabId = '';
        this.tabCounter = 0;
    }

    // 创建新tab
    createTab(id, title, content, canClose = true) {
        // 检查tab是否已存在
        const existingTab = this.tabs.find(tab => tab.id === id);
        if (existingTab) {
            this.showTab(id);
            return existingTab;
        }

        const tab = {
            id: id,
            title: title,
            content: content,
            canClose: canClose
        };
        
        this.tabs.push(tab);
        this.renderTabs();
        this.showTab(id);
        return tab;
    }

    // 关闭tab
    closeTab(tabId) {
        const tabIndex = this.tabs.findIndex(tab => tab.id === tabId);
        if (tabIndex === -1) return;

        const tab = this.tabs[tabIndex];
        if (!tab.canClose) return;

        this.tabs.splice(tabIndex, 1);

        // 如果关闭的是当前激活的tab，切换到其他tab
        if (this.activeTabId === tabId) {
            if (this.tabs.length > 0) {
                this.showTab(this.tabs[this.tabs.length - 1].id);
            } else {
                this.showDefaultContent();
            }
        }

        this.renderTabs();
    }

    // 显示指定tab
    showTab(tabId) {
        const tab = this.tabs.find(t => t.id === tabId);
        if (!tab) return;

        this.activeTabId = tabId;
        
        // 更新tab激活状态
        document.querySelectorAll('.tab-item').forEach(tabEl => {
            if (tabEl.dataset.tabId === tabId) {
                tabEl.classList.add('border-green-500', 'text-green-600');
                tabEl.classList.remove('border-transparent', 'text-gray-500');
            } else {
                tabEl.classList.remove('border-green-500', 'text-green-600');
                tabEl.classList.add('border-transparent', 'text-gray-500');
            }
        });

        // 更新内容区域
        const contentArea = document.getElementById('tab-content-area');
        if (contentArea) {
            contentArea.innerHTML = tab.content;
        }

        // 显示tab容器
        this.showTabContainer();
    }

    // 渲染tab导航
    renderTabs() {
        const tabNav = document.getElementById('tab-nav');
        if (!tabNav) return;

        tabNav.innerHTML = '';

        this.tabs.forEach(tab => {
            const tabElement = document.createElement('div');
            tabElement.className = `tab-item flex items-center px-4 py-3 border-b-2 cursor-pointer transition-colors ${
                this.activeTabId === tab.id 
                    ? 'border-green-500 text-green-600' 
                    : 'border-transparent text-gray-500 hover:text-gray-700'
            }`;
            tabElement.dataset.tabId = tab.id;
            
            tabElement.innerHTML = `
                <span class="text-sm font-medium">${tab.title}</span>
                ${tab.canClose ? `
                    <button class="ml-2 p-1 hover:bg-gray-100 rounded" onclick="event.stopPropagation(); memberTabManager.closeTab('${tab.id}')">
                        <svg class="h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                        </svg>
                    </button>
                ` : ''}
            `;

            tabElement.addEventListener('click', () => this.showTab(tab.id));
            tabNav.appendChild(tabElement);
        });
    }

    // 显示tab容器
    showTabContainer() {
        const tabContainer = document.getElementById('tab-container');
        if (tabContainer) {
            tabContainer.classList.remove('hidden');
            tabContainer.classList.add('fade-in');
        }
    }

    // 显示默认内容
    showDefaultContent() {
        const tabContainer = document.getElementById('tab-container');
        if (tabContainer) {
            const contentArea = document.getElementById('tab-content-area');
            if (contentArea) {
                contentArea.innerHTML = `
                    <div class="flex items-center justify-center h-96 text-gray-500">
                        <div class="text-center">
                            <svg class="h-16 w-16 mx-auto mb-4 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" />
                                <circle cx="9" cy="7" r="4" />
                                <path d="m22 21-3-3m0 0a8 8 0 1 1-11.31-11.31 8 8 0 0 1 11.31 11.31z" />
                            </svg>
                            <p class="text-lg">会员管理</p>
                            <p class="text-sm mt-2">请从左侧菜单选择功能</p>
                        </div>
                    </div>
                `;
            }
        }
        
        this.activeTabId = '';
        this.tabs = [];
        this.renderTabs();
    }

    // 清空所有tabs
    clearAllTabs() {
        this.tabs = [];
        this.activeTabId = '';
        this.showDefaultContent();
    }
}

// 创建全局tab管理器实例
const memberTabManager = new MemberTabManager();

// 打开等级设置Tab
function openLevelSettingsTab() {
    const tabId = 'level-settings';
    
    const content = `
        <div class="p-6">
            <div class="flex items-center justify-between mb-6">
                <h2 class="text-lg font-medium text-gray-900">等级设置</h2>
            </div>
            
            <!-- 摊位名称筛选器 -->
            <div class="mb-6 flex items-center gap-4">
                <div class="flex-1 max-w-md">
                    <label class="block text-sm font-medium text-gray-700 mb-2">摊位名称</label>
                    <div class="relative">
                        <select id="stall-filter" multiple class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-green-500 bg-white" size="1" onclick="toggleStallDropdown(event)">
                            <option value="">请选择摊位名称...</option>
                            <option value="时尚服装店">时尚服装店</option>
                            <option value="数码电子城">数码电子城</option>
                            <option value="美食餐厅">美食餐厅</option>
                            <option value="家居生活馆">家居生活馆</option>
                            <option value="运动健身店">运动健身店</option>
                        </select>
                        <div id="selected-stalls" class="mt-2 flex flex-wrap gap-2"></div>
                    </div>
                </div>
                <div class="mt-7 flex gap-3">
                    <button id="query-btn" class="px-4 py-2 bg-green-600 text-white rounded-md hover:bg-green-700 transition-colors" onclick="filterStallTable()">
                        查询
                    </button>
                    <button id="batch-edit-btn" class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors" onclick="openBatchLevelEditTab()">
                        批量会员等级编辑
                    </button>
                </div>
            </div>
            
            <div class="overflow-x-auto">
                <table class="w-full">
                    <thead class="bg-gray-50">
                        <tr>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                摊位名称
                            </th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                是否启用会员
                            </th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                会员等级
                            </th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                操作
                            </th>
                        </tr>
                    </thead>
                    <tbody class="bg-white divide-y divide-gray-200">
                        <tr>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">时尚服装店</td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <label class="relative inline-flex items-center cursor-pointer">
                                    <input type="checkbox" class="sr-only peer" checked onchange="toggleSwitch(this)">
                                    <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-green-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-green-600"></div>
                                </label>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">lv1, lv2, lv3, lv4</td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <button class="text-green-600 hover:text-green-900 text-sm font-medium" onclick="openLevelDetailTab('时尚服装店')">
                                    设置等级明细
                                </button>
                            </td>
                        </tr>
                        <tr>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">数码电子城</td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <label class="relative inline-flex items-center cursor-pointer">
                                    <input type="checkbox" class="sr-only peer" onchange="toggleSwitch(this)">
                                    <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-green-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-green-600"></div>
                                </label>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">lv1, lv2, lv3</td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <button class="text-green-600 hover:text-green-900 text-sm font-medium" onclick="openLevelDetailTab('数码电子城')">
                                    设置等级明细
                                </button>
                            </td>
                        </tr>
                        <tr>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">美食餐厅</td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <label class="relative inline-flex items-center cursor-pointer">
                                    <input type="checkbox" class="sr-only peer" checked onchange="toggleSwitch(this)">
                                    <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-green-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-green-600"></div>
                                </label>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">lv1, lv2, lv3, lv4</td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <button class="text-green-600 hover:text-green-900 text-sm font-medium" onclick="openLevelDetailTab('美食餐厅')">
                                    设置等级明细
                                </button>
                            </td>
                        </tr>
                        <tr>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">家居生活馆</td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <label class="relative inline-flex items-center cursor-pointer">
                                    <input type="checkbox" class="sr-only peer" onchange="toggleSwitch(this)">
                                    <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-green-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-green-600"></div>
                                </label>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">lv1, lv2</td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <button class="text-green-600 hover:text-green-900 text-sm font-medium" onclick="openLevelDetailTab('家居生活馆')">
                                    设置等级明细
                                </button>
                            </td>
                        </tr>
                        <tr>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">运动健身店</td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <label class="relative inline-flex items-center cursor-pointer">
                                    <input type="checkbox" class="sr-only peer" checked onchange="toggleSwitch(this)">
                                    <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-green-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-green-600"></div>
                                </label>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">lv1, lv2, lv3, lv4</td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <button class="text-green-600 hover:text-green-900 text-sm font-medium" onclick="openLevelDetailTab('运动健身店')">
                                    设置等级明细
                                </button>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    `;

    memberTabManager.createTab(tabId, '等级设置', content, false);
}

// 打开等级明细tab
function openLevelDetailTab(shopName) {
    const tabId = `level-detail-${shopName}`;
    
    // 生成模拟数据
    const mockLevels = [
        { name: 'LV1', growth: 100, members: 1250, benefits: '9.5折优惠' },
        { name: 'LV2', growth: 500, members: 850, benefits: '9折优惠, 积分双倍' },
        { name: 'LV3', growth: 1200, members: 450, benefits: '8.5折优惠, 积分双倍, 生日优惠券' },
        { name: 'LV4', growth: 2500, members: 180, benefits: '8折优惠, 积分三倍, 生日优惠券, 专属客服' }
    ];

    const content = `
        <div class="p-6">
            <div class="flex items-center justify-between mb-6">
                <h2 class="text-lg font-medium text-gray-900">${shopName} - 等级设置明细</h2>
                <div class="flex gap-3">
                    <button class="px-4 py-2 bg-green-600 text-white rounded-md hover:bg-green-700 transition-colors" onclick="openLevelEditTab('${shopName}')">
                        等级编辑
                    </button>
                    <button class="px-4 py-2 bg-green-600 text-white rounded-md hover:bg-green-700 transition-colors" onclick="submitLevelDetail('${shopName}')">
                        提交
                    </button>
                </div>
            </div>
            
            <div class="overflow-x-auto">
                <table class="w-full border border-gray-200 rounded-lg">
                    <thead class="bg-gray-50">
                        <tr>
                            <th class="px-4 py-3 text-left text-sm font-medium text-gray-900 border-b">等级名称</th>
                            <th class="px-4 py-3 text-left text-sm font-medium text-gray-900 border-b">所需成长值</th>
                            <th class="px-4 py-3 text-left text-sm font-medium text-gray-900 border-b">会员人数</th>
                            <th class="px-4 py-3 text-left text-sm font-medium text-gray-900 border-b">会员权益</th>
                        </tr>
                    </thead>
                    <tbody class="bg-white divide-y divide-gray-200">
                        ${mockLevels.map(level => `
                            <tr>
                                <td class="px-4 py-3 text-sm text-gray-900">${level.name}</td>
                                <td class="px-4 py-3 text-sm text-gray-900">${level.growth}</td>
                                <td class="px-4 py-3 text-sm text-gray-900">${level.members}</td>
                                <td class="px-4 py-3 text-sm text-gray-900">${level.benefits}</td>
                            </tr>
                        `).join('')}
                    </tbody>
                </table>
            </div>
        </div>
    `;

    memberTabManager.createTab(tabId, `${shopName} - 等级明细`, content, true);
}

// 打开等级编辑Tab
function openLevelEditTab(shopName) {
    const tabId = `level-edit-${shopName}`;
    
    // 生成模拟等级编辑数据
    const mockEditLevels = [
        { 
            level: 'LV1', 
            name: '铜牌会员', 
            growthMin: 0, 
            growthMax: 100, 
            memberDiscount: true, 
            discountRate: 5, 
            pointExchange: false, 
            birthdayCoupon: false, 
            birthdayDoublePoints: false 
        },
        { 
            level: 'LV2', 
            name: '银牌会员', 
            growthMin: 101, 
            growthMax: 500, 
            memberDiscount: true, 
            discountRate: 10, 
            pointExchange: true, 
            birthdayCoupon: true, 
            birthdayDoublePoints: true 
        },
        { 
            level: 'LV3', 
            name: '金牌会员', 
            growthMin: 501, 
            growthMax: 1200, 
            memberDiscount: true, 
            discountRate: 15, 
            pointExchange: true, 
            birthdayCoupon: true, 
            birthdayDoublePoints: true 
        },
        { 
            level: 'LV4', 
            name: '钻石会员', 
            growthMin: 1201, 
            growthMax: 9999, 
            memberDiscount: true, 
            discountRate: 20, 
            pointExchange: true, 
            birthdayCoupon: true, 
            birthdayDoublePoints: true 
        }
    ];

    const content = `
        <div class="p-6">
            <div class="flex items-center justify-between mb-6">
                <h2 class="text-lg font-medium text-gray-900">${shopName} - 等级编辑</h2>
                <div class="flex gap-3">
                    <button class="px-4 py-2 bg-gray-500 text-white rounded-md hover:bg-gray-600 transition-colors" onclick="memberTabManager.closeTab('${tabId}')">
                        关闭
                    </button>
                    <button class="px-4 py-2 bg-green-600 text-white rounded-md hover:bg-green-700 transition-colors" onclick="submitLevelEdit('${shopName}')">
                        提交
                    </button>
                </div>
            </div>
            
            <div class="overflow-x-auto">
                <table class="w-full border border-gray-200 rounded-lg">
                    <thead class="bg-gray-50">
                        <tr>
                            <th class="px-3 py-3 text-left text-xs font-medium text-gray-900 border-b">等级</th>
                            <th class="px-3 py-3 text-left text-xs font-medium text-gray-900 border-b">等级名称</th>
                            <th class="px-3 py-3 text-left text-xs font-medium text-gray-900 border-b">成长值范围</th>
                            <th class="px-3 py-3 text-left text-xs font-medium text-gray-900 border-b">开启会员折扣</th>
                            <th class="px-3 py-3 text-left text-xs font-medium text-gray-900 border-b">折扣率(%)</th>
                            <th class="px-3 py-3 text-left text-xs font-medium text-gray-900 border-b">开启积分兑换</th>
                            <th class="px-3 py-3 text-left text-xs font-medium text-gray-900 border-b">开启生日优惠券</th>
                            <th class="px-3 py-3 text-left text-xs font-medium text-gray-900 border-b">生日优惠券操作</th>
                            <th class="px-3 py-3 text-left text-xs font-medium text-gray-900 border-b">开启生日双倍积分</th>
                        </tr>
                    </thead>
                    <tbody class="bg-white divide-y divide-gray-200">
                        ${mockEditLevels.map(level => `
                            <tr>
                                <td class="px-3 py-3 text-sm text-gray-900">${level.level}</td>
                                <td class="px-3 py-3">
                                    <input type="text" value="${level.name}" class="w-full px-2 py-1 border border-gray-300 rounded text-sm">
                                </td>
                                <td class="px-3 py-3 text-sm text-gray-900">
                                    <div class="flex items-center gap-1">
                                        <input type="number" value="${level.growthMin}" class="w-16 px-2 py-1 border border-gray-300 rounded text-sm">
                                        <span>-</span>
                                        <input type="number" value="${level.growthMax}" class="w-16 px-2 py-1 border border-gray-300 rounded text-sm">
                                    </div>
                                </td>
                                <td class="px-3 py-3">
                                    <label class="relative inline-flex items-center cursor-pointer">
                                        <input type="checkbox" class="sr-only peer" ${level.memberDiscount ? 'checked' : ''}>
                                        <div class="w-9 h-5 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-green-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-green-600"></div>
                                    </label>
                                </td>
                                <td class="px-3 py-3">
                                    <input type="number" value="${level.discountRate}" class="w-16 px-2 py-1 border border-gray-300 rounded text-sm">
                                </td>
                                <td class="px-3 py-3">
                                    <label class="relative inline-flex items-center cursor-pointer">
                                        <input type="checkbox" class="sr-only peer" ${level.pointExchange ? 'checked' : ''}>
                                        <div class="w-9 h-5 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-green-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-green-600"></div>
                                    </label>
                                </td>
                                <td class="px-3 py-3">
                                    <label class="relative inline-flex items-center cursor-pointer">
                                        <input type="checkbox" class="sr-only peer" ${level.birthdayCoupon ? 'checked' : ''}>
                                        <div class="w-9 h-5 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-green-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-green-600"></div>
                                    </label>
                                </td>
                                <td class="px-3 py-3">
                                    <button class="px-3 py-1 bg-blue-600 text-white text-xs rounded hover:bg-blue-700 transition-colors" onclick="openCouponModal('${level.level}')">
                                        添加优惠券
                                    </button>
                                </td>
                                <td class="px-3 py-3">
                                    <label class="relative inline-flex items-center cursor-pointer">
                                        <input type="checkbox" class="sr-only peer" ${level.birthdayDoublePoints ? 'checked' : ''}>
                                        <div class="w-9 h-5 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-green-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-green-600"></div>
                                    </label>
                                </td>
                            </tr>
                        `).join('')}
                    </tbody>
                </table>
            </div>
        </div>
    `;

    memberTabManager.createTab(tabId, `${shopName} - 等级编辑`, content, true);
}

// 打开优惠券弹窗
function openCouponModal(level) {
    const modal = document.getElementById('coupon-modal');
    if (modal) {
        modal.classList.remove('hidden');
        resetCouponForm();
        console.log(`为等级 ${level} 添加优惠券`);
    }
}

// 测试优惠券弹窗功能
function testCouponModal() {
    openCouponModal('TEST');
}

// 优惠券相关函数
function closeCouponModal(event) {
    if (event && event.target !== event.currentTarget) {
        return;
    }
    
    const modal = document.getElementById('coupon-modal');
    if (modal) {
        modal.classList.add('hidden');
    }
}

function resetCouponForm() {
    document.getElementById('coupon-name').value = '生日优惠券';
    document.getElementById('coupon-threshold').value = '10';
    document.getElementById('coupon-discount').value = '1';
    document.getElementById('coupon-validity').value = '1';
}

function adjustThreshold(delta) {
    const input = document.getElementById('coupon-threshold');
    if (input) {
        const currentValue = parseInt(input.value) || 0;
        const newValue = Math.max(0, currentValue + delta);
        input.value = newValue;
    }
}

function adjustDiscount(delta) {
    const input = document.getElementById('coupon-discount');
    if (input) {
        const currentValue = parseInt(input.value) || 0;
        const newValue = Math.max(0, currentValue + delta);
        input.value = newValue;
    }
}

function submitCoupon() {
    const couponData = {
        name: document.getElementById('coupon-name').value,
        threshold: document.getElementById('coupon-threshold').value,
        discount: document.getElementById('coupon-discount').value,
        validity: document.getElementById('coupon-validity').value
    };
    
    if (!couponData.name.trim()) {
        showNotification('请输入优惠券名称', 'error');
        return;
    }
    
    if (parseInt(couponData.discount) >= parseInt(couponData.threshold)) {
        showNotification('减免金额不能大于或等于门槛金额', 'error');
        return;
    }
    
    showNotification(`成功添加优惠券：${couponData.name}`, 'success');
    closeCouponModal();
}

function submitLevelDetail(shopName) {
    showNotification(`${shopName} 等级明细已提交`, 'success');
}

function submitLevelEdit(shopName) {
    showNotification(`${shopName} 等级编辑已提交`, 'success');
}

// 摊位筛选相关功能
let selectedStalls = [];
let stallDropdownOpen = false;

function toggleStallDropdown(event) {
    event.preventDefault();
    const select = document.getElementById('stall-filter');
    const selectedDiv = document.getElementById('selected-stalls');
    
    if (!stallDropdownOpen) {
        select.size = 6;
        stallDropdownOpen = true;
        
        // 添加点击事件监听器
        document.addEventListener('click', closeStallDropdown);
    }
}

function closeStallDropdown(event) {
    const select = document.getElementById('stall-filter');
    const selectedDiv = document.getElementById('selected-stalls');
    
    if (!select || !select.contains(event.target)) {
        select.size = 1;
        stallDropdownOpen = false;
        document.removeEventListener('click', closeStallDropdown);
    }
}

// 处理多选选项
document.addEventListener('change', function(event) {
    if (event.target.id === 'stall-filter') {
        const select = event.target;
        const selectedOptions = Array.from(select.selectedOptions);
        const selectedDiv = document.getElementById('selected-stalls');
        
        selectedStalls = selectedOptions
            .filter(option => option.value && option.value !== '')
            .map(option => option.value);
        
        updateSelectedStallsDisplay();
    }
});

function updateSelectedStallsDisplay() {
    const selectedDiv = document.getElementById('selected-stalls');
    if (!selectedDiv) return;
    
    selectedDiv.innerHTML = '';
    
    selectedStalls.forEach(stall => {
        const tag = document.createElement('span');
        tag.className = 'inline-flex items-center px-2 py-1 rounded-md text-xs font-medium bg-green-100 text-green-800';
        tag.innerHTML = `
            ${stall}
            <button type="button" class="ml-1 inline-flex items-center justify-center w-4 h-4 rounded-full hover:bg-green-200" onclick="removeSelectedStall('${stall}')">
                <svg class="w-2 h-2" fill="currentColor" viewBox="0 0 20 20">
                    <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>
                </svg>
            </button>
        `;
        selectedDiv.appendChild(tag);
    });
}

function removeSelectedStall(stallName) {
    selectedStalls = selectedStalls.filter(stall => stall !== stallName);
    
    // 更新select控件的选中状态
    const select = document.getElementById('stall-filter');
    if (select) {
        Array.from(select.options).forEach(option => {
            if (option.value === stallName) {
                option.selected = false;
            }
        });
    }
    
    updateSelectedStallsDisplay();
}

function filterStallTable() {
    const tableRows = document.querySelectorAll('#tab-content-area tbody tr');
    
    if (selectedStalls.length === 0) {
        // 如果没有选择任何摊位，显示所有行
        tableRows.forEach(row => {
            row.style.display = '';
        });
        showNotification('已显示所有摊位', 'info');
    } else {
        // 根据选择的摊位筛选表格行
        let visibleCount = 0;
        tableRows.forEach(row => {
            const stallNameCell = row.querySelector('td:first-child');
            if (stallNameCell) {
                const stallName = stallNameCell.textContent.trim();
                if (selectedStalls.includes(stallName)) {
                    row.style.display = '';
                    visibleCount++;
                } else {
                    row.style.display = 'none';
                }
            }
        });
        showNotification(`已筛选显示 ${visibleCount} 个摊位`, 'success');
    }
}

// 打开批量会员等级编辑Tab
function openBatchLevelEditTab() {
    const tabId = 'batch-level-edit';
    
    // 生成摊位数据
    const stallOptions = [
        '新世纪电子城',
        '金辉服装店',
        '华联超市',
        '美味餐厅',
        '家具城',
        '运动专营店',
        '书香文具店',
        '花园茶社'
    ];
    
    // 生成等级编辑数据（与等级编辑页面内容一致）
    const mockEditLevels = [
        { 
            level: 'LV1', 
            name: '铜牌会员', 
            growthMin: 0, 
            growthMax: 100, 
            memberDiscount: true, 
            discountRate: 5, 
            pointExchange: false, 
            birthdayCoupon: false, 
            birthdayDoublePoints: false 
        },
        { 
            level: 'LV2', 
            name: '银牌会员', 
            growthMin: 101, 
            growthMax: 500, 
            memberDiscount: true, 
            discountRate: 10, 
            pointExchange: true, 
            birthdayCoupon: true, 
            birthdayDoublePoints: true 
        },
        { 
            level: 'LV3', 
            name: '金牌会员', 
            growthMin: 501, 
            growthMax: 1200, 
            memberDiscount: true, 
            discountRate: 15, 
            pointExchange: true, 
            birthdayCoupon: true, 
            birthdayDoublePoints: true 
        },
        { 
            level: 'LV4', 
            name: '钻石会员', 
            growthMin: 1201, 
            growthMax: 9999, 
            memberDiscount: true, 
            discountRate: 20, 
            pointExchange: true, 
            birthdayCoupon: true, 
            birthdayDoublePoints: true 
        }
    ];

    const content = `
        <div class="p-6">
            <div class="flex items-center justify-between mb-6">
                <h2 class="text-lg font-medium text-gray-900">批量会员等级编辑</h2>
                <div class="flex gap-3">
                    <button class="px-4 py-2 bg-gray-500 text-white rounded-md hover:bg-gray-600 transition-colors" onclick="memberTabManager.closeTab('${tabId}')">
                        关闭
                    </button>
                    <button class="px-4 py-2 bg-green-600 text-white rounded-md hover:bg-green-700 transition-colors" onclick="submitBatchLevelEdit()">
                        提交
                    </button>
                </div>
            </div>
            
            <!-- 生效摊位选择区域 -->
            <div class="mb-6 flex items-center gap-4">
                <div class="flex-1 max-w-md">
                    <label class="block text-sm font-medium text-gray-700 mb-2">生效的摊位</label>
                    <div class="relative">
                        <button id="batch-stall-dropdown-btn" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-green-500 bg-white text-left flex items-center justify-between" onclick="toggleBatchStallDropdown()">
                            <span id="batch-dropdown-text">全部选择</span>
                            <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
                            </svg>
                        </button>
                        <div id="batch-stall-dropdown-list" class="absolute z-10 w-full mt-1 bg-white border border-gray-300 rounded-md shadow-lg hidden">
                            ${stallOptions.map(stall => `
                                <label class="flex items-center px-3 py-2 hover:bg-gray-50 cursor-pointer">
                                    <input type="checkbox" value="${stall}" class="mr-2" checked onchange="updateBatchSelectedStalls()">
                                    ${stall}
                                </label>
                            `).join('')}
                        </div>
                        <div id="batch-selected-stalls" class="mt-2 flex flex-wrap gap-2"></div>
                    </div>
                </div>
                <div class="mt-7">
                    <button class="px-4 py-2 bg-green-600 text-white rounded-md hover:bg-green-700 transition-colors" onclick="submitBatchLevelEdit()">
                        提交
                    </button>
                </div>
            </div>
            
            <!-- 等级编辑表格（与等级编辑页面内容一致） -->
            <div class="overflow-x-auto">
                <table class="w-full border border-gray-200 rounded-lg">
                    <thead class="bg-gray-50">
                        <tr>
                            <th class="px-3 py-3 text-left text-xs font-medium text-gray-900 border-b">等级</th>
                            <th class="px-3 py-3 text-left text-xs font-medium text-gray-900 border-b">等级名称</th>
                            <th class="px-3 py-3 text-left text-xs font-medium text-gray-900 border-b">成长值范围</th>
                            <th class="px-3 py-3 text-left text-xs font-medium text-gray-900 border-b">开启会员折扣</th>
                            <th class="px-3 py-3 text-left text-xs font-medium text-gray-900 border-b">折扣率(%)</th>
                            <th class="px-3 py-3 text-left text-xs font-medium text-gray-900 border-b">开启积分兑换</th>
                            <th class="px-3 py-3 text-left text-xs font-medium text-gray-900 border-b">开启生日优惠券</th>
                            <th class="px-3 py-3 text-left text-xs font-medium text-gray-900 border-b">生日优惠券操作</th>
                            <th class="px-3 py-3 text-left text-xs font-medium text-gray-900 border-b">开启生日双倍积分</th>
                        </tr>
                    </thead>
                    <tbody class="bg-white divide-y divide-gray-200">
                        ${mockEditLevels.map(level => `
                            <tr>
                                <td class="px-3 py-3 text-sm text-gray-900">${level.level}</td>
                                <td class="px-3 py-3">
                                    <input type="text" value="${level.name}" class="w-full px-2 py-1 border border-gray-300 rounded text-sm">
                                </td>
                                <td class="px-3 py-3 text-sm text-gray-900">
                                    <div class="flex items-center gap-1">
                                        <input type="number" value="${level.growthMin}" class="w-16 px-2 py-1 border border-gray-300 rounded text-sm">
                                        <span>-</span>
                                        <input type="number" value="${level.growthMax}" class="w-16 px-2 py-1 border border-gray-300 rounded text-sm">
                                    </div>
                                </td>
                                <td class="px-3 py-3">
                                    <label class="relative inline-flex items-center cursor-pointer">
                                        <input type="checkbox" class="sr-only peer" ${level.memberDiscount ? 'checked' : ''}>
                                        <div class="w-9 h-5 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-green-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-green-600"></div>
                                    </label>
                                </td>
                                <td class="px-3 py-3">
                                    <input type="number" value="${level.discountRate}" class="w-16 px-2 py-1 border border-gray-300 rounded text-sm">
                                </td>
                                <td class="px-3 py-3">
                                    <label class="relative inline-flex items-center cursor-pointer">
                                        <input type="checkbox" class="sr-only peer" ${level.pointExchange ? 'checked' : ''}>
                                        <div class="w-9 h-5 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-green-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-green-600"></div>
                                    </label>
                                </td>
                                <td class="px-3 py-3">
                                    <label class="relative inline-flex items-center cursor-pointer">
                                        <input type="checkbox" class="sr-only peer" ${level.birthdayCoupon ? 'checked' : ''}>
                                        <div class="w-9 h-5 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-green-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-green-600"></div>
                                    </label>
                                </td>
                                <td class="px-3 py-3">
                                    <button class="px-3 py-1 bg-blue-600 text-white text-xs rounded hover:bg-blue-700 transition-colors" onclick="openCouponModal('${level.level}')">
                                        添加优惠券
                                    </button>
                                </td>
                                <td class="px-3 py-3">
                                    <label class="relative inline-flex items-center cursor-pointer">
                                        <input type="checkbox" class="sr-only peer" ${level.birthdayDoublePoints ? 'checked' : ''}>
                                        <div class="w-9 h-5 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-green-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-green-600"></div>
                                    </label>
                                </td>
                            </tr>
                        `).join('')}
                    </tbody>
                </table>
            </div>
        </div>
    `;

    memberTabManager.createTab(tabId, '批量会员等级编辑', content, true);
    
    // 初始化批量选择的摊位显示（默认全选）
    setTimeout(() => {
        batchSelectedStalls = [...stallOptions];
        updateBatchSelectedStallsDisplay();
    }, 100);
}

// 批量编辑相关的全局变量
let batchSelectedStalls = [];
let batchDropdownOpen = false;

// 批量摊位选择相关功能
function toggleBatchStallDropdown() {
    const dropdown = document.getElementById('batch-stall-dropdown-list');
    const button = document.getElementById('batch-stall-dropdown-btn');
    
    if (dropdown && button) {
        batchDropdownOpen = !batchDropdownOpen;
        if (batchDropdownOpen) {
            dropdown.classList.remove('hidden');
            setTimeout(() => {
                document.addEventListener('click', closeBatchDropdownOnClickOutside);
            }, 0);
        } else {
            dropdown.classList.add('hidden');
            document.removeEventListener('click', closeBatchDropdownOnClickOutside);
        }
    }
}

function closeBatchDropdownOnClickOutside(event) {
    const dropdown = document.getElementById('batch-stall-dropdown-list');
    const button = document.getElementById('batch-stall-dropdown-btn');
    
    if (dropdown && button && !dropdown.contains(event.target) && !button.contains(event.target)) {
        dropdown.classList.add('hidden');
        batchDropdownOpen = false;
        document.removeEventListener('click', closeBatchDropdownOnClickOutside);
    }
}

function updateBatchSelectedStalls() {
    const checkboxes = document.querySelectorAll('#batch-stall-dropdown-list input[type="checkbox"]');
    batchSelectedStalls = [];
    
    checkboxes.forEach(checkbox => {
        if (checkbox.checked) {
            batchSelectedStalls.push(checkbox.value);
        }
    });
    
    updateBatchDropdownText();
    updateBatchSelectedStallsDisplay();
}

function updateBatchDropdownText() {
    const dropdownText = document.getElementById('batch-dropdown-text');
    if (dropdownText) {
        if (batchSelectedStalls.length === 0) {
            dropdownText.textContent = '请选择摊位...';
        } else if (batchSelectedStalls.length === 8) {
            dropdownText.textContent = '全部选择';
        } else if (batchSelectedStalls.length === 1) {
            dropdownText.textContent = batchSelectedStalls[0];
        } else {
            dropdownText.textContent = `已选择 ${batchSelectedStalls.length} 个摊位`;
        }
    }
}

function updateBatchSelectedStallsDisplay() {
    const selectedDiv = document.getElementById('batch-selected-stalls');
    if (!selectedDiv) return;
    
    selectedDiv.innerHTML = '';
    
    batchSelectedStalls.forEach(stall => {
        const tag = document.createElement('span');
        tag.className = 'inline-flex items-center px-2 py-1 rounded-md text-xs font-medium bg-blue-100 text-blue-800';
        tag.innerHTML = `
            ${stall}
            <button type="button" class="ml-1 inline-flex items-center justify-center w-4 h-4 rounded-full hover:bg-blue-200" onclick="removeBatchSelectedStall('${stall}')">
                <svg class="w-2 h-2" fill="currentColor" viewBox="0 0 20 20">
                    <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>
                </svg>
            </button>
        `;
        selectedDiv.appendChild(tag);
    });
}

function removeBatchSelectedStall(stallName) {
    batchSelectedStalls = batchSelectedStalls.filter(stall => stall !== stallName);
    
    // 更新checkbox状态
    const checkboxes = document.querySelectorAll('#batch-stall-dropdown-list input[type="checkbox"]');
    checkboxes.forEach(checkbox => {
        if (checkbox.value === stallName) {
            checkbox.checked = false;
        }
    });
    
    updateBatchDropdownText();
    updateBatchSelectedStallsDisplay();
}

function submitBatchLevelEdit() {
    if (batchSelectedStalls.length === 0) {
        showNotification('请至少选择一个摊位', 'error');
        return;
    }
    
    const selectedStallsText = batchSelectedStalls.length === 8 ? '全部摊位' : `${batchSelectedStalls.length}个摊位`;
    showNotification(`批量等级编辑已提交，将应用到${selectedStallsText}`, 'success');
}

// 打开会员列表Tab
function openMemberListTab() {
    const tabId = 'member-list';
    
    // 生成模拟会员数据
    const mockMembers = [
        {
            id: 'M001',
            avatar: 'https://ui-avatars.com/api/?name=张三&background=random',
            nickname: '张三',
            phone: '138****1234',
            stall: '时尚服装店',
            level: 'LV2',
            birthday: '1990-05-15',
            registerTime: '2024-01-15 14:30:25'
        },
        {
            id: 'M002',
            avatar: 'https://ui-avatars.com/api/?name=李四&background=random',
            nickname: '李四',
            phone: '139****5678',
            stall: '数码电子城',
            level: 'LV1',
            birthday: '1985-08-20',
            registerTime: '2024-02-20 09:15:30'
        },
        {
            id: 'M003',
            avatar: 'https://ui-avatars.com/api/?name=王五&background=random',
            nickname: '王五',
            phone: '136****9012',
            stall: '美食餐厅',
            level: 'LV3',
            birthday: '1992-12-08',
            registerTime: '2024-03-10 16:45:12'
        },
        {
            id: 'M004',
            avatar: 'https://ui-avatars.com/api/?name=赵六&background=random',
            nickname: '赵六',
            phone: '137****3456',
            stall: '家居生活馆',
            level: 'LV1',
            birthday: '1988-03-25',
            registerTime: '2024-04-05 11:20:45'
        },
        {
            id: 'M005',
            avatar: 'https://ui-avatars.com/api/?name=孙七&background=random',
            nickname: '孙七',
            phone: '135****7890',
            stall: '运动健身店',
            level: 'LV4',
            birthday: '1995-07-12',
            registerTime: '2024-05-22 13:55:18'
        },
        {
            id: 'M006',
            avatar: 'https://ui-avatars.com/api/?name=周八&background=random',
            nickname: '周八',
            phone: '134****2468',
            stall: '时尚服装店',
            level: 'LV2',
            birthday: '1991-11-30',
            registerTime: '2024-06-18 08:35:22'
        }
    ];

    const content = `
        <div class="p-6">
            <div class="flex items-center justify-between mb-6">
                <h2 class="text-lg font-medium text-gray-900">会员列表</h2>
            </div>
            
            <!-- 筛选头部 -->
            <div class="mb-6 bg-gray-50 p-4 rounded-lg">
                <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">店铺</label>
                        <select id="member-stall-filter" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-green-500">
                            <option value="">全部店铺</option>
                            <option value="时尚服装店">时尚服装店</option>
                            <option value="数码电子城">数码电子城</option>
                            <option value="美食餐厅">美食餐厅</option>
                            <option value="家居生活馆">家居生活馆</option>
                            <option value="运动健身店">运动健身店</option>
                        </select>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">用户昵称</label>
                        <input type="text" id="member-nickname-filter" placeholder="请输入用户昵称" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-green-500">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">会员等级</label>
                        <select id="member-level-filter" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-green-500">
                            <option value="">全部等级</option>
                            <option value="LV1">LV1</option>
                            <option value="LV2">LV2</option>
                            <option value="LV3">LV3</option>
                            <option value="LV4">LV4</option>
                        </select>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">注册时间</label>
                        <input type="date" id="member-register-filter" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-green-500">
                    </div>
                </div>
                <div class="flex justify-end">
                    <button onclick="filterMemberList()" class="px-4 py-2 bg-green-600 text-white rounded-md hover:bg-green-700 transition-colors">
                        筛选查询
                    </button>
                    <button onclick="resetMemberFilters()" class="ml-2 px-4 py-2 bg-gray-500 text-white rounded-md hover:bg-gray-600 transition-colors">
                        重置
                    </button>
                </div>
            </div>
            
            <!-- 信息统计区域 -->
            <div class="mb-6 grid grid-cols-1 md:grid-cols-2 gap-4">
                <div class="bg-blue-50 p-4 rounded-lg border border-blue-200">
                    <div class="flex items-center">
                        <div class="flex-shrink-0">
                            <svg class="h-8 w-8 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" />
                                <circle cx="9" cy="7" r="4" />
                                <path d="m22 21-3-3m0 0a8 8 0 1 1-11.31-11.31 8 8 0 0 1 11.31 11.31z" />
                            </svg>
                        </div>
                        <div class="ml-4">
                            <p class="text-sm font-medium text-blue-600">会员总数</p>
                            <p class="text-2xl font-bold text-blue-900" id="total-members">1,247</p>
                        </div>
                    </div>
                </div>
                <div class="bg-green-50 p-4 rounded-lg border border-green-200">
                    <div class="flex items-center">
                        <div class="flex-shrink-0">
                            <svg class="h-8 w-8 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" />
                            </svg>
                        </div>
                        <div class="ml-4">
                            <p class="text-sm font-medium text-green-600">今日新增</p>
                            <p class="text-2xl font-bold text-green-900" id="today-new-members">23</p>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 会员数据表格 -->
            <div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
                <div class="overflow-x-auto">
                    <table class="w-full" id="member-table">
                        <thead class="bg-gray-50">
                            <tr>
                                <th class="px-4 py-3 text-left">
                                    <input type="checkbox" id="select-all-members" onchange="toggleAllMembers(this)" class="rounded border-gray-300 text-green-600 shadow-sm focus:border-green-500 focus:ring-green-500">
                                </th>
                                <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer hover:bg-gray-100" onclick="sortMemberTable('stall')">
                                    所属摊位
                                    <svg class="inline-block ml-1 h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 9l4-4 4 4m0 6l-4 4-4-4" />
                                    </svg>
                                </th>
                                <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer hover:bg-gray-100" onclick="sortMemberTable('id')">
                                    用户ID
                                    <svg class="inline-block ml-1 h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 9l4-4 4 4m0 6l-4 4-4-4" />
                                    </svg>
                                </th>
                                <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                    用户头像
                                </th>
                                <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer hover:bg-gray-100" onclick="sortMemberTable('nickname')">
                                    用户昵称
                                    <svg class="inline-block ml-1 h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 9l4-4 4 4m0 6l-4 4-4-4" />
                                    </svg>
                                </th>
                                <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                    手机号
                                </th>
                                <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer hover:bg-gray-100" onclick="sortMemberTable('level')">
                                    会员等级
                                    <svg class="inline-block ml-1 h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 9l4-4 4 4m0 6l-4 4-4-4" />
                                    </svg>
                                </th>
                                <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                    生日
                                </th>
                                <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer hover:bg-gray-100" onclick="sortMemberTable('registerTime')">
                                    注册时间
                                    <svg class="inline-block ml-1 h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 9l4-4 4 4m0 6l-4 4-4-4" />
                                    </svg>
                                </th>
                                <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                    操作
                                </th>
                            </tr>
                        </thead>
                        <tbody class="bg-white divide-y divide-gray-200" id="member-table-body">
                            ${mockMembers.map(member => `
                                <tr class="hover:bg-gray-50 member-row" data-stall="${member.stall}" data-nickname="${member.nickname}" data-level="${member.level}" data-register-date="${member.registerTime.split(' ')[0]}">
                                    <td class="px-4 py-3">
                                        <input type="checkbox" value="${member.id}" class="member-checkbox rounded border-gray-300 text-green-600 shadow-sm focus:border-green-500 focus:ring-green-500">
                                    </td>
                                    <td class="px-4 py-3 text-sm text-gray-900">${member.stall}</td>
                                    <td class="px-4 py-3 text-sm font-mono text-gray-600">${member.id}</td>
                                    <td class="px-4 py-3">
                                        <img src="${member.avatar}" alt="${member.nickname}" class="h-8 w-8 rounded-full">
                                    </td>
                                    <td class="px-4 py-3 text-sm font-medium text-gray-900">${member.nickname}</td>
                                    <td class="px-4 py-3 text-sm text-gray-600">${member.phone}</td>
                                    <td class="px-4 py-3">
                                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${getLevelBadgeColor(member.level)}">
                                            ${member.level}
                                        </span>
                                    </td>
                                    <td class="px-4 py-3 text-sm text-gray-600">${member.birthday}</td>
                                    <td class="px-4 py-3 text-sm text-gray-600">${member.registerTime}</td>
                                    <td class="px-4 py-3">
                                        <button onclick="viewMemberDetail('${member.id}')" class="text-green-600 hover:text-green-900 text-sm font-medium">
                                            详情
                                        </button>
                                    </td>
                                </tr>
                            `).join('')}
                        </tbody>
                    </table>
                </div>
                
                <!-- 分页区域 -->
                <div class="bg-white px-4 py-3 border-t border-gray-200 sm:px-6">
                    <div class="flex items-center justify-between">
                        <div class="flex items-center text-sm text-gray-700">
                            <span>显示</span>
                            <select id="page-size" onchange="changePageSize(this.value)" class="mx-2 px-3 py-1 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500">
                                <option value="10">10</option>
                                <option value="20" selected>20</option>
                                <option value="50">50</option>
                                <option value="100">100</option>
                            </select>
                            <span>条记录，共 <span id="total-records">1,247</span> 条</span>
                        </div>
                        <div class="flex items-center space-x-2">
                            <button onclick="goToPage(1)" class="px-3 py-1 text-sm bg-gray-100 text-gray-600 rounded-md hover:bg-gray-200 transition-colors" id="first-page">
                                首页
                            </button>
                            <button onclick="goToPage(currentPage - 1)" class="px-3 py-1 text-sm bg-gray-100 text-gray-600 rounded-md hover:bg-gray-200 transition-colors" id="prev-page">
                                上一页
                            </button>
                            <span class="text-sm text-gray-700">
                                第 <input type="number" id="current-page-input" value="1" min="1" max="63" class="w-12 px-2 py-1 text-center border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500" onchange="goToPage(this.value)"> 页，共 <span id="total-pages">63</span> 页
                            </span>
                            <button onclick="goToPage(currentPage + 1)" class="px-3 py-1 text-sm bg-gray-100 text-gray-600 rounded-md hover:bg-gray-200 transition-colors" id="next-page">
                                下一页
                            </button>
                            <button onclick="goToPage(totalPages)" class="px-3 py-1 text-sm bg-gray-100 text-gray-600 rounded-md hover:bg-gray-200 transition-colors" id="last-page">
                                尾页
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    `;

    memberTabManager.createTab(tabId, '会员列表', content, false);
    
    // 初始化分页变量
    setTimeout(() => {
        initializeMemberListPagination();
    }, 100);
}

// 获取等级徽章颜色
function getLevelBadgeColor(level) {
    const colors = {
        'LV1': 'bg-gray-100 text-gray-800',
        'LV2': 'bg-blue-100 text-blue-800',
        'LV3': 'bg-green-100 text-green-800',
        'LV4': 'bg-purple-100 text-purple-800'
    };
    return colors[level] || 'bg-gray-100 text-gray-800';
}

// 分页相关变量
let currentPage = 1;
let pageSize = 20;
let totalPages = 63;
let totalRecords = 1247;

// 初始化分页
function initializeMemberListPagination() {
    updatePaginationDisplay();
}

// 更新分页显示
function updatePaginationDisplay() {
    document.getElementById('current-page-input').value = currentPage;
    document.getElementById('total-pages').textContent = totalPages;
    document.getElementById('total-records').textContent = totalRecords.toLocaleString();
    
    // 更新按钮状态
    const firstBtn = document.getElementById('first-page');
    const prevBtn = document.getElementById('prev-page');
    const nextBtn = document.getElementById('next-page');
    const lastBtn = document.getElementById('last-page');
    
    if (firstBtn) firstBtn.disabled = currentPage === 1;
    if (prevBtn) prevBtn.disabled = currentPage === 1;
    if (nextBtn) nextBtn.disabled = currentPage === totalPages;
    if (lastBtn) lastBtn.disabled = currentPage === totalPages;
}

// 跳转到指定页面
function goToPage(page) {
    const pageNum = parseInt(page);
    if (pageNum >= 1 && pageNum <= totalPages) {
        currentPage = pageNum;
        updatePaginationDisplay();
        showNotification(`已跳转到第 ${currentPage} 页`, 'info');
    }
}

// 改变每页显示数量
function changePageSize(size) {
    pageSize = parseInt(size);
    totalPages = Math.ceil(totalRecords / pageSize);
    currentPage = 1;
    updatePaginationDisplay();
    showNotification(`每页显示 ${pageSize} 条记录`, 'info');
}

// 筛选会员列表
function filterMemberList() {
    const stallFilter = document.getElementById('member-stall-filter').value;
    const nicknameFilter = document.getElementById('member-nickname-filter').value.toLowerCase();
    const levelFilter = document.getElementById('member-level-filter').value;
    const registerFilter = document.getElementById('member-register-filter').value;
    
    const rows = document.querySelectorAll('.member-row');
    let visibleCount = 0;
    
    rows.forEach(row => {
        const stall = row.dataset.stall;
        const nickname = row.dataset.nickname.toLowerCase();
        const level = row.dataset.level;
        const registerDate = row.dataset.registerDate;
        
        let shouldShow = true;
        
        if (stallFilter && stall !== stallFilter) shouldShow = false;
        if (nicknameFilter && !nickname.includes(nicknameFilter)) shouldShow = false;
        if (levelFilter && level !== levelFilter) shouldShow = false;
        if (registerFilter && registerDate !== registerFilter) shouldShow = false;
        
        if (shouldShow) {
            row.style.display = '';
            visibleCount++;
        } else {
            row.style.display = 'none';
        }
    });
    
    showNotification(`筛选完成，显示 ${visibleCount} 条记录`, 'success');
}

// 重置筛选条件
function resetMemberFilters() {
    document.getElementById('member-stall-filter').value = '';
    document.getElementById('member-nickname-filter').value = '';
    document.getElementById('member-level-filter').value = '';
    document.getElementById('member-register-filter').value = '';
    
    // 显示所有行
    const rows = document.querySelectorAll('.member-row');
    rows.forEach(row => {
        row.style.display = '';
    });
    
    showNotification('筛选条件已重置', 'info');
}

// 全选/取消全选
function toggleAllMembers(checkbox) {
    const memberCheckboxes = document.querySelectorAll('.member-checkbox');
    memberCheckboxes.forEach(cb => {
        cb.checked = checkbox.checked;
    });
    
    const selectedCount = checkbox.checked ? memberCheckboxes.length : 0;
    showNotification(`已${checkbox.checked ? '选中' : '取消选中'} ${selectedCount} 个会员`, 'info');
}

// 表格排序
let sortDirection = {};
function sortMemberTable(column) {
    const direction = sortDirection[column] === 'asc' ? 'desc' : 'asc';
    sortDirection[column] = direction;
    
    showNotification(`按${column}${direction === 'asc' ? '升序' : '降序'}排序`, 'info');
}

// 查看会员详情
function viewMemberDetail(memberId) {
    // 获取会员模拟数据
    const memberData = getMemberDataById(memberId);
    if (!memberData) {
        showNotification('会员信息不存在', 'error');
        return;
    }
    
    openMemberDetailTab(memberData);
}

// 获取会员数据（模拟数据）
function getMemberDataById(memberId) {
    const mockMemberDetails = {
        'M001': {
            id: 'M001',
            name: '张三',
            phone: '138****1234',
            registerDate: '2024-01-15',
            birthday: '1990-05-15',
            growth: 1250,
            points: 890,
            coupons: 5
        },
        'M002': {
            id: 'M002',
            name: '李四',
            phone: '139****5678',
            registerDate: '2024-02-20',
            birthday: '1985-08-20',
            growth: 680,
            points: 450,
            coupons: 3
        },
        'M003': {
            id: 'M003',
            name: '王五',
            phone: '136****9012',
            registerDate: '2024-03-10',
            birthday: '1992-12-08',
            growth: 2100,
            points: 1200,
            coupons: 8
        },
        'M004': {
            id: 'M004',
            name: '赵六',
            phone: '137****3456',
            registerDate: '2024-04-05',
            birthday: '1988-03-25',
            growth: 350,
            points: 280,
            coupons: 2
        },
        'M005': {
            id: 'M005',
            name: '孙七',
            phone: '135****7890',
            registerDate: '2024-05-22',
            birthday: '1995-07-12',
            growth: 3200,
            points: 1650,
            coupons: 12
        },
        'M006': {
            id: 'M006',
            name: '周八',
            phone: '134****2468',
            registerDate: '2024-06-18',
            birthday: '1991-11-30',
            growth: 920,
            points: 560,
            coupons: 4
        }
    };
    
    return mockMemberDetails[memberId];
}

// 打开会员详情Tab
function openMemberDetailTab(memberData) {
    const tabId = `member-detail-${memberData.id}`;
    const tabTitle = `会员详情-${memberData.name}`;
    
    // 生成优惠券数据
    const couponData = generateMemberCoupons(memberData.coupons);
    
    // 生成成长值明细数据
    const growthDetailData = generateGrowthDetails(memberData.growth);
    
    // 生成积分明细数据
    const pointDetailData = generatePointDetails(memberData.points);
    
    const content = `
        <div class="p-6 max-w-7xl mx-auto">
            <div class="flex items-center justify-between mb-6">
                <h2 class="text-xl font-semibold text-gray-900">${tabTitle}</h2>
                <button onclick="memberTabManager.closeTab('${tabId}')" class="px-4 py-2 bg-gray-500 text-white rounded-md hover:bg-gray-600 transition-colors">
                    关闭
                </button>
            </div>
            
            <!-- 会员基本信息 -->
            <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6 mb-6">
                <h3 class="text-lg font-medium text-gray-900 mb-4">会员信息</h3>
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
                    <div class="flex flex-col">
                        <span class="text-sm font-medium text-gray-500 mb-1">会员名称</span>
                        <span class="text-base text-gray-900">${memberData.name}</span>
                    </div>
                    <div class="flex flex-col">
                        <span class="text-sm font-medium text-gray-500 mb-1">会员手机号</span>
                        <span class="text-base text-gray-900">${memberData.phone}</span>
                    </div>
                    <div class="flex flex-col">
                        <span class="text-sm font-medium text-gray-500 mb-1">会员注册日期</span>
                        <span class="text-base text-gray-900">${memberData.registerDate}</span>
                    </div>
                    <div class="flex flex-col">
                        <span class="text-sm font-medium text-gray-500 mb-1">会员生日</span>
                        <span class="text-base text-gray-900">${memberData.birthday}</span>
                    </div>
                </div>
            </div>
            
            <!-- 会员资产 -->
            <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6 mb-6">
                <h3 class="text-lg font-medium text-gray-900 mb-4">会员资产</h3>
                <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                    <div class="bg-blue-50 p-4 rounded-lg">
                        <div class="flex items-center">
                            <div class="flex-shrink-0">
                                <svg class="h-8 w-8 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6" />
                                </svg>
                            </div>
                            <div class="ml-4">
                                <p class="text-sm font-medium text-blue-600">会员成长值</p>
                                <p class="text-2xl font-bold text-blue-900">${memberData.growth}</p>
                            </div>
                        </div>
                    </div>
                    <div class="bg-green-50 p-4 rounded-lg">
                        <div class="flex items-center">
                            <div class="flex-shrink-0">
                                <svg class="h-8 w-8 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1" />
                                </svg>
                            </div>
                            <div class="ml-4">
                                <p class="text-sm font-medium text-green-600">会员积分</p>
                                <p class="text-2xl font-bold text-green-900">${memberData.points}</p>
                            </div>
                        </div>
                    </div>
                    <div class="bg-purple-50 p-4 rounded-lg">
                        <div class="flex items-center">
                            <div class="flex-shrink-0">
                                <svg class="h-8 w-8 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z" />
                                </svg>
                            </div>
                            <div class="ml-4">
                                <p class="text-sm font-medium text-purple-600">会员优惠券</p>
                                <p class="text-2xl font-bold text-purple-900 cursor-pointer hover:text-purple-700" onclick="showMemberCouponsModal('${memberData.id}')">${memberData.coupons}</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Tab导航 -->
            <div class="bg-white rounded-lg shadow-sm border border-gray-200">
                <div class="border-b border-gray-200">
                    <nav class="-mb-px flex">
                        <button onclick="switchDetailTab('growth', '${memberData.id}')" id="growth-tab-${memberData.id}" class="detail-tab-btn active py-4 px-6 text-sm font-medium border-b-2 border-green-500 text-green-600">
                            会员成长值明细
                        </button>
                        <button onclick="switchDetailTab('points', '${memberData.id}')" id="points-tab-${memberData.id}" class="detail-tab-btn py-4 px-6 text-sm font-medium border-b-2 border-transparent text-gray-500 hover:text-gray-700">
                            会员积分明细
                        </button>
                    </nav>
                </div>
                
                <!-- Tab内容区域 -->
                <div class="p-6">
                    <!-- 成长值明细表格 -->
                    <div id="growth-content-${memberData.id}" class="detail-tab-content">
                        <div class="overflow-x-auto">
                            <table class="w-full">
                                <thead class="bg-gray-50">
                                    <tr>
                                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">变化时间</th>
                                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">成长值增加</th>
                                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">关联订单</th>
                                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">详情</th>
                                    </tr>
                                </thead>
                                <tbody class="bg-white divide-y divide-gray-200" id="growth-table-body-${memberData.id}">
                                    ${growthDetailData.map(item => `
                                        <tr>
                                            <td class="px-4 py-3 text-sm text-gray-900">${item.time}</td>
                                            <td class="px-4 py-3 text-sm text-gray-900">+${item.growth}</td>
                                            <td class="px-4 py-3 text-sm text-gray-600">${item.orderId || '无'}</td>
                                            <td class="px-4 py-3">
                                                <button onclick="showGrowthDetail('${item.id}', '${item.type}', ${JSON.stringify(item).replace(/"/g, '&quot;')})" class="text-blue-600 hover:text-blue-900 text-sm font-medium">
                                                    详情
                                                </button>
                                            </td>
                                        </tr>
                                    `).join('')}
                                </tbody>
                            </table>
                        </div>
                        
                        <!-- 分页控件 -->
                        <div class="mt-4 flex items-center justify-between">
                            <div class="text-sm text-gray-700">
                                共 <span class="font-medium">${growthDetailData.length}</span> 条记录
                            </div>
                            <div class="flex items-center space-x-2">
                                <button onclick="growthPrevPage('${memberData.id}')" class="px-3 py-1 text-sm bg-gray-100 text-gray-600 rounded-md hover:bg-gray-200 transition-colors">
                                    上一页
                                </button>
                                <span class="text-sm text-gray-700">第 1 页，共 1 页</span>
                                <button onclick="growthNextPage('${memberData.id}')" class="px-3 py-1 text-sm bg-gray-100 text-gray-600 rounded-md hover:bg-gray-200 transition-colors">
                                    下一页
                                </button>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 积分明细表格 -->
                    <div id="points-content-${memberData.id}" class="detail-tab-content hidden">
                        <div class="overflow-x-auto">
                            <table class="w-full">
                                <thead class="bg-gray-50">
                                    <tr>
                                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">变化时间</th>
                                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">积分变化</th>
                                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">关联订单</th>
                                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">详情</th>
                                    </tr>
                                </thead>
                                <tbody class="bg-white divide-y divide-gray-200" id="points-table-body-${memberData.id}">
                                    ${pointDetailData.map(item => `
                                        <tr>
                                            <td class="px-4 py-3 text-sm text-gray-900">${item.time}</td>
                                            <td class="px-4 py-3 text-sm ${item.change > 0 ? 'text-green-600' : 'text-red-600'}">${item.change > 0 ? '+' : ''}${item.change}</td>
                                            <td class="px-4 py-3 text-sm text-gray-600">${item.orderId || '无'}</td>
                                            <td class="px-4 py-3">
                                                <button onclick="showPointDetail('${item.id}', '${item.type}', ${JSON.stringify(item).replace(/"/g, '&quot;')})" class="text-blue-600 hover:text-blue-900 text-sm font-medium">
                                                    详情
                                                </button>
                                            </td>
                                        </tr>
                                    `).join('')}
                                </tbody>
                            </table>
                        </div>
                        
                        <!-- 分页控件 -->
                        <div class="mt-4 flex items-center justify-between">
                            <div class="text-sm text-gray-700">
                                共 <span class="font-medium">${pointDetailData.length}</span> 条记录
                            </div>
                            <div class="flex items-center space-x-2">
                                <button onclick="pointsPrevPage('${memberData.id}')" class="px-3 py-1 text-sm bg-gray-100 text-gray-600 rounded-md hover:bg-gray-200 transition-colors">
                                    上一页
                                </button>
                                <span class="text-sm text-gray-700">第 1 页，共 1 页</span>
                                <button onclick="pointsNextPage('${memberData.id}')" class="px-3 py-1 text-sm bg-gray-100 text-gray-600 rounded-md hover:bg-gray-200 transition-colors">
                                    下一页
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    `;
    
    memberTabManager.createTab(tabId, tabTitle, content, true);
}

// 生成会员优惠券数据
function generateMemberCoupons(count) {
    const couponTypes = ['满减券', '折扣券', '生日券', '新人券', '节日券'];
    const coupons = [];
    
    for (let i = 0; i < count; i++) {
        const type = couponTypes[Math.floor(Math.random() * couponTypes.length)];
        const issueDate = new Date(2024, Math.floor(Math.random() * 12), Math.floor(Math.random() * 28) + 1);
        const validityDays = Math.floor(Math.random() * 90) + 30;
        const expiryDate = new Date(issueDate.getTime() + validityDays * 24 * 60 * 60 * 1000);
        
        coupons.push({
            id: `C${String(i + 1).padStart(3, '0')}`,
            name: `${type}${i + 1}`,
            issueDate: issueDate.toISOString().split('T')[0],
            expiryDate: expiryDate.toISOString().split('T')[0],
            content: getRandomCouponContent(type)
        });
    }
    
    return coupons;
}

// 获取随机优惠券内容
function getRandomCouponContent(type) {
    const contents = {
        '满减券': ['满100减20', '满200减50', '满500减100'],
        '折扣券': ['9折优惠', '8.5折优惠', '8折优惠'],
        '生日券': ['生日专享8折', '生日满100减30'],
        '新人券': ['新人专享9折', '新人满50减10'],
        '节日券': ['节日满200减30', '节日8.8折优惠']
    };
    
    const typeContents = contents[type] || ['优惠券'];
    return typeContents[Math.floor(Math.random() * typeContents.length)];
}

// 生成成长值明细数据
function generateGrowthDetails(totalGrowth) {
    const details = [];
    const reasons = [
        { type: 'register', reason: '注册奖励', growth: 50, hasOrder: false },
        { type: 'birthday', reason: '生日奖励', growth: 100, hasOrder: false },
        { type: 'order', reason: '订单消费', growth: null, hasOrder: true },
        { type: 'activity', reason: '活动奖励', growth: 20, hasOrder: false }
    ];
    
    let currentGrowth = 0;
    let id = 1;
    
    while (currentGrowth < totalGrowth && details.length < 20) {
        const reasonData = reasons[Math.floor(Math.random() * reasons.length)];
        let growth = reasonData.growth;
        
        if (reasonData.type === 'order') {
            growth = Math.floor(Math.random() * 100) + 10;
        }
        
        if (currentGrowth + growth > totalGrowth) {
            growth = totalGrowth - currentGrowth;
        }
        
        const days = Math.floor(Math.random() * 180);
        const time = new Date(Date.now() - days * 24 * 60 * 60 * 1000);
        
        details.push({
            id: `G${String(id).padStart(3, '0')}`,
            time: time.toISOString().split('T')[0] + ' ' + time.toTimeString().split(' ')[0].substring(0, 5),
            growth: growth,
            orderId: reasonData.hasOrder ? `ORD${String(Math.floor(Math.random() * 9999) + 1).padStart(4, '0')}` : null,
            type: reasonData.type,
            reason: reasonData.reason
        });
        
        currentGrowth += growth;
        id++;
    }
    
    return details.sort((a, b) => new Date(b.time) - new Date(a.time));
}

// 生成积分明细数据
function generatePointDetails(totalPoints) {
    const details = [];
    const reasons = [
        { type: 'register', reason: '注册奖励', points: 100, hasOrder: false },
        { type: 'birthday', reason: '生日奖励', points: 200, hasOrder: false },
        { type: 'order_earn', reason: '订单获得积分', points: null, hasOrder: true },
        { type: 'order_use', reason: '积分抵扣', points: null, hasOrder: true, isNegative: true },
        { type: 'activity', reason: '活动奖励', points: 50, hasOrder: false }
    ];
    
    let currentPoints = 0;
    let id = 1;
    
    while (details.length < 25) {
        const reasonData = reasons[Math.floor(Math.random() * reasons.length)];
        let points = reasonData.points;
        
        if (reasonData.type === 'order_earn') {
            points = Math.floor(Math.random() * 200) + 20;
        } else if (reasonData.type === 'order_use') {
            points = -(Math.floor(Math.random() * 150) + 10);
        }
        
        const days = Math.floor(Math.random() * 180);
        const time = new Date(Date.now() - days * 24 * 60 * 60 * 1000);
        
        details.push({
            id: `P${String(id).padStart(3, '0')}`,
            time: time.toISOString().split('T')[0] + ' ' + time.toTimeString().split(' ')[0].substring(0, 5),
            change: points,
            orderId: reasonData.hasOrder ? `ORD${String(Math.floor(Math.random() * 9999) + 1).padStart(4, '0')}` : null,
            type: reasonData.type,
            reason: reasonData.reason
        });
        
        currentPoints += points;
        id++;
    }
    
    return details.sort((a, b) => new Date(b.time) - new Date(a.time));
}

// 切换详情Tab
function switchDetailTab(tabType, memberId) {
    // 更新按钮状态
    const allTabs = document.querySelectorAll(`#growth-tab-${memberId}, #points-tab-${memberId}`);
    allTabs.forEach(tab => {
        tab.classList.remove('active', 'border-green-500', 'text-green-600');
        tab.classList.add('border-transparent', 'text-gray-500');
    });
    
    const activeTab = document.getElementById(`${tabType}-tab-${memberId}`);
    if (activeTab) {
        activeTab.classList.add('active', 'border-green-500', 'text-green-600');
        activeTab.classList.remove('border-transparent', 'text-gray-500');
    }
    
    // 切换内容
    const allContents = document.querySelectorAll(`#growth-content-${memberId}, #points-content-${memberId}`);
    allContents.forEach(content => {
        content.classList.add('hidden');
    });
    
    const activeContent = document.getElementById(`${tabType}-content-${memberId}`);
    if (activeContent) {
        activeContent.classList.remove('hidden');
    }
}

// 显示优惠券弹窗
function showMemberCouponsModal(memberId) {
    const memberData = getMemberDataById(memberId);
    if (!memberData) return;
    
    const coupons = generateMemberCoupons(memberData.coupons);
    
    const modalHtml = `
        <div id="member-coupons-modal" class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50" onclick="closeMemberCouponsModal(event)">
            <div class="relative top-20 mx-auto p-5 border w-11/12 max-w-4xl shadow-lg rounded-md bg-white">
                <div class="flex items-center justify-between mb-4">
                    <h3 class="text-lg font-medium text-gray-900">${memberData.name} - 优惠券列表</h3>
                    <button onclick="closeMemberCouponsModal()" class="text-gray-400 hover:text-gray-600">
                        <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                        </svg>
                    </button>
                </div>
                
                <div class="overflow-x-auto">
                    <table class="w-full">
                        <thead class="bg-gray-50">
                            <tr>
                                <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">优惠券名称</th>
                                <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">发放日期</th>
                                <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">有效期</th>
                                <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">优惠券内容</th>
                            </tr>
                        </thead>
                        <tbody class="bg-white divide-y divide-gray-200">
                            ${coupons.map(coupon => `
                                <tr>
                                    <td class="px-4 py-3 text-sm font-medium text-gray-900">${coupon.name}</td>
                                    <td class="px-4 py-3 text-sm text-gray-600">${coupon.issueDate}</td>
                                    <td class="px-4 py-3 text-sm text-gray-600">${coupon.expiryDate}</td>
                                    <td class="px-4 py-3 text-sm text-gray-900">${coupon.content}</td>
                                </tr>
                            `).join('')}
                        </tbody>
                    </table>
                </div>
                
                <div class="mt-4 flex justify-end">
                    <button onclick="closeMemberCouponsModal()" class="px-4 py-2 bg-gray-500 text-white rounded-md hover:bg-gray-600 transition-colors">
                        关闭
                    </button>
                </div>
            </div>
        </div>
    `;
    
    // 添加到页面
    const existingModal = document.getElementById('member-coupons-modal');
    if (existingModal) {
        existingModal.remove();
    }
    
    document.body.insertAdjacentHTML('beforeend', modalHtml);
}

// 关闭优惠券弹窗
function closeMemberCouponsModal(event) {
    if (event && event.target !== event.currentTarget) {
        return;
    }
    
    const modal = document.getElementById('member-coupons-modal');
    if (modal) {
        modal.remove();
    }
}

// 显示成长值详情弹窗
function showGrowthDetail(detailId, type, detailData) {
    const data = typeof detailData === 'string' ? JSON.parse(detailData) : detailData;
    
    let modalContent = '';
    
    if (data.orderId) {
        // 有关联订单的情况
        modalContent = `
            <h3 class="text-lg font-medium text-gray-900 mb-4">订单详情</h3>
            <div class="space-y-3">
                <div class="flex justify-between">
                    <span class="text-sm font-medium text-gray-500">订单编号:</span>
                    <span class="text-sm text-gray-900">${data.orderId}</span>
                </div>
                <div class="flex justify-between">
                    <span class="text-sm font-medium text-gray-500">订单总金额:</span>
                    <span class="text-sm text-gray-900">¥${(Math.random() * 1000 + 100).toFixed(2)}</span>
                </div>
                <div class="flex justify-between">
                    <span class="text-sm font-medium text-gray-500">订单时间:</span>
                    <span class="text-sm text-gray-900">${data.time}</span>
                </div>
                <div class="flex justify-between">
                    <span class="text-sm font-medium text-gray-500">订单归属摊位:</span>
                    <span class="text-sm text-gray-900">${['时尚服装店', '数码电子城', '美食餐厅', '家居生活馆'][Math.floor(Math.random() * 4)]}</span>
                </div>
                <div class="flex justify-between">
                    <span class="text-sm font-medium text-gray-500">成长值变化:</span>
                    <span class="text-sm text-green-600">+${data.growth}</span>
                </div>
            </div>
        `;
    } else {
        // 无关联订单的情况
        modalContent = `
            <h3 class="text-lg font-medium text-gray-900 mb-4">成长值变化详情</h3>
            <div class="space-y-3">
                <div class="flex justify-between">
                    <span class="text-sm font-medium text-gray-500">变化原因:</span>
                    <span class="text-sm text-gray-900">${data.reason}</span>
                </div>
                <div class="flex justify-between">
                    <span class="text-sm font-medium text-gray-500">变化时间:</span>
                    <span class="text-sm text-gray-900">${data.time}</span>
                </div>
                <div class="flex justify-between">
                    <span class="text-sm font-medium text-gray-500">成长值增加:</span>
                    <span class="text-sm text-green-600">+${data.growth}</span>
                </div>
                <div class="pt-2 text-sm text-gray-600">
                    ${getGrowthReasonDescription(data.type)}
                </div>
            </div>
        `;
    }
    
    showDetailModal('成长值详情', modalContent);
}

// 显示积分详情弹窗
function showPointDetail(detailId, type, detailData) {
    const data = typeof detailData === 'string' ? JSON.parse(detailData) : detailData;
    
    let modalContent = '';
    
    if (data.orderId) {
        // 有关联订单的情况
        modalContent = `
            <h3 class="text-lg font-medium text-gray-900 mb-4">订单详情</h3>
            <div class="space-y-3">
                <div class="flex justify-between">
                    <span class="text-sm font-medium text-gray-500">订单编号:</span>
                    <span class="text-sm text-gray-900">${data.orderId}</span>
                </div>
                <div class="flex justify-between">
                    <span class="text-sm font-medium text-gray-500">订单总金额:</span>
                    <span class="text-sm text-gray-900">¥${(Math.random() * 1000 + 100).toFixed(2)}</span>
                </div>
                <div class="flex justify-between">
                    <span class="text-sm font-medium text-gray-500">订单时间:</span>
                    <span class="text-sm text-gray-900">${data.time}</span>
                </div>
                <div class="flex justify-between">
                    <span class="text-sm font-medium text-gray-500">订单归属摊位:</span>
                    <span class="text-sm text-gray-900">${['时尚服装店', '数码电子城', '美食餐厅', '家居生活馆'][Math.floor(Math.random() * 4)]}</span>
                </div>
                <div class="flex justify-between">
                    <span class="text-sm font-medium text-gray-500">积分变化:</span>
                    <span class="text-sm ${data.change > 0 ? 'text-green-600' : 'text-red-600'}">${data.change > 0 ? '+' : ''}${data.change}</span>
                </div>
                <div class="pt-2 text-sm text-gray-600">
                    ${data.change > 0 ? '订单消费获得积分奖励' : '使用积分抵扣订单金额'}
                </div>
            </div>
        `;
    } else {
        // 无关联订单的情况
        modalContent = `
            <h3 class="text-lg font-medium text-gray-900 mb-4">积分变化详情</h3>
            <div class="space-y-3">
                <div class="flex justify-between">
                    <span class="text-sm font-medium text-gray-500">变化原因:</span>
                    <span class="text-sm text-gray-900">${data.reason}</span>
                </div>
                <div class="flex justify-between">
                    <span class="text-sm font-medium text-gray-500">变化时间:</span>
                    <span class="text-sm text-gray-900">${data.time}</span>
                </div>
                <div class="flex justify-between">
                    <span class="text-sm font-medium text-gray-500">积分变化:</span>
                    <span class="text-sm ${data.change > 0 ? 'text-green-600' : 'text-red-600'}">${data.change > 0 ? '+' : ''}${data.change}</span>
                </div>
                <div class="pt-2 text-sm text-gray-600">
                    ${getPointReasonDescription(data.type)}
                </div>
            </div>
        `;
    }
    
    showDetailModal('积分详情', modalContent);
}

// 显示通用详情弹窗
function showDetailModal(title, content) {
    const modalHtml = `
        <div id="detail-modal" class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50" onclick="closeDetailModal(event)">
            <div class="relative top-20 mx-auto p-5 border w-11/12 max-w-md shadow-lg rounded-md bg-white">
                <div class="flex items-center justify-between mb-4">
                    <h3 class="text-lg font-medium text-gray-900">${title}</h3>
                    <button onclick="closeDetailModal()" class="text-gray-400 hover:text-gray-600">
                        <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                        </svg>
                    </button>
                </div>
                
                <div class="mb-4">
                    ${content}
                </div>
                
                <div class="flex justify-end">
                    <button onclick="closeDetailModal()" class="px-4 py-2 bg-gray-500 text-white rounded-md hover:bg-gray-600 transition-colors">
                        关闭
                    </button>
                </div>
            </div>
        </div>
    `;
    
    // 移除现有弹窗
    const existingModal = document.getElementById('detail-modal');
    if (existingModal) {
        existingModal.remove();
    }
    
    document.body.insertAdjacentHTML('beforeend', modalHtml);
}

// 关闭详情弹窗
function closeDetailModal(event) {
    if (event && event.target !== event.currentTarget) {
        return;
    }
    
    const modal = document.getElementById('detail-modal');
    if (modal) {
        modal.remove();
    }
}

// 获取成长值原因描述
function getGrowthReasonDescription(type) {
    const descriptions = {
        'register': '新用户注册时系统自动发放的奖励成长值',
        'birthday': '会员生日当天系统自动发放的生日礼品成长值',
        'activity': '参与平台活动获得的奖励成长值',
        'order': '订单消费根据消费金额按比例获得的成长值'
    };
    
    return descriptions[type] || '其他原因获得的成长值';
}

// 获取积分原因描述
function getPointReasonDescription(type) {
    const descriptions = {
        'register': '新用户注册时系统自动发放的奖励积分',
        'birthday': '会员生日当天系统自动发放的生日礼品积分',
        'activity': '参与平台活动获得的奖励积分',
        'order_earn': '订单消费根据消费金额按比例获得的积分奖励',
        'order_use': '在订单中使用积分抵扣部分金额'
    };
    
    return descriptions[type] || '其他原因的积分变化';
}

// 分页功能（成长值）
function growthPrevPage(memberId) {
    showNotification('已到第一页', 'info');
}

function growthNextPage(memberId) {
    showNotification('已到最后一页', 'info');
}

// 分页功能（积分）
function pointsPrevPage(memberId) {
    showNotification('已到第一页', 'info');
}

function pointsNextPage(memberId) {
    showNotification('已到最后一页', 'info');
}

// 导出函数
window.memberTabManager = memberTabManager;
window.openLevelSettingsTab = openLevelSettingsTab;
window.openLevelDetailTab = openLevelDetailTab;
window.openLevelEditTab = openLevelEditTab;
window.openBatchLevelEditTab = openBatchLevelEditTab;
window.openCouponModal = openCouponModal;
window.testCouponModal = testCouponModal;
window.closeCouponModal = closeCouponModal;
window.resetCouponForm = resetCouponForm;
window.adjustThreshold = adjustThreshold;
window.adjustDiscount = adjustDiscount;
window.addCouponThreshold = addCouponThreshold;
window.submitCoupon = submitCoupon;
window.submitLevelDetail = submitLevelDetail;
window.submitLevelEdit = submitLevelEdit;
window.submitBatchLevelEdit = submitBatchLevelEdit;
window.toggleStallDropdown = toggleStallDropdown;
window.toggleBatchStallDropdown = toggleBatchStallDropdown;
window.updateBatchSelectedStalls = updateBatchSelectedStalls;
window.removeBatchSelectedStall = removeBatchSelectedStall;
window.removeSelectedStall = removeSelectedStall;
window.filterStallTable = filterStallTable;
window.openMemberListTab = openMemberListTab;
window.getLevelBadgeColor = getLevelBadgeColor;
window.initializeMemberListPagination = initializeMemberListPagination;
window.updatePaginationDisplay = updatePaginationDisplay;
window.goToPage = goToPage;
window.changePageSize = changePageSize;
window.filterMemberList = filterMemberList;
window.resetMemberFilters = resetMemberFilters;
window.toggleAllMembers = toggleAllMembers;
window.sortMemberTable = sortMemberTable;
window.viewMemberDetail = viewMemberDetail;
window.getMemberDataById = getMemberDataById;
window.openMemberDetailTab = openMemberDetailTab;
window.generateMemberCoupons = generateMemberCoupons;
window.generateGrowthDetails = generateGrowthDetails;
window.generatePointDetails = generatePointDetails;
window.switchDetailTab = switchDetailTab;
window.showMemberCouponsModal = showMemberCouponsModal;
window.closeMemberCouponsModal = closeMemberCouponsModal;
window.showGrowthDetail = showGrowthDetail;
window.showPointDetail = showPointDetail;
window.showDetailModal = showDetailModal;
window.closeDetailModal = closeDetailModal;
window.getGrowthReasonDescription = getGrowthReasonDescription;
window.getPointReasonDescription = getPointReasonDescription;
window.growthPrevPage = growthPrevPage;
window.growthNextPage = growthNextPage;
window.pointsPrevPage = pointsPrevPage;
window.pointsNextPage = pointsNextPage;