<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>检查任务 - 食品安全移动端</title>
    <link rel="stylesheet" href="../css/style.css">
    <style>
        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
            background: #f5f5f5;
        }
        body {
            min-height: 100vh;
            display: flex;
            flex-direction: column;
        }
        .center-container {
            max-width: 420px;
            margin: 0 auto;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            border: 1.5px solid #e0e0e0;
            border-radius: 12px;
            box-sizing: border-box;
            background: #fff;
        }
        .header {
            flex-shrink: 0;
            background: #4CAF50;
            color: #fff;
            text-align: center;
            padding: 24px 0 18px 0;
            font-size: 22px;
            font-weight: bold;
            border-radius: 0 0 8px 8px;
            letter-spacing: 2px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.04);
        }
        main {
            flex: 1 1 auto;
            display: flex;
            flex-direction: column;
            min-height: 0;
            padding: 0 0 30px 0;
        }
        .tab-header {
            display: flex;
            background: #fff;
            border-radius: 8px 8px 0 0;
            box-shadow: 0 2px 8px rgba(0,0,0,0.04);
            border-bottom: 1px solid #eee;
            margin-top: 20px;
            max-width: 100%;
        }
        .tab-item {
            flex: 1;
            text-align: center;
            padding: 15px 0;
            font-size: 15px;
            color: #666;
            cursor: pointer;
            position: relative;
            border-radius: 8px 8px 0 0;
        }
        .tab-item.active {
            color: #4CAF50;
            font-weight: bold;
            background: #f8fff8;
        }
        .tab-item.active::after {
            content: '';
            position: absolute;
            left: 25%;
            bottom: 0;
            width: 50%;
            height: 2px;
            background: #4CAF50;
        }
        .search-container {
            background: #fff;
            padding: 18px 18px 10px 18px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.08);
            border-radius: 0 0 8px 8px;
            margin-bottom: 18px;
        }
        .form-row {
            display: flex;
            gap: 10px;
            margin-bottom: 10px;
        }
        .form-group {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 5px;
        }
        .form-group label {
            font-size: 12px;
            color: #666;
        }
        .form-group input, .form-group select {
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 14px;
        }
        .search-buttons {
            display: flex;
            gap: 10px;
            margin-top: 8px;
        }
        .search-button {
            flex: 1;
            padding: 10px;
            border: none;
            border-radius: 4px;
            font-size: 14px;
            cursor: pointer;
        }
        .search { background: #4CAF50; color: #fff; }
        .reset { background: #f5f5f5; color: #666; }
        .task-list {
            flex: 1 1 auto;
            overflow-y: auto;
            margin: 0;
            padding: 0 0 20px 0;
        }
        .task-item {
            background: #fff;
            border-radius: 8px;
            margin: 0 0 15px 0;
            padding: 15px 15px 10px 15px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.08);
            cursor: pointer;
            transition: box-shadow 0.2s;
        }
        .task-item:hover {
            box-shadow: 0 4px 16px rgba(0,0,0,0.12);
        }
        .task-row {
            display: flex;
            gap: 10px;
            font-size: 14px;
            margin-bottom: 5px;
        }
        .task-label {
            color: #888;
            min-width: 70px;
        }
        .task-value {
            color: #333;
            flex: 1;
        }
        /* 详情弹窗 */
        .modal {
            position: fixed;
            left: 0; top: 0; right: 0; bottom: 0;
            background: rgba(0,0,0,0.3);
            z-index: 9999;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .modal-content {
            background: #fff;
            border-radius: 10px;
            width: 95vw;
            max-width: 420px;
            max-height: 90vh;
            overflow-y: auto;
            padding: 20px;
            box-shadow: 0 2px 16px rgba(0,0,0,0.18);
        }
        .modal-title {
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 15px;
        }
        .modal-section {
            margin-bottom: 18px;
        }
        .modal-section-title {
            font-size: 15px;
            font-weight: bold;
            margin-bottom: 8px;
            color: #4CAF50;
        }
        .modal-row {
            display: flex;
            margin-bottom: 8px;
            font-size: 14px;
        }
        .modal-label {
            min-width: 80px;
            color: #888;
        }
        .modal-value {
            color: #333;
            flex: 1;
        }
        .modal-imgs {
            display: flex;
            gap: 10px;
            margin-top: 5px;
        }
        .modal-imgs img {
            width: 80px;
            height: 80px;
            object-fit: cover;
            border-radius: 4px;
        }
        .score-face {
            font-size: 22px;
            margin-left: 8px;
        }
        /* 检查项二级结构表格 */
        .check-table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 10px;
        }
        .check-table th, .check-table td {
            border: 1px solid #eee;
            padding: 6px 8px;
            font-size: 13px;
            text-align: center;
        }
        .check-table th {
            background: #f8f8f8;
            color: #333;
        }
        .check-item-main {
            font-weight: bold;
            text-align: left;
        }
        .check-item-sub {
            text-align: left;
            padding-left: 2em;
        }
        .modal-close {
            display: block;
            margin: 0 auto;
            margin-top: 15px;
            padding: 8px 30px;
            background: #4CAF50;
            color: #fff;
            border: none;
            border-radius: 4px;
            font-size: 15px;
            cursor: pointer;
        }
        /* 上报弹窗样式 */
        .report-modal-bg { position: fixed; left:0;top:0;right:0;bottom:0; background:rgba(0,0,0,0.3); z-index:10001; display:flex; align-items:center; justify-content:center; }
        .report-modal { background:#fff; border-radius:10px; max-width:520px; width:95vw; max-height:90vh; overflow-y:auto; padding:24px; box-shadow:0 2px 16px rgba(0,0,0,0.18); }
        .report-title { font-size:18px; font-weight:bold; margin-bottom:18px; color:#4CAF50; }
        .report-form-row { display:flex; gap:10px; margin-bottom:14px; }
        .report-form-group { flex:1; display:flex; flex-direction:column; }
        .report-form-group label { font-size:13px; color:#666; margin-bottom:4px; }
        .report-form-group input, .report-form-group textarea, .report-form-group select { padding:7px; border:1px solid #ddd; border-radius:4px; font-size:14px; }
        .report-form-group textarea { resize:vertical; min-height:48px; }
        .report-imgs { display:flex; gap:10px; margin-top:4px; }
        .report-imgs img { width:60px; height:60px; object-fit:cover; border-radius:4px; }
        .report-actions { display:flex; gap:16px; margin-top:18px; }
        .report-btn-submit { flex:1; background:#4CAF50; color:#fff; border:none; border-radius:4px; font-size:15px; padding:8px 0; cursor:pointer; }
        .report-btn-cancel { flex:1; background:#f5f5f5; color:#666; border:none; border-radius:4px; font-size:15px; padding:8px 0; cursor:pointer; }
        .score-table { width:100%; border-collapse:collapse; margin-top:10px; }
        .score-table th, .score-table td { border:1px solid #eee; padding:5px 6px; font-size:13px; text-align:center; }
        .score-table th { background:#f8f8f8; color:#333; }
        .score-item-main { font-weight:bold; text-align:left; }
        .score-item-sub { text-align:left; padding-left:2em; }
        /* 详情按钮样式 */
        .detail-btn { margin-left: 10px; padding: 4px 14px; background: #2196F3; color: #fff; border: none; border-radius: 4px; font-size: 13px; cursor: pointer; }
        .detail-btn:active { background: #1976d2; }
        /* 提交按钮样式 */
        .submit-btn { margin-left: 10px; padding: 4px 14px; background: #4CAF50; color: #fff; border: none; border-radius: 4px; font-size: 13px; cursor: pointer; }
        .submit-btn:active { background: #388e3c; }
        .track-btn { margin-left: 10px; padding: 4px 14px; background: #FF9800; color: #fff; border: none; border-radius: 4px; font-size: 13px; cursor: pointer; }
        .track-btn:active { background: #F57C00; }
        
        /* 新增按钮样式 */
        .add-button-container {
            background: #fff;
            padding: 15px 18px;
            margin-bottom: 18px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.08);
            border-radius: 8px;
        }
        
        .add-button {
            width: 100%;
            padding: 12px;
            background: #4CAF50;
            color: #fff;
            border: none;
            border-radius: 6px;
            font-size: 15px;
            font-weight: bold;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }
        
        .add-button:active {
            background: #388e3c;
        }
        
        .add-button::before {
            content: '+';
            font-size: 18px;
            font-weight: bold;
        }
        
        /* 圆形新增按钮样式 */
        .floating-add-button {
            position: fixed;
            bottom: 30px;
            left: 50%;
            transform: translateX(-50%);
            min-width: 140px;
            height: 50px;
            background: linear-gradient(135deg, #4CAF50, #45a049);
            color: white;
            border: none;
            border-radius: 25px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
            font-weight: bold;
            box-shadow: 0 4px 12px rgba(76, 175, 80, 0.3);
            cursor: pointer;
            z-index: 1000;
            transition: all 0.3s ease;
            padding: 0 20px;
            gap: 5px;
        }
        
        .floating-add-button:hover {
            transform: translateX(-50%) scale(1.05);
            box-shadow: 0 6px 16px rgba(76, 175, 80, 0.4);
        }
        
        .floating-add-button:active {
            transform: translateX(-50%) scale(0.95);
        }
        
        /* 评估督导统计样式 */
        .evaluation-stats {
            background: #fff;
            padding: 18px;
            margin-bottom: 18px;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.08);
        }
        
        .stats-title {
            font-size: 16px;
            font-weight: bold;
            color: #333;
            margin-bottom: 15px;
            text-align: center;
        }
        
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 15px;
        }
        
        .stat-item {
            text-align: center;
            padding: 12px 8px;
            background: #f8fff8;
            border-radius: 6px;
            border: 1px solid #e8f5e8;
        }
        
        .stat-number {
            font-size: 20px;
            font-weight: bold;
            color: #4CAF50;
            margin-bottom: 4px;
        }
        
        .stat-label {
            font-size: 12px;
            color: #666;
        }
        
        /* 红黑榜按钮样式 */
        .red-black-button {
            background: #fff;
            padding: 15px 18px;
            margin-bottom: 18px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.08);
            border-radius: 8px;
        }
        
        .red-black-btn {
            width: 100%;
            padding: 12px;
            background: #f44336;
            color: #fff;
            border: none;
            border-radius: 6px;
            font-size: 15px;
            font-weight: bold;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }
        
        .red-black-btn:active {
            background: #d32f2f;
        }
        
        /* 红黑榜按钮样式（用于列表中的小按钮） */
        .red-black-btn.small {
            width: auto;
            padding: 6px 12px;
            font-size: 12px;
            background: #f44336;
            color: #fff;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        
        .red-black-btn.small:active {
            background: #d32f2f;
        }
        
        /* 处理任务页面样式 */
        .task-process-container {
            display: none;
            flex-direction: column;
            height: 100%;
        }
        
        .location-info {
            background: #fff;
            padding: 15px 18px;
            margin-bottom: 18px;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.08);
        }
        
        .location-title {
            font-size: 14px;
            font-weight: bold;
            color: #333;
            margin-bottom: 8px;
        }
        
        .location-detail {
            font-size: 13px;
            color: #666;
        }
        
        .shop-list {
            flex: 1;
            overflow-y: auto;
        }
        
        .shop-item {
            background: #fff;
            border-radius: 8px;
            margin: 0 0 12px 0;
            padding: 15px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.08);
            cursor: pointer;
            transition: box-shadow 0.2s;
        }
        
        .shop-item:hover {
            box-shadow: 0 4px 16px rgba(0,0,0,0.12);
        }
        
        .shop-name {
            font-size: 16px;
            font-weight: bold;
            color: #333;
            margin-bottom: 8px;
        }
        
        .shop-info {
            font-size: 13px;
            color: #666;
            margin-bottom: 4px;
        }
        
        .shop-distance {
            font-size: 12px;
            color: #4CAF50;
            font-weight: bold;
        }
        
        /* 健康证信息样式 */
        .health-cert {
            background: #fff;
            padding: 15px;
            margin-bottom: 15px;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.08);
        }
        
        .health-title {
            font-size: 15px;
            font-weight: bold;
            color: #333;
            margin-bottom: 10px;
        }
        
        .health-row {
            display: flex;
            margin-bottom: 8px;
            font-size: 14px;
        }
        
        .health-label {
            min-width: 80px;
            color: #888;
        }
        
        .health-value {
            color: #333;
            flex: 1;
        }
        
        .health-expired {
            color: #f44336 !important;
            font-weight: bold;
        }
        
        /* 评估选项样式 */
        .evaluation-options {
            display: flex;
            gap: 10px;
            margin: 8px 0;
        }
        
        .option-btn {
            flex: 1;
            padding: 8px 12px;
            border: 2px solid #ddd;
            border-radius: 6px;
            background: #fff;
            color: #666;
            font-size: 14px;
            cursor: pointer;
            text-align: center;
            transition: all 0.2s;
        }
        
        .option-btn.selected {
            border-color: #4CAF50;
            background: #4CAF50;
            color: #fff;
        }
        
        .option-btn.yes.selected {
            border-color: #4CAF50;
            background: #4CAF50;
        }
        
        .option-btn.no.selected {
            border-color: #f44336;
            background: #f44336;
        }
        
        /* 照片上传样式 */
        .photo-upload {
            margin-top: 15px;
        }
        
        .photo-title {
            font-size: 14px;
            font-weight: bold;
            color: #333;
            margin-bottom: 10px;
        }
        
        .photo-required {
            color: #f44336;
            font-size: 12px;
            margin-left: 5px;
        }
        
        .photo-input {
            width: 100%;
            padding: 10px;
            border: 2px dashed #ddd;
            border-radius: 6px;
            background: #f9f9f9;
            text-align: center;
            cursor: pointer;
            margin-bottom: 10px;
        }
        
        .photo-preview {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
        }
        
        .photo-preview img {
            width: 80px;
            height: 80px;
            object-fit: cover;
            border-radius: 6px;
            border: 1px solid #eee;
        }
        
        /* 返回按钮样式 */
        .back-button {
            background: #fff;
            padding: 15px 18px;
            margin-bottom: 18px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.08);
            border-radius: 8px;
        }
        
        .back-btn {
            width: 100%;
            padding: 12px;
            background: #666;
            color: #fff;
            border: none;
            border-radius: 6px;
            font-size: 15px;
            font-weight: bold;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }
        
        .back-btn:active {
            background: #555;
        }
        .scroll-area {
            flex: 1 1 auto;
            min-height: 0;
            overflow-y: auto;
            display: flex;
            flex-direction: column;
        }
        .task-list {
            /* 移除overflow-y: auto; 让父容器滚动 */
            margin: 0;
            padding: 0 0 20px 0;
        }
        .floating-add-button:active {
            transform: translateX(-50%) scale(0.95);
        }
        
        /* 店铺列表弹窗样式 */
        .store-list-modal {
            position: fixed;
            left: 0; top: 0; right: 0; bottom: 0;
            background: rgba(0,0,0,0.3);
            z-index: 10002;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .store-list-content {
            background: #fff;
            border-radius: 10px;
            width: 95vw;
            max-width: 420px;
            max-height: 80vh;
            overflow-y: auto;
            padding: 20px;
            box-shadow: 0 2px 16px rgba(0,0,0,0.18);
        }
        
        .store-list-title {
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 15px;
            color: #4CAF50;
        }
        
        .store-item {
            background: #f8f8f8;
            border-radius: 8px;
            padding: 15px;
            margin-bottom: 12px;
            border: 1px solid #eee;
        }
        
        .store-name {
            font-size: 16px;
            font-weight: bold;
            color: #333;
            margin-bottom: 8px;
        }
        
        .store-register-name {
            font-size: 14px;
            color: #666;
            margin-bottom: 6px;
        }
        
        .store-address {
            font-size: 13px;
            color: #888;
            margin-bottom: 10px;
        }
        
        .store-distance {
            color: #4CAF50;
            font-weight: bold;
        }
        
        .evaluation-btn {
            background: #4CAF50;
            color: #fff;
            border: none;
            border-radius: 6px;
            padding: 8px 16px;
            font-size: 14px;
            cursor: pointer;
            width: 100%;
        }
        
        .evaluation-btn:hover {
            background: #45a049;
        }
        
        /* 检查项弹窗样式 */
        .evaluation-items-modal {
            position: fixed;
            left: 0; top: 0; right: 0; bottom: 0;
            background: rgba(0,0,0,0.3);
            z-index: 10003;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .evaluation-items-content {
            background: #fff;
            border-radius: 10px;
            width: 95vw;
            max-width: 420px;
            max-height: 80vh;
            overflow-y: auto;
            padding: 20px;
            box-shadow: 0 2px 16px rgba(0,0,0,0.18);
        }
        
        .evaluation-items-title {
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 15px;
            color: #4CAF50;
        }
        
        .evaluation-category {
            margin-bottom: 20px;
        }
        
        .evaluation-category-title {
            font-weight: bold;
            color: #333;
            margin-bottom: 10px;
            font-size: 15px;
        }
        
        .evaluation-item {
            margin-bottom: 12px;
            padding: 10px;
            background: #f8f8f8;
            border-radius: 6px;
        }
        
        .evaluation-item-title {
            font-size: 14px;
            color: #666;
            margin-bottom: 8px;
        }
        
        .evaluation-options {
            display: flex;
            gap: 10px;
            margin-bottom: 8px;
        }
        
        .evaluation-option-btn {
            flex: 1;
            padding: 8px 12px;
            border: 2px solid #ddd;
            border-radius: 6px;
            background: #fff;
            color: #666;
            font-size: 14px;
            cursor: pointer;
            text-align: center;
            transition: all 0.2s;
        }
        
        .evaluation-option-btn.selected {
            border-color: #4CAF50;
            background: #4CAF50;
            color: #fff;
        }
        
        .evaluation-option-btn.yes.selected {
            border-color: #4CAF50;
            background: #4CAF50;
        }
        
        .evaluation-option-btn.no.selected {
            border-color: #f44336;
            background: #f44336;
        }
        
        .evaluation-photo-upload {
            margin-top: 8px;
        }
        
        .evaluation-photo-input {
            width: 100%;
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 12px;
        }
        
        .evaluation-photo-preview {
            margin-top: 4px;
        }
        
        .evaluation-photo-preview img {
            width: 60px;
            height: 60px;
            object-fit: cover;
            border-radius: 4px;
            border: 1px solid #eee;
        }
        
        /* 巡检异常新增弹窗样式 */
        .inspection-exception-modal {
            position: fixed;
            left: 0; top: 0; right: 0; bottom: 0;
            background: rgba(0,0,0,0.3);
            z-index: 10004;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .inspection-exception-content {
            background: #fff;
            border-radius: 10px;
            width: 95vw;
            max-width: 420px;
            max-height: 80vh;
            overflow-y: auto;
            padding: 20px;
            box-shadow: 0 2px 16px rgba(0,0,0,0.18);
        }
        
        .inspection-exception-title {
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 15px;
            color: #4CAF50;
        }
        
        .inspection-exception-form {
            display: flex;
            flex-direction: column;
            gap: 15px;
        }
        
        .inspection-form-group {
            display: flex;
            flex-direction: column;
            gap: 5px;
        }
        
        .inspection-form-group label {
            font-size: 14px;
            color: #333;
            font-weight: bold;
        }
        
        .inspection-form-group select,
        .inspection-form-group input,
        .inspection-form-group textarea {
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 14px;
        }
        
        .inspection-form-group textarea {
            resize: vertical;
            min-height: 80px;
        }
        
        .inspection-form-group input[readonly] {
            background-color: #f5f5f5;
            color: #666;
        }
        
        .inspection-photo-upload {
            border: 2px dashed #ddd;
            border-radius: 6px;
            padding: 15px;
            text-align: center;
            background: #f9f9f9;
            cursor: pointer;
            transition: border-color 0.3s;
        }
        
        .inspection-photo-upload:hover {
            border-color: #4CAF50;
        }
        
        .inspection-photo-upload input[type="file"] {
            width: 100%;
            height: 100%;
            opacity: 0;
            position: absolute;
            top: 0;
            left: 0;
            cursor: pointer;
        }
        
        .inspection-photo-text {
            color: #666;
            font-size: 14px;
        }
        
        .inspection-photo-preview {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
            margin-top: 10px;
        }
        
        .inspection-photo-preview img {
            width: 80px;
            height: 80px;
            object-fit: cover;
            border-radius: 4px;
            border: 1px solid #eee;
        }
        
        /* 店铺搜索样式 */
        .store-search-container {
            display: flex;
            gap: 10px;
            margin-bottom: 15px;
            align-items: center;
        }
        
        .store-search-input {
            flex: 1;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 6px;
            font-size: 14px;
            background: #fff;
        }
        
        .store-search-input:focus {
            outline: none;
            border-color: #4CAF50;
            box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.2);
        }
        
        .store-search-btn {
            padding: 10px 16px;
            background: #4CAF50;
            color: #fff;
            border: none;
            border-radius: 6px;
            font-size: 14px;
            cursor: pointer;
            white-space: nowrap;
        }
        
        .store-search-btn:hover {
            background: #45a049;
        }
        
        .store-list-container {
            max-height: 400px;
            overflow-y: auto;
        }
        
        .no-stores-found {
            text-align: center;
            padding: 30px;
            color: #666;
            font-size: 14px;
            background: #f8f8f8;
            border-radius: 8px;
            border: 1px dashed #ddd;
        }
    </style>
</head>
<body>
    <div class="center-container">
        <header class="header">
            检查任务
        </header>
        <main>
            <div class="tab-header">
                <div class="tab-item active" onclick="switchTab('assign')">评估督导</div>
                <div class="tab-item" onclick="switchTab('report')">巡检异常</div>
            </div>
            <div class="scroll-area">
                <div class="evaluation-stats" id="evaluationStats" style="display: none;">
                    <div class="stats-grid">
                        <div class="stat-item">
                            <div class="stat-number" id="totalTasks">0</div>
                            <div class="stat-label">任务数量</div>
                        </div>
                        <div class="stat-item">
                            <div class="stat-number" id="completedTasks">0</div>
                            <div class="stat-label">已完成数</div>
                        </div>
                        <div class="stat-item">
                            <div class="stat-number" id="completionRate">0%</div>
                            <div class="stat-label">完成率</div>
                    </div>
                    </div>
                </div>
                <div class="search-container" id="searchContainer">
                    <form onsubmit="return handleSearch(event)">
                    <div class="form-row">
                        <div class="form-group">
                            <label>店铺类型</label>
                            <select 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>
                            <input type="text" id="searchShopName" placeholder="请输入店铺名称">
                        </div>
                    </div>
                    <div class="search-buttons">
                        <button type="submit" class="search-button search">搜索</button>
                        <button type="reset" class="search-button reset">重置</button>
                    </div>
                </form>
            </div>
            <div class="task-list" id="taskList">
                <!-- 任务列表渲染区域 -->
                </div>
            </div>
        </main>
    </div>
    
    <!-- 圆形新增按钮 -->
    <button class="floating-add-button" onclick="handleAddNew()" title="新增" id="addButton">
        + <span id="addButtonText">新增评估督导</span>
    </button>
    
    <div id="modal" class="modal" style="display:none;">
        <div class="modal-content" id="modalContent"></div>
    </div>
    <script>
        // 新增按钮处理函数
        function handleAddNew() {
            // 根据当前选中的tab执行不同的新增操作
            const activeTab = document.querySelector('.tab-item.active');
            if (activeTab && activeTab.textContent.includes('评估督导')) {
                // 评估督导tab - 显示店铺列表弹窗
                showStoreListModal();
            } else {
                // 巡检异常tab - 显示巡检异常新增弹窗
                showAddReportModal();
            }
        }
        
        // Tab 切换
        function switchTab(tab) {
            console.log('switchTab called with:', tab); // 调试信息
            document.querySelectorAll('.tab-item').forEach((el, idx) => {
                el.classList.remove('active');
            });
            if(tab==='assign') {
                document.querySelectorAll('.tab-item')[0].classList.add('active');
                document.getElementById('evaluationStats').style.display = 'block';
                document.getElementById('searchContainer').style.display = 'block';
                updateEvaluationStats();
                // 更新按钮文字
                document.getElementById('addButtonText').textContent = '新增评估督导';
            } else if(tab==='report') {
                document.querySelectorAll('.tab-item')[1].classList.add('active');
                document.getElementById('evaluationStats').style.display = 'none';
                document.getElementById('searchContainer').style.display = 'block';
                // 更新按钮文字
                document.getElementById('addButtonText').textContent = '新增巡检异常';
            }
            renderTaskList();
        }
        // 乡镇-街道联动
        const streetMap = {
            '城关镇': ['东街', '西街'],
            '大安镇': ['南街', '北街']
        };
        function updateStreetOptions() {
            const township = document.getElementById('searchTownship').value;
            const streetSel = document.getElementById('searchStreet');
            streetSel.innerHTML = '<option value="">请选择街道</option>';
            if(streetMap[township]) {
                streetMap[township].forEach(street => {
                    streetSel.innerHTML += `<option value="${street}">${street}</option>`;
                });
            }
        }
        // 搜索处理
        function handleSearch(e) {
            e.preventDefault();
            renderTaskList();
        }
        // 模拟数据
        const mockTasks = [
            {
                type: 'report',
                name: '日常巡查',
                code: 'TASK2024001',
                area: '城关镇-东街',
                shop: '老王川菜馆',
                auditStatus: '已通过',
                detail: {
                    name: '日常巡查',
                    content: '日常食品安全巡查',
                    code: 'TASK2024001',
                    reporter: '张检查员',
                    area: '城关镇-东街',
                    time: '2024-04-01 10:00',
                    shopImg: '../images/shop.jpg',
                    kitchenImg: '../images/kitchen.jpg',
                    auditStatus: '已通过',
                    auditor: '李四',
                    auditTime: '2024-04-01 12:00',
                    score: 18,
                    level: '微笑脸',
                    checkItems: [
                        { main: '环境卫生', level: '一级', score: '-', answer: '-', children: [
                            { main: '地面清洁', level: '二级', score: '-', answer: '-' },
                            { main: '无垃圾', level: '三级', score: '10', answer: '是' }
                        ]},
                        { main: '食品安全', level: '一级', score: '8', answer: '否', children: [] }
                    ]
                }
            },
            {
                type: 'assign',
                name: '专项检查',
                code: 'TASK2024002',
                area: '大安镇-南街',
                shop: '小李快餐',
                auditStatus: '待审核',
                detail: {
                    name: '专项检查',
                    content: '节前专项食品安全检查',
                    code: 'TASK2024002',
                    reporter: '王检查员',
                    area: '大安镇-南街',
                    time: '2024-03-28 09:00',
                    shopImg: '../images/shop2.jpg',
                    kitchenImg: '../images/kitchen2.jpg',
                    auditStatus: '待审核',
                    auditor: '-',
                    auditTime: '-',
                    score: 15,
                    level: '平脸',
                    assigner: '李管理员',
                    assignTime: '2024-03-27 14:30',
                    deadline: '2024-04-05 18:00',
                    checkItems: [
                        { main: '环境卫生', level: '一级', score: '-', answer: '-', children: [
                            { main: '地面清洁', level: '二级', score: '-', answer: '-' },
                            { main: '无垃圾', level: '三级', score: '10', answer: '是' }
                        ]},
                        { main: '食品安全', level: '一级', score: '8', answer: '否', children: [] }
                    ]
                }
            },
            {
                type: 'assign',
                name: '月度评估',
                code: 'TASK2024003',
                area: '城关镇-西街',
                shop: '张记面馆',
                auditStatus: '已通过',
                detail: {
                    name: '月度评估',
                    content: '月度食品安全评估',
                    code: 'TASK2024003',
                    reporter: '赵检查员',
                    area: '城关镇-西街',
                    time: '2024-03-25 14:00',
                    shopImg: '../images/shop3.jpg',
                    kitchenImg: '../images/kitchen3.jpg',
                    auditStatus: '已通过',
                    auditor: '李四',
                    auditTime: '2024-03-26 10:00',
                    score: 22,
                    level: '笑脸',
                    assigner: '王管理员',
                    assignTime: '2024-03-24 09:00',
                    deadline: '2024-03-30 18:00',
                    checkItems: [
                        { main: '环境卫生', level: '一级', score: '12', answer: '是', children: [
                            { main: '地面清洁', level: '二级', score: '6', answer: '是' },
                            { main: '无垃圾', level: '三级', score: '6', answer: '是' }
                        ]},
                        { main: '食品安全', level: '一级', score: '10', answer: '是', children: [] }
                    ]
                }
            }
        ];

        // 巡检异常模拟数据
        const mockInspectionReports = [
            {
                id: 1,
                shopName: '老王川菜馆',
                shopType: '餐饮店',
                reportTime: '2024-05-01 10:30',
                reportContent: '发现厨房地面有积水，存在安全隐患',
                exceptionStatus: '未处理',
                auditStatus: '待审核',
                detail: {
                    basicInfo: {
                        shopName: '老王川菜馆',
                        shopType: '餐饮店',
                        address: '城关镇东街123号',
                        contact: '王老板',
                        phone: '13800138001'
                    },
                    reportInfo: {
                        reportTime: '2024-05-01 10:30',
                        reporter: '张检查员',
                        reportContent: '发现厨房地面有积水，存在安全隐患',
                        images: [
                            'https://via.placeholder.com/150/F44336/FFFFFF?Text=异常图1',
                            'https://via.placeholder.com/150/F44336/FFFFFF?Text=异常图2'
                        ]
                    },
                    auditInfo: {
                        status: '待审核',
                        auditor: '-',
                        auditTime: '-',
                        auditRemark: '-'
                    },
                    processInfo: {
                        status: '未处理',
                        remark: '-',
                        processTime: '-',
                        processor: '-'
                    }
                }
            },
            {
                id: 2,
                shopName: '小李快餐',
                shopType: '餐饮店',
                reportTime: '2024-05-02 14:20',
                reportContent: '食品储存不规范，部分食材未按要求存放',
                exceptionStatus: '已处理',
                auditStatus: '已通过',
                detail: {
                    basicInfo: {
                        shopName: '小李快餐',
                        shopType: '餐饮店',
                        address: '大安镇南街156号',
                        contact: '李老板',
                        phone: '13800138002'
                    },
                    reportInfo: {
                        reportTime: '2024-05-02 14:20',
                        reporter: '王检查员',
                        reportContent: '食品储存不规范，部分食材未按要求存放',
                        images: [
                            'https://via.placeholder.com/150/FFC107/000000?Text=异常图1'
                        ]
                    },
                    auditInfo: {
                        status: '已通过',
                        auditor: '李四',
                        auditTime: '2024-05-02 16:00',
                        auditRemark: '情况属实，已要求整改'
                    },
                    processInfo: {
                        status: '已处理',
                        remark: '已按要求整改，重新规范食品储存',
                        processTime: '2024-05-03 09:00',
                        processor: '李老板'
                    }
                }
            },
            {
                id: 3,
                shopName: '张记面馆',
                shopType: '餐饮店',
                reportTime: '2024-05-03 09:15',
                reportContent: '员工健康证过期，需要及时更新',
                exceptionStatus: '未处理',
                auditStatus: '已驳回',
                detail: {
                    basicInfo: {
                        shopName: '张记面馆',
                        shopType: '餐饮店',
                        address: '城关镇西街89号',
                        contact: '张老板',
                        phone: '13800138003'
                    },
                    reportInfo: {
                        reportTime: '2024-05-03 09:15',
                        reporter: '赵检查员',
                        reportContent: '员工健康证过期，需要及时更新',
                        images: [
                            'https://via.placeholder.com/150/F44336/FFFFFF?Text=异常图1',
                            'https://via.placeholder.com/150/F44336/FFFFFF?Text=异常图2'
                        ]
                    },
                    auditInfo: {
                        status: '已驳回',
                        auditor: '李四',
                        auditTime: '2024-05-03 11:00',
                        auditRemark: '上报信息不完整，请补充详细情况'
                    },
                    processInfo: {
                        status: '未处理',
                        remark: '-',
                        processTime: '-',
                        processor: '-'
                    }
                }
            }
        ];
        // 渲染任务列表
        function renderTaskList() {
            const tab = document.querySelector('.tab-item.active').innerText;
            const type = tab === '巡检异常' ? 'report' : 'assign';
            const shopType = document.getElementById('searchShopType').value;
            const shopName = document.getElementById('searchShopName').value.trim();
            let html = '';
            if (tab === '巡检异常') {
                // 巡检异常模块
                let list = mockInspectionReports;
                if (shopName) {
                    list = list.filter(item => item.shopName.includes(shopName));
                }
                if (shopType) {
                    list = list.filter(item => item.shopType === shopType);
                }
                // 检查是否有已处理且待审核的数据
                let hasTarget = list.some(item => item.exceptionStatus === '已处理' && item.auditStatus === '待审核');
                if (!hasTarget) {
                    list = list.concat([{
                        id: 99999,
                        shopName: '示例店铺',
                        shopType: '餐饮店',
                        reportTime: new Date().toLocaleString('zh-CN'),
                        reportContent: '示例上报内容',
                        exceptionStatus: '已处理',
                        auditStatus: '待审核',
                        detail: {},
                    }]);
                }
                // 先筛选目标数据放最前
                const targetList = list.filter(item => item.exceptionStatus === '已处理' && item.auditStatus === '待审核');
                const otherList = list.filter(item => !(item.exceptionStatus === '已处理' && item.auditStatus === '待审核'));
                list = targetList.concat(otherList);
                list.forEach(item => {
                    const exceptionStatusClass = item.exceptionStatus === '未处理' ? 'status-pending' : 'status-processed';
                    const auditStatusClass = item.auditStatus === '待审核' ? 'status-pending' : (item.auditStatus === '已通过' ? 'status-processed' : '');
                    const showProcessButton = item.exceptionStatus === '未处理' && item.auditStatus === '待审核';
                    html += `<div class="task-item">\n`;
                    html += `
                        <div class="task-row"><span class="task-label">店铺名称</span><span class="task-value">${item.shopName}</span></div>\n
                        <div class="task-row"><span class="task-label">店铺类型</span><span class="task-value">${item.shopType}</span></div>\n
                        <div class="task-row"><span class="task-label">上报时间</span><span class="task-value">${item.reportTime}</span></div>\n
                        <div class="task-row"><span class="task-label">上报内容</span><span class="task-value">${item.reportContent}</span></div>\n
                        <div class="task-row"><span class="task-label">异常状态</span><span class="task-value ${exceptionStatusClass}">${item.exceptionStatus}</span></div>\n
                        <div class="task-row"><span class="task-label">审核状态</span><span class="task-value ${auditStatusClass}">${item.auditStatus}</span></div>\n
                        <div class="task-row" style="margin-top: 10px;">
                            ${showProcessButton ? `<button class='process-btn' style='margin-right: 10px;' onclick='event.stopPropagation();showProcessModal(${item.id})'>处理</button>` : ''}
                            <button class='detail-btn' onclick='event.stopPropagation();showInspectionDetail(${item.id})'>详情</button>
                        </div>\n`;
                    html += `</div>\n`;
                });
            } else {
                console.log('渲染评估督导列表'); // 调试信息
                // 评估督导模块
            let list = mockTasks.filter(t => t.type === type);
            if(shopName) list = list.filter(t => t.shop.includes(shopName));
            // shopType 仅做展示，mock数据未区分
                
            if(list.length === 0) {
                html = '<div style="text-align:center;color:#888;margin:30px 0;">暂无任务</div>';
            } else {
                list.forEach((t, idx) => {
                        // 评估督导模块的展示字段
                        const mockShopData = {
                            '老王川菜馆': { type: '餐饮店', address: '城关镇东街123号', distance: '50米', healthCert: '正常' },
                            '小李快餐': { type: '餐饮店', address: '大安镇南街156号', distance: '120米', healthCert: '过期' },
                            '张记面馆': { type: '餐饮店', address: '城关镇西街89号', distance: '200米', healthCert: '正常' },
                            '刘家小炒': { type: '餐饮店', address: '大安镇北街45号', distance: '350米', healthCert: '过期' }
                        };
                        
                        const shopData = mockShopData[t.shop] || { type: '餐饮店', address: '未知地址', distance: '未知距离', healthCert: '正常' };
                        const healthCertClass = shopData.healthCert === '过期' ? 'health-expired' : '';
                        
                        html += `<div class="task-item">\n`;
                    html += `
                            <div class="task-row"><span class="task-label">店铺类型</span><span class="task-value">${shopData.type}</span></div>\n
                        <div class="task-row"><span class="task-label">店铺名称</span><span class="task-value">${t.shop}</span></div>\n
                            <div class="task-row"><span class="task-label">地址</span><span class="task-value">${shopData.address}（距离我${shopData.distance}）</span></div>\n
                            <div class="task-row"><span class="task-label">健康证</span><span class="task-value ${healthCertClass}">${shopData.healthCert}</span></div>\n
                            <div class="task-row" style="margin-top: 10px;">
                                <!--<button class='red-black-btn small' style='margin-right: 10px;' onclick='event.stopPropagation();showRedBlackUpload()'>红黑榜上传</button>-->
                                <button class='submit-btn' style='margin-right: 10px;' onclick="event.stopPropagation();showTaskProcessModal('${t.code}')">处理任务</button>
                                <button class='detail-btn' onclick='event.stopPropagation();window.showReportModal(\"${t.code}\")'>详情</button>
                            </div>\n`;
                        html += `</div>\n`;
                });
            }
            }
            
            console.log('生成的HTML长度:', html.length); // 调试信息
            document.getElementById('taskList').innerHTML = html;
        }
        // 跳转到详情页
        function goToDetail(type, code) {
            window.location.href = '检查任务详情.html?type=' + encodeURIComponent(type) + '&code=' + encodeURIComponent(code);
        }
        // 详情弹窗
        function showDetail(idx) {
            const tab = document.querySelector('.tab-item.active').innerText;
            const type = tab === '巡检异常' ? 'report' : 'assign';
            const list = mockTasks.filter(t => t.type === type);
            const task = list[idx].detail;
            let levelFace = {
                '笑脸': '😄',
                '微笑脸': '😊',
                '平脸': '😐',
                '黑脸': '😠'
            }[task.level] || '';
            let checkHtml = `<table class="check-table">
                <tr><th>检查项</th><th>级别</th><th>得分</th><th>答案</th></tr>`;
            task.checkItems.forEach(item => {
                checkHtml += `<tr><td class="check-item-main">${item.main}</td><td>${item.level}</td><td>${item.score}</td><td>${item.answer}</td></tr>`;
                if(item.children && item.children.length) {
                    item.children.forEach(sub => {
                        checkHtml += `<tr><td class="check-item-sub">${sub.main}</td><td>${sub.level}</td><td>${sub.score}</td><td>${sub.answer}</td></tr>`;
                    });
                }
            });
            checkHtml += '</table>';
            let html = `
                <div class="modal-title">任务详情</div>
                <div class="modal-section">
                    <div class="modal-section-title">基本信息</div>
                    <div class="modal-row"><span class="modal-label">任务名称</span><span class="modal-value">${task.name}</span></div>
                    <div class="modal-row"><span class="modal-label">上报内容</span><span class="modal-value">${task.content}</span></div>
                    <div class="modal-row"><span class="modal-label">任务编号</span><span class="modal-value">${task.code}</span></div>
                    <div class="modal-row"><span class="modal-label">上报人</span><span class="modal-value">${task.reporter}</span></div>
                    <div class="modal-row"><span class="modal-label">任务地区</span><span class="modal-value">${task.area}</span></div>
                    <div class="modal-row"><span class="modal-label">上报时间</span><span class="modal-value">${task.time}</span></div>
                    <div class="modal-row">
                        <span class="modal-label">店铺图片</span>
                        <span class="modal-value modal-imgs"><img src="${task.shopImg}" alt="店铺图片"></span>
                    </div>
                    <div class="modal-row">
                        <span class="modal-label">厨房图片</span>
                        <span class="modal-value modal-imgs"><img src="${task.kitchenImg}" alt="厨房图片"></span>
                    </div>
                </div>
                <div class="modal-section">
                    <div class="modal-section-title">审核信息</div>
                    <div class="modal-row"><span class="modal-label">审核状态</span><span class="modal-value">${task.auditStatus}</span></div>
                    <div class="modal-row"><span class="modal-label">审核人</span><span class="modal-value">${task.auditor}</span></div>
                    <div class="modal-row"><span class="modal-label">审核时间</span><span class="modal-value">${task.auditTime}</span></div>
                </div>
                <div class="modal-section">
                    <div class="modal-section-title">评分信息</div>
                    <div class="modal-row"><span class="modal-label">总分</span><span class="modal-value">${task.score}</span></div>
                    <div class="modal-row"><span class="modal-label">等级</span><span class="modal-value">${task.level}<span class="score-face">${levelFace}</span></span></div>
                    <div class="modal-row"><span class="modal-label">检查项</span><span class="modal-value" style="flex:2;">${checkHtml}</span></div>
                </div>
                <button class="modal-close" onclick="closeModal()">关闭</button>
            `;
            document.getElementById('modalContent').innerHTML = html;
            document.getElementById('modal').style.display = 'flex';
            document.body.style.overflow = 'hidden';
        }
        function closeModal() {
            document.getElementById('modal').style.display = 'none';
            document.body.style.overflow = '';
        }
        // 初始化
        document.addEventListener('DOMContentLoaded', function() {
            renderTaskList();
            // 默认显示评估督导模块的统计信息
            document.getElementById('evaluationStats').style.display = 'block';
            updateEvaluationStats();
        });
        // 新增巡检异常弹窗逻辑
        function showAddReportModal() {
            // 店铺类型-店铺联动数据
            const shopMap = {
                '餐饮店': ['老王川菜馆', '小李快餐'],
                '流通店': ['百货超市', '便利店'],
                '企业食堂': ['工厂食堂', '学校食堂'],
                '四小店': ['小吃摊', '早点铺']
            };
            const shopTypes = Object.keys(shopMap);
            const checkItems = [
                { main: '环境卫生', children: ['地面清洁', '无垃圾', '设备整洁'] },
                { main: '食品安全', children: ['原料新鲜', '加工规范', '储存安全'] },
                { main: '人员管理', children: ['健康证有效', '操作规范', '培训记录'] },
                { main: '设施设备', children: ['设备完好', '维护记录', '安全防护'] }
            ];
            // 弹窗内容
            const modal = document.createElement('div');
            modal.className = 'report-modal-bg';
            modal.innerHTML = `
                <div class='report-modal' style='max-width:380px;'>
                    <div class='report-title'>新增巡检异常</div>
                    <form id='addReportForm' onsubmit='return submitAddReportModal(event)'>
                            <div class='report-form-group'>
                                <label>店铺类型</label>
                            <select id='addShopType' name='shopType' required onchange='updateAddShopOptions()' style='width:100%;padding:8px;border:1px solid #ddd;border-radius:4px;'>
                                <option value=''>请选择店铺类型</option>
                                ${shopTypes.map(type => `<option value='${type}'>${type}</option>`).join('')}
                                </select>
                            </div>
                            <div class='report-form-group'>
                                <label>店铺名称</label>
                            <select id='addShopSelect' name='shop' required style='width:100%;padding:8px;border:1px solid #ddd;border-radius:4px;'>
                                <option value=''>请选择店铺名称</option>
                                </select>
                            </div>
                            <div class='report-form-group'>
                            <label>整改类型</label>
                            <label style='margin-right:16px;'><input type='radio' name='rectifyType' value='现场整改' required> 现场整改</label>
                            <label><input type='radio' name='rectifyType' value='后续整改' required> 后续整改</label>
                            </div>
                            <div class='report-form-group'>
                            <label>上报内容</label>
                            <button type='button' class='report-btn-submit' style='padding:4px 10px;font-size:13px;margin-bottom:6px;' onclick='showCheckItemSelectModal()'>选择上报内容</button>
                            <div id='selectedCheckItems' style='font-size:13px;color:#333;min-height:20px;'></div>
                            <input type='hidden' name='reportContent' id='reportContentInput' required>
                            </div>
                            <div class='report-form-group'>
                            <label>处理状态</label>
                            <label style='margin-right:16px;'><input type='radio' name='processStatus' value='未处理' required> 未处理</label>
                            <label><input type='radio' name='processStatus' value='已处理' required> 已处理</label>
                        </div>
                        <div class='report-form-group'>
                            <label>异常图片</label>
                            <input type='file' accept='image/*' name='shopImg' multiple onchange='previewAddReportImg(event,0)'>
                                <div class='report-imgs' id='addShopImgPreview'></div>
                            </div>
                            <div class='report-form-group'>
                            <label>上报时间</label>
                            <input type='datetime-local' name='reportTime' value='${getNowDateTime()}' required style='width:100%;padding:8px;border:1px solid #ddd;border-radius:4px;'>
                        </div>
                        <div class='report-actions'>
                            <button type='submit' class='report-btn-submit'>提交</button>
                            <button type='button' class='report-btn-cancel' onclick='closeAddReportModal()'>取消</button>
                        </div>
                    </form>
                </div>
            `;
            document.body.appendChild(modal);
            // 联动逻辑
            window.updateAddShopOptions = function() {
                const type = document.getElementById('addShopType').value;
                const shopSel = document.getElementById('addShopSelect');
                shopSel.innerHTML = '<option value="">请选择店铺名称</option>';
                if(shopMap[type]) {
                    shopMap[type].forEach(shop => {
                        shopSel.innerHTML += `<option value="${shop}">${shop}</option>`;
                    });
                }
            };
            // 上报内容选择弹窗及其余逻辑保持不变
            window.showCheckItemSelectModal = function() {
                let html = `<div class='report-modal-bg' id='checkItemSelectModal'><div class='report-modal' style='max-width:360px;'><div class='report-title'>选择上报内容</div><div style='max-height:320px;overflow:auto;'>`;
                checkItems.forEach((cat, i) => {
                    html += `<div style='font-weight:bold;margin:8px 0 4px 0;font-size:14px;'>${cat.main}</div>`;
                    cat.children.forEach((item, j) => {
                        const id = `checkitem_${i}_${j}`;
                        html += `<div style='display:flex;align-items:center;margin-bottom:4px;'><input type='checkbox' id='${id}' style='margin-right:6px;'><span style='flex:1;'>${item}</span>` +
                        `<label style='margin-left:8px;font-size:12px;'><input type='radio' name='ans_${id}' value='是' checked> 是</label>` +
                        `<label style='margin-left:4px;font-size:12px;'><input type='radio' name='ans_${id}' value='否'> 否</label>` +
                        `<input type='file' accept='image/*' style='margin-left:8px;width:60px;' onchange='handleCheckItemImg(event,"${id}")'>` +
                        `<span id='imgprev_${id}'></span></div>`;
                    });
                });
                html += `</div><div class='report-actions' style='margin-top:10px;'><button type='button' class='report-btn-submit' onclick='confirmCheckItemSelect()'>确定</button><button type='button' class='report-btn-cancel' onclick='closeCheckItemSelectModal()'>取消</button></div></div></div>`;
                document.body.insertAdjacentHTML('beforeend', html);
            };
            window.handleCheckItemImg = function(e, id) {
                const file = e.target.files[0];
                if (!file) return;
                const reader = new FileReader();
                reader.onload = function(ev) {
                    document.getElementById('imgprev_' + id).innerHTML = `<img src='${ev.target.result}' style='width:32px;height:32px;border-radius:4px;margin-left:2px;'>`;
                };
                reader.readAsDataURL(file);
            };
            window.confirmCheckItemSelect = function() {
                const checked = Array.from(document.querySelectorAll('#checkItemSelectModal input[type=checkbox]:checked'));
                const vals = checked.map(c => {
                    const id = c.id;
                    const itemText = c.parentElement.querySelector('span').innerText;
                    const ans = document.querySelector(`#checkItemSelectModal input[name='ans_${id}']:checked`).value;
                    const img = document.getElementById('imgprev_' + id).innerHTML;
                    return `<div style='display:flex;align-items:center;margin-bottom:2px;'><span style='min-width:80px;'>${itemText}</span><span style='margin:0 8px;color:#333;'>${ans}</span>${img}</div>`;
                });
                document.getElementById('selectedCheckItems').innerHTML = vals.join('');
                document.getElementById('reportContentInput').value = checked.map(c => {
                    const id = c.id;
                    const itemText = c.parentElement.querySelector('span').innerText;
                    const ans = document.querySelector(`#checkItemSelectModal input[name='ans_${id}']:checked`).value;
                    return itemText + ':' + ans;
                }).join('，');
                closeCheckItemSelectModal();
            };
            window.closeCheckItemSelectModal = function() {
                const modal = document.getElementById('checkItemSelectModal');
                if(modal) modal.remove();
            };
        }
        function closeAddReportModal() {
            const modal = document.querySelector('.report-modal-bg');
            if(modal) document.body.removeChild(modal);
        }
        function submitAddReportModal(e) {
            e.preventDefault();
            alert('提交成功！');
            closeAddReportModal();
            renderTaskList();
            return false;
        }
        function previewAddReportImg(e, idx) {
            const file = e.target.files[0];
            if (!file) return;
            const reader = new FileReader();
            reader.onload = function(ev) {
                if(idx===0) document.getElementById('addShopImgPreview').innerHTML = `<img src='${ev.target.result}'>`;
                else document.getElementById('addKitchenImgPreview').innerHTML = `<img src='${ev.target.result}'>`;
            };
            reader.readAsDataURL(file);
        }
        function getNowDateTime() {
            const now = new Date();
            const pad = n => n<10?'0'+n:n;
            return now.getFullYear()+'-'+pad(now.getMonth()+1)+'-'+pad(now.getDate())+'T'+pad(now.getHours())+':'+pad(now.getMinutes());
        }
        // 上报弹窗
        function showReportModal(code) {
            // 跳转到评估督导详情页面
            window.location.href = '评估督导详情.html';
        }
        function closeReportModal() {
            document.getElementById('modal').style.display = 'none';
            document.body.style.overflow = '';
        }
        function submitReportModal(e) {
            e.preventDefault();
            alert('提交成功！');
            closeReportModal();
            renderTaskList();
            return false;
        }
        // 挂到window，确保HTML事件能调用
        window.showReportModal = showReportModal;
        window.closeReportModal = closeReportModal;
        window.submitReportModal = submitReportModal;
        // 评估督导提交弹窗
        function showAssignSubmitModal(code) {
            const task = mockTasks.find(t => t.type === 'assign' && t.code === code);
            if (!task) return;
            let township = '', street = '';
            if (task.area && task.area.includes('-')) {
                [township, street] = task.area.split('-');
            }
            // 优化检查项渲染，递归主项和子项
            function renderCheckRows(items, iPrefix = '') {
                let html = '';
                items.forEach((item, i) => {
                    const idx = iPrefix + i;
                    html += `<tr><td class='score-item-main'>${item.main}</td><td>${item.level || ''}</td><td>${item.score || ''}</td><td></td></tr>`;
                    if(item.children && item.children.length) {
                        item.children.forEach((sub, j) => {
                            html += `<tr><td class='score-item-sub'>${sub.main}</td><td>${sub.level || ''}</td><td>${sub.score || ''}</td><td><select name='opt_${idx}_${j}'><option value=''>请选择</option><option value='是'>是</option><option value='否'>否</option></select></td></tr>`;
                        });
                    } else {
                        html += `<tr><td class='score-item-sub'></td><td></td><td>${item.score || ''}</td><td><select name='opt_${idx}_0'><option value=''>请选择</option><option value='是'>是</option><option value='否'>否</option></select></td></tr>`;
                    }
                });
                return html;
            }
            // 若无数据，给出mock结构
            let checkItems = task.checkItems;
            if (!checkItems || !checkItems.length) {
                checkItems = [
                    { main: '环境卫生', level: '一级', score: '-', children: [
                        { main: '地面清洁', level: '二级', score: '-', },
                        { main: '无垃圾', level: '三级', score: '10', },
                    ]},
                    { main: '食品安全', level: '一级', score: '8', children: [] }
                ];
            }
            let scoreHtml = `<table class='score-table'><tr><th>检查项</th><th>级别</th><th>得分</th><th>选项</th></tr>`;
            scoreHtml += renderCheckRows(checkItems);
            scoreHtml += '</table>';
            // 弹窗内容
            const modal = document.createElement('div');
            modal.className = 'report-modal-bg';
            modal.innerHTML = `
                <div class='report-modal assign-modal-beauty'>
                    <div class='report-title'>提交评估督导</div>
                    <form id='assignSubmitForm' onsubmit='return window.submitAssignSubmitModal(event)'>
                        <div class='form-group'>
                            <label>店铺类型</label>
                            <input type='text' value='${task.shopType || ''}' readonly>
                        </div>
                        <div class='form-group'>
                            <label>店铺名称</label>
                            <input type='text' value='${task.shop}' readonly>
                        </div>
                        <div class='form-group'>
                            <label>乡镇</label>
                            <input type='text' value='${township}' readonly>
                        </div>
                        <div class='form-group'>
                            <label>街道</label>
                            <input type='text' value='${street}' readonly>
                        </div>
                        <div class='form-group'>
                            <label>上报时间</label>
                            <input type='datetime-local' name='reportTime' value='${getNowDateTime()}' required>
                        </div>
                        <div class='form-group'>
                            <label>上报内容</label>
                            <textarea name='reportContent' required></textarea>
                        </div>
                        <div class='form-group'>
                            <label>店铺图片</label>
                            <input type='file' accept='image/*' name='shopImg' onchange='window.previewAssignSubmitImg(event,0)'>
                            <div class='report-imgs' id='assignShopImgPreview'></div>
                        </div>
                        <div class='form-group'>
                            <label>厨房图片</label>
                            <input type='file' accept='image/*' name='kitchenImg' onchange='window.previewAssignSubmitImg(event,1)'>
                            <div class='report-imgs' id='assignKitchenImgPreview'></div>
                        </div>
                        <div class='form-group'>
                            <label>检查评分</label>
                            ${scoreHtml}
                        </div>
                        <div class='report-actions beauty-actions'>
                            <button type='submit' class='report-btn-submit'>提交</button>
                            <button type='button' class='report-btn-cancel' onclick='window.closeAssignSubmitModal()'>取消</button>
                        </div>
                    </form>
                </div>
                <style>
                .assign-modal-beauty {
                    max-width: 380px !important;
                    border-radius: 16px;
                    box-shadow: 0 6px 32px rgba(60,120,180,0.13), 0 2px 8px rgba(0,0,0,0.10);
                    padding: 32px 22px 22px 22px !important;
                }
                .assign-modal-beauty .report-title {
                    color: #4CAF50;
                    font-size: 20px;
                    font-weight: bold;
                    margin-bottom: 24px;
                    text-align: center;
                }
                .assign-modal-beauty .form-group {
                    margin-bottom: 18px;
                }
                .assign-modal-beauty label {
                    font-size: 14px;
                    color: #666;
                    margin-bottom: 6px;
                }
                .assign-modal-beauty input,
                .assign-modal-beauty select,
                .assign-modal-beauty textarea {
                    width: 100%;
                    padding: 9px;
                    border: 1px solid #ddd;
                    border-radius: 6px;
                    font-size: 15px;
                    background: #f8f8f8;
                }
                .assign-modal-beauty textarea {
                    resize: vertical;
                    min-height: 60px;
                }
                .assign-modal-beauty .report-imgs {
                    display: flex;
                    gap: 10px;
                    margin-top: 4px;
                }
                .assign-modal-beauty .report-imgs img {
                    width: 60px;
                    height: 60px;
                    object-fit: cover;
                    border-radius: 6px;
                    border: 1px solid #eee;
                }
                .assign-modal-beauty .score-table {
                    width: 100%;
                    border-collapse: collapse;
                    margin-top: 10px;
                }
                .assign-modal-beauty .score-table th, .assign-modal-beauty .score-table td {
                    border: 1px solid #eee;
                    padding: 7px 8px;
                    font-size: 13px;
                    text-align: center;
                }
                .assign-modal-beauty .score-table th {
                    background: #f8fff8;
                    color: #333;
                }
                .assign-modal-beauty .score-item-main {
                    font-weight: bold;
                    text-align: left;
                }
                .assign-modal-beauty .score-item-sub {
                    text-align: left;
                    padding-left: 2em;
                }
                .beauty-actions {
                    display: flex;
                    gap: 18px;
                    justify-content: center;
                    margin-top: 28px;
                }
                .beauty-actions .report-btn-submit {
                    background: #4CAF50;
                    color: #fff;
                    border: none;
                    border-radius: 6px;
                    font-size: 16px;
                    padding: 10px 0;
                    min-width: 100px;
                    box-shadow: 0 1px 4px rgba(60,60,60,0.07);
                }
                .beauty-actions .report-btn-cancel {
                    background: #f5f5f5;
                    color: #666;
                    border: none;
                    border-radius: 6px;
                    font-size: 16px;
                    padding: 10px 0;
                    min-width: 100px;
                }
                </style>
            `;
            document.body.appendChild(modal);
        }
        window.showAssignSubmitModal = showAssignSubmitModal;
        window.closeAssignSubmitModal = function() {
            const modal = document.querySelector('.report-modal-bg');
            if(modal) document.body.removeChild(modal);
        };
        window.submitAssignSubmitModal = function(e) {
            e.preventDefault();
            alert('提交成功！');
            window.closeAssignSubmitModal();
            renderTaskList();
            return false;
        };
        window.previewAssignSubmitImg = function(e, idx) {
            const file = e.target.files[0];
            if (!file) return;
            const reader = new FileReader();
            reader.onload = function(ev) {
                if(idx===0) document.getElementById('assignShopImgPreview').innerHTML = `<img src='${ev.target.result}'>`;
                else document.getElementById('assignKitchenImgPreview').innerHTML = `<img src='${ev.target.result}'>`;
            };
            reader.readAsDataURL(file);
        };
        // 跟踪弹窗 mock 数据
        const mockTrackDetail = {
            taskName: '5月日常巡查',
            area: '街道A1-乡镇A',
            shop: '老王家饭馆',
            inspector: '张三',
            status: '跟踪中',
            createTime: '2024-05-01',
            checkItems: [
                { main: '环境卫生', level: '一级', score: '-', answer: '-' },
                { main: '地面清洁', level: '二级', score: '-', answer: '-' },
                { main: '无垃圾', level: '三级', score: '10', answer: '是' },
                { main: '食品安全', level: '一级', score: '8', answer: '否' },
            ],
            logs: [
                { time: '2024-05-01 10:00', note: '发现地面有垃圾，已通知整改', solved: false },
                { time: '2024-05-02 09:00', note: '整改完成，待复查', solved: false },
            ]
        };

        window.trackTask = function(code) {
            // 这里可根据 code 查找 mockTrackDetail，实际项目应后端返回
            const d = mockTrackDetail;
            // 基础信息一行一个（美化：加图标、主字段加粗、次字段灰色、间距更优雅）
            let baseInfoHtml = `
                <div style='margin-bottom:8px;display:flex;align-items:center;'><span style="font-size:16px;margin-right:6px;color:#4CAF50;">📋</span><span style='font-weight:600;'>关联任务：</span><span style='color:#666;margin-left:4px;'>${d.taskName}</span></div>
                <div style='margin-bottom:8px;display:flex;align-items:center;'><span style="font-size:16px;margin-right:6px;color:#2196F3;">📍</span><span style='font-weight:600;'>任务地区：</span><span style='color:#666;margin-left:4px;'>${d.area}</span></div>
                <div style='margin-bottom:8px;display:flex;align-items:center;'><span style="font-size:16px;margin-right:6px;color:#FF9800;">🧑‍💼</span><span style='font-weight:600;'>巡检人：</span><span style='color:#666;margin-left:4px;'>${d.inspector}</span></div>
                <div style='margin-bottom:8px;display:flex;align-items:center;'><span style="font-size:16px;margin-right:6px;color:#795548;">🏪</span><span style='font-weight:600;'>店铺名称：</span><span style='color:#666;margin-left:4px;'>${d.shop}</span></div>
                <div style='margin-bottom:8px;display:flex;align-items:center;'><span style="font-size:16px;margin-right:6px;color:#9C27B0;">📄</span><span style='font-weight:600;'>问题单状态：</span><span style='color:#666;margin-left:4px;'>${d.status}</span></div>
                <div style='margin-bottom:8px;display:flex;align-items:center;'><span style="font-size:16px;margin-right:6px;color:#607D8B;">⏰</span><span style='font-weight:600;'>创建时间：</span><span style='color:#666;margin-left:4px;'>${d.createTime}</span></div>
            `;
            // 检查项表格美化：圆角、阴影、斑马纹、字体微调
            let checkHtml = `<table style='width:100%;border-collapse:separate;border-spacing:0;margin-top:8px;background:#fff;border-radius:8px;box-shadow:0 2px 8px rgba(60,60,60,0.08);overflow:hidden;font-size:13px;'>
                <tr style='background:#f5f7fa;font-weight:700;color:#333;'>
                    <th style='padding:7px 4px;'>检查项</th><th>级别</th><th>得分</th><th>答案</th>
                </tr>`;
            d.checkItems.forEach((item, idx) => {
                checkHtml += `<tr style='background:${idx%2===0?'#fafbfc':'#fff'};'>
                    <td style='padding:7px 4px;'>${item.main}</td><td>${item.level}</td><td>${item.score}</td><td>${item.answer}</td>
                </tr>`;
            });
            checkHtml += '</table>';
            // 跟进日志卡片美化：卡片阴影、分割线、分层、柔和色
            let logHtml = d.logs.map(log => `
                <div style='background:#f8f9fa;border-radius:8px;padding:10px 12px;margin-bottom:12px;box-shadow:0 1px 4px rgba(60,60,60,0.07);border:1px solid #f0f0f0;'>
                    <div style='font-size:12px;color:#888;margin-bottom:4px;display:flex;align-items:center;'><span style="font-size:15px;color:#607D8B;margin-right:4px;">⏱️</span>${log.time}</div>
                    <div style='font-size:14px;color:#333;margin-bottom:4px;word-break:break-all;'><span style='font-weight:600;'>备注：</span>${log.note}</div>
                    <div style='font-size:13px;'><span style='font-weight:600;'>是否解决：</span><span style='color:${log.solved ? '#4CAF50' : '#FF9800'};'>${log.solved ? '是' : '否'}</span></div>
                </div>
            `).join('');
            // 新增跟进表单美化
            let addLogHtml = `
                <form id='addTrackLogForm' onsubmit='return window.submitTrackLog(event)'>
                    <div style='display:flex;gap:6px;margin:12px 0;'>
                        <input type='datetime-local' name='logTime' required style='flex:1;padding:7px 4px;font-size:14px;border-radius:5px;border:1px solid #ddd;'>
                        <select name='solved' style='flex:0 0 60px;padding:7px 4px;font-size:14px;border-radius:5px;border:1px solid #ddd;'><option value='否'>否</option><option value='是'>是</option></select>
                    </div>
                    <input type='text' name='logNote' required placeholder='备注' style='width:100%;padding:7px 4px;font-size:14px;margin-bottom:8px;border-radius:5px;border:1px solid #ddd;'>
                    <button type='submit' style='width:100%;background:#4CAF50;color:#fff;border:none;border-radius:6px;font-size:15px;padding:9px 0;margin-top:2px;box-shadow:0 1px 4px rgba(60,60,60,0.07);'>新增</button>
                </form>`;
            const modal = document.createElement('div');
            modal.className = 'report-modal-bg';
            modal.innerHTML = `
                <div class='report-modal' style='max-width:280px;'>
                    <div style='font-size:18px;font-weight:bold;margin-bottom:10px;color:#333;letter-spacing:1px;'>问题单详情</div>
                    ${baseInfoHtml}
                    <div style='font-weight:bold;margin:14px 0 7px 0;color:#4CAF50;font-size:15px;'>问题检查项</div>
                    ${checkHtml}
                    <div style='font-weight:bold;margin:18px 0 7px 0;color:#2196F3;font-size:15px;'>跟进日志</div>
                    ${logHtml}
                    ${addLogHtml}
                    <button class='modal-close' onclick='window.closeTrackModal()' style='margin-top:10px;width:100%;background:#388e3c;color:#fff;border:none;border-radius:6px;font-size:15px;padding:9px 0;'>关闭</button>
                </div>
            `;
            document.body.appendChild(modal);
        };
        window.closeTrackModal = function() {
            const modal = document.querySelector('.report-modal-bg');
            if(modal) document.body.removeChild(modal);
        };
        window.submitTrackLog = function(e) {
            e.preventDefault();
            alert('新增跟进成功！（mock，实际应提交后端并刷新列表）');
            window.closeTrackModal();
            return false;
        };
        // 评估督导统计更新
        function updateEvaluationStats() {
            const assignTasks = mockTasks.filter(t => t.type === 'assign');
            const totalTasks = assignTasks.length;
            const completedTasks = assignTasks.filter(t => t.auditStatus === '已通过').length;
            const completionRate = totalTasks > 0 ? Math.round((completedTasks / totalTasks) * 100) : 0;
            
            document.getElementById('totalTasks').textContent = totalTasks;
            document.getElementById('completedTasks').textContent = completedTasks;
            document.getElementById('completionRate').textContent = completionRate + '%';
        }
        
        // 红黑榜店上传
        function showRedBlackUpload() {
            const evaluationItems = [
                { name: '环境卫生', items: ['地面清洁', '无垃圾', '设备整洁'] },
                { name: '食品安全', items: ['原料新鲜', '加工规范', '储存安全'] },
                { name: '人员管理', items: ['健康证有效', '操作规范', '培训记录'] },
                { name: '设施设备', items: ['设备完好', '维护记录', '安全防护'] }
            ];
            
            let itemsHtml = '';
            evaluationItems.forEach((category, catIndex) => {
                itemsHtml += `
                    <div style="margin-bottom: 20px;">
                        <div style="font-weight: bold; color: #333; margin-bottom: 10px; font-size: 15px;">${category.name}</div>
                `;
                category.items.forEach((item, itemIndex) => {
                    itemsHtml += `
                        <div style="margin-bottom: 12px; padding: 10px; background: #f8f8f8; border-radius: 6px;">
                            <div style="font-size: 14px; color: #666; margin-bottom: 8px;">${item}</div>
                            <div style="display: flex; gap: 10px; margin-bottom: 8px;">
                                <button class="option-btn yes" onclick="selectRedBlackOption(this, 'yes')">是</button>
                                <button class="option-btn no" onclick="selectRedBlackOption(this, 'no')">否</button>
                            </div>
                            <div style="margin-top: 8px;">
                                <input type="file" accept="image/*" onchange="previewRedBlackPhoto(event, '${catIndex}_${itemIndex}')" style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px;">
                                <div class="photo-preview" id="redBlackPhoto_${catIndex}_${itemIndex}"></div>
                            </div>
                        </div>
                    `;
                });
                itemsHtml += '</div>';
            });
            
            // 其他照片上传
            itemsHtml += `
                <div style="margin-top: 20px; padding: 15px; background: #f0f8ff; border-radius: 8px;">
                    <div style="font-weight: bold; color: #333; margin-bottom: 10px;">其他照片上传</div>
                    <input type="file" accept="image/*" multiple onchange="previewOtherPhotos(event)" style="width: 100%; padding: 10px; border: 2px dashed #ddd; border-radius: 6px; background: #f9f9f9;">
                    <div class="photo-preview" id="otherPhotosPreview"></div>
                </div>
            `;
            
            const modal = document.createElement('div');
            modal.className = 'report-modal-bg';
            modal.innerHTML = `
                <div class='report-modal' style='max-width: 420px; max-height: 80vh; overflow-y: auto;'>
                    <div class='report-title'>红黑榜店上传</div>
                    
                    <!-- 新增字段：红黑榜和上榜原因 -->
                    <div style="margin-bottom: 20px; padding: 15px; background: #f8f8f8; border-radius: 8px;">
                        <div style="margin-bottom: 15px;">
                            <label style="display: block; font-size: 14px; color: #333; margin-bottom: 8px; font-weight: bold;">红黑榜</label>
                            <select id="redBlackType" style="width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 4px; font-size: 14px;">
                                <option value="">请选择红黑榜类型</option>
                                <option value="红榜">红榜</option>
                                <option value="黑榜">黑榜</option>
                            </select>
                        </div>
                       
                    </div>
                    
                    <div style="margin-bottom: 20px;">
                        ${itemsHtml}
                    </div>
                    <div class='report-actions'>
                        <button type='button' class='report-btn-submit' onclick='submitRedBlackUpload()'>提交</button>
                        <button type='button' class='report-btn-cancel' onclick='closeRedBlackUpload()'>取消</button>
                    </div>
                </div>
            `;
            document.body.appendChild(modal);
        }
        
        // 选择红黑榜选项
        function selectRedBlackOption(btn, option) {
            const container = btn.parentElement;
            container.querySelectorAll('.option-btn').forEach(b => b.classList.remove('selected'));
            btn.classList.add('selected');
        }
        
        // 预览红黑榜照片
        function previewRedBlackPhoto(e, id) {
            const file = e.target.files[0];
            if (!file) return;
            const reader = new FileReader();
            reader.onload = function(ev) {
                document.getElementById('redBlackPhoto_' + id).innerHTML = `<img src='${ev.target.result}'>`;
            };
            reader.readAsDataURL(file);
        }
        
        // 预览其他照片
        function previewOtherPhotos(e) {
            const files = e.target.files;
            if (!files.length) return;
            
            let html = '';
            for (let i = 0; i < files.length; i++) {
                const reader = new FileReader();
                reader.onload = function(ev) {
                    html += `<img src='${ev.target.result}'>`;
                    document.getElementById('otherPhotosPreview').innerHTML = html;
                };
                reader.readAsDataURL(files[i]);
            }
        }
        
        // 提交红黑榜上传
        function submitRedBlackUpload() {
            alert('红黑榜店上传成功！');
            closeRedBlackUpload();
        }
        
        // 关闭红黑榜上传
        function closeRedBlackUpload() {
            const modal = document.querySelector('.report-modal-bg');
            if(modal) document.body.removeChild(modal);
        }
        
        // 处理任务 - 显示店铺列表
        function showTaskProcess() {
            document.getElementById('searchContainer').style.display = 'none';
            document.getElementById('taskProcessContainer').style.display = 'flex';
            document.getElementById('backButton').style.display = 'block';
            document.getElementById('evaluationStats').style.display = 'none';
            
            // 获取位置信息
            getCurrentLocation();
            // 渲染附近店铺列表
            renderNearbyShops();
        }
        
        // 获取当前位置
        function getCurrentLocation() {
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(
                    function(position) {
                        const lat = position.coords.latitude;
                        const lng = position.coords.longitude;
                        document.getElementById('currentLocation').textContent = `纬度: ${lat.toFixed(6)}, 经度: ${lng.toFixed(6)}`;
                    },
                    function(error) {
                        document.getElementById('currentLocation').textContent = '无法获取位置信息';
                    }
                );
            } else {
                document.getElementById('currentLocation').textContent = '浏览器不支持地理位置';
            }
        }
        
        // 渲染附近店铺列表
        function renderNearbyShops() {
            const mockShops = [
                { name: '老王川菜馆', type: '餐饮店', address: '城关镇东街123号', distance: '50m', healthCert: { name: '王师傅', gender: '男', expiry: '2024-12-31' } },
                { name: '小李快餐', type: '餐饮店', address: '城关镇东街156号', distance: '120m', healthCert: { name: '李师傅', gender: '女', expiry: '2024-06-15' } },
                { name: '张记面馆', type: '餐饮店', address: '城关镇西街89号', distance: '200m', healthCert: { name: '张师傅', gender: '男', expiry: '2023-12-31' } },
                { name: '刘家小炒', type: '餐饮店', address: '大安镇南街45号', distance: '350m', healthCert: { name: '刘师傅', gender: '女', expiry: '2024-08-20' } }
            ];
            
            let html = '';
            mockShops.forEach(shop => {
                html += `
                    <div class="shop-item" onclick="showShopEvaluation('${shop.name}')">
                        <div class="shop-name">${shop.name}</div>
                        <div class="shop-info">类型: ${shop.type}</div>
                        <div class="shop-info">地址: ${shop.address}</div>
                        <div class="shop-distance">距离: ${shop.distance}</div>
                    </div>
                `;
            });
            document.getElementById('shopList').innerHTML = html;
        }
        
        // 店铺搜索
        function handleShopSearch(e) {
            e.preventDefault();
            const shopName = document.getElementById('shopSearchName').value.trim();
            const shopType = document.getElementById('shopSearchType').value;
            
            // 这里可以根据搜索条件过滤店铺列表
            renderNearbyShops();
            return false;
        }
        
        // 显示店铺评估页面
        function showShopEvaluation(shopName) {
            const mockShops = [
                { name: '老王川菜馆', type: '餐饮店', address: '城关镇东街123号', healthCert: { name: '王师傅', gender: '男', expiry: '2024-12-31' } },
                { name: '小李快餐', type: '餐饮店', address: '城关镇东街156号', healthCert: { name: '李师傅', gender: '女', expiry: '2024-06-15' } },
                { name: '张记面馆', type: '餐饮店', address: '城关镇西街89号', healthCert: { name: '张师傅', gender: '男', expiry: '2023-12-31' } },
                { name: '刘家小炒', type: '餐饮店', address: '大安镇南街45号', healthCert: { name: '刘师傅', gender: '女', expiry: '2024-08-20' } }
            ];
            
            const shop = mockShops.find(s => s.name === shopName);
            if (!shop) return;
            
            const today = new Date();
            const expiryDate = new Date(shop.healthCert.expiry);
            const isExpired = expiryDate < today;
            
            const evaluationItems = [
                { name: '环境卫生', items: ['地面清洁', '无垃圾', '设备整洁'] },
                { name: '食品安全', items: ['原料新鲜', '加工规范', '储存安全'] },
                { name: '人员管理', items: ['健康证有效', '操作规范', '培训记录'] },
                { name: '设施设备', items: ['设备完好', '维护记录', '安全防护'] }
            ];
            
            let itemsHtml = '';
            evaluationItems.forEach((category, catIndex) => {
                itemsHtml += `
                    <div style="margin-bottom: 20px;">
                        <div style="font-weight: bold; color: #333; margin-bottom: 10px; font-size: 15px;">${category.name}</div>
                `;
                category.items.forEach((item, itemIndex) => {
                    itemsHtml += `
                        <div style="margin-bottom: 12px; padding: 10px; background: #f8f8f8; border-radius: 6px;">
                            <div style="font-size: 14px; color: #666; margin-bottom: 8px;">${item}</div>
                            <div style="display: flex; gap: 10px; margin-bottom: 8px;">
                                <button class="option-btn yes" onclick="selectEvaluationOption(this, 'yes')">是</button>
                                <button class="option-btn no" onclick="selectEvaluationOption(this, 'no')">否</button>
                            </div>
                        </div>
                    `;
                });
                itemsHtml += '</div>';
            });
            
            const modal = document.createElement('div');
            modal.className = 'report-modal-bg';
            modal.innerHTML = `
                <div class='report-modal' style='max-width: 420px; max-height: 80vh; overflow-y: auto;'>
                    <div class='report-title'>店铺评估 - ${shop.name}</div>
                    
                    <div class="health-cert">
                        <div class="health-title">健康证信息</div>
                        <div class="health-row">
                            <span class="health-label">姓名:</span>
                            <span class="health-value">${shop.healthCert.name}</span>
                        </div>
                        <div class="health-row">
                            <span class="health-label">性别:</span>
                            <span class="health-value">${shop.healthCert.gender}</span>
                        </div>
                        <div class="health-row">
                            <span class="health-label">有效期:</span>
                            <span class="health-value ${isExpired ? 'health-expired' : ''}">${shop.healthCert.expiry} ${isExpired ? '(已过期)' : ''}</span>
                        </div>
                    </div>
                    
                    <div style="margin-bottom: 20px;">
                        ${itemsHtml}
                    </div>
                    
                    <div class="photo-upload">
                        <div class="photo-title">照片上传<span class="photo-required">*</span></div>
                        <input type="file" accept="image/*" multiple onchange="previewEvaluationPhotos(event)" class="photo-input" required>
                        <div class="photo-preview" id="evaluationPhotosPreview"></div>
                    </div>
                    
                    <div class='report-actions'>
                        <button type='button' class='report-btn-submit' onclick='submitShopEvaluation()'>提交评估</button>
                        <button type='button' class='report-btn-cancel' onclick='closeShopEvaluation()'>取消</button>
                    </div>
                </div>
            `;
            document.body.appendChild(modal);
        }
        
        // 选择评估选项
        function selectEvaluationOption(btn, option) {
            const container = btn.parentElement;
            container.querySelectorAll('.option-btn').forEach(b => b.classList.remove('selected'));
            btn.classList.add('selected');
        }
        
        // 预览评估照片
        function previewEvaluationPhotos(e) {
            const files = e.target.files;
            if (!files.length) return;
            
            let html = '';
            for (let i = 0; i < files.length; i++) {
                const reader = new FileReader();
                reader.onload = function(ev) {
                    html += `<img src='${ev.target.result}'>`;
                    document.getElementById('evaluationPhotosPreview').innerHTML = html;
                };
                reader.readAsDataURL(files[i]);
            }
        }
        
        // 提交店铺评估
        function submitShopEvaluation() {
            alert('店铺评估提交成功！');
            closeShopEvaluation();
        }
        
        // 关闭店铺评估
        function closeShopEvaluation() {
            const modal = document.querySelector('.report-modal-bg');
            if(modal) document.body.removeChild(modal);
        }
        
        // 返回任务列表
        function backToTaskList() {
            document.getElementById('searchContainer').style.display = 'block';
            document.getElementById('taskProcessContainer').style.display = 'none';
            document.getElementById('backButton').style.display = 'none';
            document.getElementById('evaluationStats').style.display = 'block';
        }
        
        // 处理任务弹窗
        function showTaskProcessModal(taskCode) {
            // 模拟任务数据
            const taskData = {
                'TASK2024002': {
                    type: '常规',
                    name: '专项检查',
                    content: '节前专项食品安全检查，重点检查餐饮店的卫生状况和食品安全措施',
                    assignTime: '2024-03-27 14:30',
                    deadline: '2024-04-05 18:00',
                    shop: '小李快餐'
                },
                'TASK2024004': {
                    type: '突击',
                    name: '季度检查',
                    content: '季度食品安全检查，全面评估店铺的食品安全管理水平',
                    assignTime: '2024-03-19 16:00',
                    deadline: '2024-03-25 18:00',
                    shop: '刘家小炒'
                }
            };
            
            const task = taskData[taskCode] || {
                type: '单项',
                name: '日常检查',
                content: '日常食品安全巡查',
                assignTime: '2024-03-20 09:00',
                deadline: '2024-03-30 18:00',
                shop: '老王川菜馆'
            };
            
            // 模拟健康证数据
            const healthCertData = [
                { name: '王师傅', gender: '男', startDate: '2023-01-01', endDate: '2024-12-31', isExpired: false },
                { name: '李师傅', gender: '女', startDate: '2023-06-01', endDate: '2024-06-15', isExpired: true },
                { name: '张师傅', gender: '男', startDate: '2023-03-01', endDate: '2024-03-01', isExpired: true }
            ];
            
            // 评分细项（参考红黑榜上传）
            const evaluationItems = [
                { name: '环境卫生', items: ['地面清洁', '无垃圾', '设备整洁'] },
                { name: '食品安全', items: ['原料新鲜', '加工规范', '储存安全'] },
                { name: '人员管理', items: ['健康证有效', '操作规范', '培训记录'] },
                { name: '设施设备', items: ['设备完好', '维护记录', '安全防护'] }
            ];
            
            // 任务信息HTML
            let taskInfoHtml = `
                <div style="background: #f8f9fa; padding: 15px; border-radius: 8px; margin-bottom: 20px;">
                    <div style="font-weight: bold; color: #333; margin-bottom: 10px; font-size: 16px;">任务信息</div>
                    <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px; font-size: 14px;">
                        <div><span style="color: #666;">任务类型:</span> <span style="color: #333;">${task.type}</span></div>
                        <div><span style="color: #666;">任务名称:</span> <span style="color: #333;">${task.name}</span></div>
                        <div style="grid-column: 1 / -1;"><span style="color: #666;">任务内容:</span> <span style="color: #333;">${task.content}</span></div>
                        <div><span style="color: #666;">下发时间:</span> <span style="color: #333;">${task.assignTime}</span></div>
                        <div><span style="color: #666;">截止日期:</span> <span style="color: #333;">${task.deadline}</span></div>
                    </div>
                </div>
            `;
            
            // 健康证列表HTML
            let healthCertHtml = `
                <div style="margin-bottom: 20px;">
                    <div style="font-weight: bold; color: #333; margin-bottom: 10px; font-size: 16px;">店铺健康证列表</div>
                    <div style="background: #fff; border: 1px solid #eee; border-radius: 8px; overflow: hidden;">
                        <table style="width: 100%; border-collapse: collapse; font-size: 14px;">
                            <thead style="background: #f5f5f5;">
                                <tr>
                                    <th style="padding: 10px; text-align: left; border-bottom: 1px solid #eee;">姓名</th>
                                    <th style="padding: 10px; text-align: left; border-bottom: 1px solid #eee;">性别</th>
                                    <th style="padding: 10px; text-align: left; border-bottom: 1px solid #eee;">有效期至</th>
                                    <th style="padding: 10px; text-align: left; border-bottom: 1px solid #eee;">状态</th>
                                </tr>
                            </thead>
                            <tbody>
            `;
            
            healthCertData.forEach(cert => {
                const statusClass = cert.isExpired ? 'health-expired' : '';
                const statusText = cert.isExpired ? '过期' : '正常';
                healthCertHtml += `
                    <tr>
                        <td style="padding: 10px; border-bottom: 1px solid #eee;">${cert.name}</td>
                        <td style="padding: 10px; border-bottom: 1px solid #eee;">${cert.gender}</td>
                        <td style="padding: 10px; border-bottom: 1px solid #eee;">${cert.endDate}</td>
                        <td style="padding: 10px; border-bottom: 1px solid #eee;">
                            <span style="color: ${cert.isExpired ? '#f44336' : '#4CAF50'}; font-weight: bold; cursor: pointer; text-decoration: underline;" 
                                  onclick="${cert.isExpired ? 'showHealthCertModal(\'' + task.shop + '\')' : 'window.location.href=\'修改店铺.html\''}" 
                                  title="${cert.isExpired ? '点击管理健康证' : '点击跳转到修改店铺页面'}">${statusText}</span>
                        </td>
                    </tr>
                `;
            });
            
            healthCertHtml += `
                            </tbody>
                        </table>
                    </div>
                </div>
            `;
            
            // 评分细项HTML（紧凑单行、单选样式）
            let evaluationHtml = `
                <div style="margin-bottom: 20px;">
                    <div style="font-weight: bold; color: #333; margin-bottom: 10px; font-size: 16px;">评分细项</div>
            `;
            evaluationItems.forEach((category, catIndex) => {
                evaluationHtml += `
                    <div style="margin-bottom:6px;">
                        <div style="font-weight: bold; color: #333; margin-bottom:3px; font-size:13px;">${category.name}</div>
                `;
                category.items.forEach((item, itemIndex) => {
                    const radioName = `task_radio_${catIndex}_${itemIndex}`;
                    const photoId = `task_photo_${catIndex}_${itemIndex}`;
                    evaluationHtml += `
                        <div style="display:flex;align-items:center;justify-content:space-between;padding:2px 0 0 0;margin-bottom:1px;background:none;min-height:28px;">
                            <div style="font-size:12px;color:#444;min-width:70px;">${item}</div>
                            <div style="display:flex;align-items:center;gap:6px;">
                                <label style="display:flex;align-items:center;font-size:12px;cursor:pointer;">
                                    <span style="margin-right:1px;">是</span>
                                    <input type="radio" name="${radioName}" value="yes" style="margin:0 0 0 1px;">
                                </label>
                                <label style="display:flex;align-items:center;font-size:12px;cursor:pointer;">
                                    <span style="margin-right:1px;">否</span>
                                    <input type="radio" name="${radioName}" value="no" style="margin:0 0 0 1px;">
                                </label>
                            </div>
                            <div style="margin-left:6px;">
                                <input type="file" accept="image/*" onchange="previewTaskPhoto(event, '${photoId}')" style="width:60px;">
                                <div class="photo-preview" id="${photoId}" style="margin-top:2px;"></div>
                            </div>
                        </div>
                    `;
                });
                evaluationHtml += '</div>';
            });
            evaluationHtml += `
                <div style="margin-bottom: 20px; padding: 15px; background: #f0f8ff; border-radius: 8px;">
                    <div style="font-weight: bold; color: #333; margin-bottom: 10px; font-size: 16px;">下发任务图片上传</div>
                    <div style="font-size: 12px; color: #f44336; margin-bottom: 4px;">* 必传图片</div>
                    <input type="file" accept="image/*" multiple onchange="previewTaskAssignPhotos(event)" style="width: 100%; padding: 10px; border: 2px dashed #ddd; border-radius: 6px; background: #f9f9f9; font-size: 12px;">
                    <div class="photo-preview" id="taskAssignPhotosPreview" style="margin-top: 8px;"></div>
                </div>
            `;
            evaluationHtml += '</div>';
            
            // 创建弹窗
            const modal = document.createElement('div');
            modal.className = 'report-modal-bg';
            modal.innerHTML = `
                <div class='report-modal' style='max-width: 500px; max-height: 80vh; overflow-y: auto;'>
                    <div class='report-title'>处理任务 - ${task.shop}</div>
                    ${taskInfoHtml}
                    ${healthCertHtml}
                    ${evaluationHtml}
                    <div class='report-actions'>
                        <button type='button' class='report-btn-submit' onclick='submitTaskProcess()'>提交</button>
                        <button type='button' class='report-btn-cancel' onclick='closeTaskProcessModal()'>取消</button>
                    </div>
                </div>
            `;
            document.body.appendChild(modal);
        }
        
        // 选择任务评估选项
        function selectTaskEvaluationOption(btn, option) {
            const container = btn.parentElement;
            container.querySelectorAll('.option-btn').forEach(b => b.classList.remove('selected'));
            btn.classList.add('selected');
        }
        
        // 提交任务处理
        function submitTaskProcess() {
            // 检查是否所有评分细项都已选择
            const optionBtns = document.querySelectorAll('.option-btn.selected');
            const totalItems = 12; // 总共有12个评分细项
            
            if (optionBtns.length < totalItems) {
                alert('请完成所有评分细项的选择！');
                return;
            }
            
            // 检查是否所有评分细项都上传了图片
            const photoInputs = document.querySelectorAll('input[type="file"]');
            let missingPhotos = 0;
            
            photoInputs.forEach((input, index) => {
                if (!input.files || input.files.length === 0) {
                    missingPhotos++;
                }
            });
            
            if (missingPhotos > 0) {
                alert(`还有 ${missingPhotos} 个必传图片未上传，请完成所有图片上传！`);
                return;
            }
            
            alert('任务处理提交成功！');
            closeTaskProcessModal();
        }
        
        // 关闭任务处理弹窗
        function closeTaskProcessModal() {
            const modal = document.querySelector('.report-modal-bg');
            if(modal) document.body.removeChild(modal);
        }
        
        // 预览任务评分细项图片
        function previewTaskPhoto(e, photoId) {
            const file = e.target.files[0];
            if (!file) return;
            const reader = new FileReader();
            reader.onload = function(ev) {
                document.getElementById(photoId).innerHTML = `<img src='${ev.target.result}' style="width: 80px; height: 80px; object-fit: cover; border-radius: 4px; border: 1px solid #eee;">`;
            };
            reader.readAsDataURL(file);
        }
        
        // 预览下发任务图片
        function previewTaskAssignPhotos(e) {
            const files = e.target.files;
            if (!files.length) return;
            
            let html = '';
            for (let i = 0; i < files.length; i++) {
                const reader = new FileReader();
                reader.onload = function(ev) {
                    html += `<img src='${ev.target.result}' style="width: 80px; height: 80px; object-fit: cover; border-radius: 4px; border: 1px solid #eee; margin-right: 8px;">`;
                    document.getElementById('taskAssignPhotosPreview').innerHTML = html;
                };
                reader.readAsDataURL(files[i]);
            }
        }

        // 巡检异常处理弹窗
        function showProcessModal(id) {
            // 支持示例数据
            let item = mockInspectionReports.find(i => i.id === id);
            if (!item) {
                // 兼容自动生成的示例数据
                item = {
                    id,
                    shopName: '示例店铺',
                    shopType: '餐饮店',
                    reportTime: new Date().toLocaleString('zh-CN'),
                    reportContent: '示例上报内容',
                    exceptionStatus: '已处理',
                    auditStatus: '待审核',
                    detail: {
                        processLogs: []
                    },
                    processLogs: [],
                    // 补充selectedCheckItems示例
                    selectedCheckItems: [
                        { item: '后厨卫生', ans: '否', img: '' },
                        { item: '员工健康证', ans: '是', img: '' }
                    ]
                };
            }
            if (!item.detail) item.detail = {};
            if (!item.detail.processLogs) item.detail.processLogs = [];
            if (!item.processLogs) item.processLogs = item.detail.processLogs;
            // 自动补全 selectedCheckItems
            if (!item.selectedCheckItems || !Array.isArray(item.selectedCheckItems) || !item.selectedCheckItems.length) {
                if (item.reportContent) {
                    // 按逗号、顿号、分号等分割
                    const parts = item.reportContent.split(/[，,；;、]/).map(s => s.trim()).filter(Boolean);
                    item.selectedCheckItems = parts.map(txt => ({ item: txt, ans: '否', img: '' }));
                } else {
                    item.selectedCheckItems = [];
                }
            }
            // 展示上报内容（只展示答案为"否"的项）
            let reportContentHtml = '';
            if (item.selectedCheckItems && Array.isArray(item.selectedCheckItems) && item.selectedCheckItems.length) {
                const filtered = item.selectedCheckItems.filter(row => row.ans === '否');
                if (filtered.length) {
                    reportContentHtml = filtered.map(row =>
                        `<div style='display:flex;align-items:center;margin-bottom:2px;'><span style='min-width:80px;'>${row.item}</span><span style='margin:0 8px;color:#e53935;'>${row.ans}</span>${row.img ? `<img src='${row.img}' style='width:32px;height:32px;border-radius:4px;margin-left:2px;'>` : ''}</div>`
                    ).join('');
                } else {
                    reportContentHtml = `<div style='color:#888;'>无不合格项</div>`;
                }
            } else {
                reportContentHtml = `<div style='color:#888;'>${item.reportContent || '无'}</div>`;
            }
            // 展示处理日志
            let logsHtml = '';
            (item.processLogs || []).forEach(log => {
                let logHtml = `<div style='margin-bottom:8px;'>`;
                logHtml += `<div style='display:flex;align-items:center;margin-bottom:4px;'><span style='color:#888;font-size:12px;margin-right:8px;'>${log.time}</span><span style='color:#333;'>${log.content}</span></div>`;
                if (log.images && log.images.length > 0) {
                    logHtml += `<div style='display:flex;gap:4px;margin-left:60px;'>`;
                    log.images.forEach(imgSrc => {
                        logHtml += `<img src='${imgSrc}' style='width:60px;height:60px;object-fit:cover;border-radius:4px;border:1px solid #eee;'>`;
                    });
                    logHtml += `</div>`;
                }
                logHtml += `</div>`;
                logsHtml += logHtml;
            });
            const modal = document.createElement('div');
            modal.className = 'report-modal-bg';
            modal.innerHTML = `
                <div class='report-modal' style='max-width: 420px;'>
                    <div class='report-title'>处理巡检异常</div>
                    <form id='processForm' onsubmit='return false;'>
                        <div class='report-form-group' style='margin-bottom:18px;'>
                            <label>处理状态</label>
                            <label style='margin-right:16px;'><input type='radio' name='processStatus' value='未处理' ${item.exceptionStatus==='未处理'?'checked':''}> 未处理</label>
                            <label><input type='radio' name='processStatus' value='已处理' ${item.exceptionStatus==='已处理'?'checked':''}> 已处理</label>
                        </div>
                        <div class='report-form-group' style='margin-bottom:18px;'>
                            <label>上报内容</label>
                            <div style='background:#f8f9fa;padding:10px 8px;border-radius:6px;font-size:13px;'>${reportContentHtml}</div>
                        </div>
                        <div class='report-form-group' style='margin-bottom:18px;'>
                            <label>处理日志</label>
                            <div id='processLogsList' style='margin-bottom:8px;'>${logsHtml || '<div style="color:#888;">暂无日志</div>'}</div>
                            <div style='margin-bottom:8px;'>
                                <input id='newProcessLog' type='text' placeholder='请输入处理内容' style='width:100%;padding:7px 8px;border:1px solid #ddd;border-radius:4px;font-size:13px;margin-bottom:6px;'>
                                <div style='display:flex;gap:6px;align-items:center;'>
                                    <input type='file' id='processLogImage' accept='image/*' onchange='previewProcessLogImage(event)' style='flex:1;padding:4px;border:1px solid #ddd;border-radius:4px;font-size:12px;'>
                                    <button type='button' class='report-btn-submit' style='padding:7px 14px;' onclick='addProcessLog()'>新增</button>
                                </div>
                                <div id='processLogImagePreview' style='display:flex;gap:4px;margin-top:6px;flex-wrap:wrap;'></div>
                            </div>
                        </div>
                        <div class='report-actions'>
                            <button type='button' class='report-btn-submit' onclick='saveProcessModal(${id})'>保存</button>
                            <button type='button' class='report-btn-cancel' onclick='closeProcessModal()'>取消</button>
                        </div>
                    </form>
                </div>
            `;
            document.body.appendChild(modal);
            // 处理日志新增
            window.addProcessLog = function() {
                const input = document.getElementById('newProcessLog');
                const imageInput = document.getElementById('processLogImage');
                const val = input.value.trim();
                if (!val) { input.focus(); return; }
                
                const now = new Date().toLocaleString('zh-CN');
                const logEntry = { time: now, content: val, images: [] };
                
                // 处理图片
                const imagePreview = document.getElementById('processLogImagePreview');
                const imageElements = imagePreview.querySelectorAll('img');
                imageElements.forEach(img => {
                    logEntry.images.push(img.src);
                });
                
                item.processLogs.push(logEntry);
                
                // 显示日志条目
                let logHtml = `<div style='margin-bottom:8px;'>`;
                logHtml += `<div style='display:flex;align-items:center;margin-bottom:4px;'><span style='color:#888;font-size:12px;margin-right:8px;'>${now}</span><span style='color:#333;'>${val}</span></div>`;
                if (logEntry.images.length > 0) {
                    logHtml += `<div style='display:flex;gap:4px;margin-left:60px;'>`;
                    logEntry.images.forEach(imgSrc => {
                        logHtml += `<img src='${imgSrc}' style='width:60px;height:60px;object-fit:cover;border-radius:4px;border:1px solid #eee;'>`;
                    });
                    logHtml += `</div>`;
                }
                logHtml += `</div>`;
                
                document.getElementById('processLogsList').innerHTML += logHtml;
                input.value = '';
                imageInput.value = '';
                imagePreview.innerHTML = '';
            };
            
            // 处理图片预览
            window.previewProcessLogImage = function(event) {
                const file = event.target.files[0];
                if (!file) return;
                
                const reader = new FileReader();
                reader.onload = function(e) {
                    const preview = document.getElementById('processLogImagePreview');
                    const img = document.createElement('img');
                    img.src = e.target.result;
                    img.style.cssText = 'width:60px;height:60px;object-fit:cover;border-radius:4px;border:1px solid #eee;';
                    preview.appendChild(img);
                };
                reader.readAsDataURL(file);
            };
            // 保存处理
            window.saveProcessModal = function(id) {
                const status = document.querySelector('input[name="processStatus"]:checked').value;
                item.exceptionStatus = status;
                item.detail.processLogs = item.processLogs;
                alert('保存成功！');
                closeProcessModal();
                renderTaskList();
            };
        }

        // 关闭处理弹窗
        function closeProcessModal() {
            const modal = document.querySelector('.report-modal-bg');
            if(modal) document.body.removeChild(modal);
        }

        // 巡检异常详情弹窗
        function showInspectionDetail(id) {
            const item = mockInspectionReports.find(i => i.id === id);
            if (!item) return;
            const detail = item.detail || {};
            // 基础信息
            const shopType = item.shopType || (detail.basicInfo && detail.basicInfo.shopType) || '-';
            const shopName = item.shopName || (detail.basicInfo && detail.basicInfo.shopName) || '-';
            const rectifyType = item.rectifyType || '-';
            const processStatus = item.exceptionStatus || (detail.processInfo && detail.processInfo.status) || '-';
            // 上报内容
            let reportContentHtml = '';
            if (item.selectedCheckItems && Array.isArray(item.selectedCheckItems) && item.selectedCheckItems.length) {
                reportContentHtml = item.selectedCheckItems.map(row =>
                    `<div style='display:flex;align-items:center;margin-bottom:2px;'><span style='min-width:80px;'>${row.item}</span><span style='margin:0 8px;color:#333;'>${row.ans}</span>${row.img ? `<img src='${row.img}' style='width:32px;height:32px;border-radius:4px;margin-left:2px;'>` : ''}</div>`
                ).join('');
            } else {
                reportContentHtml = `<div style='color:#888;'>${item.reportContent || '-'}</div>`;
            }
            // 上报人、时间
            const reporter = (detail.reportInfo && detail.reportInfo.reporter) || item.reporter || '-';
            const reportTime = (detail.reportInfo && detail.reportInfo.reportTime) || item.reportTime || '-';
            // 审核信息
            const auditInfo = detail.auditInfo || {};
            const auditStatusClass = auditInfo.status === '已通过' ? 'status-approved' : 
                                   auditInfo.status === '已驳回' ? 'status-rejected' : 'status-pending';
            // 处理日志
            const processLogs = (item.processLogs && item.processLogs.length) ? item.processLogs : (detail.processLogs || []);
            let logsHtml = '';
            if (processLogs.length) {
                logsHtml = processLogs.map(log => {
                    let logHtml = `<div style='margin-bottom:8px;'>`;
                    logHtml += `<div style='display:flex;align-items:center;margin-bottom:4px;'><span style='color:#888;font-size:12px;margin-right:8px;'>${log.time}</span><span style='color:#333;'>${log.content}</span></div>`;
                    if (log.images && log.images.length > 0) {
                        logHtml += `<div style='display:flex;gap:4px;margin-left:60px;'>`;
                        log.images.forEach(imgSrc => {
                            logHtml += `<img src='${imgSrc}' style='width:60px;height:60px;object-fit:cover;border-radius:4px;border:1px solid #eee;'>`;
                        });
                        logHtml += `</div>`;
                    }
                    logHtml += `</div>`;
                    return logHtml;
                }).join('');
            } else {
                logsHtml = '<div style="color:#888;">暂无日志</div>';
            }
            const modal = document.createElement('div');
            modal.className = 'report-modal-bg';
            modal.innerHTML = `
                <div class='report-modal' style='max-width: 520px; max-height: 80vh; overflow-y: auto;'>
                    <div class='report-title'>巡检异常详情</div>
                    <!-- 基础信息 -->
                    <div style="margin-bottom: 20px;">
                        <div style="font-weight: bold; color: #333; margin-bottom: 10px; font-size: 16px;">基础信息</div>
                        <div style="background: #f8f9fa; padding: 15px; border-radius: 8px; font-size: 14px;">
                            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px;">
                                <div><strong>店铺类型：</strong>${shopType}</div>
                                <div><strong>店铺名称：</strong>${shopName}</div>
                                <div><strong>整改类型：</strong>${rectifyType}</div>
                                <div><strong>处理状态：</strong>${processStatus}</div>
                            </div>
                        </div>
                    </div>
                    <!-- 上报信息 -->
                    <div style="margin-bottom: 20px;">
                        <div style="font-weight: bold; color: #333; margin-bottom: 10px; font-size: 16px;">上报信息</div>
                        <div style="background: #f8f9fa; padding: 15px; border-radius: 8px; font-size: 14px;">
                            <div style="margin-bottom: 8px;"><strong>上报内容：</strong></div>
                            <div style='margin-bottom:8px;'>${reportContentHtml}</div>
                            <div style="margin-bottom: 8px;"><strong>上报人：</strong>${reporter}</div>
                            <div><strong>上报时间：</strong>${reportTime}</div>
                        </div>
                    </div>
                    <!-- 审核信息 -->
                    <div style="margin-bottom: 20px;">
                        <div style="font-weight: bold; color: #333; margin-bottom: 10px; font-size: 16px;">审核信息</div>
                        <div style="background: #f8f9fa; padding: 15px; border-radius: 8px; font-size: 14px;">
                            <div style="margin-bottom: 8px;"><strong>审核状态：</strong><span class="${auditStatusClass}">${auditInfo.status || '-'}</span></div>
                            <div style="margin-bottom: 8px;"><strong>审核人：</strong>${auditInfo.auditor || '-'}</div>
                            <div style="margin-bottom: 8px;"><strong>审核时间：</strong>${auditInfo.auditTime || '-'}</div>
                            <div><strong>审核备注：</strong>${auditInfo.auditRemark || '-'}</div>
                        </div>
                    </div>
                    <!-- 处理日志 -->
                    <div style="margin-bottom: 20px;">
                        <div style="font-weight: bold; color: #333; margin-bottom: 10px; font-size: 16px;">处理日志</div>
                        <div style="background: #f8f9fa; padding: 15px; border-radius: 8px; font-size: 14px;">
                            ${logsHtml}
                        </div>
                    </div>
                    <div class='report-actions' style='justify-content: flex-end;'>
                        <button class='report-btn-cancel' onclick='closeInspectionDetail()'>关闭</button>
                    </div>
                </div>
            `;
            document.body.appendChild(modal);
        }

        // 关闭详情弹窗
        function closeInspectionDetail() {
            const modal = document.querySelector('.report-modal-bg');
            if(modal) document.body.removeChild(modal);
        }

        // 重新提交弹窗（用于已驳回的情况）
        function showResubmitModal(id) {
            const item = mockInspectionReports.find(i => i.id === id);
            if (!item) return;

            const modal = document.createElement('div');
            modal.className = 'report-modal-bg';
            modal.innerHTML = `
                <div class='report-modal' style='max-width: 500px;'>
                    <div class='report-title'>重新提交巡检异常</div>
                    <div style="margin-bottom: 20px;">
                        <div style="font-weight: bold; color: #333; margin-bottom: 10px;">异常信息</div>
                        <div style="background: #f8f9fa; padding: 15px; border-radius: 8px; font-size: 14px;">
                            <div style="margin-bottom: 8px;"><strong>店铺：</strong>${item.shopName}</div>
                            <div style="margin-bottom: 8px;"><strong>原上报内容：</strong>${item.reportContent}</div>
                            <div style="margin-bottom: 8px;"><strong>驳回原因：</strong>${item.detail.auditInfo.auditRemark}</div>
                        </div>
                    </div>
                    <div style="margin-bottom: 20px;">
                        <div style="font-weight: bold; color: #333; margin-bottom: 10px;">补充说明 <span style="color: #f44336;">*</span></div>
                        <textarea id="resubmitContent" placeholder="请补充详细说明..." style="width: 100%; height: 100px; padding: 10px; border: 1px solid #ddd; border-radius: 4px; resize: vertical;"></textarea>
                    </div>
                    <div style="margin-bottom: 20px;">
                        <div style="font-weight: bold; color: #333; margin-bottom: 10px;">补充图片</div>
                        <input type="file" accept="image/*" multiple onchange="previewResubmitImages(event)" style="width: 100%; padding: 10px; border: 2px dashed #ddd; border-radius: 6px; background: #f9f9f9;">
                        <div id="resubmitImagesPreview" style="display: flex; gap: 8px; margin-top: 8px;"></div>
                    </div>
                    <div class='report-actions'>
                        <button type='button' class='report-btn-submit' onclick='submitResubmit(${id})'>提交</button>
                        <button type='button' class='report-btn-cancel' onclick='closeResubmitModal()'>取消</button>
                    </div>
                </div>
            `;
            document.body.appendChild(modal);
        }

        // 预览重新提交图片
        function previewResubmitImages(e) {
            const files = e.target.files;
            const preview = document.getElementById('resubmitImagesPreview');
            preview.innerHTML = '';
            
            if (files.length > 0) {
                for (let i = 0; i < files.length; i++) {
                    const reader = new FileReader();
                    reader.onload = function(ev) {
                        preview.innerHTML += `<img src='${ev.target.result}' style="width: 80px; height: 80px; object-fit: cover; border-radius: 4px; border: 1px solid #eee;">`;
                    };
                    reader.readAsDataURL(files[i]);
                }
            }
        }

        // 提交重新提交
        function submitResubmit(id) {
            const content = document.getElementById('resubmitContent').value.trim();
            if (!content) {
                alert('请输入补充说明！');
                return;
            }

            // 更新数据
            const item = mockInspectionReports.find(i => i.id === id);
            if (item) {
                item.reportContent = item.reportContent + '\n\n补充说明：' + content;
                item.auditStatus = '待审核';
                item.detail.auditInfo.status = '待审核';
                item.detail.auditInfo.auditor = '-';
                item.detail.auditInfo.auditTime = '-';
                item.detail.auditInfo.auditRemark = '-';
            }

            alert('重新提交成功！');
            closeResubmitModal();
            renderTaskList(); // 重新渲染列表
        }

        // 关闭重新提交弹窗
        function closeResubmitModal() {
            const modal = document.querySelector('.report-modal-bg');
            if(modal) document.body.removeChild(modal);
        }
        
        // 显示店铺列表弹窗
        function showStoreListModal() {
            // 模拟店铺数据
            const mockStores = [
                {
                    name: '老王川菜馆',
                    registerName: '老王川菜馆有限公司',
                    address: '城关镇东街123号',
                    distance: '50m'
                },
                {
                    name: '小李快餐',
                    registerName: '小李快餐店',
                    address: '城关镇东街156号',
                    distance: '120m'
                },
                {
                    name: '张记面馆',
                    registerName: '张记面馆个体户',
                    address: '城关镇西街89号',
                    distance: '200m'
                },
                {
                    name: '刘家小炒',
                    registerName: '刘家小炒店',
                    address: '大安镇南街45号',
                    distance: '350m'
                },
                {
                    name: '川味轩',
                    registerName: '川味轩餐饮有限公司',
                    address: '城关镇东街200号',
                    distance: '180m'
                },
                {
                    name: '粤式茶餐厅',
                    registerName: '粤式茶餐厅个体户',
                    address: '大安镇北街78号',
                    distance: '420m'
                }
            ];
            
            const modal = document.createElement('div');
            modal.className = 'store-list-modal';
            modal.innerHTML = `
                <div class="store-list-content">
                    <div class="store-list-title">选择店铺进行评估督导</div>
                    
                    <!-- 搜索框 -->
                    <div class="store-search-container">
                        <input type="text" id="storeSearchInput" class="store-search-input" placeholder="请输入店铺门头名称或注册名称关键字搜索" oninput="searchStores()">
                        <button class="store-search-btn" onclick="searchStores()">搜索</button>
                    </div>
                    
                    <div class="store-list-container" id="storeListContainer">
                        ${renderStoreList(mockStores)}
                    </div>
                    
                    <div style="margin-top: 20px; text-align: center;">
                        <button class="report-btn-cancel" onclick="closeStoreListModal()">关闭</button>
                    </div>
                </div>
            `;
            document.body.appendChild(modal);
            
            // 存储店铺数据供搜索使用
            window.storeModalData = mockStores;
        }
        
        // 渲染店铺列表
        function renderStoreList(stores) {
            if (stores.length === 0) {
                return '<div class="no-stores-found">未找到匹配的店铺</div>';
            }
            
            let storesHtml = '';
            stores.forEach((store, index) => {
                storesHtml += `
                    <div class="store-item">
                        <div class="store-name">${store.name}</div>
                        <div class="store-register-name">注册名称：${store.registerName}</div>
                        <div class="store-address">
                            详细地址：${store.address} <span class="store-distance">（距离${store.distance}）</span>
                        </div>
                        <button class="evaluation-btn" onclick="showEvaluationItemsModal('${store.name}')">评估督导</button>
                    </div>
                `;
            });
            return storesHtml;
        }
        
        // 搜索店铺
        function searchStores() {
            const searchInput = document.getElementById('storeSearchInput');
            const searchTerm = searchInput.value.trim().toLowerCase();
            const storeListContainer = document.getElementById('storeListContainer');
            
            if (!window.storeModalData) return;
            
            let filteredStores;
            if (searchTerm === '') {
                // 如果搜索框为空，显示所有店铺
                filteredStores = window.storeModalData;
            } else {
                // 根据门头名称或注册名称进行模糊搜索
                filteredStores = window.storeModalData.filter(store => 
                    store.name.toLowerCase().includes(searchTerm) ||
                    store.registerName.toLowerCase().includes(searchTerm)
                );
            }
            
            // 更新店铺列表显示
            storeListContainer.innerHTML = renderStoreList(filteredStores);
        }
        
        // 关闭店铺列表弹窗
        function closeStoreListModal() {
            const modal = document.querySelector('.store-list-modal');
            if(modal) document.body.removeChild(modal);
        }
        
        // 显示检查项弹窗
        function showEvaluationItemsModal(storeName) {
            // 参考红黑榜上传的检查项内容
            const evaluationItems = [
                { name: '环境卫生', items: ['地面清洁', '无垃圾', '设备整洁'] },
                { name: '食品安全', items: ['原料新鲜', '加工规范', '储存安全'] },
                { name: '人员管理', items: ['健康证有效', '操作规范', '培训记录'] },
                { name: '设施设备', items: ['设备完好', '维护记录', '安全防护'] }
            ];

            // 模拟健康证数据
            const healthCerts = [
                { name: '王师傅', gender: '男', valid: '2024-12-31', status: '正常' },
                { name: '李师傅', gender: '女', valid: '2024-06-15', status: '过期' },
                { name: '张师傅', gender: '男', valid: '2024-03-01', status: '过期' }
            ];

            let healthCertHtml = `
                <div style="margin-bottom:18px;">
                    <div style="font-weight:bold;font-size:15px;margin-bottom:8px;">店铺健康证列表</div>
                    <div style="background:#fafbfc;padding:10px 10px 0 10px;border-radius:8px;">
                        <table style="width:100%;border-collapse:collapse;">
                            <thead>
                                <tr style="background:#f5f5f5;">
                                    <th style="padding:6px 4px;font-size:13px;">姓名</th>
                                    <th style="padding:6px 4px;font-size:13px;">性别</th>
                                    <th style="padding:6px 4px;font-size:13px;">有效期至</th>
                                    <th style="padding:6px 4px;font-size:13px;">状态</th>
                                </tr>
                            </thead>
                            <tbody>
                                ${healthCerts.map(cert => `
                                    <tr>
                                        <td style='padding:6px 4px;text-align:center;'>${cert.name}</td>
                                        <td style='padding:6px 4px;text-align:center;'>${cert.gender}</td>
                                        <td style='padding:6px 4px;text-align:center;'>${cert.valid}</td>
                                        <td style='padding:6px 4px;text-align:center;'>
                                            ${cert.status === '正常'
                                                ? `<span style='color:#43a047;font-weight:bold;'>正常</span>`
                                                : `<span class='cert-expired' style='color:#e53935;font-weight:bold;cursor:pointer;text-decoration:underline;' onclick="showHealthCertModal('${storeName}')">过期</span>`}
                                        </td>
                                    </tr>
                                `).join('')}
                            </tbody>
                        </table>
                    </div>
                </div>
            `;

            // 检查项紧凑型布局
            let itemsHtml = '';
            evaluationItems.forEach((category, catIndex) => {
                itemsHtml += `
                    <div class="evaluation-category" style="margin-bottom:6px;">
                        <div class="evaluation-category-title" style="font-size:13px;margin-bottom:3px;">${category.name}</div>
                `;
                category.items.forEach((item, itemIndex) => {
                    const radioName = `evaluation_radio_${catIndex}_${itemIndex}`;
                    const photoId = `evaluation_photo_${catIndex}_${itemIndex}`;
                    itemsHtml += `
                        <div class="evaluation-item" style="display:flex;align-items:center;justify-content:space-between;padding:2px 0 0 0;margin-bottom:1px;background:none;min-height:28px;">
                            <div class="evaluation-item-title" style="font-size:12px;color:#444;min-width:70px;">${item}</div>
                            <div class="evaluation-radio-group" style="display:flex;align-items:center;gap:6px;">
                                <label style="display:flex;align-items:center;font-size:12px;cursor:pointer;">
                                    <span style="margin-right:1px;">是</span>
                                    <input type="radio" name="${radioName}" value="yes" style="margin:0 0 0 1px;">
                                </label>
                                <label style="display:flex;align-items:center;font-size:12px;cursor:pointer;">
                                    <span style="margin-right:1px;">否</span>
                                    <input type="radio" name="${radioName}" value="no" style="margin:0 0 0 1px;">
                                </label>
                            </div>
                            <div class="evaluation-photo-upload" style="margin-left:6px;">
                                <input type="file" accept="image/*" class="evaluation-photo-input" onchange="previewEvaluationPhoto(event, '${photoId}')" style="width:60px;">
                                <div class="evaluation-photo-preview" id="${photoId}"></div>
                            </div>
                        </div>
                    `;
                });
                itemsHtml += '</div>';
            });

            const modal = document.createElement('div');
            modal.className = 'evaluation-items-modal';
            modal.innerHTML = `
                <div class="evaluation-items-content">
                    <div class="evaluation-items-title">评估督导 - ${storeName}</div>
                    ${healthCertHtml}
                    ${itemsHtml}
                    <div style="margin-top: 20px; padding: 15px; background: #f0f8ff; border-radius: 8px;">
                        <div style="font-weight: bold; color: #333; margin-bottom: 10px;">其他照片上传</div>
                        <input type="file" accept="image/*" multiple onchange="previewOtherEvaluationPhotos(event)" style="width: 100%; padding: 10px; border: 2px dashed #ddd; border-radius: 6px; background: #f9f9f9;">
                        <div class="evaluation-photo-preview" id="otherEvaluationPhotosPreview"></div>
                    </div>
                    <!-- 红黑榜上传模块 -->
                    <div style="margin-top: 20px; padding: 15px; background: #fff3e0; border-radius: 8px; border: 1px solid #ffcc80;">
                        <div style="font-weight: bold; color: #333; margin-bottom: 15px; font-size: 16px;">红黑榜上传</div>
                        <div style="margin-bottom: 15px;">
                            <div style="font-size: 14px; color: #666; margin-bottom: 8px;">是否红黑榜上传</div>
                            <div style="display: flex; gap: 10px;">
                                <button class="evaluation-option-btn yes" onclick="selectRedBlackUploadOption(this, 'yes')">是</button>
                                <button class="evaluation-option-btn no" onclick="selectRedBlackUploadOption(this, 'no')">否</button>
                            </div>
                        </div>
                        <!-- 红黑榜类型和上榜原因（默认隐藏） -->
                        <div id="redBlackDetails" style="display: none;">
                            <div style="margin-bottom: 15px;">
                                <label style="display: block; font-size: 14px; color: #333; margin-bottom: 8px; font-weight: bold;">红黑榜类型</label>
                                <select id="redBlackType" style="width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 4px; font-size: 14px;">
                                    <option value="">请选择红黑榜类型</option>
                                    <option value="红榜">红榜</option>
                                    <option value="黑榜">黑榜</option>
                                </select>
                            </div>
                           
                        </div>
                    </div>
                    <div class='report-actions'>
                        <button type='button' class='report-btn-submit' onclick='submitEvaluation()'>提交评估</button>
                        <button type='button' class='report-btn-cancel' onclick='closeEvaluationItemsModal()'>取消</button>
                    </div>
                </div>
            `;
            document.body.appendChild(modal);
        }
        // 健康证过期跳转
        function gotoEditShop(storeName) {
            window.location.href = '修改店铺.html?shop=' + encodeURIComponent(storeName);
        }
        
        // 关闭检查项弹窗
        function closeEvaluationItemsModal() {
            const modal = document.querySelector('.evaluation-items-modal');
            if(modal) document.body.removeChild(modal);
        }
        
        // 选择评估选项
        function selectEvaluationOption(btn, option) {
            const container = btn.parentElement;
            container.querySelectorAll('.evaluation-option-btn').forEach(b => b.classList.remove('selected'));
            btn.classList.add('selected');
        }
        
        // 选择红黑榜上传选项
        function selectRedBlackUploadOption(btn, option) {
            const container = btn.parentElement;
            container.querySelectorAll('.evaluation-option-btn').forEach(b => b.classList.remove('selected'));
            btn.classList.add('selected');
            
            // 显示或隐藏红黑榜详情
            const redBlackDetails = document.getElementById('redBlackDetails');
            if (option === 'yes') {
                redBlackDetails.style.display = 'block';
            } else {
                redBlackDetails.style.display = 'none';
                // 清空字段值
                document.getElementById('redBlackType').value = '';
                document.getElementById('listingReason').value = '';
            }
        }
        
        // 预览评估照片
        function previewEvaluationPhoto(e, photoId) {
            const file = e.target.files[0];
            if (!file) return;
            const reader = new FileReader();
            reader.onload = function(ev) {
                document.getElementById(photoId).innerHTML = `<img src='${ev.target.result}'>`;
            };
            reader.readAsDataURL(file);
        }
        
        // 预览其他评估照片
        function previewOtherEvaluationPhotos(e) {
            const files = e.target.files;
            if (!files.length) return;
            
            let html = '';
            for (let i = 0; i < files.length; i++) {
                const reader = new FileReader();
                reader.onload = function(ev) {
                    html += `<img src='${ev.target.result}'>`;
                    document.getElementById('otherEvaluationPhotosPreview').innerHTML = html;
                };
                reader.readAsDataURL(files[i]);
            }
        }
        
        // 提交评估
        function submitEvaluation() {
            // 检查是否所有检查项都已选择
            const optionBtns = document.querySelectorAll('.evaluation-option-btn.selected');
            const totalItems = 12; // 总共有12个检查项
            
            if (optionBtns.length < totalItems) {
                alert('请完成所有检查项的选择！');
                return;
            }
            
            alert('评估督导提交成功！');
            closeEvaluationItemsModal();
        }
        
        // 显示巡检异常新增弹窗
        function showInspectionExceptionModal() {
            // 获取当前时间
            const now = new Date();
            const currentTime = now.toLocaleString('zh-CN', {
                year: 'numeric',
                month: '2-digit',
                day: '2-digit',
                hour: '2-digit',
                minute: '2-digit'
            });
            
            const modal = document.createElement('div');
            modal.className = 'inspection-exception-modal';
            modal.innerHTML = `
                <div class="inspection-exception-content">
                    <div class="inspection-exception-title">新增巡检异常</div>
                    <form class="inspection-exception-form" onsubmit="submitInspectionException(event)">
                        <div class="inspection-form-group">
                            <label>店铺类型</label>
                            <select id="exceptionShopType" required>
                                <option value="">请选择店铺类型</option>
                                <option value="餐饮店">餐饮店</option>
                                <option value="流通店">流通店</option>
                                <option value="企业食堂">企业食堂</option>
                                <option value="四小店">四小店</option>
                            </select>
                        </div>
                        
                        <div class="inspection-form-group">
                            <label>店铺名称</label>
                            <select id="exceptionShopName" required>
                                <option value="">请先选择店铺类型</option>
                            </select>
                        </div>
                        
                        <div class="inspection-form-group">
                            <label>上报内容</label>
                            <textarea id="exceptionContent" placeholder="请详细描述发现的异常情况..." required></textarea>
                        </div>
                        
                        <div class="inspection-form-group">
                            <label>异常图片</label>
                            <div class="inspection-photo-upload" onclick="document.getElementById('exceptionPhotos').click()">
                                <input type="file" id="exceptionPhotos" accept="image/*" multiple onchange="previewExceptionPhotos(event)" style="display: none;">
                                <div class="inspection-photo-text">点击上传异常图片（可多选）</div>
                            </div>
                            <div class="inspection-photo-preview" id="exceptionPhotosPreview"></div>
                        </div>
                        
                        <div class="inspection-form-group">
                            <label>上报时间</label>
                            <input type="text" id="exceptionReportTime" value="${currentTime}" readonly>
                        </div>
                        
                        <div class='report-actions'>
                            <button type='submit' class='report-btn-submit'>提交</button>
                            <button type='button' class='report-btn-cancel' onclick='closeInspectionExceptionModal()'>取消</button>
                        </div>
                    </form>
                </div>
            `;
            document.body.appendChild(modal);
            
            // 添加店铺类型联动
            document.getElementById('exceptionShopType').addEventListener('change', updateExceptionShopOptions);
        }
        
        // 关闭巡检异常新增弹窗
        function closeInspectionExceptionModal() {
            const modal = document.querySelector('.inspection-exception-modal');
            if(modal) document.body.removeChild(modal);
        }
        
        // 更新店铺名称选项（根据店铺类型）
        function updateExceptionShopOptions() {
            const shopType = document.getElementById('exceptionShopType').value;
            const shopNameSelect = document.getElementById('exceptionShopName');
            
            // 清空现有选项
            shopNameSelect.innerHTML = '<option value="">请选择店铺名称</option>';
            
            if (!shopType) {
                shopNameSelect.innerHTML = '<option value="">请先选择店铺类型</option>';
                return;
            }
            
            // 根据店铺类型提供不同的店铺选项
            const shopOptions = {
                '餐饮店': ['老王川菜馆', '小李快餐', '张记面馆', '刘家小炒'],
                '流通店': ['便民超市', '社区便利店', '食品批发店'],
                '企业食堂': ['工业园区食堂', '办公楼食堂', '学校食堂'],
                '四小店': ['小餐饮店', '小食品店', '小作坊', '小摊贩']
            };
            
            const shops = shopOptions[shopType] || [];
            shops.forEach(shop => {
                const option = document.createElement('option');
                option.value = shop;
                option.textContent = shop;
                shopNameSelect.appendChild(option);
            });
        }
        
        // 预览异常图片
        function previewExceptionPhotos(e) {
            const files = e.target.files;
            const preview = document.getElementById('exceptionPhotosPreview');
            preview.innerHTML = '';
            
            if (files.length > 0) {
                for (let i = 0; i < files.length; i++) {
                    const reader = new FileReader();
                    reader.onload = function(ev) {
                        preview.innerHTML += `<img src='${ev.target.result}'>`;
                    };
                    reader.readAsDataURL(files[i]);
                }
            }
        }
        
        // 提交巡检异常
        function submitInspectionException(e) {
            e.preventDefault();
            
            const shopType = document.getElementById('exceptionShopType').value;
            const shopName = document.getElementById('exceptionShopName').value;
            const content = document.getElementById('exceptionContent').value.trim();
            const reportTime = document.getElementById('exceptionReportTime').value;
            
            // 验证必填字段
            if (!shopType || !shopName || !content) {
                alert('请填写所有必填字段！');
                return;
            }
            
            // 这里可以添加数据提交逻辑
            console.log('巡检异常数据:', {
                shopType,
                shopName,
                content,
                reportTime,
                photos: document.getElementById('exceptionPhotos').files
            });
            
            alert('巡检异常上报成功！');
            closeInspectionExceptionModal();
        }

        // 健康证管理相关函数
        let healthCertList = [
            { id: 1, name: '王师傅', gender: '男', idCard: '110101199001011234', image: 'https://images.unsplash.com/photo-1554224155-6726b3ff858f?w=200&h=150&fit=crop', startDate: '', endDate: '2024-12-31' },
            { id: 2, name: '李师傅', gender: '女', idCard: '110101199002022345', image: 'https://images.unsplash.com/photo-1554224155-6726b3ff858f?w=200&h=150&fit=crop', startDate: '', endDate: '2024-06-15' },
            { id: 3, name: '张师傅', gender: '男', idCard: '110101199003033456', image: 'https://images.unsplash.com/photo-1554224155-6726b3ff858f?w=200&h=150&fit=crop', startDate: '', endDate: '2024-03-01' }
        ];

        // 显示健康证管理弹窗
        function showHealthCertModal(shopName) {
            const modal = document.createElement('div');
            modal.className = 'report-modal-bg';
            modal.style.zIndex = 99999; // 保证健康证管理弹窗在最上层
            modal.innerHTML = `
                <div class='report-modal' style='z-index:99999 !important;max-width: 480px; max-height: 80vh; overflow-y: auto;'>
                    <div class='report-title'>健康证管理 - ${shopName}</div>
                    
                    <div style="margin-bottom: 20px;">
                        <button type="button" class="report-btn-submit" onclick="showAddHealthCertModal()" style="margin-bottom: 15px;">新增健康证</button>
                        
                        <div style="background: #fff; border: 1px solid #eee; border-radius: 8px; overflow: hidden;">
                            <table style="width: 100%; border-collapse: collapse; font-size: 14px;">
                                <thead style="background: #f5f5f5;">
                                    <tr>
                                        <th style="padding: 12px; text-align: left; border-bottom: 1px solid #eee;">姓名</th>
                                        <th style="padding: 12px; text-align: left; border-bottom: 1px solid #eee;">性别</th>
                                        <th style="padding: 12px; text-align: left; border-bottom: 1px solid #eee;">健康证图片</th>
                                        <th style="padding: 12px; text-align: left; border-bottom: 1px solid #eee;">有效期</th>
                                        <th style="padding: 12px; text-align: left; border-bottom: 1px solid #eee;">操作</th>
                                    </tr>
                                </thead>
                                <tbody id="healthCertTableBody">
                                    ${renderHealthCertTable()}
                                </tbody>
                            </table>
                        </div>
                    </div>
                    
                    <div class='report-actions'>
                        <button type='button' class='report-btn-cancel' onclick='closeHealthCertModal()'>关闭</button>
                    </div>
                </div>
            `;
            document.body.appendChild(modal);
        }

        // 渲染健康证表格
        function renderHealthCertTable() {
            return healthCertList.map(cert => `
                <tr>
                    <td style="padding: 12px; border-bottom: 1px solid #eee;">${cert.name}</td>
                    <td style="padding: 12px; border-bottom: 1px solid #eee;">${cert.gender}</td>
                    <td style="padding: 12px; border-bottom: 1px solid #eee;">
                        <img src="${cert.image}" style="width: 60px; height: 45px; object-fit: cover; border-radius: 4px; border: 1px solid #eee;" alt="健康证">
                    </td>
                    <td style="padding: 12px; border-bottom: 1px solid #eee;">${cert.startDate}  ${cert.endDate}</td>
                    <td style="padding: 12px; border-bottom: 1px solid #eee;">
                        <button type="button" onclick="editHealthCert(${cert.id})" style="background: #2196F3; color: white; border: none; padding: 4px 8px; border-radius: 3px; cursor: pointer; font-size: 12px; margin-right: 5px;">编辑</button>
                        <button type="button" onclick="deleteHealthCert(${cert.id})" style="background: #f44336; color: white; border: none; padding: 4px 8px; border-radius: 3px; cursor: pointer; font-size: 12px;">删除</button>
                    </td>
                </tr>
            `).join('');
        }

        // 关闭健康证管理弹窗
        function closeHealthCertModal() {
            const modals = document.querySelectorAll('.report-modal-bg');
            // 找到最后一个弹窗（健康证管理弹窗）并关闭
            if(modals.length > 0) {
                const lastModal = modals[modals.length - 1];
                document.body.removeChild(lastModal);
            }
        }

        // 显示新增健康证弹窗
        function showAddHealthCertModal() {
            const modal = document.createElement('div');
            modal.className = 'report-modal-bg';
            modal.style.zIndex = 100000; // 新增健康证弹窗在最上层
            modal.innerHTML = `
                <div class='report-modal' style='z-index:100000 !important;max-width: 500px; max-height: 80vh; overflow-y: auto;'>
                    <div class='report-title'>新增健康证</div>
                    
                    <form onsubmit="submitHealthCert(event)">
                        <div style="margin-bottom: 15px;">
                            <label style="display: block; margin-bottom: 5px; font-weight: bold;">姓名</label>
                            <input type="text" id="healthCertName" required style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px;">
                        </div>
                        
                        <div style="margin-bottom: 15px;">
                            <label style="display: block; margin-bottom: 5px; font-weight: bold;">性别</label>
                            <select id="healthCertGender" required style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px;">
                                <option value="">请选择</option>
                                <option value="男">男</option>
                                <option value="女">女</option>
                            </select>
                        </div>
                        
                        <div style="margin-bottom: 15px;">
                            <label style="display: block; margin-bottom: 5px; font-weight: bold;">身份证号</label>
                            <input type="text" id="healthCertIdCard" required style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px;">
                        </div>
                        
                        <div style="margin-bottom: 15px;">
                            <label style="display: block; margin-bottom: 5px; font-weight: bold;">健康证图片</label>
                            <input type="file" id="healthCertImage" accept="image/*" required onchange="previewHealthCertImage(event)" style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px;">
                            <div id="healthCertImagePreview" style="margin-top: 8px;"></div>
                        </div>
                        
                        <div style="margin-bottom: 15px;">
                            <label style="display: block; margin-bottom: 5px; font-weight: bold;">有效期开始</label>
                            <input type="date" id="healthCertStartDate" required style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px;">
                        </div>
                        
                        <div style="margin-bottom: 15px;">
                            <label style="display: block; margin-bottom: 5px; font-weight: bold;">有效期结束</label>
                            <input type="date" id="healthCertEndDate" required style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px;">
                        </div>
                        
                        <div class='report-actions'>
                            <button type='submit' class='report-btn-submit'>保存</button>
                            <button type='button' class='report-btn-cancel' onclick='closeAddHealthCertModal()'>取消</button>
                        </div>
                    </form>
                </div>
            `;
            document.body.appendChild(modal);
        }

        // 关闭新增健康证弹窗
        function closeAddHealthCertModal() {
            const modals = document.querySelectorAll('.report-modal-bg');
            // 找到最后一个弹窗（新增健康证弹窗）并关闭
            if(modals.length > 0) {
                const lastModal = modals[modals.length - 1];
                document.body.removeChild(lastModal);
            }
        }

        // 预览健康证图片
        function previewHealthCertImage(e) {
            const file = e.target.files[0];
            if (!file) return;
            
            const reader = new FileReader();
            reader.onload = function(ev) {
                document.getElementById('healthCertImagePreview').innerHTML = `
                    <img src="${ev.target.result}" style="width: 120px; height: 90px; object-fit: cover; border-radius: 4px; border: 1px solid #eee;" alt="预览">
                `;
            };
            reader.readAsDataURL(file);
        }

        // 提交健康证
        function submitHealthCert(e) {
            e.preventDefault();
            
            const name = document.getElementById('healthCertName').value;
            const gender = document.getElementById('healthCertGender').value;
            const idCard = document.getElementById('healthCertIdCard').value;
            const startDate = document.getElementById('healthCertStartDate').value;
            const endDate = document.getElementById('healthCertEndDate').value;
            const imageFile = document.getElementById('healthCertImage').files[0];
            
            if (!imageFile) {
                alert('请选择健康证图片！');
                return;
            }
            
            // 模拟图片上传，实际项目中应该上传到服务器
            const reader = new FileReader();
            reader.onload = function(ev) {
                const newCert = {
                    id: Date.now(), // 使用时间戳作为临时ID
                    name: name,
                    gender: gender,
                    idCard: idCard,
                    image: ev.target.result,
                    startDate: startDate,
                    endDate: endDate
                };
                
                healthCertList.push(newCert);
                alert('健康证添加成功！');
                closeAddHealthCertModal();
                refreshHealthCertTable();
            };
            reader.readAsDataURL(imageFile);
        }

        // 编辑健康证
        function editHealthCert(id) {
            const cert = healthCertList.find(c => c.id === id);
            if (!cert) return;
            
            const modal = document.createElement('div');
            modal.className = 'report-modal-bg';
            modal.style.zIndex = 100000; // 编辑健康证弹窗在最上层
            modal.innerHTML = `
                <div class='report-modal' style='z-index:100000 !important;max-width: 500px; max-height: 80vh; overflow-y: auto;'>
                    <div class='report-title'>编辑健康证</div>
                    
                    <form onsubmit="updateHealthCert(event, ${id})">
                        <div style="margin-bottom: 15px;">
                            <label style="display: block; margin-bottom: 5px; font-weight: bold;">姓名</label>
                            <input type="text" id="editHealthCertName" value="${cert.name}" required style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px;">
                        </div>
                        
                        <div style="margin-bottom: 15px;">
                            <label style="display: block; margin-bottom: 5px; font-weight: bold;">性别</label>
                            <select id="editHealthCertGender" required style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px;">
                                <option value="男" ${cert.gender === '男' ? 'selected' : ''}>男</option>
                                <option value="女" ${cert.gender === '女' ? 'selected' : ''}>女</option>
                            </select>
                        </div>
                        
                        <div style="margin-bottom: 15px;">
                            <label style="display: block; margin-bottom: 5px; font-weight: bold;">身份证号</label>
                            <input type="text" id="editHealthCertIdCard" value="${cert.idCard}" required style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px;">
                        </div>
                        
                        <div style="margin-bottom: 15px;">
                            <label style="display: block; margin-bottom: 5px; font-weight: bold;">健康证图片</label>
                            <input type="file" id="editHealthCertImage" accept="image/*" onchange="previewEditHealthCertImage(event)" style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px;">
                            <div id="editHealthCertImagePreview" style="margin-top: 8px;">
                                <img src="${cert.image}" style="width: 120px; height: 90px; object-fit: cover; border-radius: 4px; border: 1px solid #eee;" alt="当前图片">
                            </div>
                        </div>
                        
                        <div style="margin-bottom: 15px;">
                            <label style="display: block; margin-bottom: 5px; font-weight: bold;">有效期开始</label>
                            <input type="date" id="editHealthCertStartDate" value="${cert.startDate}" required style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px;">
                        </div>
                        
                        <div style="margin-bottom: 15px;">
                            <label style="display: block; margin-bottom: 5px; font-weight: bold;">有效期结束</label>
                            <input type="date" id="editHealthCertEndDate" value="${cert.endDate}" required style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px;">
                        </div>
                        
                        <div class='report-actions'>
                            <button type='submit' class='report-btn-submit'>更新</button>
                            <button type='button' class='report-btn-cancel' onclick='closeEditHealthCertModal()'>取消</button>
                        </div>
                    </form>
                </div>
            `;
            document.body.appendChild(modal);
        }

        // 关闭编辑健康证弹窗
        function closeEditHealthCertModal() {
            const modals = document.querySelectorAll('.report-modal-bg');
            // 找到最后一个弹窗（编辑健康证弹窗）并关闭
            if(modals.length > 0) {
                const lastModal = modals[modals.length - 1];
                document.body.removeChild(lastModal);
            }
        }

        // 预览编辑健康证图片
        function previewEditHealthCertImage(e) {
            const file = e.target.files[0];
            if (!file) return;
            
            const reader = new FileReader();
            reader.onload = function(ev) {
                document.getElementById('editHealthCertImagePreview').innerHTML = `
                    <img src="${ev.target.result}" style="width: 120px; height: 90px; object-fit: cover; border-radius: 4px; border: 1px solid #eee;" alt="预览">
                `;
            };
            reader.readAsDataURL(file);
        }

        // 更新健康证
        function updateHealthCert(e, id) {
            e.preventDefault();
            
            const name = document.getElementById('editHealthCertName').value;
            const gender = document.getElementById('editHealthCertGender').value;
            const idCard = document.getElementById('editHealthCertIdCard').value;
            const startDate = document.getElementById('editHealthCertStartDate').value;
            const endDate = document.getElementById('editHealthCertEndDate').value;
            const imageFile = document.getElementById('editHealthCertImage').files[0];
            
            const certIndex = healthCertList.findIndex(c => c.id === id);
            if (certIndex === -1) return;
            
            // 更新基本信息
            healthCertList[certIndex] = {
                ...healthCertList[certIndex],
                name: name,
                gender: gender,
                idCard: idCard,
                startDate: startDate,
                endDate: endDate
            };
            
            // 如果上传了新图片，更新图片
            if (imageFile) {
                const reader = new FileReader();
                reader.onload = function(ev) {
                    healthCertList[certIndex].image = ev.target.result;
                    alert('健康证更新成功！');
                    closeEditHealthCertModal();
                    refreshHealthCertTable();
                };
                reader.readAsDataURL(imageFile);
            } else {
                alert('健康证更新成功！');
                closeEditHealthCertModal();
                refreshHealthCertTable();
            }
        }

        // 删除健康证
        function deleteHealthCert(id) {
            if (confirm('确定要删除这个健康证吗？')) {
                healthCertList = healthCertList.filter(c => c.id !== id);
                alert('健康证删除成功！');
                refreshHealthCertTable();
            }
        }

        // 刷新健康证表格
        function refreshHealthCertTable() {
            const tbody = document.getElementById('healthCertTableBody');
            if (tbody) {
                tbody.innerHTML = renderHealthCertTable();
            }
        }
    </script>
    <style>
        /* 状态样式 */
        .status-pending { color: #FF9800; font-weight: bold; }
        .status-processed { color: #4CAF50; font-weight: bold; }
        .status-approved { color: #4CAF50; font-weight: bold; }
        .status-rejected { color: #f44336; font-weight: bold; }
        
        /* 按钮样式 */
        .process-btn {
            background: #FF9800;
            color: white;
            border: none;
            padding: 8px 16px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
        }
        .process-btn:hover {
            background: #F57C00;
        }
        .detail-btn {
            background: #2196F3;
            color: white;
            border: none;
            padding: 8px 16px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
        }
        .detail-btn:hover {
            background: #1976D2;
        }
        
        /* 店铺搜索样式 */
        .store-search-container {
            display: flex;
            gap: 10px;
            margin-bottom: 15px;
            align-items: center;
        }
        
        .store-search-input {
            flex: 1;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 6px;
            font-size: 14px;
            background: #fff;
        }
        
        .store-search-input:focus {
            outline: none;
            border-color: #4CAF50;
            box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.2);
        }
        
        .store-search-btn {
            padding: 10px 16px;
            background: #4CAF50;
            color: #fff;
            border: none;
            border-radius: 6px;
            font-size: 14px;
            cursor: pointer;
            white-space: nowrap;
        }
        
        .store-search-btn:hover {
            background: #45a049;
        }
        
        .store-list-container {
            max-height: 400px;
            overflow-y: auto;
        }
        
        .no-stores-found {
            text-align: center;
            padding: 30px;
            color: #666;
            font-size: 14px;
            background: #f8f8f8;
            border-radius: 8px;
            border: 1px dashed #ddd;
        }
    </style>
</body>
</html>