<!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: 1200px;
            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);
        }

        .card {
            background: white;
            border-radius: 10px;
            padding: 30px;
            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;
        }

        .ticket-header-info {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 20px;
            margin-bottom: 25px;
        }

        .info-item {
            padding: 15px;
            background: #f8f9fa;
            border-radius: 8px;
            border-left: 4px solid #667eea;
        }

        .info-item strong {
            display: block;
            color: #667eea;
            margin-bottom: 8px;
            font-size: 14px;
        }

        .info-item span {
            color: #333;
            font-size: 16px;
        }

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

        .priority-downtime {
            background: #c0392b;
            color: white;
        }

        .ticket-status {
            padding: 6px 12px;
            border-radius: 20px;
            font-size: 14px;
            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;
        }

        .sla-timer {
            display: inline-block;
            padding: 10px 20px;
            background: #fff3cd;
            border: 2px solid #ffc107;
            border-radius: 6px;
            font-weight: bold;
            color: #856404;
            font-size: 18px;
            margin: 20px 0;
        }

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

        .detail-section {
            margin-bottom: 25px;
        }

        .detail-section h3 {
            color: #333;
            margin-bottom: 15px;
            font-size: 18px;
            padding-bottom: 10px;
            border-bottom: 1px solid #e0e0e0;
        }

        .detail-content {
            background: #f8f9fa;
            padding: 15px;
            border-radius: 6px;
            color: #555;
            line-height: 1.8;
            white-space: pre-wrap;
        }

        .timeline {
            position: relative;
            padding-left: 30px;
        }

        .timeline::before {
            content: '';
            position: absolute;
            left: 10px;
            top: 0;
            bottom: 0;
            width: 2px;
            background: #e0e0e0;
        }

        .timeline-item {
            position: relative;
            margin-bottom: 20px;
            padding-left: 20px;
        }

        .timeline-item::before {
            content: '';
            position: absolute;
            left: -25px;
            top: 5px;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: #667eea;
            border: 2px solid white;
            box-shadow: 0 0 0 2px #667eea;
        }

        .timeline-item.completed::before {
            background: #27ae60;
            box-shadow: 0 0 0 2px #27ae60;
        }

        .timeline-content {
            background: #f8f9fa;
            padding: 12px 15px;
            border-radius: 6px;
        }

        .timeline-title {
            font-weight: bold;
            color: #333;
            margin-bottom: 5px;
        }

        .timeline-time {
            color: #999;
            font-size: 12px;
        }

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

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

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

        .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-secondary {
            background: #95a5a6;
            color: white;
        }

        .btn-secondary:hover {
            background: #7f8c8d;
        }

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

        .empty-state-icon {
            font-size: 64px;
            margin-bottom: 15px;
        }
    </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">工单列表</a>
                        <a href="2-创建停机工单页.html" class="nav-item">创建工单</a>
                        <a href="4-统计&分析页.html" class="nav-item">统计分析</a>
                    </div>
                </div>
            </div>

            <div v-if="ticket.id">
                <!-- 工单基本信息 -->
                <div class="card">
                    <div class="card-title">工单基本信息</div>
                    
                    <div class="ticket-header-info">
                        <div class="info-item">
                            <strong>工单编号</strong>
                            <span>{{ ticket.id }}</span>
                        </div>
                        <div class="info-item">
                            <strong>优先级</strong>
                            <span class="priority-badge priority-downtime">停机/紧急</span>
                        </div>
                        <div class="info-item">
                            <strong>当前状态</strong>
                            <span class="ticket-status" :class="'status-' + ticket.status">
                                {{ getStatusText(ticket.status) }}
                            </span>
                        </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-header-info">
                        <div class="info-item">
                            <strong>客户名称</strong>
                            <span>{{ ticket.customer }}</span>
                        </div>
                        <div class="info-item">
                            <strong>联系人</strong>
                            <span>{{ ticket.contact }}</span>
                        </div>
                        <div class="info-item">
                            <strong>联系电话</strong>
                            <span>{{ ticket.phone }}</span>
                        </div>
                        <div class="info-item">
                            <strong>停机设备/产线</strong>
                            <span>{{ ticket.equipment }}</span>
                        </div>
                        <div class="info-item">
                            <strong>发现方式</strong>
                            <span>{{ ticket.discoveryMethod === 'customer' ? '客户发现' : '内部发现' }}</span>
                        </div>
                        <div class="info-item">
                            <strong>责任人</strong>
                            <span>{{ ticket.assignee }}</span>
                        </div>
                    </div>
                </div>

                <!-- 问题描述 -->
                <div class="card">
                    <div class="card-title">问题描述</div>
                    <div class="detail-section">
                        <div class="detail-content">{{ ticket.description }}</div>
                    </div>
                </div>

                <!-- 处理流程时间线 -->
                <div class="card">
                    <div class="card-title">处理流程时间线</div>
                    <div class="timeline">
                        <div class="timeline-item" :class="{completed: ticket.createTime}">
                            <div class="timeline-content">
                                <div class="timeline-title">工单创建</div>
                                <div class="timeline-time">{{ formatTime(ticket.createTime) }}</div>
                            </div>
                        </div>
                        <div class="timeline-item" :class="{completed: ticket.responseTime}">
                            <div class="timeline-content">
                                <div class="timeline-title">责任人响应确认</div>
                                <div class="timeline-time" v-if="ticket.responseTime">{{ formatTime(ticket.responseTime) }}</div>
                                <div class="timeline-time" v-else>待响应</div>
                            </div>
                        </div>
                        <div class="timeline-item" :class="{completed: ticket.resolveTime}">
                            <div class="timeline-content">
                                <div class="timeline-title">问题解决</div>
                                <div class="timeline-time" v-if="ticket.resolveTime">{{ formatTime(ticket.resolveTime) }}</div>
                                <div class="timeline-time" v-else>处理中</div>
                            </div>
                        </div>
                        <div class="timeline-item" :class="{completed: ticket.closeTime}">
                            <div class="timeline-content">
                                <div class="timeline-title">工单关闭</div>
                                <div class="timeline-time" v-if="ticket.closeTime">{{ formatTime(ticket.closeTime) }}</div>
                                <div class="timeline-time" v-else>未关闭</div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 解决方案 -->
                <div class="card" v-if="ticket.solution">
                    <div class="card-title">解决方案</div>
                    <div class="detail-section">
                        <div class="detail-content">{{ ticket.solution }}</div>
                    </div>
                </div>

                <!-- 复盘总结 -->
                <div class="card" v-if="ticket.summary">
                    <div class="card-title">复盘总结</div>
                    <div class="detail-section">
                        <div class="detail-content">{{ ticket.summary }}</div>
                    </div>
                </div>

                <!-- 操作按钮 -->
                <div class="card">
                    <div class="card-title">操作</div>
                    <div>
                        <button 
                            v-if="ticket.status === 'pending'" 
                            @click="confirmResponse"
                            class="btn btn-success"
                        >
                            确认响应
                        </button>
                        <button 
                            v-if="ticket.status === 'processing'" 
                            @click="resolveTicket"
                            class="btn btn-success"
                        >
                            问题已解决
                        </button>
                        <button 
                            v-if="ticket.status === 'resolved'" 
                            @click="closeTicket"
                            class="btn btn-success"
                        >
                            关闭工单
                        </button>
                        <a href="1-停机问题列表页.html" class="btn btn-primary">
                            返回列表
                        </a>
                    </div>
                </div>
            </div>

            <div class="card" v-else>
                <div class="empty-state">
                    <div class="empty-state-icon">❌</div>
                    <div>未找到工单信息</div>
                    <a href="1-停机问题列表页.html" class="btn btn-primary" style="margin-top: 20px; display: inline-block;">
                        返回列表
                    </a>
                </div>
            </div>
        </div>
    </div>

    <script>
        const { createApp } = Vue;

        createApp({
            data() {
                return {
                    ticket: {},
                    ticketId: null,
                    slaLimit: 2 * 60 * 60 * 1000,
                    timer: null
                }
            },
            mounted() {
                // 从URL获取工单ID
                const urlParams = new URLSearchParams(window.location.search);
                this.ticketId = urlParams.get('id');
                this.loadTicket();
                if (this.ticket.id && this.ticket.status !== 'closed') {
                    this.startTimer();
                }
            },
            beforeUnmount() {
                if (this.timer) {
                    clearInterval(this.timer);
                }
            },
            methods: {
                loadTicket() {
                    const saved = localStorage.getItem('downtimeTickets');
                    if (saved && this.ticketId) {
                        const tickets = JSON.parse(saved);
                        this.ticket = tickets.find(t => t.id === this.ticketId) || {};
                        if (this.ticket.slaStartTime && this.ticket.status !== 'closed') {
                            const elapsed = Date.now() - this.ticket.slaStartTime;
                            this.ticket.slaTimeRemaining = Math.max(0, this.slaLimit - elapsed);
                        }
                    }
                },
                startTimer() {
                    this.timer = setInterval(() => {
                        if (this.ticket.status !== 'closed' && this.ticket.slaStartTime) {
                            const elapsed = Date.now() - this.ticket.slaStartTime;
                            this.ticket.slaTimeRemaining = Math.max(0, this.slaLimit - elapsed);
                        }
                    }, 1000);
                },
                saveTickets() {
                    const saved = localStorage.getItem('downtimeTickets');
                    if (saved) {
                        const tickets = JSON.parse(saved);
                        const index = tickets.findIndex(t => t.id === this.ticket.id);
                        if (index !== -1) {
                            tickets[index] = this.ticket;
                            localStorage.setItem('downtimeTickets', JSON.stringify(tickets));
                        }
                    }
                },
                confirmResponse() {
                    this.ticket.status = 'processing';
                    this.ticket.responseTime = Date.now();
                    this.saveTickets();
                    alert('已确认响应，开始处理问题');
                },
                resolveTicket() {
                    const solution = prompt('请输入解决方案：');
                    if (solution) {
                        this.ticket.status = 'resolved';
                        this.ticket.resolveTime = Date.now();
                        this.ticket.solution = solution;
                        this.saveTickets();
                        alert('问题已解决，等待关闭工单');
                    }
                },
                closeTicket() {
                    const summary = prompt('请输入复盘总结：');
                    if (summary !== null) {
                        this.ticket.status = 'closed';
                        this.ticket.closeTime = Date.now();
                        this.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>
