{% extends "base.html" %}
{% block content %}
<link rel="stylesheet" href="{{ url_for('static', filename='css/receive_detail.css') }}">
<div class="receive_detail_container">
    <!-- 工单信息卡片 -->
    <div class="detail_card">
        <h3 class="detail_title">工单信息</h3>
        <div class="detail_grid">
            <div class="detail_item">
                <span class="detail_label">工单号：</span>
                <span class="detail_value">{{ work_order.order_id }}</span>
            </div>
            <div class="detail_item">
                <span class="detail_label">所属支局：</span>
                <span class="detail_value">{{ work_order.device.branch }}</span>
            </div>
            <div class="detail_item">
                <span class="detail_label">故障设备：</span>
                <span class="detail_value">{{ work_order.device.device_id }}</span>
            </div>
            <div class="detail_item">
                <span class="detail_label">设备类型：</span>
                <span class="detail_value">{{ work_order.device.device_type }}</span>
            </div>
            <div class="detail_item">
                <span class="detail_label">项目类型：</span>
                <span class="detail_value">{{ work_order.device.project_type }}</span>
            </div>
            <div class="detail_item">
                <span class="detail_label">派单时间：</span>
                <span class="detail_value">{{ work_order.dispatch_time }}</span>
            </div>
            <div class="detail_item">
                <span class="detail_label">关联账号：</span>
                <span class="detail_value">{{ work_order.device.account }}</span>
            </div>
        </div>
    </div>

    <!-- 处理信息表单 -->
    <div class="detail_card">
        <h3 class="detail_title">处理信息</h3>
        <form method="POST" enctype="multipart/form-data" class="detail_form">
            <div class="form-group">
                <label for="handler">故障处理人<span class="required">*</span></label>
                <input type="text" id="handler" name="handler" value="{{ current_user.name }}" required>
            </div>
            <div class="form-group">
                <label for="fault_type">故障类型<span class="required">*</span></label>
                <select id="fault_type" name="fault_type" required>
                    <option value="">请选择故障类型</option>
                    <option value="光猫故障">光猫故障</option>
                    <option value="设备故障">设备故障</option>
                    <option value="电源故障">电源故障</option>
                    <option value="电路故障">电路故障</option>
                    <option value="网线故障">网线故障</option>
                    <option value="皮线故障">皮线故障</option>
                    <option value="数据问题">数据问题</option>
                    <option value="用户欠费">用户欠费</option>
                    <option value="其他">其他</option>
                </select>
            </div>
            <div class="form-group">
                <label for="handle_description">处理描述<span class="required">*</span></label>
                <textarea id="handle_description" name="handle_description" 
                    placeholder="请简述处理过程，如：光猫电源适配器坏，更换光猫电源适配器后恢复。" required></textarea>
            </div>
            <div class="form-group">
                <label for="photo">现场图片（最多5张）</label>
                <input type="file" id="photo" name="photo" multiple accept="image/*" class="detail_file_input">
            </div>
            <div class="form-group">
                <label for="contact_person">故障对接人<span class="required">*</span></label>
                <input type="text" id="contact_person" name="contact_person" 
                    value="{{ work_order.contact_person }}" 
                    placeholder="请输入本次故障单位对接人" required>
            </div>
            <div class="form-group">
                <label for="contact_phone">联系电话</label>
                <input type="tel" id="contact_phone" name="contact_phone" 
                    value="{{ work_order.contact_phone }}" 
                    placeholder="请输入本次故障单位对接人联系电话">
            </div>
            <div class="form-group">
                <label for="distance_from_branch">距离支局公里数<span class="required">*</span></label>
                <input type="number" id="distance_from_branch" name="distance_from_branch" 
                    step="0.1" placeholder="请输入支局办公室到故障地点实际距离" required>
            </div>
            <div class="form-group">
                <label for="remark">备注</label>
                <textarea id="remark" name="remark" 
                    placeholder="如有其他需要说明的信息请在此备注"></textarea>
            </div>
            <div class="form_tips">
                <p>注意事项</p>
                <ul>
                    <li>现场照片最多可上传5张，支持jpg、jpeg、png</li>
                    <li>距离支局公里数请填写支局办公室到故障地点实际距离</li>
                    <li>带 <span class="required">*</span> 的字段为必填项</li>
                </ul>
            </div>
            <div class="detail_actions">
                <button type="submit" class="detail_btn detail_btn_primary">提交</button>
                {% if current_user.role == '统计员' %}
                <a href="{{ url_for('recall_order', order_id=work_order.order_id) }}" 
                   class="detail_btn detail_btn_danger"
                   onclick="return confirm('确定要追回这张工单吗？')">追回</a>
                {% endif %}
                <a href="{{ url_for('receive') }}" class="detail_btn detail_btn_secondary">返回</a>
            </div>
        </form>
    </div>
</div>

<script>
document.getElementById('fault_type').addEventListener('change', function() {
    const faultType = this.value;
    const descriptionField = document.getElementById('handle_description');
    
    // 根据故障类型设置默认描述文本
    const descriptions = {
        '光猫故障': '检查发现光猫故障，更换光猫后恢复正常。',
        '设备故障': '检查发现设备故障，重启设备后恢复正常。',
        '电源故障': '检查发现电源适配器故障，更换电源适配器后恢复正常。',
        '电路故障': '检查发现电路故障，修复电路后恢复正常。',
        '网线故障': '检查发现网线故障，更换网线后恢复正常。',
        '皮线故障': '检查发现皮线故障，更换皮线后恢复正常。',
        '数据问题': '检查发现数据配置异常，修改配置后恢复正常。',
        '用户欠费': '检查发现用户已欠费，通知用户缴费后恢复正常。',
        '其他': ''
    };
    
    // 如果选择了故障类型，则填入对应的描述文本
    if (faultType && descriptions[faultType]) {
        descriptionField.value = descriptions[faultType];
    } else {
        descriptionField.value = '';
    }
});
</script>
{% endblock %}