{% extends "base.html" %}
{% block content %}
<div class="history_detail_container">
    <!-- 工单信息卡片 -->
    <div class="detail_card">
        <div class="detail_header">
            <h3 class="detail_title">工单详情 #{{ handling.order_id }}</h3>
            <span class="detail_status">{{ '申报' if order_type == 'manual' else '系统' }}</span>
        </div>

        <div class="detail_section">
            <h4 class="section_title">基本信息</h4>
            <div class="detail_grid">
                <div class="detail_item">
                    <span class="detail_label">所属支局</span>
                    <span class="detail_value">{{ handling.branch }}</span>
                </div>
                <div class="detail_item">
                    <span class="detail_label">故障设备</span>
                    <span class="detail_value">{{ handling.device_id }}</span>
                </div>
                <div class="detail_item">
                    <span class="detail_label">处理人</span>
                    <span class="detail_value highlight">{{ handling.handler }}</span>
                </div>
                {% if order_type == 'manual' %}
                <div class="detail_item">
                    <span class="detail_label">项目类型</span>
                    <span class="detail_value">{{ handling.project_type }}</span>
                </div>
                <div class="detail_item">
                    <span class="detail_label">设备位置</span>
                    <span class="detail_value">{{ handling.device_location }}</span>
                </div>
                <div class="detail_item">
                    <span class="detail_label">故障时间</span>
                    <span class="detail_value">{{ handling.fault_time.strftime('%Y-%m-%d %H:%M:%S') }}</span>
                </div>
                {% else %}
                <div class="detail_item">
                    <span class="detail_label">处理时间</span>
                    <span class="detail_value">{{ handling.restore_time.strftime('%Y-%m-%d %H:%M:%S') }}</span>
                </div>
                {% endif %}
            </div>
        </div>

        <div class="detail_section">
            <h4 class="section_title">故障信息</h4>
            <div class="detail_grid">
                <div class="detail_item">
                    <span class="detail_label">故障类型</span>
                    <span class="detail_value badge">{{ handling.fault_type }}</span>
                </div>
                <div class="detail_item">
                    <span class="detail_label">故障对接人</span>
                    <span class="detail_value">{{ handling.contact_person }}</span>
                </div>
                <div class="detail_item">
                    <span class="detail_label">联系电话</span>
                    <span class="detail_value">{{ handling.contact_phone }}</span>
                </div>
                <div class="detail_item">
                    <span class="detail_label">距离支局</span>
                    <span class="detail_value">{{ handling.distance_from_branch }} 公里</span>
                </div>
            </div>
        </div>

        <div class="detail_section">
            <h4 class="section_title">处理详情</h4>
            <div class="detail_description">
                <p>{{ handling.handle_description }}</p>
            </div>
            {% if handling.remark %}
            <div class="detail_remark">
                <h5>备注信息</h5>
                <p>{{ handling.remark }}</p>
            </div>
            {% endif %}
        </div>
        
        {% if handling.photo_paths %}
        <div class="detail_section">
            <h4 class="section_title">现场图片</h4>
            <div class="photo_grid">
                {% for photo in handling.photo_paths.split(',') %}
                <div class="photo_item">
                    <img src="{{ url_for('static', filename='uploads/' + photo) }}" alt="现场图片"
                         onclick="showFullImage(this.src)">
                </div>
                {% endfor %}
            </div>
        </div>
        {% endif %}
    </div>

    <div class="detail_actions">
        <a href="{{ url_for('history') }}" class="detail_btn detail_btn_secondary">
            <i class="fas fa-arrow-left"></i> 返回列表
        </a>
    </div>
</div>

<!-- 图片预览模态框 -->
<div id="imageModal" class="modal">
    <span class="modal_close">&times;</span>
    <img class="modal_content" id="modalImage">
</div>

<script>
function showFullImage(src) {
    var modal = document.getElementById("imageModal");
    var modalImg = document.getElementById("modalImage");
    modal.style.display = "block";
    modalImg.src = src;
}

var modal = document.getElementById("imageModal");
var span = document.getElementsByClassName("modal_close")[0];

span.onclick = function() {
    modal.style.display = "none";
}

window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}
</script>
{% endblock %}