<!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;
        }

        .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: 10px 20px;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            font-size: 14px;
            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-sm {
            padding: 6px 12px;
            font-size: 14px;
        }

        .ticket-list {
            max-height: 700px;
            overflow-y: auto;
        }

        .ticket-item {
            border: 2px solid #e0e0e0;
            border-radius: 8px;
            padding: 15px;
            margin-bottom: 15px;
            transition: all 0.3s;
            background: #f9f9f9;
            cursor: pointer;
            position: relative;
        }

        .ticket-item.vip {
            border-color: #f39c12;
            background: linear-gradient(135deg, #fff9e6 0%, #fff5d6 100%);
        }

        .ticket-item.svip {
            border-color: #e74c3c;
            background: linear-gradient(135deg, #ffeaea 0%, #ffd6d6 100%);
        }

        .ticket-item:hover {
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            transform: translateY(-2px);
        }

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

        .ticket-id {
            font-weight: bold;
            color: #667eea;
            font-size: 16px;
        }

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

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

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

        .ticket-status {
            padding: 4px 12px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: bold;
        }

        .status-pending {
            background: #f39c12;
            color: white;
        }

        .status-processing {
            background: #3498db;
            color: white;
        }

        .status-resolved {
            background: #27ae60;
            color: white;
        }

        .status-closed {
            background: #95a5a6;
            color: white;
        }

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

        .priority-high {
            background: #e74c3c;
            color: white;
        }

        .priority-medium {
            background: #f39c12;
            color: white;
        }

        .priority-low {
            background: #3498db;
            color: white;
        }

        .ticket-info {
            margin: 10px 0;
            color: #666;
            font-size: 14px;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 10px;
        }

        .ticket-info strong {
            color: #333;
        }

        .sla-timer {
            display: inline-block;
            padding: 6px 12px;
            background: #fff3cd;
            border: 1px solid #ffc107;
            border-radius: 4px;
            font-weight: bold;
            color: #856404;
            margin-top: 10px;
        }

        .sla-timer.warning {
            background: #f8d7da;
            border-color: #dc3545;
            color: #721c24;
        }

        .sla-timer.timeout {
            background: #721c24;
            border-color: #dc3545;
            color: white;
            animation: pulse 1s infinite;
        }

        @keyframes pulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.7; }
        }

        .ticket-actions {
            margin-top: 15px;
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
        }

        .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">VIP客户管理</a>
                        <a href="3-VIP专属负责人配置页.html" class="nav-item">负责人配置</a>
                        <a href="4-VIP服务工单列表页.html" class="nav-item active">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">待处理</div>
                    <div class="stat-value">{{ stats.pending }}</div>
                </div>
            </div>

            <div class="card">
                <div class="card-title">
                    VIP服务工单列表 (共 {{ filteredTickets.length }} 条)
                </div>

                <!-- 筛选栏 -->
                <div class="filter-bar">
                    <div class="filter-item">
                        <label>工单状态</label>
                        <select v-model="filters.status" @change="applyFilters">
                            <option value="">全部状态</option>
                            <option value="pending">待响应</option>
                            <option value="processing">处理中</option>
                            <option value="resolved">已解决</option>
                            <option value="closed">已关闭</option>
                        </select>
                    </div>
                    <div class="filter-item">
                        <label>VIP等级</label>
                        <select v-model="filters.vipLevel" @change="applyFilters">
                            <option value="">全部等级</option>
                            <option value="vip">VIP</option>
                            <option value="svip">SVIP</option>
                        </select>
                    </div>
                    <div class="filter-item">
                        <label>客户名称</label>
                        <input type="text" v-model="filters.customer" @input="applyFilters" placeholder="输入客户名称">
                    </div>
                    <div class="filter-item">
                        <label>优先级</label>
                        <select v-model="filters.priority" @change="applyFilters">
                            <option value="">全部优先级</option>
                            <option value="high">高</option>
                            <option value="medium">中</option>
                            <option value="low">低</option>
                        </select>
                    </div>
                </div>

                <div class="ticket-list" v-if="filteredTickets.length > 0">
                    <div 
                        v-for="ticket in filteredTickets" 
                        :key="ticket.id" 
                        class="ticket-item"
                        :class="ticket.vipLevel"
                        @click="viewTicket(ticket.id)"
                    >
                        <div class="ticket-header">
                            <div>
                                <span class="ticket-id">工单 #{{ ticket.id }}</span>
                                <span class="vip-badge" :class="ticket.vipLevel">
                                    {{ ticket.vipLevel === 'vip' ? 'VIP' : 'SVIP' }}
                                </span>
                                <span class="priority-badge" :class="'priority-' + ticket.priority">
                                    {{ ticket.priority === 'high' ? '高优先级' : (ticket.priority === 'medium' ? '中优先级' : '低优先级') }}
                                </span>
                            </div>
                            <span class="ticket-status" :class="'status-' + ticket.status">
                                {{ getStatusText(ticket.status) }}
                            </span>
                        </div>

                        <div class="ticket-info">
                            <div><strong>客户名称：</strong>{{ ticket.customer }}</div>
                            <div><strong>工单类型：</strong>{{ ticket.type }}</div>
                            <div><strong>责任人：</strong>{{ ticket.assignee }}</div>
                            <div><strong>创建时间：</strong>{{ formatTime(ticket.createTime) }}</div>
                            <div v-if="ticket.responseTime">
                                <strong>响应时间：</strong>{{ formatTime(ticket.responseTime) }}
                            </div>
                        </div>

                        <div class="sla-timer" 
                             :class="{
                                 warning: ticket.slaTimeRemaining < 3600000 && ticket.slaTimeRemaining > 0,
                                 timeout: ticket.slaTimeRemaining <= 0
                             }">
                            ⏱️ SLA剩余时间: {{ formatSlaTime(ticket.slaTimeRemaining) }}
                        </div>

                        <div class="ticket-actions" @click.stop>
                            <button 
                                @click="viewTicket(ticket.id)"
                                class="btn btn-primary btn-sm"
                            >
                                查看详情
                            </button>
                            <button 
                                v-if="ticket.status === 'pending'" 
                                @click="confirmResponse(ticket.id)"
                                class="btn btn-sm"
                                style="background: #27ae60; color: white;"
                            >
                                确认响应
                            </button>
                            <button 
                                v-if="ticket.status === 'processing'" 
                                @click="resolveTicket(ticket.id)"
                                class="btn btn-sm"
                                style="background: #27ae60; color: white;"
                            >
                                问题已解决
                            </button>
                        </div>
                    </div>
                </div>

                <div class="empty-state" v-else>
                    <div class="empty-state-icon">🎫</div>
                    <div>暂无VIP服务工单</div>
                </div>
            </div>
        </div>
    </div>

    <script>
        const { createApp } = Vue;

        createApp({
            data() {
                return {
                    tickets: [],
                    filters: {
                        status: '',
                        vipLevel: '',
                        customer: '',
                        priority: ''
                    }
                }
            },
            computed: {
                stats() {
                    return {
                        total: this.tickets.length,
                        vip: this.tickets.filter(t => t.vipLevel === 'vip').length,
                        svip: this.tickets.filter(t => t.vipLevel === 'svip').length,
                        pending: this.tickets.filter(t => t.status === 'pending' || t.status === 'processing').length
                    };
                },
                filteredTickets() {
                    let result = [...this.tickets];
                    
                    if (this.filters.status) {
                        result = result.filter(t => t.status === this.filters.status);
                    }
                    
                    if (this.filters.vipLevel) {
                        result = result.filter(t => t.vipLevel === this.filters.vipLevel);
                    }
                    
                    if (this.filters.customer) {
                        result = result.filter(t => 
                            t.customer.toLowerCase().includes(this.filters.customer.toLowerCase())
                        );
                    }
                    
                    if (this.filters.priority) {
                        result = result.filter(t => t.priority === this.filters.priority);
                    }
                    
                    return result.sort((a, b) => {
                        // SVIP优先，然后按优先级，最后按时间
                        if (a.vipLevel !== b.vipLevel) {
                            return a.vipLevel === 'svip' ? -1 : 1;
                        }
                        if (a.priority !== b.priority) {
                            const priorityOrder = { high: 3, medium: 2, low: 1 };
                            return priorityOrder[b.priority] - priorityOrder[a.priority];
                        }
                        return b.createTime - a.createTime;
                    });
                }
            },
            mounted() {
                this.loadTickets();
            },
            methods: {
                loadTickets() {
                    // 从VIP客户列表获取VIP客户
                    const savedCustomers = localStorage.getItem('vipCustomers');
                    const vipCustomers = savedCustomers ? JSON.parse(savedCustomers).filter(c => c.level !== 'normal') : [];
                    
                    // 生成VIP工单（示例数据）
                    if (vipCustomers.length > 0) {
                        this.tickets = [
                            {
                                id: 'VIP001',
                                customer: vipCustomers[0].name || '客户A',
                                vipLevel: vipCustomers[0].vipLevel || 'vip',
                                type: '技术支持',
                                status: 'processing',
                                priority: 'high',
                                assignee: '张三',
                                createTime: Date.now() - 2 * 60 * 60 * 1000,
                                responseTime: Date.now() - 1.5 * 60 * 60 * 1000,
                                slaTimeRemaining: 30 * 60 * 1000
                            },
                            {
                                id: 'SVIP001',
                                customer: vipCustomers.find(c => c.level === 'svip')?.name || '客户B',
                                vipLevel: 'svip',
                                type: '紧急故障',
                                status: 'pending',
                                priority: 'high',
                                assignee: '李四',
                                createTime: Date.now() - 30 * 60 * 1000,
                                slaTimeRemaining: 15 * 60 * 1000
                            }
                        ];
                    }
                },
                applyFilters() {
                    // 筛选逻辑在computed中处理
                },
                viewTicket(ticketId) {
                    alert('查看工单详情: ' + ticketId);
                    // 这里可以跳转到工单详情页
                },
                confirmResponse(ticketId) {
                    const ticket = this.tickets.find(t => t.id === ticketId);
                    if (ticket) {
                        ticket.status = 'processing';
                        ticket.responseTime = Date.now();
                        alert('已确认响应，开始处理问题');
                    }
                },
                resolveTicket(ticketId) {
                    const ticket = this.tickets.find(t => t.id === ticketId);
                    if (ticket) {
                        const solution = prompt('请输入解决方案：');
                        if (solution) {
                            ticket.status = 'resolved';
                            ticket.resolveTime = Date.now();
                            ticket.solution = solution;
                            alert('问题已解决');
                        }
                    }
                },
                getStatusText(status) {
                    const statusMap = {
                        'pending': '待响应',
                        'processing': '处理中',
                        'resolved': '已解决',
                        'closed': '已关闭'
                    };
                    return statusMap[status] || status;
                },
                formatTime(timestamp) {
                    if (!timestamp) return '-';
                    const date = new Date(timestamp);
                    return date.toLocaleString('zh-CN');
                },
                formatSlaTime(remaining) {
                    if (remaining <= 0) return '已超时';
                    const hours = Math.floor(remaining / 3600000);
                    const minutes = Math.floor((remaining % 3600000) / 60000);
                    const seconds = Math.floor((remaining % 60000) / 1000);
                    return `${hours}小时 ${minutes}分钟 ${seconds}秒`;
                }
            }
        }).mount('#app');
    </script>
</body>
</html>

