{% extends "base.html" %}
{% block content %}
<link rel="stylesheet" href="{{ url_for('static', filename='css/receive.css') }}">

    <!-- 统计信息 -->
    <div class="receive_stats">
        <div class="stats_item">
            <span class="stats_label">在途工单总数</span>
            <span class="stats_value">{{ total_orders }}</span>
        </div>
        {% if current_user.branch == '交付中心' %}
        <div class="stats_branches_row">
            {% for branch, count in branch_stats.items() %}
            <a href="{{ url_for('receive', branch=branch) }}" class="branch_stat {% if branch == selected_branch %}active{% endif %}">
                <span class="branch_name">{{ branch }}</span>
                <span class="branch_count">{{ count }}</span>
            </a>
            {% endfor %}
        </div>
        <div class="receive_actions">
            <button onclick="recallAllOrders()" class="receive_btn receive_btn_warning">一键追回所有工单</button>
            {% if selected_branch %}
            <a href="{{ url_for('receive') }}" class="receive_btn receive_btn_secondary">清除筛选</a>
            {% endif %}
        </div>
        {% endif %}
    </div>

    <!-- 筛选区域 -->
    <div class="receive_filter">
        <form method="GET" action="{{ url_for('receive') }}" class="filter_form">
            <select name="device_type" class="filter_select">
                <option value="">所有设备类型</option>
                {% for device_type in device_types %}
                <option value="{{ device_type }}" {% if device_type == request.args.get('device_type') %}selected{% endif %}>{{ device_type }}</option>
                {% endfor %}
            </select>
            <select name="project_type" class="filter_select">
                <option value="">所有项目类型</option>
                {% for project_type in project_types %}
                <option value="{{ project_type }}" {% if project_type == request.args.get('project_type') %}selected{% endif %}>{{ project_type }}</option>
                {% endfor %}
            </select>
            <input type="hidden" name="branch" value="{{ selected_branch }}">
            <input type="hidden" name="page" value="1">
            <input type="hidden" name="per_page" value="{{ request.args.get('per_page', '50') }}">
            <button type="submit" class="receive_btn receive_btn_primary">筛选</button>
            {% if request.args.get('device_type') or request.args.get('project_type') %}
            <a href="{{ url_for('receive', branch=selected_branch, per_page=request.args.get('per_page', '50')) }}" class="receive_btn receive_btn_secondary">清除筛选</a>
            {% endif %}
        </form>
    </div>

    <table class="receive_table">
        <thead>
            <tr>
                <th>工单号</th>
                <th>所属支局</th>
                <th>故障设备</th>
                <th>设备类型</th>
                <th>项目类型</th>
                <th>派单时间</th>
                <th>派单时长</th>
            </tr>
        </thead>
        <tbody>
            {% for work_order in work_orders %}
            <tr>
                <td>{{ work_order.order_id }}</td>
                <td>{{ work_order.device.branch }}</td>
                <td><a href="{{ url_for('receive_detail', work_order_id=work_order.order_id) }}" class="receive_action">{{ work_order.device.device_id }}</a></td>
                <td>{{ work_order.device.device_type }}</td>
                <td>{{ work_order.device.project_type }}</td>
                <td>{{ work_order.dispatch_time }}</td>
                <td>{{ work_order.duration }}</td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
    <!-- 移动端卡片视图 -->
    <div class="card_container">
        {% for work_order in work_orders %}
        <a href="{{ url_for('receive_detail', work_order_id=work_order.order_id) }}" class="receive_card">
            <div class="receive_card_header">
                <span class="receive_card_title">工单号: {{ work_order.order_id }}</span>
                <span class="receive_card_duration">{{ work_order.duration }}</span>
            </div>
            <div class="receive_card_content">
                <div class="receive_card_item">
                    <span class="receive_card_label">故障设备</span>
                    <span class="receive_card_value">{{ work_order.device.device_id }}</span>
                </div>
                <div class="receive_card_item">
                    <span class="receive_card_label">设备类型</span>
                    <span class="receive_card_value" data-device-type="{{ work_order.device.device_type }}">{{ work_order.device.device_type }}</span>
                </div>
                <div class="receive_card_item">
                    <span class="receive_card_label">所属支局</span>
                    <span class="receive_card_value">{{ work_order.device.branch }}</span>
                </div>
                <div class="receive_card_item">
                    <span class="receive_card_label">项目类型</span>
                    <span class="receive_card_value">{{ work_order.device.project_type }}</span>
                </div>
                <div class="receive_card_item">
                    <span class="receive_card_label">派单时间</span>
                    <span class="receive_card_value">{{ work_order.dispatch_time }}</span>
                </div>
            </div>
        </a>
        {% endfor %}
    </div>
    <!-- 添加分页 -->
    <div class="receive_pagination">
        {% if work_orders.has_prev %}
            <a href="{{ url_for('receive', page=work_orders.prev_num, branch=selected_branch, device_type=request.args.get('device_type', ''), project_type=request.args.get('project_type', ''), per_page=request.args.get('per_page', '50')) }}" class="page_link">上一页</a>
        {% endif %}
        
        <span class="page_info">第 {{ work_orders.page }} 页，共 {{ work_orders.pages }} 页</span>
        
        <select class="per_page_select" onchange="changePerPage(this.value)">
            <option value="10" {% if request.args.get('per_page', '50') == '10' %}selected{% endif %}>10条/页</option>
            <option value="20" {% if request.args.get('per_page', '50') == '20' %}selected{% endif %}>20条/页</option>
            <option value="50" {% if request.args.get('per_page', '50') == '50' %}selected{% endif %}>50条/页</option>
            <option value="100" {% if request.args.get('per_page', '50') == '100' %}selected{% endif %}>100条/页</option>
        </select>
        
        {% if work_orders.has_next %}
            <a href="{{ url_for('receive', page=work_orders.next_num, branch=selected_branch, device_type=request.args.get('device_type', ''), project_type=request.args.get('project_type', ''), per_page=request.args.get('per_page', '50')) }}" class="page_link">下一页</a>
        {% endif %}
    </div>

    <!-- 确认追回弹窗 -->
    <div id="confirmModal" class="modal">
        <div class="modal-content">
            <h3>确认追回</h3>
            <div class="modal-body">
                <i class="modal-icon warning"></i>
                <p>确定要追回所有在途工单吗？</p>
            </div>
            <div class="modal-buttons">
                <button onclick="confirmRecall()" class="receive_btn receive_btn_warning">确定</button>
                <button onclick="closeModal()" class="receive_btn receive_btn_secondary">取消</button>
            </div>
        </div>
    </div>

    <div id="resultModal" class="modal">
        <div class="modal-content">
            <h3>操作结果</h3>
            <div class="modal-body">
                <i class="modal-icon info"></i>
                <p id="resultMessage"></p>
            </div>
            <div class="modal-buttons">
                <button onclick="closeResultModal()" class="receive_btn receive_btn_primary">确定</button>
            </div>
        </div>
    </div>
   
<script src="{{ url_for('static', filename='js/receive.js') }}"></script>
{% endblock %}