{% extends "base.html" %}

{% block content %}
<h2 class="mb-4"><i class="bi bi-check-circle"></i> 审批操作</h2>

<div class="card">
    <div class="card-body">
        <div class="mb-4">
            <h5>📋 {{ task.title }}</h5>
            <p class="text-muted">申请人：{{ task.applicant }} | 提交时间：{{ task.created_at }}</p>
            <div class="bg-light p-3 rounded">
                {{ task.content }}
            </div>
            {% if task.attachment_name %}
                <div class="mt-2">
                    <a href="{{ url_for('download_attachment', task_id=task.id) }}" class="text-primary">
                        <i class="bi bi-paperclip"></i> {{ task.attachment_name }}
                    </a>
                </div>
            {% endif %}
        </div>

        <hr>

        <form method="post" id="approveForm">
            <div class="mb-3">
                <label class="form-label">审批意见</label>
                <textarea name="comment" class="form-control" rows="4" placeholder="请输入审批意见...">同意</textarea>
            </div>

            <div class="d-flex gap-3">
                <button type="submit" name="action" value="approved" class="btn btn-success btn-lg" id="approveBtn">
                    <i class="bi bi-check-circle"></i> 通过
                </button>
                <button type="submit" name="action" value="rejected" class="btn btn-danger btn-lg" id="rejectBtn">
                    <i class="bi bi-x-circle"></i> 驳回
                </button>
                <a href="{{ url_for('task_detail', task_id=task.id) }}" class="btn btn-outline-secondary btn-lg">
                    取消
                </a>
            </div>
        </form>
    </div>
</div>

<script>
// 防止重复提交
document.getElementById('approveForm').addEventListener('submit', function(e) {
    const approveBtn = document.getElementById('approveBtn');
    const rejectBtn = document.getElementById('rejectBtn');
    
    // 禁用按钮，防止重复点击
    approveBtn.disabled = true;
    rejectBtn.disabled = true;
    approveBtn.innerHTML = '<span class="spinner-border spinner-border-sm" role="status"></span> 处理中...';
    rejectBtn.innerHTML = '<span class="spinner-border spinner-border-sm" role="status"></span> 处理中...';
    
    // 如果10秒后还没有跳转，恢复按钮（防止卡死）
    setTimeout(function() {
        approveBtn.disabled = false;
        rejectBtn.disabled = false;
        approveBtn.innerHTML = '<i class="bi bi-check-circle"></i> 通过';
        rejectBtn.innerHTML = '<i class="bi bi-x-circle"></i> 驳回';
    }, 10000);
});
</script>
{% endblock %}