{% extends "user/base.html" %}

{% block title %}售后服务 - {{ config.SITE_NAME or '软件授权管理系统' }}{% endblock %}

{% block extra_css %}
<style>
    .ticket-form {
        background: #f8f9fa;
        border-radius: 10px;
        padding: 2rem;
    }
    
    .ticket-history {
        border-left: 3px solid #667eea;
    }
    
    .ticket-item {
        border: 1px solid #dee2e6;
        border-radius: 8px;
        padding: 1.5rem;
        margin-bottom: 1rem;
    }
    
    .ticket-status-open {
        background-color: #d1ecf1;
        border-color: #bee5eb;
    }
    
    .ticket-status-closed {
        background-color: #d4edda;
        border-color: #c3e6cb;
    }
    
    .emergency-contact {
        background: linear-gradient(135deg, #ff6b6b, #ee5a24);
        color: white;
        border-radius: 10px;
        padding: 2rem;
        text-align: center;
    }
</style>
{% endblock %}

{% block content %}
<div class="container py-4">
    <div class="row">
        <div class="col-12">
            <h1 class="mb-4">售后服务</h1>
        </div>
    </div>
    
    <div class="row">
        <!-- 紧急通道 -->
        <div class="col-lg-4 mb-4">
            <div class="emergency-contact">
                <h3 class="mb-3">
                    <i class="fas fa-exclamation-circle me-2"></i>
                    紧急通道
                </h3>
                <p class="mb-4">遇到紧急问题？立即联系我们</p>
                <button class="btn btn-light" data-bs-toggle="modal" data-bs-target="#wechatModal">
                    <i class="fab fa-weixin me-2"></i>微信紧急联系
                </button>
            </div>
        </div>
        
        <!-- 工单提交表单 -->
        <div class="col-lg-8 mb-4">
            <div class="card shadow-sm">
                <div class="card-header">
                    <h5 class="mb-0">提交工单</h5>
                </div>
                <div class="card-body">
                    <form id="ticketForm" class="ticket-form">
                        <div class="mb-3">
                            <label for="contactName" class="form-label">联系人姓名</label>
                            <input type="text" class="form-control" id="contactName" required>
                        </div>
                        
                        <div class="mb-3">
                            <label for="contactPhone" class="form-label">联系电话</label>
                            <input type="tel" class="form-control" id="contactPhone" required>
                        </div>
                        
                        <div class="mb-3">
                            <label for="contactEmail" class="form-label">联系邮箱</label>
                            <input type="email" class="form-control" id="contactEmail" required>
                        </div>
                        
                        <div class="mb-3">
                            <label for="productSelect" class="form-label">相关产品</label>
                            <select class="form-select" id="productSelect" required>
                                <option value="">请选择相关产品</option>
                                <option value="1">产品一</option>
                                <option value="2">产品二</option>
                                <option value="3">产品三</option>
                            </select>
                        </div>
                        
                        <div class="mb-3">
                            <label for="ticketTitle" class="form-label">工单标题</label>
                            <input type="text" class="form-control" id="ticketTitle" required>
                        </div>
                        
                        <div class="mb-3">
                            <label for="ticketContent" class="form-label">问题描述</label>
                            <textarea class="form-control" id="ticketContent" rows="5" required></textarea>
                        </div>
                        
                        <div class="mb-3">
                            <label for="prioritySelect" class="form-label">优先级</label>
                            <select class="form-select" id="prioritySelect">
                                <option value="1">低</option>
                                <option value="2" selected>中</option>
                                <option value="3">高</option>
                                <option value="4">紧急</option>
                            </select>
                        </div>
                        
                        <button type="submit" class="btn btn-primary w-100" id="submitTicketBtn">
                            <i class="fas fa-paper-plane me-2"></i>提交工单
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 工单历史 -->
    <div class="row">
        <div class="col-12">
            <div class="card shadow-sm">
                <div class="card-header">
                    <h5 class="mb-0">工单历史</h5>
                </div>
                <div class="card-body">
                    <div id="ticketsContainer">
                        <!-- 工单列表将通过JavaScript动态加载 -->
                        <div class="text-center py-5">
                            <div class="spinner-border text-primary" role="status">
                                <span class="visually-hidden">加载中...</span>
                            </div>
                            <p class="mt-2">正在加载工单历史...</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 微信二维码模态框 -->
<div class="modal fade" id="wechatModal" tabindex="-1" aria-labelledby="wechatModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="wechatModalLabel">紧急联系</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body text-center">
                <p>扫码添加微信，快速响应紧急需求</p>
                <img src="/static/images/wechat-qrcode.jpg" alt="微信二维码" class="img-fluid mb-3" style="max-width: 200px;">
                <p class="text-muted small">微信ID: TaiYiSupport</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
    // 售后服务页面JavaScript
    document.addEventListener('DOMContentLoaded', function() {
        console.log('售后服务页面加载完成');
        
        // 初始化产品列表
        loadProducts();
        
        // 初始化工单历史
        loadTickets();
        
        // 工单提交表单事件
        document.getElementById('ticketForm').addEventListener('submit', function(e) {
            e.preventDefault();
            submitTicket();
        });
    });
    
    // 提交工单
    function submitTicket() {
        const formData = {
            contact_name: document.getElementById('contactName').value.trim(),
            contact_phone: document.getElementById('contactPhone').value.trim(),
            contact_email: document.getElementById('contactEmail').value.trim(),
            product_id: document.getElementById('productSelect').value,
            title: document.getElementById('ticketTitle').value.trim(),
            content: document.getElementById('ticketContent').value.trim(),
            priority: document.getElementById('prioritySelect').value
        };
        
        // 基础验证
        if (!formData.contact_name || !formData.contact_phone || !formData.contact_email || 
            !formData.product_id || !formData.title || !formData.content) {
            showNotification('请填写所有必填字段', 'warning');
            return;
        }
        
        // 验证手机号格式
        const phoneRegex = /^1[3-9]\d{9}$/;
        if (!phoneRegex.test(formData.contact_phone)) {
            showNotification('请输入正确的手机号码', 'warning');
            return;
        }
        
        // 验证邮箱格式
        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        if (!emailRegex.test(formData.contact_email)) {
            showNotification('请输入正确的邮箱地址', 'warning');
            return;
        }
        
        // 显示加载状态
        const submitBtn = document.getElementById('submitTicketBtn');
        const originalText = submitBtn.innerHTML;
        submitBtn.innerHTML = '<span class="spinner-border spinner-border-sm me-2" role="status"></span>提交中...';
        submitBtn.disabled = true;
        
        // 调用API提交工单
        apiRequest('/api/v1/user/tickets', {
            method: 'POST',
            body: JSON.stringify(formData)
        })
        .then(data => {
            if (data.success) {
                showNotification('工单提交成功！', 'success');
                document.getElementById('ticketForm').reset();
                loadTickets(); // 重新加载工单列表
            } else {
                showNotification('工单提交失败: ' + data.message, 'error');
            }
        })
        .catch(error => {
            showNotification('工单提交失败，请稍后重试', 'error');
            console.error('提交工单失败:', error);
        })
        .finally(() => {
            submitBtn.innerHTML = originalText;
            submitBtn.disabled = false;
        });
    }
    
    // 加载工单历史
    function loadTickets() {
        // 获取手机号
        const phone = document.getElementById('contactPhone').value.trim();
        
        // 如果没有输入手机号，不加载工单列表
        if (!phone) {
            document.getElementById('ticketsContainer').innerHTML = `
                <div class="text-center py-5">
                    <i class="fas fa-info-circle fa-2x text-muted mb-3"></i>
                    <h4 class="text-muted">请输入手机号查看工单历史</h4>
                    <p class="text-muted">输入手机号后将自动显示相关工单记录</p>
                </div>
            `;
            return;
        }
        
        // 验证手机号格式
        const phoneRegex = /^1[3-9]\d{9}$/;
        if (!phoneRegex.test(phone)) {
            document.getElementById('ticketsContainer').innerHTML = `
                <div class="text-center py-5">
                    <i class="fas fa-exclamation-circle fa-2x text-warning mb-3"></i>
                    <h4 class="text-warning">手机号格式不正确</h4>
                    <p class="text-muted">请输入正确的11位手机号码</p>
                </div>
            `;
            return;
        }
        
        // 显示加载状态
        document.getElementById('ticketsContainer').innerHTML = `
            <div class="text-center py-5">
                <div class="spinner-border text-primary" role="status">
                    <span class="visually-hidden">加载中...</span>
                </div>
                <p class="mt-2">正在加载工单历史...</p>
            </div>
        `;
        
        // 调用API获取工单列表
        apiRequest(`/api/v1/user/tickets?phone=${phone}`)
            .then(data => {
                if (data.success) {
                    renderTickets(data.data);
                } else {
                    showNotification('加载工单历史失败: ' + data.message, 'error');
                }
            })
            .catch(error => {
                showNotification('加载工单历史失败，请稍后重试', 'error');
                console.error('加载工单历史失败:', error);
            });
    }
    
    // 渲染工单列表
    function renderTickets(tickets) {
        const container = document.getElementById('ticketsContainer');
        
        if (tickets.length === 0) {
            container.innerHTML = `
                <div class="text-center py-5">
                    <i class="fas fa-ticket-alt fa-3x text-muted mb-3"></i>
                    <h4 class="text-muted">暂无工单记录</h4>
                    <p class="text-muted">您还没有提交过工单</p>
                </div>
            `;
            return;
        }
        
        let ticketsHtml = '';
        tickets.forEach(ticket => {
            const statusClass = ticket.status === 1 ? 'ticket-status-open' : 'ticket-status-closed';
            const statusText = ticket.status === 1 ? '处理中' : '已关闭';
            const priorityText = ['未知', '低', '中', '高', '紧急'][ticket.priority] || '未知';
            
            ticketsHtml += `
                <div class="ticket-item ${statusClass}">
                    <div class="row">
                        <div class="col-md-9">
                            <h5 class="mb-2">${ticket.title}</h5>
                            <p class="mb-2">${ticket.description.substring(0, 100)}${ticket.description.length > 100 ? '...' : ''}</p>
                            <div class="d-flex flex-wrap gap-3 text-muted">
                                <small><i class="fas fa-calendar me-1"></i> ${formatDate(ticket.create_time)}</small>
                                <small><i class="fas fa-user me-1"></i> ${ticket.contact_person}</small>
                                <small><i class="fas fa-box me-1"></i> ${ticket.product_name || '未知产品'}</small>
                                <small><i class="fas fa-exclamation-circle me-1"></i> ${priorityText}</small>
                            </div>
                        </div>
                        <div class="col-md-3 text-md-end">
                            <span class="badge ${ticket.status === 1 ? 'bg-info' : 'bg-success'}">
                                ${statusText}
                            </span>
                            <div class="mt-2">
                                <button class="btn btn-sm btn-outline-primary" onclick="viewTicket('${ticket.ticket_number}')">
                                    <i class="fas fa-eye me-1"></i>查看
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            `;
        });
        
        container.innerHTML = ticketsHtml;
    }
    
    // 查看工单详情
    function viewTicket(ticketId) {
        showNotification('查看工单详情功能待实现', 'info');
        // 这里可以跳转到工单详情页面或显示模态框
    }
    
    // 加载产品列表
    function loadProducts() {
        // 调用API获取产品列表
        apiRequest('/api/v1/user/products')
            .then(data => {
                if (data.success) {
                    renderProducts(data.data.products || []);
                } else {
                    showNotification('加载产品列表失败: ' + data.message, 'error');
                }
            })
            .catch(error => {
                showNotification('加载产品列表失败，请稍后重试', 'error');
                console.error('加载产品列表失败:', error);
            });
    }
    
    // 渲染产品列表
    function renderProducts(products) {
        const select = document.getElementById('productSelect');
        
        // 清空现有选项（保留默认选项）
        select.innerHTML = '<option value="">请选择相关产品</option>';
        
        // 添加产品选项
        products.forEach(product => {
            const option = document.createElement('option');
            option.value = product.product_id;
            option.textContent = product.product_name;
            select.appendChild(option);
        });
    }
    
    // 监听手机号输入框变化，自动加载工单历史
    document.getElementById('contactPhone').addEventListener('input', function() {
        // 延迟加载，避免频繁请求
        clearTimeout(this.loadTimer);
        this.loadTimer = setTimeout(() => {
            loadTickets();
        }, 500);
    });
</script>
{% endblock %}