<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>停机问题列表 - 停机问题处理系统</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);
        }

        .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-danger {
            background: #e74c3c;
            color: white;
        }

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

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

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

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

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

        .ticket-item.urgent {
            border-color: #e74c3c;
            background: #ffeaea;
        }

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

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

        .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-urgent {
            background: #e74c3c;
            color: white;
        }

        .priority-downtime {
            background: #c0392b;
            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.danger {
            background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
        }

        .stat-card.success {
            background: linear-gradient(135deg, #27ae60 0%, #229954 100%);
        }

        .stat-card.warning {
            background: linear-gradient(135deg, #f39c12 0%, #e67e22 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>🛑 停机问题列表</h1>
                    <div class="nav-menu">
                        <a href="1-停机问题列表页.html" class="nav-item active">工单列表</a>
                        <a href="2-创建停机工单页.html" class="nav-item">创建工单</a>
                        <a href="4-统计&分析页.html" class="nav-item">统计分析</a>
                    </div>
                </div>
            </div>

            <!-- 统计卡片 -->
            <div class="stats-bar">
                <div class="stat-card danger">
                    <div class="stat-label">待响应</div>
                    <div class="stat-value">{{ stats.pending }}</div>
                </div>
                <div class="stat-card warning">
                    <div class="stat-label">处理中</div>
                    <div class="stat-value">{{ stats.processing }}</div>
                </div>
                <div class="stat-card">
                    <div class="stat-label">已解决</div>
                    <div class="stat-value">{{ stats.resolved }}</div>
                </div>
                <div class="stat-card success">
                    <div class="stat-label">已关闭</div>
                    <div class="stat-value">{{ stats.closed }}</div>
                </div>
                <div class="stat-card danger">
                    <div class="stat-label">SLA超时</div>
                    <div class="stat-value">{{ stats.timeout }}</div>
                </div>
            </div>

            <div class="card">
                <div class="card-title">
                    <span>停机工单列表 (共 {{ filteredTickets.length }} 条)</span>
                    <a href="2-创建停机工单页.html" class="btn btn-danger">
                        🚨 创建紧急工单
                    </a>
                </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>客户筛选</label>
                        <input type="text" v-model="filters.customer" @input="applyFilters" placeholder="输入客户名称">
                    </div>
                    <div class="filter-item">
                        <label>责任人筛选</label>
                        <input type="text" v-model="filters.assignee" @input="applyFilters" placeholder="输入责任人">
                    </div>
                    <div class="filter-item">
                        <label>排序方式</label>
                        <select v-model="filters.sortBy" @change="applyFilters">
                            <option value="time">按时间排序</option>
                            <option value="priority">按优先级排序</option>
                            <option value="sla">按SLA剩余时间排序</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="{urgent: ticket.priority === 'downtime'}"
                        @click="viewTicket(ticket.id)"
                    >
                        <div class="ticket-header">
                            <div>
                                <span class="ticket-id">工单 #{{ ticket.id }}</span>
                                <span class="priority-badge" :class="'priority-' + ticket.priority">
                                    {{ ticket.priority === 'downtime' ? '停机/紧急' : '紧急' }}
                                </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.contact }} ({{ ticket.phone }})</div>
                            <div><strong>设备/产线：</strong>{{ ticket.equipment }}</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 v-if="ticket.resolveTime">
                                <strong>解决时间：</strong>{{ formatTime(ticket.resolveTime) }}
                            </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 
                                v-if="ticket.status === 'pending'" 
                                @click="confirmResponse(ticket.id)"
                                class="btn btn-success btn-sm"
                            >
                                确认响应
                            </button>
                            <button 
                                v-if="ticket.status === 'processing'" 
                                @click="resolveTicket(ticket.id)"
                                class="btn btn-success btn-sm"
                            >
                                问题已解决
                            </button>
                            <button 
                                @click="viewTicket(ticket.id)"
                                class="btn btn-primary btn-sm"
                            >
                                查看详情
                            </button>
                            <button 
                                v-if="ticket.status === 'resolved'" 
                                @click="closeTicket(ticket.id)"
                                class="btn btn-sm"
                                style="background: #95a5a6; color: white;"
                            >
                                关闭工单
                            </button>
                        </div>
                    </div>
                </div>

                <div class="empty-state" v-else>
                    <div class="empty-state-icon">📋</div>
                    <div>暂无符合条件的停机工单</div>
                </div>
            </div>
        </div>
    </div>

    <script>
        const { createApp } = Vue;

        createApp({
            data() {
                return {
                    tickets: [],
                    filters: {
                        status: '',
                        customer: '',
                        assignee: '',
                        sortBy: 'time'
                    },
                    slaLimit: 2 * 60 * 60 * 1000,
                    timer: null
                }
            },
            computed: {
                stats() {
                    const stats = {
                        pending: 0,
                        processing: 0,
                        resolved: 0,
                        closed: 0,
                        timeout: 0
                    };
                    this.tickets.forEach(ticket => {
                        if (ticket.status === 'pending') stats.pending++;
                        else if (ticket.status === 'processing') stats.processing++;
                        else if (ticket.status === 'resolved') stats.resolved++;
                        else if (ticket.status === 'closed') stats.closed++;
                        if (ticket.slaTimeRemaining <= 0 && ticket.status !== 'closed') stats.timeout++;
                    });
                    return stats;
                },
                filteredTickets() {
                    let result = [...this.tickets];
                    
                    // 状态筛选
                    if (this.filters.status) {
                        result = result.filter(t => t.status === this.filters.status);
                    }
                    
                    // 客户筛选
                    if (this.filters.customer) {
                        result = result.filter(t => 
                            t.customer.toLowerCase().includes(this.filters.customer.toLowerCase())
                        );
                    }
                    
                    // 责任人筛选
                    if (this.filters.assignee) {
                        result = result.filter(t => 
                            t.assignee.toLowerCase().includes(this.filters.assignee.toLowerCase())
                        );
                    }
                    
                    // 排序
                    if (this.filters.sortBy === 'time') {
                        result.sort((a, b) => b.createTime - a.createTime);
                    } else if (this.filters.sortBy === 'priority') {
                        result.sort((a, b) => {
                            if (a.priority !== b.priority) {
                                return a.priority === 'downtime' ? -1 : 1;
                            }
                            return b.createTime - a.createTime;
                        });
                    } else if (this.filters.sortBy === 'sla') {
                        result.sort((a, b) => a.slaTimeRemaining - b.slaTimeRemaining);
                    }
                    
                    return result;
                }
            },
            mounted() {
                this.loadTickets();
                this.startTimer();
            },
            beforeUnmount() {
                if (this.timer) {
                    clearInterval(this.timer);
                }
            },
            methods: {
                loadTickets() {
                    const saved = localStorage.getItem('downtimeTickets');
                    if (saved) {
                        this.tickets = JSON.parse(saved);
                        this.tickets.forEach(ticket => {
                            if (ticket.status !== 'closed' && ticket.slaStartTime) {
                                const elapsed = Date.now() - ticket.slaStartTime;
                                ticket.slaTimeRemaining = Math.max(0, this.slaLimit - elapsed);
                            }
                        });
                    }
                },
                startTimer() {
                    this.timer = setInterval(() => {
                        this.tickets.forEach(ticket => {
                            if (ticket.status !== 'closed' && ticket.slaStartTime) {
                                const elapsed = Date.now() - ticket.slaStartTime;
                                ticket.slaTimeRemaining = Math.max(0, this.slaLimit - elapsed);
                            }
                        });
                        this.saveTickets();
                    }, 1000);
                },
                saveTickets() {
                    localStorage.setItem('downtimeTickets', JSON.stringify(this.tickets));
                },
                applyFilters() {
                    // 筛选逻辑在computed中处理
                },
                viewTicket(ticketId) {
                    window.location.href = `3-停机工单详情页.html?id=${ticketId}`;
                },
                confirmResponse(ticketId) {
                    const ticket = this.tickets.find(t => t.id === ticketId);
                    if (ticket) {
                        ticket.status = 'processing';
                        ticket.responseTime = Date.now();
                        this.saveTickets();
                        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;
                            this.saveTickets();
                            alert('问题已解决，等待关闭工单');
                        }
                    }
                },
                closeTicket(ticketId) {
                    const ticket = this.tickets.find(t => t.id === ticketId);
                    if (ticket) {
                        const summary = prompt('请输入复盘总结：');
                        if (summary !== null) {
                            ticket.status = 'closed';
                            ticket.closeTime = Date.now();
                            ticket.summary = summary || '无';
                            this.saveTickets();
                            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>
