<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>巡检异常</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet">
    <style>
        body { font-family: "Microsoft YaHei", sans-serif; background: #f0f2f5; }
        .layout { display: flex; min-height: 100vh; }
        .sidebar { width: 250px; background: #001529; color: #fff; display: flex; flex-direction: column; }
        .logo { height: 64px; padding: 16px; display: flex; align-items: center; background: #002140; }
        .logo i { font-size: 24px; margin-right: 12px; }
        .logo span { font-size: 16px; font-weight: bold; white-space: nowrap; }
        .menu-frame { flex: 1; width: 100%; border: none; }
        .main-content { flex: 1; display: flex; flex-direction: column; }
        .top-bar { height: 64px; background: #fff; padding: 0 24px; display: flex; justify-content: space-between; align-items: center; box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08); }
        .breadcrumb { display: flex; align-items: center; color: #666; }
        .breadcrumb i { margin-right: 8px; }
        .user-info { display: flex; align-items: center; color: #666; }
        .user-info i { margin: 0 8px; cursor: pointer; }
        .user-info i:hover { color: #1890ff; }
        .content { flex: 1; padding: 24px; overflow: auto; }
        .page-title { margin-bottom: 24px; color: #333; }
        
        .search-section {
            background: #fff;
            padding: 24px;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0, 21, 41, 0.08);
            margin-bottom: 24px;
        }
        .search-form {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 16px;
            align-items: end;
        }
        .form-group {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        .form-group label {
            color: #333;
            font-size: 14px;
            font-weight: 500;
        }
        .form-control {
            padding: 8px 12px;
            border: 1px solid #d9d9d9;
            border-radius: 6px;
            font-size: 14px;
            transition: border-color 0.3s;
        }
        .form-control:focus {
            outline: none;
            border-color: #1890ff;
            box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
        }
        .btn {
            padding: 8px 16px;
            border: none;
            border-radius: 6px;
            font-size: 14px;
            cursor: pointer;
            transition: all 0.3s;
        }
        .btn-primary {
            background: #1890ff;
            color: #fff;
        }
        .btn-primary:hover {
            background: #40a9ff;
        }
        .btn-default {
            background: #fff;
            color: #666;
            border: 1px solid #d9d9d9;
        }
        .btn-default:hover {
            border-color: #1890ff;
            color: #1890ff;
        }
        
        .table-container {
            background: #fff;
            padding: 24px;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0, 21, 41, 0.08);
        }
        .table {
            width: 100%;
            border-collapse: separate;
            border-spacing: 0;
        }
        .table th, .table td {
            padding: 12px 16px;
            text-align: left;
            border-bottom: 1px solid #f0f0f0;
        }
        .table th {
            background: #fafafa;
            font-weight: 500;
            color: #333;
        }
        .table tr:last-child td {
            border-bottom: none;
        }
        .table tr:hover {
            background: #fafafa;
        }
        .action-link {
            color: #1890ff;
            text-decoration: none;
            margin-right: 12px;
        }
        .action-link:hover {
            color: #40a9ff;
        }
        .status-tag {
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 12px;
            font-weight: 500;
        }
        .status-unprocessed { background: #fff2e8; color: #fa8c16; border: 1px solid #ffd591; }
        .status-processed { background: #f6ffed; color: #52c41a; border: 1px solid #b7eb8f; }
        .status-pending { background: #e6f7ff; color: #1890ff; border: 1px solid #91d5ff; }
        .status-approved { background: #f6ffed; color: #52c41a; border: 1px solid #b7eb8f; }
        .status-rejected { background: #fff1f0; color: #ff4d4f; border: 1px solid #ffccc7; }
        
        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            background: rgba(0, 0, 0, 0.4);
            z-index: 9999;
        }
        .modal-content {
            background: #fff;
            padding: 32px 32px 24px 32px;
            border-radius: 10px;
            max-width: 800px;
            width: 90vw;
            max-height: 90vh;
            overflow: auto;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
        .modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 24px;
        }
        .modal-title {
            font-size: 20px;
            font-weight: 500;
            color: #333;
        }
        .modal-close {
            font-size: 24px;
            cursor: pointer;
            color: #999;
        }
        .modal-close:hover {
            color: #666;
        }
        .modal-body {
            margin-bottom: 24px;
        }
        .modal-footer {
            display: flex;
            justify-content: flex-end;
            gap: 12px;
        }
        .detail-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 16px;
        }
        .detail-item {
            display: flex;
            flex-direction: column;
            gap: 4px;
        }
        .detail-label {
            color: #666;
            font-size: 14px;
        }
        .detail-value {
            color: #333;
            font-size: 14px;
            word-break: break-all;
        }
        .content-box {
            background: #fafafa;
            padding: 12px;
            border-radius: 6px;
            margin-top: 8px;
        }
        
        .tab-btn {
            flex: 1;
            padding: 12px 24px;
            border: none;
            background: #fff;
            color: #666;
            font-size: 14px;
            cursor: pointer;
            transition: all 0.3s;
            border-right: 1px solid #f0f0f0;
        }
        .tab-btn:last-child {
            border-right: none;
        }
        .tab-btn:hover {
            background: #f5f5f5;
            color: #1890ff;
        }
        .tab-btn.active {
            background: #1890ff;
            color: #fff;
        }
        .tab-btn.active:hover {
            background: #40a9ff;
        }
    </style>
</head>
<body>
<div class="layout">
    <div class="sidebar">
        <div class="logo">
            <i class="fas fa-shield-alt"></i>
            <span>食品安全管理系统</span>
        </div>
        <iframe src="菜单.html" frameborder="0" class="menu-frame"></iframe>
    </div>
    <div class="main-content">
        <div class="top-bar">
            <div class="breadcrumb">
                <i class="fas fa-home"></i>
                <span>巡检异常</span>
            </div>
            <div class="user-info">
                <i class="fas fa-user-circle"></i>
                <span>管理员</span>
                <i class="fas fa-sign-out-alt"></i>
            </div>
        </div>
        <div class="content">
            <h1 class="page-title">巡检异常</h1>
            
            <div class="search-section">
                <form class="search-form">
                    <div class="form-group">
                        <label>街道</label>
                        <select class="form-control" id="searchStreet" onchange="updateTownship()">
                            <option value="">全部街道</option>
                            <option value="中山路街道">中山路街道</option>
                            <option value="台东街道">台东街道</option>
                            <option value="兴华路街道">兴华路街道</option>
                            <option value="八大关街道">八大关街道</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label>乡镇</label>
                        <select class="form-control" id="searchTownship">
                            <option value="">请先选择街道</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label>店铺名称</label>
                        <input type="text" class="form-control" id="searchShopName" placeholder="请输入店铺名称">
                    </div>
                    <div class="form-group">
                        <label>店铺类型</label>
                        <select class="form-control" id="searchShopType">
                            <option value="">全部类型</option>
                            <option value="餐饮店">餐饮店</option>
                            <option value="流通店">流通店</option>
                            <option value="企业食堂">企业食堂</option>
                            <option value="四小店">四小店</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label>异常状态</label>
                        <select class="form-control" id="searchExceptionStatus">
                            <option value="">全部状态</option>
                            <option value="未处理">未处理</option>
                            <option value="已处理">已处理</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label>审核状态</label>
                        <select class="form-control" id="searchAuditStatus">
                            <option value="">全部状态</option>
                            <option value="待审核">待审核</option>
                            <option value="已通过">已通过</option>
                            <option value="已驳回">已驳回</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <button type="button" class="btn btn-primary" onclick="searchData()">
                            <i class="fas fa-search"></i> 搜索
                        </button>
                    </div>
                    <div class="form-group">
                        <button type="button" class="btn btn-default" onclick="resetSearch()">
                            <i class="fas fa-redo"></i> 重置
                        </button>
                    </div>
                </form>
            </div>
            
            <!-- Tab 切换 -->
            <div style="margin-bottom: 24px;">
                <div style="display: flex; gap: 0; background: #fff; border-radius: 8px; box-shadow: 0 2px 8px rgba(0, 21, 41, 0.08); overflow: hidden;">
                    <button class="tab-btn active" onclick="switchTab('全部')">全部</button>
                    <button class="tab-btn" onclick="switchTab('待审核')">待审核</button>
                    <button class="tab-btn" onclick="switchTab('已通过')">已通过</button>
                    <button class="tab-btn" onclick="switchTab('已驳回')">已驳回</button>
                </div>
            </div>
            
            <div class="table-container">
                <table class="table">
                    <thead>
                        <tr>
                            <th>地区</th>
                            <th>店铺名称</th>
                            <th>店铺类型</th>
                            <th>上报时间</th>
                            <th>异常状态</th>
                            <th>审核状态</th>
                            <th>审核时间</th>
                            <th>审核人</th>
                            <th>审核备注</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody id="dataTbody">
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<div id="detailModal" class="modal">
    <div class="modal-content">
        <div class="modal-header">
            <h2 class="modal-title">异常详情</h2>
            <span class="modal-close" onclick="closeModal('detailModal')">&times;</span>
        </div>
        <div class="modal-body" id="detailModalBody">
        </div>
        <div class="modal-footer">
            <button class="btn btn-default" onclick="closeModal('detailModal')">关闭</button>
        </div>
    </div>
</div>

<div id="processModal" class="modal">
    <div class="modal-content">
        <div class="modal-header">
            <h2 class="modal-title">处理异常</h2>
            <span class="modal-close" onclick="closeModal('processModal')">&times;</span>
        </div>
        <div class="modal-body">
            <div class="form-group">
                <label>处理备注</label>
                <textarea class="form-control" id="processRemark" rows="4" placeholder="请输入处理备注"></textarea>
            </div>
        </div>
        <div class="modal-footer">
            <button class="btn btn-default" onclick="closeModal('processModal')">取消</button>
            <button class="btn btn-primary" onclick="submitProcess()">确认处理</button>
        </div>
    </div>
</div>

<div id="auditModal" class="modal">
    <div class="modal-content">
        <div class="modal-header">
            <h2 class="modal-title">审核异常</h2>
            <span class="modal-close" onclick="closeModal('auditModal')">&times;</span>
        </div>
        <div class="modal-body">
            <div class="form-group">
                <label>审核状态</label>
                <select class="form-control" id="auditStatus">
                    <option value="已通过">已通过</option>
                    <option value="已驳回">已驳回</option>
                </select>
            </div>
            <div class="form-group">
                <label>审核备注</label>
                <textarea class="form-control" id="auditRemark" rows="4" placeholder="请输入审核备注"></textarea>
            </div>
        </div>
        <div class="modal-footer">
            <button class="btn btn-default" onclick="closeModal('auditModal')">取消</button>
            <button class="btn btn-primary" onclick="submitAudit()">确认审核</button>
    </div>
  </div>
</div>

<script>
const streetTownshipMap = {
    '中山路街道': ['沙子口镇', '流亭镇', '棘洪滩镇'],
    '台东街道': ['流亭镇', '北宅镇', '沙子口镇'],
    '兴华路街道': ['棘洪滩镇', '北宅镇', '流亭镇'],
    '八大关街道': ['北宅镇', '沙子口镇', '棘洪滩镇']
};

let exceptionData = [
    {
        id: 1,
        area: '中山路街道-沙子口镇',
        shopName: '老王家饭馆',
        shopType: '餐饮店',
        reporter: '张三',
        reportTime: '2024-05-15 09:30',
        reportContent: '发现厨房卫生条件不达标，存在食品安全隐患，需要立即整改。',
        exceptionStatus: '未处理',
        processRemark: '',
        auditStatus: '待审核',
        auditTime: '',
        auditor: '',
        auditRemark: ''
    },
    {
        id: 2,
        area: '台东街道-流亭镇',
        shopName: '小李快餐',
        shopType: '餐饮店',
        reporter: '李四',
        reportTime: '2024-05-16 14:20',
        reportContent: '食材储存不规范，发现过期食品，存在食品安全风险。',
        exceptionStatus: '未处理',
        processRemark: '已责令整改，加强食材管理，建立过期食品处理制度。',
        auditStatus: '已通过',
        auditTime: '2024-05-17 10:00',
        auditor: '审核员1',
        auditRemark: '处理及时，措施得当'
    },
    {
        id: 3,
        area: '兴华路街道-棘洪滩镇',
        shopName: '便利超市',
        shopType: '流通店',
        reporter: '王五',
        reportTime: '2024-05-17 11:15',
        reportContent: '销售三无产品，食品安全意识薄弱，需要加强监管。',
        exceptionStatus: '未处理',
        processRemark: '已下架问题产品，对经营者进行食品安全培训。',
        auditStatus: '已驳回',
        auditTime: '2024-05-18 16:30',
        auditor: '审核员2',
        auditRemark: '处理措施不够具体，需要补充详细整改方案'
    },
    {
        id: 4,
        area: '八大关街道-北宅镇',
        shopName: '企业食堂',
        shopType: '企业食堂',
        reporter: '赵六',
        reportTime: '2024-05-18 08:45',
        reportContent: '餐具消毒不彻底，存在交叉感染风险。',
        exceptionStatus: '未处理',
        processRemark: '',
        auditStatus: '待审核',
        auditTime: '',
        auditor: '',
        auditRemark: ''
    },
    {
        id: 5,
        area: '中山路街道-流亭镇',
        shopName: '四小面馆',
        shopType: '四小店',
        reporter: '钱七',
        reportTime: '2024-05-19 12:30',
        reportContent: '从业人员健康证过期，需要及时更新。',
        exceptionStatus: '未处理',
        processRemark: '已督促办理新的健康证，加强人员管理。',
        auditStatus: '已通过',
        auditTime: '2024-05-20 09:15',
        auditor: '审核员1',
        auditRemark: '处理及时，符合要求'
    }
];

let currentIndex = null;
let currentTab = '全部';

function switchTab(tabName) {
    currentTab = tabName;
    
    // Update tab button styles
    document.querySelectorAll('.tab-btn').forEach(btn => {
        btn.classList.remove('active');
    });
    event.target.classList.add('active');
    
    // Filter and render data
    renderTable();
}

function updateTownship() {
    const street = document.getElementById('searchStreet').value;
    const townshipSelect = document.getElementById('searchTownship');
    
    townshipSelect.innerHTML = '<option value="">全部乡镇</option>';
    
    if (street && streetTownshipMap[street]) {
        streetTownshipMap[street].forEach(township => {
            const option = document.createElement('option');
            option.value = township;
            option.textContent = township;
            townshipSelect.appendChild(option);
        });
    }
}

function renderTable(data = exceptionData) {
    const tbody = document.getElementById('dataTbody');
    tbody.innerHTML = '';
    
    // Filter data by current tab
    let filteredData = data;
    if (currentTab !== '全部') {
        filteredData = data.filter(item => item.auditStatus === currentTab);
    }
    
    if (filteredData.length === 0) {
        tbody.innerHTML = '<tr><td colspan="10" style="text-align: center; padding: 20px;">暂无数据</td></tr>';
        return;
    }
    
    filteredData.forEach((item, index) => {
        const tr = document.createElement('tr');
        tr.innerHTML = `
            <td title="${item.area}">${item.area}</td>
            <td title="${item.shopName}">${item.shopName}</td>
            <td title="${item.shopType}">${item.shopType}</td>
            <td title="${item.reportTime}">${item.reportTime}</td>
            <td><span class="status-tag ${item.exceptionStatus === '未处理' ? 'status-unprocessed' : 'status-processed'}">${item.exceptionStatus}</span></td>
            <td><span class="status-tag ${getAuditStatusClass(item.auditStatus)}">${item.auditStatus}</span></td>
            <td title="${item.auditTime}">${item.auditTime || '-'}</td>
            <td title="${item.auditor}">${item.auditor || '-'}</td>
            <td title="${item.auditRemark}">${item.auditRemark || '-'}</td>
            <td>
                <a href="#" class="action-link" onclick="showDetailModal(${exceptionData.indexOf(item)})">详情</a>
                ${item.auditStatus === '已通过' ? `<a href="#" class="action-link" style="color:#52c41a;" onclick="showProcessModal(${exceptionData.indexOf(item)})">处理</a>` : ''}
                ${item.auditStatus === '待审核' ? `<a href="#" class="action-link" style="color:#faad14;" onclick="showAuditModal(${exceptionData.indexOf(item)})">审核</a>` : ''}
            </td>
        `;
        tbody.appendChild(tr);
    });
}

function getAuditStatusClass(status) {
    switch (status) {
        case '待审核': return 'status-pending';
        case '已通过': return 'status-approved';
        case '已驳回': return 'status-rejected';
        default: return 'status-pending';
    }
}

function searchData() {
    const street = document.getElementById('searchStreet').value;
    const township = document.getElementById('searchTownship').value;
    const shopName = document.getElementById('searchShopName').value.toLowerCase();
    const shopType = document.getElementById('searchShopType').value;
    const exceptionStatus = document.getElementById('searchExceptionStatus').value;
    const auditStatus = document.getElementById('searchAuditStatus').value;
    
    const filteredData = exceptionData.filter(item => {
        const areaMatch = (street === '' || item.area.includes(street)) && 
                         (township === '' || item.area.includes(township));
        
        return areaMatch &&
               (shopName === '' || item.shopName.toLowerCase().includes(shopName)) &&
               (shopType === '' || item.shopType === shopType) &&
               (exceptionStatus === '' || item.exceptionStatus === exceptionStatus) &&
               (auditStatus === '' || item.auditStatus === auditStatus);
    });
    
    renderTable(filteredData);
}

function resetSearch() {
    document.getElementById('searchStreet').value = '';
    document.getElementById('searchTownship').value = '';
    document.getElementById('searchShopName').value = '';
    document.getElementById('searchShopType').value = '';
    document.getElementById('searchExceptionStatus').value = '';
    document.getElementById('searchAuditStatus').value = '';
    
    document.getElementById('searchTownship').innerHTML = '<option value="">请先选择街道</option>';
    
    renderTable();
}

function showDetailModal(index) {
    currentIndex = index;
    const data = exceptionData[index];
    
    const html = `
        <!-- 基础信息 -->
        <div style="margin-bottom: 24px;">
            <h3 style="margin-bottom: 16px; color: #333; font-size: 16px; font-weight: 500; border-bottom: 2px solid #1890ff; padding-bottom: 8px;">基础信息</h3>
            <div class="detail-grid">
                <div class="detail-item">
                    <div class="detail-label">地区</div>
                    <div class="detail-value">${data.area}</div>
                </div>
                <div class="detail-item">
                    <div class="detail-label">店铺名称</div>
                    <div class="detail-value">${data.shopName}</div>
                </div>
                <div class="detail-item">
                    <div class="detail-label">店铺类型</div>
                    <div class="detail-value">${data.shopType}</div>
                </div>
            </div>
        </div>
        
        <!-- 上报信息 -->
        <div style="margin-bottom: 24px;">
            <h3 style="margin-bottom: 16px; color: #333; font-size: 16px; font-weight: 500; border-bottom: 2px solid #52c41a; padding-bottom: 8px;">上报信息</h3>
            <div class="detail-grid">
                <div class="detail-item">
                    <div class="detail-label">上报人</div>
                    <div class="detail-value">${data.reporter}</div>
                </div>
                <div class="detail-item">
                    <div class="detail-label">上报时间</div>
                    <div class="detail-value">${data.reportTime}</div>
                </div>
            </div>
            <div style="margin-top: 16px;">
                <div class="detail-label">上报内容</div>
                <div class="content-box">${data.reportContent}</div>
            </div>
        </div>
        
        <!-- 审核信息 -->
        <div style="margin-bottom: 24px;">
            <h3 style="margin-bottom: 16px; color: #333; font-size: 16px; font-weight: 500; border-bottom: 2px solid #faad14; padding-bottom: 8px;">审核信息</h3>
            <div class="detail-grid">
                <div class="detail-item">
                    <div class="detail-label">审核状态</div>
                    <div class="detail-value">
                        <span class="status-tag ${getAuditStatusClass(data.auditStatus)}">${data.auditStatus}</span>
                    </div>
                </div>
                <div class="detail-item">
                    <div class="detail-label">审核人</div>
                    <div class="detail-value">${data.auditor || '-'}</div>
                </div>
                <div class="detail-item">
                    <div class="detail-label">审核时间</div>
                    <div class="detail-value">${data.auditTime || '-'}</div>
                </div>
            </div>
            <div style="margin-top: 16px;">
                <div class="detail-label">审核备注</div>
                <div class="content-box">${data.auditRemark || '-'}</div>
            </div>
        </div>
        
        <!-- 处理信息 -->
        <div style="margin-bottom: 24px;">
            <h3 style="margin-bottom: 16px; color: #333; font-size: 16px; font-weight: 500; border-bottom: 2px solid #ff4d4f; padding-bottom: 8px;">处理信息</h3>
            <div class="detail-grid">
                <div class="detail-item">
                    <div class="detail-label">异常状态</div>
                    <div class="detail-value">
                        <span class="status-tag ${data.exceptionStatus === '未处理' ? 'status-unprocessed' : 'status-processed'}">${data.exceptionStatus}</span>
                    </div>
                </div>
            </div>
            <div style="margin-top: 16px;">
                <div class="detail-label">处理备注</div>
                <div class="content-box">${data.processRemark || '-'}</div>
            </div>
        </div>
    `;
    
    document.getElementById('detailModalBody').innerHTML = html;
  document.getElementById('detailModal').style.display = 'block';
}

function showProcessModal(index) {
    currentIndex = index;
    document.getElementById('processRemark').value = '';
    document.getElementById('processModal').style.display = 'block';
}

function showAuditModal(index) {
    currentIndex = index;
    document.getElementById('auditStatus').value = '已通过';
    document.getElementById('auditRemark').value = '';
    document.getElementById('auditModal').style.display = 'block';
}

function closeModal(modalId) {
    document.getElementById(modalId).style.display = 'none';
}

function submitProcess() {
    if (currentIndex === null) return;
    
    const remark = document.getElementById('processRemark').value.trim();
    if (!remark) {
        alert('请输入处理备注');
        return;
    }
    
    exceptionData[currentIndex].exceptionStatus = '已处理';
    exceptionData[currentIndex].processRemark = remark;
    
    closeModal('processModal');
    renderTable();
}

function submitAudit() {
    if (currentIndex === null) return;
    
    const status = document.getElementById('auditStatus').value;
    const remark = document.getElementById('auditRemark').value.trim();
    if (!remark) {
        alert('请输入审核备注');
        return;
    }
    
    const now = new Date();
    const pad = n => n < 10 ? '0' + n : n;
    const auditTime = `${now.getFullYear()}-${pad(now.getMonth() + 1)}-${pad(now.getDate())} ${pad(now.getHours())}:${pad(now.getMinutes())}`;
    
    exceptionData[currentIndex].auditStatus = status;
    exceptionData[currentIndex].auditTime = auditTime;
    exceptionData[currentIndex].auditor = '管理员';
    exceptionData[currentIndex].auditRemark = remark;
    
    closeModal('auditModal');
    renderTable();
}

document.addEventListener('click', function(e) {
    if (e.target.classList.contains('modal')) {
        e.target.style.display = 'none';
    }
});

document.addEventListener('DOMContentLoaded', function() {
renderTable();
});
</script>
</body>
</html>