<template>
  <div>
    <div class="operation-inspection">
      <!-- 1. 顶部导航选项卡（对应原试验系统的外层导航） -->
      <div class="navigation-tabs">
        <div class="nav-tab" @click="handleInspection1">待办事项</div>
        <div class="nav-tab" @click="handleInspection2">巡检管理</div>
        <div class="nav-tab active" @click="handleInspection3">试验管理</div>
        <div class="nav-tab" @click="handleInspection4">报修管理</div>
        <div class="nav-tab" @click="handleInspection5">抢修管理</div>
        <div class="nav-tab" @click="handleInspection6">工单管理</div>
        <div class="nav-tab" @click="handleInspection7">运维组织</div>
      </div>

      <TitleComponent title="实验管理系统" subtitle="制定巡检计划，安排巡检任务，跟进巡检记录"></TitleComponent>

      <!-- 选项卡和按钮组合 -->
      <div class="tabs-wrapper">
        <div style="display: flex; align-items: center; gap: 10px">
          <el-button type="primary" @click="handleInspectionManagement1">实验计划</el-button>
          <el-button type="primary" @click="handleInspectionManagement2">实验任务</el-button>
          <el-button type="primary" @click="handleInspectionManagement3">实验记录</el-button>
        </div>
      </div>

      <!-- 4. 筛选和操作区域（与试验系统filter-and-actions结构一致） -->
      <div class="filter-and-actions">
        <div class="filters">
          <el-select v-model="filterStatus" placeholder="巡检状态" clearable>
            <el-option label="全部状态" value="all"></el-option>
            <el-option label="正常" value="normal"></el-option>
            <el-option label="需关注" value="attention"></el-option>
            <el-option label="有问题" value="problem"></el-option>
          </el-select>

          <el-select v-model="filterType" placeholder="巡检类型" clearable>
            <el-option label="全部类型" value="all"></el-option>
            <el-option label="数据库" value="database"></el-option>
            <el-option label="服务器" value="server"></el-option>
            <el-option label="网络设备" value="network"></el-option>
          </el-select>

          <el-date-picker
            v-model="dateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="YYYY-MM-DD"
            class="date-picker"
          ></el-date-picker>

          <el-button type="primary" class="search-btn"> 搜索 </el-button>
        </div>
        <div class="action-buttons">
          <el-button type="primary" class="create-btn" @click="showRecordDialog = true"> <i class="fas fa-plus"></i> 新增实验记录 </el-button>
        </div>
      </div>

      <!-- 5. 主内容区（根据选中选项卡切换内容） -->
      <div class="content-container">
        <!-- 5.1 巡检计划表格（与试验系统表格结构一致） -->
        <div v-if="activeTab === 'plan'" class="table-container">
          <el-table :data="planTableData" border>
            <el-table-column prop="name" label="计划名称" width="220">
              <template #default="scope">
                <div class="plan-name">{{ scope.row.name }}</div>
              </template>
            </el-table-column>
            <el-table-column prop="type" label="巡检类型" width="120"></el-table-column>
            <el-table-column prop="cycle" label="巡检周期" width="120"></el-table-column>
            <el-table-column prop="dateRange" label="执行时间范围"></el-table-column>
            <el-table-column prop="progress" label="完成进度" width="120">
              <template #default="scope">
                <div class="progress-bar">
                  <div class="progress-fill" :style="{ width: scope.row.progress + '%', backgroundColor: getProgressColor(scope.row.status) }"></div>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="status" label="状态" width="100">
              <template #default="scope">
                <span :class="['status-tag', `status-${scope.row.status}`]">
                  {{ getStatusText(scope.row.status) }}
                </span>
              </template>
            </el-table-column>
            <el-table-column prop="responsible" label="负责人" width="120"></el-table-column>
            <el-table-column label="操作" width="220">
              <template #default="scope">
                <div class="operation-buttons">
                  <button class="operate-btn edit-btn" v-if="['drafted', 'paused'].includes(scope.row.status)">编辑</button>
                  <button class="operate-btn execute-btn" v-if="scope.row.status === 'drafted'">执行</button>
                  <button class="operate-btn pause-btn" v-if="scope.row.status === 'in-progress'">暂停</button>
                  <button class="operate-btn resume-btn" v-if="scope.row.status === 'paused'">恢复</button>
                  <button class="operate-btn view-btn">查看详情</button>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>

        <!-- 5.2 巡检任务表格（结构与计划表格一致，数据不同） -->
        <div v-if="activeTab === 'task'" class="table-container">
          <el-table :data="taskTableData" border>
            <el-table-column prop="name" label="任务名称" width="220"></el-table-column>
            <el-table-column prop="planName" label="所属计划" width="180"></el-table-column>
            <el-table-column prop="type" label="巡检类型" width="120"></el-table-column>
            <el-table-column prop="target" label="巡检对象" width="150"></el-table-column>
            <el-table-column prop="deadline" label="截止时间" width="160"></el-table-column>
            <el-table-column prop="status" label="状态" width="100">
              <template #default="scope">
                <span :class="['status-tag', `status-${scope.row.status}`]">
                  {{ getTaskStatusText(scope.row.status) }}
                </span>
              </template>
            </el-table-column>
            <el-table-column prop="executor" label="执行人" width="120"></el-table-column>
            <el-table-column label="操作" width="180">
              <template #default="scope">
                <div class="operation-buttons">
                  <button class="operate-btn accept-btn" v-if="scope.row.status === 'pending'">接受</button>
                  <button class="operate-btn complete-btn" v-if="scope.row.status === 'accepted'">完成</button>
                  <button class="operate-btn view-btn">查看详情</button>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>

        <!-- 5.3 巡检记录（整合原右侧卡片和统计图表） -->
        <div v-if="activeTab === 'record'" class="record-container">
          <div class="main-content-container">
            <!-- 左侧统计与图表区 -->
            <div class="left-content">
              <div class="content-card">
                <div class="card-header">
                  <h2 class="card-title">巡检记录统计</h2>
                  <div class="time-range-buttons">
                    <button class="time-btn" :class="{ active: timeRange === 'month' }" @click="handleTimeRangeChange('month')">月</button>
                    <button class="time-btn" :class="{ active: timeRange === 'week' }" @click="handleTimeRangeChange('week')">周</button>
                    <button class="time-btn" :class="{ active: timeRange === 'day' }" @click="handleTimeRangeChange('day')">日</button>
                  </div>
                </div>

                <div class="card-body">
                  <!-- 统计卡片 -->
                  <div class="stat-grid">
                    <div class="stat-card">
                      <p class="stat-label">已完成巡检</p>
                      <p class="stat-value">{{ statData.completed }}</p>
                    </div>
                    <div class="stat-card">
                      <p class="stat-label">发现问题数</p>
                      <p class="stat-value">{{ statData.problems }}</p>
                    </div>
                    <div class="stat-card">
                      <p class="stat-label">已解决问题</p>
                      <p class="stat-value">{{ statData.resolved }}</p>
                    </div>
                    <div class="stat-card">
                      <p class="stat-label">平均完成时间</p>
                      <p class="stat-value">{{ statData.avgTime }}</p>
                    </div>
                  </div>

                  <div class="divider"></div>

                  <!-- 进度与图表区 -->
                  <div class="chart-container">
                    <!-- 左侧饼图 -->
                    <div class="pie-chart">
                      <p class="chart-title">问题解决率</p>
                      <div class="pie-wrapper">
                        <svg class="w-full h-full" viewBox="0 0 100 100">
                          <circle cx="50" cy="50" r="45" fill="none" stroke="#f3f4f6" stroke-width="10" />
                          <circle
                            cx="50"
                            cy="50"
                            r="45"
                            fill="none"
                            stroke="#10b981"
                            stroke-width="10"
                            :stroke-dasharray="282.74"
                            :stroke-dashoffset="282.74 * (1 - statData.resolveRate / 100)"
                            transform="rotate(-90 50 50)"
                          />
                          <circle
                            cx="50"
                            cy="50"
                            r="45"
                            fill="none"
                            stroke="#f97316"
                            stroke-width="10"
                            :stroke-dasharray="282.74 * (1 - statData.resolveRate / 100)"
                            stroke-dashoffset="0"
                            transform="rotate(-90 50 50)"
                          />
                        </svg>
                        <div class="pie-center">
                          <p class="text-sm text-gray-500">解决率</p>
                          <p class="text-lg font-bold text-gray-800">{{ statData.resolveRate }}%</p>
                        </div>
                      </div>
                      <div class="pie-legend">
                        <div class="legend-item">
                          <div class="legend-color resolved"></div>
                          <span class="legend-text">已解决</span>
                        </div>
                        <div class="legend-item">
                          <div class="legend-color unresolved"></div>
                          <span class="legend-text">未解决</span>
                        </div>
                      </div>
                    </div>

                    <!-- 右侧进度条 -->
                    <div class="progress-bars">
                      <div class="progress-item">
                        <div class="progress-header">
                          <span class="progress-label">巡检完成率</span>
                          <span class="progress-value">{{ statData.completeRate }}%</span>
                        </div>
                        <div class="progress-bar">
                          <div class="progress-fill" :style="{ width: statData.completeRate + '%', backgroundColor: '#3b82f6' }"></div>
                        </div>
                      </div>
                      <div class="progress-item">
                        <div class="progress-header">
                          <span class="progress-label">问题解决率</span>
                          <span class="progress-value">{{ statData.resolveRate }}%</span>
                        </div>
                        <div class="progress-bar">
                          <div class="progress-fill" :style="{ width: statData.resolveRate + '%', backgroundColor: '#10b981' }"></div>
                        </div>
                      </div>
                      <div class="progress-item">
                        <div class="progress-header">
                          <span class="progress-label">任务及时率</span>
                          <span class="progress-value">{{ statData.timelyRate }}%</span>
                        </div>
                        <div class="progress-bar">
                          <div class="progress-fill" :style="{ width: statData.timelyRate + '%', backgroundColor: '#8b5cf6' }"></div>
                        </div>
                      </div>
                    </div>
                  </div>

                  <div class="divider"></div>

                  <!-- 问题分类统计 -->
                  <div class="problem-category">
                    <h3 class="section-title">问题类型分布</h3>
                    <div class="category-list">
                      <div class="category-item" v-for="(item, index) in problemCategories" :key="index">
                        <div class="category-header">
                          <span class="category-label">{{ item.name }}</span>
                          <span class="category-value">{{ item.rate }}%</span>
                        </div>
                        <div class="progress-bar">
                          <div class="progress-fill" :style="{ width: item.rate + '%', backgroundColor: item.color }"></div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <!-- 右侧最近巡检记录 -->
            <div class="right-content">
              <div class="content-card">
                <div class="card-header">
                  <h2 class="card-title">最近巡检记录</h2>
                </div>
                <div class="card-body record-list">
                  <div class="inspection-record" v-for="(record, index) in recentRecords" :key="index">
                    <div class="record-header">
                      <h3 class="record-title">{{ record.name }}</h3>
                      <span :class="['status-tag', `status-${record.status}`]">
                        {{ getRecordStatusText(record.status) }}
                      </span>
                    </div>
                    <p class="record-meta">{{ record.time }} · {{ record.executor }}</p>
                    <div class="record-summary">{{ record.summary }}</div>
                    <div class="record-actions">
                      <button class="operate-btn view-btn">查看详情</button>
                      <button class="operate-btn report-btn">生成报告</button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 6. 分页（与试验系统结构一致） -->
      <div class="pagination" v-if="activeTab !== 'record'">
        <p class="total-records">显示1到{{ pageSize }}条，共{{ totalRecords }}条记录</p>
        <el-pagination
          layout="prev, pager, next, jumper, sizes"
          :total="totalRecords"
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[20, 50, 100]"
          @current-change="handlePageChange"
          @size-change="handleSizeChange"
        ></el-pagination>
      </div>
    </div>

    <!-- 新增实验记录弹窗 -->
    <el-dialog
      v-model="showRecordDialog"
      title="新增实验记录"
      width="1100px"
      :before-close="handleClose"
      class="custom-experiment-dialog"
      :close-on-click-modal="false"
    >
      <el-form :model="createForm" :rules="createFormRules" ref="createFormRef" label-width="120px" class="custom-form">
        <div class="form-container">
          <!-- 材料名称 -->
          <el-form-item label="材料名称" class="form-item">
            <el-input v-model="formData.materialName" placeholder="请输入材料名称" class="form-input" />
          </el-form-item>
          <!-- 试验时间 -->
          <div class="form-row">
            <el-form-item label="预计开始时间" class="form-item">
              <el-date-picker v-model="formData.startDate" type="date" placeholder="请选择日期" value-format="YYYY-MM-DD" class="form-input" />
            </el-form-item>
            <el-form-item label="预计结束时间" class="form-item">
              <el-date-picker v-model="formData.endDate" type="date" placeholder="请选择日期" value-format="YYYY-MM-DD" class="form-input" />
            </el-form-item>
          </div>
          <!-- 试验编号 -->
          <div class="form-row">
            <el-form-item label="试验编号" class="form-item">
              <el-input v-model="formData.testNumber" placeholder="EX-20240601" class="form-input" />
            </el-form-item>
            <el-form-item label="试验参考号" class="form-item">
              <el-input v-model="formData.refNumber" placeholder="请输入参考号" class="form-input" />
            </el-form-item>
          </div>

          <!-- 应用编号 -->
          <div class="form-row">
            <el-form-item label="应用编号" class="form-item">
              <el-select v-model="formData.appNumber" placeholder="请选择" class="form-input">
                <el-option label="APP-2024-001" value="APP-2024-001" />
                <el-option label="APP-2024-002" value="APP-2024-002" />
              </el-select>
            </el-form-item>
            <el-form-item label="应用项目" class="form-item">
              <el-input v-model="formData.appProject" placeholder="请输入应用项目" class="form-input" />
            </el-form-item>
          </div>

          <!-- 试验目的 -->
          <el-form-item label="试验目的" class="form-item">
            <el-input
              v-model="formData.testPurpose"
              type="textarea"
              placeholder="请简要描述本次试验的目的，检验标准及试验预期达到的效果"
              class="form-input"
              rows="2"
            />
          </el-form-item>

          <!-- 试验环境要求 -->
          <el-form-item label="试验环境要求" class="form-item">
            <el-input
              v-model="formData.envRequirements"
              type="textarea"
              placeholder="请描述试验所需的硬件、软件、网络环境等要求"
              class="form-input"
              rows="2"
            />
          </el-form-item>

          <!-- 负责人 -->
          <el-form-item label="负责人" class="form-item">
            <el-select v-model="formData.manager" placeholder="请选择试验负责人" class="form-input">
              <el-option label="张明" value="张明" />
              <el-option label="李华" value="李华" />
              <el-option label="王强" value="王强" />
            </el-select>
          </el-form-item>

          <!-- 参与人员 -->
          <el-form-item label="参与人员" class="form-item">
            <el-input v-model="formData.participants" placeholder="张明、李华、王强、刘洋、赵云" class="form-input" />
          </el-form-item>

          <!-- 试验步骤 -->
          <el-form-item label="试验步骤" class="form-item" style="width: 100%">
            <div class="steps-container">
              <div class="step-item" v-for="(step, index) in formData.steps" :key="index">
                <div class="step-number">{{ index + 1 }}</div>
                <el-input v-model="step.content" placeholder="输入试验步骤" />
              </div>
              <el-button type="text" size="small" class="add-step-btn" @click="addStep">添加步骤</el-button>
            </div>
          </el-form-item>

          <!-- 所需设备与准备 -->
          <el-form-item label="所需资源与设备" class="form-item" style="width: 100%">
            <div class="equipment-list">
              <div class="equipment-item" v-for="(equip, index) in formData.equipments" :key="index">
                <el-checkbox v-model="equip.selected">{{ equip.name }}</el-checkbox>
              </div>
              <div class="add-equipment">
                <el-input v-model="newEquipment" placeholder="添加其他资源" />
                <el-button type="primary" size="small" @click="addEquipment">添加</el-button>
              </div>
            </div>
          </el-form-item>

          <!-- 风险识别与应对措施 -->
          <el-form-item label="风险识别" class="form-item">
            <el-input
              v-model="formData.riskMitigation"
              type="textarea"
              placeholder="请描述试验中存在的风险及相应的应对措施"
              class="form-input"
              rows="2"
            />
          </el-form-item>
        </div>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="handleClose">取消</el-button>
          <el-button type="primary" @click="handleSave">保存</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import router from '@/router';
import TitleComponent from './TitleComponent.vue';
// 1. 选项卡状态管理
const activeTab = ref('plan'); // 默认为"巡检计划"
const timeRange = ref('month'); // 统计时间范围：月/周/日

// 2. 筛选条件
const filterStatus = ref('all');
const filterType = ref('all');
const dateRange = ref([]);

// 3. 分页参数
const currentPage = ref(1);
const pageSize = ref(20);
const totalRecords = ref(86); // 总记录数（模拟）

// 4. 巡检计划表格数据
const planTableData = ref([
  {
    name: '数据库月度性能巡检\n编号: INS-20240601',
    type: '数据库',
    cycle: '每月',
    dateRange: '2024-06-01 至 2024-06-30',
    progress: 75,
    status: 'in-progress',
    responsible: '张明'
  },
  {
    name: '服务器日常巡检\n编号: INS-20240602',
    type: '服务器',
    cycle: '每日',
    dateRange: '2024-06-01 至 2024-06-30',
    progress: 92,
    status: 'in-progress',
    responsible: '李华'
  },
  {
    name: '网络设备安全巡检\n编号: INS-20240603',
    type: '网络设备',
    cycle: '每周',
    dateRange: '2024-06-01 至 2024-06-30',
    progress: 50,
    status: 'in-progress',
    responsible: '王强'
  },
  {
    name: '存储设备健康检查\n编号: INS-20240604',
    type: '存储设备',
    cycle: '每季度',
    dateRange: '2024-06-01 至 2024-06-30',
    progress: 0,
    status: 'drafted',
    responsible: '赵伟'
  },
  {
    name: '安全设备策略巡检\n编号: INS-20240501',
    type: '安全设备',
    cycle: '每月',
    dateRange: '2024-05-01 至 2024-05-31',
    progress: 100,
    status: 'completed',
    responsible: '刘芳'
  },
  {
    name: '中间件运行状态巡检\n编号: INS-20240502',
    type: '中间件',
    cycle: '每周',
    dateRange: '2024-05-01 至 2024-05-31',
    progress: 100,
    status: 'completed',
    responsible: '陈明'
  },
  {
    name: '虚拟化平台巡检\n编号: INS-20240605',
    type: '虚拟化',
    cycle: '每月',
    dateRange: '2024-06-01 至 2024-06-30',
    progress: 30,
    status: 'paused',
    responsible: '张丽'
  },
  {
    name: '备份系统有效性检查\n编号: INS-20240606',
    type: '备份系统',
    cycle: '每两周',
    dateRange: '2024-06-01 至 2024-06-30',
    progress: 0,
    status: 'drafted',
    responsible: '李强'
  }
]);

// 5. 巡检任务表格数据
const taskTableData = ref([
  {
    name: 'DB服务器CPU监控',
    planName: '数据库月度性能巡检',
    type: '数据库',
    target: '主数据库服务器',
    deadline: '2024-06-15 18:00',
    status: 'accepted',
    executor: '张明'
  },
  {
    name: '应用服务器内存检查',
    planName: '服务器日常巡检',
    type: '服务器',
    target: '应用集群节点1-3',
    deadline: '2024-06-10 24:00',
    status: 'completed',
    executor: '李华'
  },
  {
    name: '防火墙规则审计',
    planName: '网络设备安全巡检',
    type: '网络设备',
    target: '主防火墙',
    deadline: '2024-06-12 18:00',
    status: 'pending',
    executor: '王强'
  },
  {
    name: '存储阵列容量检查',
    planName: '存储设备健康检查',
    type: '存储设备',
    target: '主存储阵列',
    deadline: '2024-06-20 18:00',
    status: 'pending',
    executor: '赵伟'
  },
  {
    name: 'WAF策略更新检查',
    planName: '安全设备策略巡检',
    type: '安全设备',
    target: 'Web应用防火墙',
    deadline: '2024-05-25 18:00',
    status: 'completed',
    executor: '刘芳'
  }
]);

// 6. 统计数据（根据时间范围变化）
const statData = ref({
  completed: 42,
  problems: 7,
  resolved: 5,
  avgTime: '45分钟',
  completeRate: 68,
  resolveRate: 72,
  timelyRate: 60
});

// 7. 问题类型分布
const problemCategories = ref([
  { name: '温度异常', rate: 85, color: '#3b82f6' },
  { name: '内存使用率', rate: 62, color: '#10b981' },
  { name: 'CPU负载', rate: 45, color: '#f97316' },
  { name: '响应时间', rate: 30, color: '#8b5cf6' },
  { name: '磁盘空间', rate: 15, color: '#ec4899' }
]);

// 8. 最近巡检记录
const recentRecords = ref([
  {
    name: '数据库性能巡检',
    status: 'normal',
    time: '2024-06-09 14:00-16:45',
    executor: '张明',
    summary: '数据库连接量128（阈值500），查询响应时间平均0.3S，表空间使用率75%，整体状态正常'
  },
  {
    name: '生产服务器日常巡检',
    status: 'attention',
    time: '2024-06-09 10:00-11:30',
    executor: '李华',
    summary: 'CPU平均使用率35%（峰值59%），内存使用率85%（需关注），磁盘空间62%，服务运行正常'
  },
  {
    name: '网络设备安全巡检',
    status: 'problem',
    time: '2024-06-08 09:00-10:45',
    executor: '王强',
    summary: '防火墙部分规则异常，安全补丁需更新，访问控制和流量监控正常，已创建问题单#PRB-2024060801'
  }
]);

// 9. 方法：切换顶部导航
const handleInspection1 = () => {
  router.push('/rili/rili');
};
const handleInspection2 = () => {
  router.push('/rili/InspectionManagement');
};
const handleInspection3 = () => {
  router.push('/rili/shiyanguanli');
};
const handleInspection4 = () => {
  router.push('/rili/baoxiuguanli');
};
const handleInspection5 = () => {
  router.push('/rili/qiangxiuguanli');
};
const handleInspection6 = () => {
  router.push('/rili/gongdanliebiao');
};
const handleInspection7 = () => {
  router.push('/rili/renyuanzhuangtai');
};
const handleInspectionManagement1 = () => {
  router.push('/rili/shiyanguanli');
};
const handleInspectionManagement2 = () => {
  router.push('/rili/shiyanrenwu');
};
const handleInspectionManagement3 = () => {
  router.push('/rili/shiyanjilu');
};
// 10. 方法：切换功能选项卡
const switchTab = (tab) => {
  activeTab.value = tab;
  // 实际应用中需根据选项卡加载对应数据
  if (tab === 'record') {
    // 加载统计数据
    updateStatData(timeRange.value);
  }
};

// 11. 方法：更新统计数据（根据时间范围）
const updateStatData = (range) => {
  const mockData = {
    month: { completed: 42, problems: 7, resolved: 5, avgTime: '45分钟', completeRate: 68, resolveRate: 72, timelyRate: 60 },
    week: { completed: 12, problems: 2, resolved: 1, avgTime: '40分钟', completeRate: 75, resolveRate: 50, timelyRate: 65 },
    day: { completed: 2, problems: 0, resolved: 0, avgTime: '35分钟', completeRate: 100, resolveRate: 100, timelyRate: 100 }
  };
  statData.value = mockData[range];
};

// 12. 方法：切换时间范围
const handleTimeRangeChange = (range) => {
  timeRange.value = range;
  updateStatData(range);
};

// 13. 方法：分页变化
const handlePageChange = (page) => {
  currentPage.value = page;
  // 实际应用中加载对应页数据
};
const handleSizeChange = (size) => {
  pageSize.value = size;
  currentPage.value = 1;
  // 实际应用中重新加载数据
};

// 14. 方法：获取计划状态文本
const getStatusText = (status) => {
  const statusMap = {
    'drafted': '已起草',
    'in-progress': '进行中',
    'completed': '已完成',
    'paused': '暂停'
  };
  return statusMap[status] || '';
};

// 15. 方法：获取任务状态文本
const getTaskStatusText = (status) => {
  const statusMap = {
    'pending': '待接受',
    'accepted': '处理中',
    'completed': '已完成',
    'rejected': '已拒绝'
  };
  return statusMap[status] || '';
};

// 16. 方法：获取记录状态文本
const getRecordStatusText = (status) => {
  const statusMap = {
    'normal': '正常',
    'attention': '需关注',
    'problem': '有问题'
  };
  return statusMap[status] || '';
};

// 17. 方法：获取进度条颜色
const getProgressColor = (status) => {
  const colorMap = { 'drafted': '#ccc', 'in-progress': '#3b82f6', 'completed': '#10b981', 'paused': '#9e9e9e' };
  return colorMap[status] || '#ccc';
};

// 18. 新增实验记录弹窗相关
const showRecordDialog = ref(false);

// 表单数据
const formData = ref({
  materialName: '',
  testNumber: 'EX-20240601',
  refNumber: '',
  startDate: '',
  endDate: '',
  appNumber: '',
  appProject: '',
  testPurpose: '',
  envRequirements: '',
  manager: '',
  participants: '张明、李华、王强、刘洋、赵云',
  steps: [{ content: '' }, { content: '' }, { content: '' }],
  equipments: [
    { name: '服务器(型号:XYZ-9000)', selected: false },
    { name: '网络测试仪(型号:NT-5000)', selected: false },
    { name: '温度控制系统', selected: false },
    { name: '负载生成工具', selected: false }
  ],
  riskMitigation: ''
});

// 新设备输入
const newEquipment = ref('');

// 关闭弹窗
const handleClose = () => {
  showRecordDialog.value = false;
};

// 保存实验记录
const handleSave = () => {
  // 实际应用中这里应该有表单验证和提交逻辑
  console.log('保存实验记录:', formData.value);
  showRecordDialog.value = false;
  // 保存成功后可以显示提示信息
};

// 添加新步骤
const addStep = () => {
  formData.value.steps.push({ content: '' });
};

// 添加新设备
const addEquipment = () => {
  if (newEquipment.value.trim()) {
    formData.value.equipments.push({ name: newEquipment.value.trim(), selected: false });
    newEquipment.value = '';
  }
};
</script>

<style scoped>
/* 1. 基础容器样式（继承试验系统） */
.operation-inspection {
  padding: 20px;
  background-color: #f9fbfd;
  min-height: 100vh;
}

/* 2. 顶部导航选项卡 */
.navigation-tabs {
  display: flex;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
  margin-bottom: 20px;
  overflow: hidden;
}
.nav-tab {
  padding: 12px 24px;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 14px;
  color: #6b7280;
  flex: 1;
  text-align: center;
  border-right: 1px solid #f0f0f0;
}
.nav-tab:last-child {
  border-right: none;
}
.nav-tab:hover:not(.active) {
  background-color: #f3f4f6;
}
.nav-tab.active {
  background-color: #165dff;
  color: #fff;
  font-weight: 500;
}

/* 3. 页面标题（与试验系统一致） */
.page-header {
  margin-bottom: 20px;
}
.page-title {
  font-size: 20px;
  font-weight: 600;
  color: #1f2329;
  margin: 0 0 5px 0;
}
.page-description {
  font-size: 14px;
  color: #6b7280;
  margin: 0;
}

/* 4. 功能选项卡导航（与试验系统一致） */
.tabs-nav {
  display: flex;
  background-color: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 4px 4px 0 0;
  overflow: hidden;
  margin-bottom: -1px;
}
.tab-btn {
  padding: 12px 24px;
  background: none;
  border: none;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
}
.tab-btn.active {
  background-color: #fff;
  color: #165dff;
  border-top: 2px solid #165dff;
  font-weight: 500;
}
.tab-btn:not(.active) {
  color: #6b7280;
  background-color: #f9fafb;
}
.tab-btn:not(.active):hover {
  background-color: #f3f4f6;
}

/* 5. 筛选和操作区域（与试验系统一致） */
.filter-and-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  background-color: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 0 0 4px 4px;
  margin-bottom: 16px;
  flex-wrap: wrap;
  gap: 12px;
}
.filters {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}
.action-buttons {
  display: flex;
  gap: 12px;
}
.el-select,
.date-picker {
  width: 160px;
}
.search-btn,
.export-btn,
.create-btn {
  background-color: #165dff;
  border-color: #165dff;
}

/* 6. 表格容器（与试验系统一致） */
.table-container {
  background-color: #fff;
  border-radius: 4px;
  border: 1px solid #e5e7eb;
  margin-bottom: 16px;
}
.el-table {
  width: 100%;
}
.el-table th {
  background-color: #f9fafb;
  font-weight: 500;
  color: #4b5563;
}
.plan-name {
  white-space: pre-line;
}

/* 7. 进度条样式（与试验系统一致） */
.progress-bar {
  height: 8px;
  background-color: #f3f4f6;
  border-radius: 4px;
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  transition: width 0.3s ease;
}

/* 8. 状态标签样式（扩展试验系统） */
.status-tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
}
.status-drafted {
  background-color: #e0efff;
  color: #165dff;
}
.status-in-progress {
  background-color: #e0f2fe;
  color: #0284c7;
}
.status-completed {
  background-color: #e6ffed;
  color: #00b42a;
}
.status-paused {
  background-color: #f2f3f5;
  color: #86909c;
}
.status-pending {
  background-color: #f9fafb;
  color: #6b7280;
}
.status-accepted {
  background-color: #eff6ff;
  color: #2563eb;
}
.status-rejected {
  background-color: #fee2e2;
  color: #dc2626;
}
.status-normal {
  background-color: #e6ffed;
  color: #00b42a;
}
.status-attention {
  background-color: #fff7e0;
  color: #ff7d00;
}
.status-problem {
  background-color: #fff2f0;
  color: #f5222d;
}

/* 9. 操作按钮样式（扩展试验系统） */
.operation-buttons {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.operate-btn {
  padding: 2px 8px;
  font-size: 12px;
  border-radius: 4px;
  cursor: pointer;
  border: none;
  background: none;
  transition: all 0.2s;
}
.edit-btn {
  color: #165dff;
}
.edit-btn:hover {
  background-color: #e8f3ff;
}
.execute-btn {
  color: #00b42a;
}
.execute-btn:hover {
  background-color: #e6ffed;
}
.pause-btn {
  color: #ff7d00;
}
.pause-btn:hover {
  background-color: #fff7e0;
}
.resume-btn {
  color: #722ed1;
}
.resume-btn:hover {
  background-color: #f3e8ff;
}
.view-btn {
  color: #165dff;
}
.view-btn:hover {
  background-color: #e8f3ff;
}
.complete-btn {
  color: #00b42a;
}
.complete-btn:hover {
  background-color: #e6ffed;
}
.accept-btn {
  color: #2563eb;
}
.accept-btn:hover {
  background-color: #eff6ff;
}
.report-btn {
  color: #ff7d00;
}
.report-btn:hover {
  background-color: #fff7e0;
}

/* 10. 分页样式（与试验系统一致） */
.pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  background-color: #fff;
  border-radius: 4px;
  border: 1px solid #e5e7eb;
}
.total-records {
  font-size: 14px;
  color: #6b7280;
  margin: 0;
}
.el-pagination {
  --el-pagination-item-active-bg-color: #165dff;
}

/* 11. 记录页面容器 */
.record-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.main-content-container {
  display: flex;
  gap: 16px;
  height: calc(100% - 20px);
}
.left-content {
  flex: 2;
  display: flex;
  flex-direction: column;
}
.right-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* 12. 内容卡片样式 */
.content-card {
  background-color: #fff;
  border-radius: 4px;
  border: 1px solid #e5e7eb;
  overflow: hidden;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.card-header {
  padding: 16px;
  border-bottom: 1px solid #e5e7eb;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.card-title {
  font-size: 16px;
  font-weight: 500;
  color: #1f2329;
  margin: 0;
}
.card-body {
  padding: 16px;
  flex: 1;
  overflow-y: auto;
}

/* 13. 时间范围按钮 */
.time-range-buttons {
  display: flex;
  gap: 8px;
}
.time-btn {
  padding: 4px 8px;
  font-size: 12px;
  border-radius: 4px;
  border: 1px solid #e5e7eb;
  background-color: #f9fafb;
  color: #6b7280;
  cursor: pointer;
  transition: all 0.2s;
}
.time-btn.active {
  background-color: #165dff;
  color: #fff;
  border-color: #165dff;
}

/* 14. 统计卡片样式 */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-bottom: 16px;
}
.stat-card {
  background-color: #f9fafb;
  border-radius: 4px;
  padding: 12px;
}
.stat-label {
  font-size: 14px;
  color: #6b7280;
  margin: 0 0 8px 0;
}
.stat-value {
  font-size: 20px;
  font-weight: 600;
  color: #1f2329;
  margin: 0;
}

/* 15. 分隔线 */
.divider {
  height: 1px;
  background-color: #e5e7eb;
  margin: 16px 0;
}

/* 16. 图表容器 */
.chart-container {
  display: flex;
  gap: 16px;
  align-items: center;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.pie-chart {
  flex: 1;
  min-width: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.chart-title {
  font-size: 14px;
  color: #6b7280;
  margin: 0 0 8px 0;
  align-self: flex-start;
}
.pie-wrapper {
  position: relative;
  width: 180px;
  height: 180px;
}
.pie-center {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.pie-legend {
  display: flex;
  gap: 16px;
  margin-top: 12px;
}
.legend-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: #6b7280;
}
.legend-color {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.legend-color.resolved {
  background-color: #10b981;
}
.legend-color.unresolved {
  background-color: #f97316;
}

/* 17. 进度条组 */
.progress-bars {
  flex: 2;
  min-width: 250px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.progress-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.progress-header {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
}
.progress-label {
  color: #6b7280;
}
.progress-value {
  font-weight: 500;
  color: #1f2329;
}

/* 18. 问题分类 */
.problem-category {
  margin-bottom: 8px;
}
.section-title {
  font-size: 14px;
  font-weight: 500;
  color: #1f2329;
  margin: 0 0 12px 0;
}
.category-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.category-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.category-header {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
}
.category-label {
  color: #6b7280;
}
.category-value {
  color: #1f2329;
}

/* 19. 最近巡检记录列表 */
.record-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.inspection-record {
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  padding: 12px;
  background-color: #f9fafb;
}
.record-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 8px;
}
.record-title {
  font-size: 14px;
  font-weight: 500;
  color: #1f2329;
  margin: 0;
}
.record-meta {
  font-size: 12px;
  color: #6b7280;
  margin: 0 0 8px 0;
}
.record-summary {
  font-size: 12px;
  color: #1f2329;
  margin: 0 0 8px 0;
  line-height: 1.5;
}
.record-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* 20. 响应式适配 */
@media (max-width: 1200px) {
  .main-content-container {
    flex-direction: column;
  }
  .stat-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 768px) {
  .filters {
    flex-direction: column;
    align-items: stretch;
  }
  .el-select,
  .date-picker {
    width: 100%;
  }
  .action-buttons {
    width: 100%;
    justify-content: space-between;
  }
  .navigation-tabs {
    flex-wrap: wrap;
  }
  .nav-tab {
    flex: 1 1 auto;
    min-width: 100px;
  }
}
/* 选项卡样式 */
.tabs-wrapper {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 16px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* 筛选栏样式 */
.filter-bar {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 16px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}

.filter-item {
  flex-shrink: 0;
}

.filter-bar .el-select,
.filter-bar .el-date-picker {
  width: 150px;
  height: 36px;
}

.filter-actions {
  margin-left: auto;
  display: flex;
  gap: 10px;
}

/* 新增实验记录弹窗样式 */
.custom-experiment-dialog {
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  overflow: hidden;
}

.custom-experiment-dialog .el-dialog__header {
  background-color: #f8f9fa;
  border-bottom: 1px solid #e9ecef;
  padding: 20px 24px;
}

.custom-experiment-dialog .el-dialog__title {
  font-size: 18px;
  font-weight: 600;
  color: #2c3e50;
}

.custom-experiment-dialog .el-dialog__body {
  padding: 24px;
  overflow: visible;
}

.form-container {
  padding: 0;
}

.form-row {
  display: flex;
  gap: 24px;
  margin-bottom: 20px;
}

.form-item {
  flex: 1;
  margin-bottom: 20px !important;
}

.el-form-item__label {
  font-size: 14px;
  font-weight: 500;
  color: #495057;
  padding-right: 12px;
}

.form-input {
  width: 100%;
  border-radius: 6px;
  transition: all 0.3s ease;
}

.form-input:focus {
  border-color: #165dff;
  box-shadow: 0 0 0 2px rgba(22, 93, 255, 0.1);
}

/* 试验步骤样式 */
.steps-container {
  border: 1px solid #e4e7ed;
  border-radius: 8px;
  padding: 16px;
  width: 100%;
}

.step-item {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
  width: 100%;
}

.step-item:last-child {
  margin-bottom: 0;
}

.step-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: #165dff;
  color: white;
  font-size: 16px;
  font-weight: 600;
  margin-right: 16px;
  flex-shrink: 0;
}

.step-input:focus {
  border-color: #165dff;
  outline: none;
}

.add-step-btn {
  color: #165dff;
  margin-top: 12px;
  width: 100%;
  text-align: center;
  font-size: 14px;
}

/* 设备列表样式 */
.equipment-list {
  border: 1px solid #e4e7ed;
  border-radius: 8px;
  padding: 16px;
  width: 100%;
}

.equipment-item {
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  padding: 6px 0;
}

.equipment-item:last-child {
  margin-bottom: 0;
}

.el-checkbox__label {
  font-size: 14px;
  color: #495057;
  margin-left: 8px;
}

.add-equipment {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  width: 100%;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 16px 24px;
  background-color: #f8f9fa;
  border-top: 1px solid #e9ecef;
}

.dialog-footer .el-button {
  padding: 8px 20px;
  border-radius: 6px;
  font-size: 14px;
}

.dialog-footer .el-button--primary {
  background-color: #165dff;
  border-color: #165dff;
}

.dialog-footer .el-button--primary:hover {
  background-color: #0d47a1;
  border-color: #0d47a1;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .custom-experiment-dialog {
    width: 90% !important;
    margin: 0 auto;
  }

  .form-row {
    flex-direction: column;
    gap: 0;
  }

  .add-equipment {
    flex-direction: column;
    align-items: stretch;
  }

  .new-equipment-input {
    width: 100%;
  }
}
</style>
