<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>VIP客户管理 - VIP客户服务机制</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Microsoft YaHei', Arial, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            padding: 20px;
        }

        .container {
            max-width: 1400px;
            margin: 0 auto;
        }

        .header {
            background: white;
            padding: 20px 30px;
            border-radius: 10px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
            margin-bottom: 20px;
        }

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

        .header h1 {
            color: #333;
            font-size: 28px;
        }

        .nav-menu {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
        }

        .nav-item {
            padding: 8px 16px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            text-decoration: none;
            border-radius: 6px;
            font-size: 14px;
            transition: all 0.3s;
        }

        .nav-item:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
        }

        .nav-item.active {
            background: #e74c3c;
        }

        .card {
            background: white;
            border-radius: 10px;
            padding: 25px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
            margin-bottom: 20px;
        }

        .card-title {
            font-size: 20px;
            font-weight: bold;
            color: #333;
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 2px solid #667eea;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .filter-bar {
            display: flex;
            gap: 15px;
            margin-bottom: 20px;
            flex-wrap: wrap;
        }

        .filter-item {
            flex: 1;
            min-width: 150px;
        }

        .filter-item label {
            display: block;
            margin-bottom: 5px;
            color: #555;
            font-size: 14px;
        }

        .filter-item select,
        .filter-item input {
            width: 100%;
            padding: 8px 12px;
            border: 2px solid #e0e0e0;
            border-radius: 6px;
            font-size: 14px;
        }

        .btn {
            padding: 12px 24px;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            font-size: 16px;
            transition: all 0.3s;
            font-weight: 500;
        }

        .btn-primary {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
        }

        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
        }

        .btn-success {
            background: #27ae60;
            color: white;
        }

        .btn-success:hover {
            background: #229954;
        }

        .btn-danger {
            background: #e74c3c;
            color: white;
        }

        .btn-danger:hover {
            background: #c0392b;
        }

        .btn-warning {
            background: #f39c12;
            color: white;
        }

        .btn-warning:hover {
            background: #e67e22;
        }

        .btn-sm {
            padding: 6px 12px;
            font-size: 14px;
        }

        .data-table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
        }

        .data-table th,
        .data-table td {
            padding: 12px;
            text-align: left;
            border-bottom: 1px solid #e0e0e0;
        }

        .data-table th {
            background: #f8f9fa;
            font-weight: bold;
            color: #333;
        }

        .data-table tr:hover {
            background: #f8f9fa;
        }

        .badge {
            display: inline-block;
            padding: 4px 10px;
            border-radius: 4px;
            font-size: 12px;
            font-weight: bold;
        }

        .badge-vip {
            background: linear-gradient(135deg, #f39c12 0%, #e67e22 100%);
            color: white;
        }

        .badge-svip {
            background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
            color: white;
        }

        .badge-normal {
            background: #95a5a6;
            color: white;
        }

        .badge-success {
            background: #27ae60;
            color: white;
        }

        .badge-danger {
            background: #e74c3c;
            color: white;
        }

        .empty-state {
            text-align: center;
            padding: 60px 20px;
            color: #999;
        }

        .empty-state-icon {
            font-size: 64px;
            margin-bottom: 15px;
        }

        .stats-bar {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 15px;
            margin-bottom: 20px;
        }

        .stat-card {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 20px;
            border-radius: 8px;
            text-align: center;
        }

        .stat-card.vip {
            background: linear-gradient(135deg, #f39c12 0%, #e67e22 100%);
        }

        .stat-card.svip {
            background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
        }

        .stat-value {
            font-size: 32px;
            font-weight: bold;
            margin: 10px 0;
        }

        .stat-label {
            font-size: 14px;
            opacity: 0.9;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="container">
            <div class="header">
                <div class="header-top">
                    <h1>⭐ VIP客户管理</h1>
                    <div class="nav-menu">
                        <a href="1-VIP客户管理列表页.html" class="nav-item active">VIP客户管理</a>
                        <a href="3-VIP专属负责人配置页.html" class="nav-item">负责人配置</a>
                        <a href="4-VIP服务工单列表页.html" class="nav-item">VIP工单</a>
                        <a href="5-VIP SLA规则配置页.html" class="nav-item">SLA配置</a>
                        <a href="6-VIP客户服务记录页.html" class="nav-item">服务记录</a>
                        <a href="7-VIP客户服务看板.html" class="nav-item">服务看板</a>
                    </div>
                </div>
            </div>

            <!-- 统计卡片 -->
            <div class="stats-bar">
                <div class="stat-card">
                    <div class="stat-label">总客户数</div>
                    <div class="stat-value">{{ stats.total }}</div>
                </div>
                <div class="stat-card vip">
                    <div class="stat-label">VIP客户</div>
                    <div class="stat-value">{{ stats.vip }}</div>
                </div>
                <div class="stat-card svip">
                    <div class="stat-label">SVIP客户</div>
                    <div class="stat-value">{{ stats.svip }}</div>
                </div>
                <div class="stat-card">
                    <div class="stat-label">已启用VIP</div>
                    <div class="stat-value">{{ stats.enabled }}</div>
                </div>
            </div>

            <div class="card">
                <div class="card-title">
                    <span>VIP客户列表 (共 {{ filteredCustomers.length }} 条)</span>
                    <button @click="openAddDialog" class="btn btn-primary">
                        ➕ 新增VIP客户
                    </button>
                </div>

                <!-- 筛选栏 -->
                <div class="filter-bar">
                    <div class="filter-item">
                        <label>客户级别</label>
                        <select v-model="filters.level" @change="applyFilters">
                            <option value="">全部级别</option>
                            <option value="normal">普通</option>
                            <option value="vip">VIP</option>
                            <option value="svip">SVIP</option>
                        </select>
                    </div>
                    <div class="filter-item">
                        <label>状态筛选</label>
                        <select v-model="filters.status" @change="applyFilters">
                            <option value="">全部状态</option>
                            <option value="enabled">已启用</option>
                            <option value="disabled">已停用</option>
                        </select>
                    </div>
                    <div class="filter-item">
                        <label>客户名称</label>
                        <input type="text" v-model="filters.name" @input="applyFilters" placeholder="输入客户名称">
                    </div>
                    <div class="filter-item">
                        <label>专属负责人</label>
                        <input type="text" v-model="filters.manager" @input="applyFilters" placeholder="输入负责人">
                    </div>
                </div>

                <!-- 数据表格 -->
                <table class="data-table" v-if="filteredCustomers.length > 0">
                    <thead>
                        <tr>
                            <th>客户名称</th>
                            <th>客户级别</th>
                            <th>VIP等级</th>
                            <th>专属负责人</th>
                            <th>VIP生效时间</th>
                            <th>状态</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="customer in filteredCustomers" :key="customer.id">
                            <td>{{ customer.name }}</td>
                            <td>
                                <span class="badge" :class="customer.level === 'normal' ? 'badge-normal' : (customer.level === 'vip' ? 'badge-vip' : 'badge-svip')">
                                    {{ customer.level === 'normal' ? '普通' : (customer.level === 'vip' ? 'VIP' : 'SVIP') }}
                                </span>
                            </td>
                            <td>
                                <span class="badge" :class="customer.vipLevel === 'vip' ? 'badge-vip' : 'badge-svip'" v-if="customer.level !== 'normal'">
                                    {{ customer.vipLevel === 'vip' ? 'VIP' : 'SVIP' }}
                                </span>
                                <span v-else>-</span>
                            </td>
                            <td>{{ customer.manager || '-' }}</td>
                            <td>{{ customer.effectiveTime ? formatTime(customer.effectiveTime) : '-' }}</td>
                            <td>
                                <span class="badge" :class="customer.status === 'enabled' ? 'badge-success' : 'badge-danger'">
                                    {{ customer.status === 'enabled' ? '已启用' : '已停用' }}
                                </span>
                            </td>
                            <td>
                                <button @click="editCustomer(customer)" class="btn btn-primary btn-sm" style="margin-right: 10px;">编辑</button>
                                <button 
                                    @click="toggleStatus(customer)" 
                                    class="btn btn-sm"
                                    :class="customer.status === 'enabled' ? 'btn-warning' : 'btn-success'"
                                >
                                    {{ customer.status === 'enabled' ? '停用' : '启用' }}
                                </button>
                            </td>
                        </tr>
                    </tbody>
                </table>

                <div class="empty-state" v-else>
                    <div class="empty-state-icon">👥</div>
                    <div>暂无符合条件的客户</div>
                </div>
            </div>
        </div>

        <!-- 新增/编辑对话框 -->
        <div v-if="showDialog" style="position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; z-index: 1000;">
            <div class="card" style="width: 600px; max-height: 90vh; overflow-y: auto;">
                <div class="card-title">
                    <span>{{ editingCustomer.id ? '编辑' : '新增' }}VIP客户</span>
                    <button @click="closeDialog" style="background: #e74c3c; color: white; border: none; padding: 8px 16px; border-radius: 4px; cursor: pointer;">✕</button>
                </div>
                <form @submit.prevent="saveCustomer">
                    <div class="filter-item" style="margin-bottom: 15px;">
                        <label>客户名称 *</label>
                        <select v-model="editingCustomer.name" required style="width: 100%; padding: 8px 12px; border: 2px solid #e0e0e0; border-radius: 6px;">
                            <option value="">请选择客户</option>
                            <option v-for="name in availableCustomers" :key="name" :value="name">{{ name }}</option>
                        </select>
                    </div>
                    <div class="filter-item" style="margin-bottom: 15px;">
                        <label>客户级别 *</label>
                        <select v-model="editingCustomer.level" required style="width: 100%; padding: 8px 12px; border: 2px solid #e0e0e0; border-radius: 6px;">
                            <option value="normal">普通</option>
                            <option value="vip">VIP</option>
                            <option value="svip">SVIP</option>
                        </select>
                    </div>
                    <div class="filter-item" style="margin-bottom: 15px;" v-if="editingCustomer.level !== 'normal'">
                        <label>VIP等级 *</label>
                        <select v-model="editingCustomer.vipLevel" required style="width: 100%; padding: 8px 12px; border: 2px solid #e0e0e0; border-radius: 6px;">
                            <option value="vip">VIP</option>
                            <option value="svip">SVIP</option>
                        </select>
                    </div>
                    <div class="filter-item" style="margin-bottom: 15px;">
                        <label>VIP生效时间</label>
                        <input type="datetime-local" v-model="editingCustomer.effectiveTimeStr" style="width: 100%; padding: 8px 12px; border: 2px solid #e0e0e0; border-radius: 6px;">
                    </div>
                    <div class="filter-item" style="margin-bottom: 15px;">
                        <label>VIP失效时间</label>
                        <input type="datetime-local" v-model="editingCustomer.expireTimeStr" style="width: 100%; padding: 8px 12px; border: 2px solid #e0e0e0; border-radius: 6px;">
                    </div>
                    <div class="filter-item" style="margin-bottom: 15px;">
                        <label>备注说明</label>
                        <textarea v-model="editingCustomer.remark" rows="4" style="width: 100%; padding: 8px 12px; border: 2px solid #e0e0e0; border-radius: 6px; resize: vertical;"></textarea>
                    </div>
                    <div style="display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px;">
                        <button type="button" @click="closeDialog" class="btn" style="background: #95a5a6; color: white;">取消</button>
                        <button type="submit" class="btn btn-primary">保存</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <script>
        const { createApp } = Vue;

        createApp({
            data() {
                return {
                    customers: [],
                    filters: {
                        level: '',
                        status: '',
                        name: '',
                        manager: ''
                    },
                    showDialog: false,
                    editingCustomer: {
                        id: null,
                        name: '',
                        level: 'normal',
                        vipLevel: 'vip',
                        effectiveTime: null,
                        effectiveTimeStr: '',
                        expireTime: null,
                        expireTimeStr: '',
                        remark: '',
                        status: 'enabled'
                    },
                    availableCustomers: ['客户A', '客户B', '客户C', '客户D', '客户E', '客户F', '客户G', '客户H']
                }
            },
            computed: {
                stats() {
                    return {
                        total: this.customers.length,
                        vip: this.customers.filter(c => c.level === 'vip').length,
                        svip: this.customers.filter(c => c.level === 'svip').length,
                        enabled: this.customers.filter(c => c.status === 'enabled').length
                    };
                },
                filteredCustomers() {
                    let result = [...this.customers];
                    
                    if (this.filters.level) {
                        result = result.filter(c => c.level === this.filters.level);
                    }
                    
                    if (this.filters.status) {
                        result = result.filter(c => c.status === this.filters.status);
                    }
                    
                    if (this.filters.name) {
                        result = result.filter(c => 
                            c.name.toLowerCase().includes(this.filters.name.toLowerCase())
                        );
                    }
                    
                    if (this.filters.manager) {
                        result = result.filter(c => 
                            c.manager && c.manager.toLowerCase().includes(this.filters.manager.toLowerCase())
                        );
                    }
                    
                    return result;
                }
            },
            mounted() {
                this.loadCustomers();
            },
            methods: {
                loadCustomers() {
                    const saved = localStorage.getItem('vipCustomers');
                    if (saved) {
                        this.customers = JSON.parse(saved);
                    } else {
                        // 初始化示例数据
                        this.customers = [
                            {
                                id: 1,
                                name: '客户A',
                                level: 'vip',
                                vipLevel: 'vip',
                                manager: '张三',
                                effectiveTime: Date.now() - 30 * 24 * 60 * 60 * 1000,
                                expireTime: null,
                                remark: '重要VIP客户',
                                status: 'enabled'
                            },
                            {
                                id: 2,
                                name: '客户B',
                                level: 'svip',
                                vipLevel: 'svip',
                                manager: '李四',
                                effectiveTime: Date.now() - 60 * 24 * 60 * 60 * 1000,
                                expireTime: null,
                                remark: '超级VIP客户',
                                status: 'enabled'
                            }
                        ];
                        this.saveCustomers();
                    }
                },
                saveCustomers() {
                    localStorage.setItem('vipCustomers', JSON.stringify(this.customers));
                },
                applyFilters() {
                    // 筛选逻辑在computed中处理
                },
                openAddDialog() {
                    this.editingCustomer = {
                        id: null,
                        name: '',
                        level: 'normal',
                        vipLevel: 'vip',
                        effectiveTime: null,
                        effectiveTimeStr: '',
                        expireTime: null,
                        expireTimeStr: '',
                        remark: '',
                        status: 'enabled'
                    };
                    this.showDialog = true;
                },
                editCustomer(customer) {
                    this.editingCustomer = {
                        ...customer,
                        effectiveTimeStr: customer.effectiveTime ? new Date(customer.effectiveTime).toISOString().slice(0, 16) : '',
                        expireTimeStr: customer.expireTime ? new Date(customer.expireTime).toISOString().slice(0, 16) : ''
                    };
                    this.showDialog = true;
                },
                closeDialog() {
                    this.showDialog = false;
                },
                saveCustomer() {
                    const customer = {
                        ...this.editingCustomer,
                        effectiveTime: this.editingCustomer.effectiveTimeStr ? new Date(this.editingCustomer.effectiveTimeStr).getTime() : null,
                        expireTime: this.editingCustomer.expireTimeStr ? new Date(this.editingCustomer.expireTimeStr).getTime() : null
                    };
                    
                    if (customer.id) {
                        const index = this.customers.findIndex(c => c.id === customer.id);
                        if (index !== -1) {
                            this.customers[index] = customer;
                        }
                    } else {
                        customer.id = Date.now();
                        this.customers.push(customer);
                    }
                    
                    this.saveCustomers();
                    this.closeDialog();
                    alert('保存成功');
                },
                toggleStatus(customer) {
                    customer.status = customer.status === 'enabled' ? 'disabled' : 'enabled';
                    this.saveCustomers();
                    alert(customer.status === 'enabled' ? '已启用' : '已停用');
                },
                formatTime(timestamp) {
                    if (!timestamp) return '-';
                    const date = new Date(timestamp);
                    return date.toLocaleString('zh-CN');
                }
            }
        }).mount('#app');
    </script>
</body>
</html>

