{% 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 device_type_stats %}
        <div class="stats_section">
            <h4 class="stats_section_title">设备类型分布</h4>
            <div class="stats_grid">
                {% for device_type, count in device_type_stats.items() %}
                <a href="{{ url_for('receive', device_type=device_type, branch=selected_branch, per_page=request.args.get('per_page', '50')) }}" class="stats_card device-type-{{ device_type | replace(' ', '-') }} {% if device_type == request.args.get('device_type') %}active{% endif %}">
                    <span class="stats_card_label">{{ device_type }}</span>
                    <span class="stats_card_value">{{ count }}</span>
                </a>
                {% endfor %}
            </div>
        </div>
        {% endif %}
        
        <!-- 项目类型统计 -->
        {% if project_type_stats %}
        <div class="stats_section">
            <h4 class="stats_section_title">项目类型分布</h4>
            <div class="stats_grid">
                {% for project_type, count in project_type_stats.items() %}
                <a href="{{ url_for('receive', project_type=project_type, branch=selected_branch, per_page=request.args.get('per_page', '50')) }}" class="stats_card project-type-{{ project_type | replace(' ', '-') }} {% if project_type == request.args.get('project_type') %}active{% endif %}">
                    <span class="stats_card_label">{{ project_type }}</span>
                    <span class="stats_card_value">{{ count }}</span>
                </a>
                {% endfor %}
            </div>
        </div>
        {% endif %}
    </div>

    <!-- 筛选区域 -->
    <div class="receive_filter">
        <div class="filter_header">
            <h4 class="filter_title">工单筛选</h4>
            <div class="filter_actions">
                {% if current_user.branch == '交付中心' %}
                <button onclick="recallAllOrders()" class="receive_btn receive_btn_warning">一键追回所有工单</button>
                {% endif %}
                {% if request.args.get('device_type') or request.args.get('project_type') or selected_branch %}
                <a href="{{ url_for('receive', per_page=request.args.get('per_page', '50')) }}" class="receive_btn receive_btn_clear">清除所有筛选</a>
                {% endif %}
            </div>
        </div>
        <form method="GET" action="{{ url_for('receive') }}" class="filter_form">
            {% if current_user.branch == '交付中心' %}
            <div class="filter_group">
                <label class="filter_label">所属支局</label>
                <select name="branch" class="filter_select">
                    <option value="">所有支局</option>
                    {% for branch in branches %}
                    <option value="{{ branch }}" {% if branch == selected_branch %}selected{% endif %}>{{ branch }}</option>
                    {% endfor %}
                </select>
            </div>
            {% endif %}
            
            <div class="filter_group">
                <label class="filter_label">设备类型</label>
                <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>
            </div>
            
            <div class="filter_group">
                <label class="filter_label">项目类型</label>
                <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>
            </div>
            
            <input type="hidden" name="page" value="1">
            <input type="hidden" name="per_page" value="{{ request.args.get('per_page', '50') }}">
            
            <div class="filter_group">
                <button type="submit" class="receive_btn receive_btn_primary">应用筛选</button>
            </div>
        </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 %}