<!--案件流转管理-->
<template>
  <div class="case-management">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-stats">
        <div class="stat" @click="filterStatus('')">
          <div class="num">{{ totalCases }}</div>
          <div>全部案件</div>
        </div>
        <div class="stat" @click="filterStatus('pending')">
          <div class="num warning">{{ pendingCount }}</div>
          <div>待核查</div>
        </div>
        <div class="stat" @click="filterStatus('processing')">
          <div class="num">{{ processingCount }}</div>
          <div>办理中</div>
        </div>
        <div class="stat" @click="filterStatus('completed')">
          <div class="num">{{ completedCount }}</div>
          <div>已办结</div>
        </div>
      </div>
    </div>

    <div class="main-layout">
      <!-- 左侧案件列表 -->
      <div class="case-list-panel">
        <div class="list-header">
          <span>案件列表</span>
          <el-input v-model="searchKeyword" placeholder="搜索案件编号/位置" prefix-icon="Search" clearable size="small" style="width: 160px" />
        </div>
        <div class="case-list">
          <div
              v-for="caseItem in filteredCases"
              :key="caseItem.id"
              class="case-item"
              :class="{ active: selectedCase?.id === caseItem.id, [caseItem.status]: true }"
              @click="selectCase(caseItem)"
          >
            <div class="case-level">
              <el-tag :type="caseItem.level === 'critical' ? 'danger' : 'warning'" size="small">
                {{ caseItem.level === 'critical' ? '严重' : '一般' }}
              </el-tag>
            </div>
            <div class="case-info">
              <div class="case-title">{{ caseItem.code }}</div>
              <div class="case-location"><el-icon><Location /></el-icon> {{ caseItem.locationShort }}</div>
              <div class="case-time">{{ caseItem.alertTime }}</div>
            </div>
            <div class="case-status">
              <el-tag :type="getStatusType(caseItem.status)" size="small">{{ getStatusText(caseItem.status) }}</el-tag>
            </div>
          </div>
        </div>
        <div class="pagination-area">
          <el-pagination small layout="prev, pager, next" :total="filteredCases.length" :page-size="pageSize" v-model:current-page="currentPage" />
        </div>
      </div>

      <!-- 右侧案件详情与核查操作区 -->
      <div class="detail-panel" v-if="selectedCase">
        <!-- 基本信息与地理位置双栏 -->
        <div class="detail-two-col">
          <div class="info-section">
            <div class="section-title">
              <span><el-icon><InfoFilled /></el-icon> 案件信息</span>
              <div class="task-role">
                <el-select v-model="selectedRole" placeholder="指定督办角色" size="small" style="width: 140px">
                  <el-option label="网格巡查员" value="inspector" />
                  <el-option label="维修班组" value="repair" />
                  <el-option label="应急中心" value="emergency" />
                </el-select>
                <el-button type="primary" size="small" @click="assignTask">指派督办</el-button>
              </div>
            </div>
            <el-descriptions :column="1" border>
              <el-descriptions-item label="案件编号">{{ selectedCase.code }}</el-descriptions-item>
              <el-descriptions-item label="报警级别">
                <el-tag :type="selectedCase.level === 'critical' ? 'danger' : 'warning'">{{ selectedCase.level === 'critical' ? '严重报警' : '一般报警' }}</el-tag>
              </el-descriptions-item>
              <el-descriptions-item label="报警描述">{{ selectedCase.alertDesc }}</el-descriptions-item>
              <el-descriptions-item label="报警时间">{{ selectedCase.alertTime }}</el-descriptions-item>
              <el-descriptions-item label="当前状态">{{ getStatusText(selectedCase.status) }}</el-descriptions-item>
              <el-descriptions-item label="指定督办角色">{{ selectedCase.assignRole || '未指定' }}</el-descriptions-item>
            </el-descriptions>
          </div>
          <div class="location-section">
            <div class="section-title"><el-icon><MapLocation /></el-icon> 地理位置</div>
            <div class="map-mini">
              <div class="mock-map">
                <el-icon :size="36" color="#f56c6c"><Location /></el-icon>
                <div>{{ selectedCase.address }}</div>
                <div class="coords">经度: {{ selectedCase.lng }}, 纬度: {{ selectedCase.lat }}</div>
              </div>
            </div>
            <!-- 井盖设备信息 -->
            <div class="device-info">
              <div class="sub-title"><el-icon><Monitor /></el-icon> 井盖设备信息</div>
              <el-descriptions :column="2" size="small" border>
                <el-descriptions-item label="设备编号">{{ selectedCase.deviceId }}</el-descriptions-item>
                <el-descriptions-item label="设备类型">{{ selectedCase.deviceType }}</el-descriptions-item>
                <el-descriptions-item label="设备型号">{{ selectedCase.deviceModel }}</el-descriptions-item>
                <el-descriptions-item label="安装日期">{{ selectedCase.installDate }}</el-descriptions-item>
                <el-descriptions-item label="当前状态">{{ selectedCase.deviceStatus }}</el-descriptions-item>
                <el-descriptions-item label="最近通讯">{{ selectedCase.lastComm }}</el-descriptions-item>
              </el-descriptions>
            </div>
          </div>
        </div>

        <!-- 报警多媒体信息 -->
        <div class="media-section">
          <div class="section-title"><el-icon><Picture /></el-icon> 报警多媒体信息</div>
          <div class="media-gallery">
            <el-image v-for="(img, idx) in selectedCase.mediaImages" :key="idx" :src="img" fit="cover" class="media-img" />
            <div v-if="selectedCase.videoUrl" class="video-preview" @click="playVideo">▶ 查看现场视频</div>
            <div v-if="!selectedCase.mediaImages?.length && !selectedCase.videoUrl" class="no-media">暂无多媒体附件</div>
          </div>
        </div>

        <!-- 办理经过 & 处置信息时间轴 -->
        <div class="process-section">
          <div class="section-title"><el-icon><Document /></el-icon> 办理经过 & 处置信息</div>
          <el-timeline>
            <el-timeline-item v-for="process in selectedCase.processLogs" :key="process.id" :timestamp="process.time" :type="process.type">
              {{ process.content }}
              <span v-if="process.operator" class="operator">操作人: {{ process.operator }}</span>
            </el-timeline-item>
          </el-timeline>
        </div>

        <!-- 核查操作栏 (任务督办核心) -->
        <div class="action-bar">
          <div class="section-title"><el-icon><Operation /></el-icon> 案件处置操作</div>
          <div class="action-buttons" v-if="selectedCase.status !== 'completed'">
            <el-button type="primary" @click="startVerification" :disabled="selectedCase.status !== 'pending'">核查</el-button>
            <el-button type="success" @click="completeCase" :disabled="selectedCase.status === 'pending'">办结</el-button>
            <el-button type="warning" @click="redispatchCase" :disabled="selectedCase.status === 'pending'">再次派遣</el-button>
            <el-button @click="viewTaskDetail">查看处理详情</el-button>
          </div>
          <div v-else class="completed-info">案件已于 {{ selectedCase.completeTime }} 办结，全程督办记录可查。</div>
        </div>
      </div>

      <!-- 未选中案件的空状态 -->
      <div v-else class="empty-panel">
        <el-empty description="请从左侧选择案件进行核查与督办" :image-size="140" />
      </div>
    </div>

    <!-- 处理详情弹窗 -->
    <el-dialog v-model="detailDialogVisible" title="任务处理详情 - 全程督办记录" width="600px">
      <el-timeline>
        <el-timeline-item v-for="log in selectedCase?.processLogs" :key="log.id" :timestamp="log.time" :type="log.type">
          {{ log.content }} <span v-if="log.operator" class="operator-dialog">【{{ log.operator }}】</span>
        </el-timeline-item>
      </el-timeline>
      <template #footer>
        <el-button @click="detailDialogVisible = false">关闭</el-button>
      </template>
    </el-dialog>

    <!-- 再次派遣对话框 -->
    <el-dialog v-model="redispatchDialogVisible" title="再次派遣" width="400px">
      <el-form>
        <el-form-item label="指派角色">
          <el-select v-model="newAssignRole" placeholder="选择角色">
            <el-option label="网格巡查员" value="inspector" />
            <el-option label="维修班组" value="repair" />
            <el-option label="应急中心" value="emergency" />
          </el-select>
        </el-form-item>
        <el-form-item label="派遣备注">
          <el-input type="textarea" v-model="dispatchRemark" placeholder="请输入派遣说明" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="redispatchDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="confirmRedispatch">确认派遣</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { Tickets, Location, InfoFilled, MapLocation, Monitor, Picture, Document, Operation, Search } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'

// 模拟案件数据
const mockCases = [
  {
    id: 1, code: 'CASE-20250402-001', level: 'critical', alertDesc: '井盖倾斜角度14.2°，超过阈值8°，有跌落风险', alertTime: '2025-04-02 14:23:15',
    locationShort: '人民路与解放路口', address: '人民路与解放路口东50m', lng: 121.487, lat: 31.249,
    deviceId: 'MN-1001', deviceType: '智能井盖监测仪', deviceModel: 'WATCHMAN-S2', installDate: '2024-03-15', deviceStatus: '倾斜报警', lastComm: '2025-04-02 14:20',
    mediaImages: ['https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'],
    videoUrl: null,
    status: 'pending',  // pending, processing, completed
    assignRole: null,
    processLogs: [
      { id: 1, time: '2025-04-02 14:23:20', content: '系统自动生成报警案件', type: 'danger', operator: '系统' }
    ],
    completeTime: null
  },
  {
    id: 2, code: 'CASE-20250402-002', level: 'critical', alertDesc: '井下水位62cm，超过阈值40cm，溢水风险', alertTime: '2025-04-02 13:58:12',
    locationShort: '滨江路化工园区', address: '滨江路化工园区南门', lng: 121.502, lat: 31.235,
    deviceId: 'MN-1002', deviceType: '防爆井盖监测仪', deviceModel: 'WATCHMAN-EX', installDate: '2024-06-20', deviceStatus: '水位超限', lastComm: '2025-04-02 13:55',
    mediaImages: [],
    videoUrl: 'demo.mp4',
    status: 'processing',
    assignRole: 'repair',
    processLogs: [
      { id: 1, time: '2025-04-02 13:58:20', content: '系统自动生成报警案件', type: 'danger', operator: '系统' },
      { id: 2, time: '2025-04-02 14:10:00', content: '已指派维修班组现场勘查', type: 'warning', operator: '调度中心-李工' },
      { id: 3, time: '2025-04-02 14:30:15', content: '维修人员已到达现场，开始排水作业', type: 'info', operator: '维修班组-张三' }
    ],
    completeTime: null
  },
  {
    id: 3, code: 'CASE-20250402-003', level: 'warning', alertDesc: '异常震动112mg，超过阈值80mg，疑似外力冲击', alertTime: '2025-04-02 12:10:33',
    locationShort: '古城街北段', address: '古城街北段树下', lng: 121.478, lat: 31.258,
    deviceId: 'MN-1003', deviceType: '普通井盖监测仪', deviceModel: 'WATCHMAN-Basic', installDate: '2023-11-10', deviceStatus: '震动报警', lastComm: '2025-04-02 12:08',
    mediaImages: ['https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg'],
    videoUrl: null,
    status: 'completed',
    assignRole: 'inspector',
    processLogs: [
      { id: 1, time: '2025-04-02 12:10:40', content: '系统自动生成报警案件', type: 'danger', operator: '系统' },
      { id: 2, time: '2025-04-02 12:35:00', content: '网格员现场核查，确认为重型车辆碾轧导致，井盖轻微移位', type: 'primary', operator: '巡查员-王明' },
      { id: 3, time: '2025-04-02 13:20:00', content: '维修人员复位井盖，异常消除', type: 'success', operator: '维修班组' },
      { id: 4, time: '2025-04-02 14:00:00', content: '案件办结', type: 'success', operator: '系统' }
    ],
    completeTime: '2025-04-02 14:00:00'
  },
  {
    id: 4, code: 'CASE-20250402-004', level: 'warning', alertDesc: '井盖异常开启，非正常打开', alertTime: '2025-04-02 11:45:20',
    locationShort: '南港路旧车站', address: '南港路旧车站段', lng: 121.495, lat: 31.228,
    deviceId: 'MN-1005', deviceType: '智能井盖监测仪', deviceModel: 'WATCHMAN-S2', installDate: '2024-01-18', deviceStatus: '开启报警', lastComm: '2025-04-02 11:44',
    mediaImages: [],
    videoUrl: null,
    status: 'pending',
    assignRole: null,
    processLogs: [{ id: 1, time: '2025-04-02 11:45:25', content: '系统自动生成报警案件', type: 'danger', operator: '系统' }],
    completeTime: null
  }
]

const searchKeyword = ref('')
const statusFilter = ref('')
const currentPage = ref(1)
const pageSize = 5
const selectedCase = ref(mockCases[0])
const selectedRole = ref('')
const detailDialogVisible = ref(false)
const redispatchDialogVisible = ref(false)
const newAssignRole = ref('')
const dispatchRemark = ref('')

const filteredCases = computed(() => {
  let list = mockCases
  if (statusFilter.value) list = list.filter(c => c.status === statusFilter.value)
  if (searchKeyword.value) {
    const kw = searchKeyword.value.toLowerCase()
    list = list.filter(c => c.code.toLowerCase().includes(kw) || c.locationShort.toLowerCase().includes(kw))
  }
  return list
})

const totalCases = computed(() => mockCases.length)
const pendingCount = computed(() => mockCases.filter(c => c.status === 'pending').length)
const processingCount = computed(() => mockCases.filter(c => c.status === 'processing').length)
const completedCount = computed(() => mockCases.filter(c => c.status === 'completed').length)

const filterStatus = (status) => { statusFilter.value = status; currentPage.value = 1 }
const selectCase = (caseItem) => { selectedCase.value = caseItem; selectedRole.value = caseItem.assignRole || '' }
const getStatusType = (status) => {
  if (status === 'pending') return 'danger'
  if (status === 'processing') return 'warning'
  return 'success'
}
const getStatusText = (status) => {
  if (status === 'pending') return '待核查'
  if (status === 'processing') return '办理中'
  return '已办结'
}

// 核查操作
const startVerification = () => {
  if (selectedCase.value.status !== 'pending') return
  selectedCase.value.status = 'processing'
  selectedCase.value.processLogs.push({
    id: Date.now(),
    time: new Date().toLocaleString(),
    content: '开始核查，已指派人员现场核实',
    type: 'primary',
    operator: '核查中心'
  })
  ElMessage.success('已启动核查，案件状态更新为办理中')
}

// 办结操作
const completeCase = () => {
  if (selectedCase.value.status === 'completed') return
  selectedCase.value.status = 'completed'
  selectedCase.value.completeTime = new Date().toLocaleString()
  selectedCase.value.processLogs.push({
    id: Date.now(),
    time: new Date().toLocaleString(),
    content: '案件办结，已完成处置并验收',
    type: 'success',
    operator: '督办员'
  })
  ElMessage.success('案件已办结')
}

// 再次派遣
const redispatchCase = () => {
  redispatchDialogVisible.value = true
}
const confirmRedispatch = () => {
  if (newAssignRole.value) {
    selectedCase.value.assignRole = newAssignRole.value
    selectedCase.value.processLogs.push({
      id: Date.now(),
      time: new Date().toLocaleString(),
      content: `再次派遣至角色: ${newAssignRole.value === 'inspector' ? '网格巡查员' : newAssignRole.value === 'repair' ? '维修班组' : '应急中心'}，备注: ${dispatchRemark.value || '无'}`,
      type: 'warning',
      operator: '督办中心'
    })
    ElMessage.success('再次派遣成功，已通知对应角色')
  } else {
    ElMessage.warning('请选择指派角色')
  }
  redispatchDialogVisible.value = false
  newAssignRole.value = ''
  dispatchRemark.value = ''
}

const assignTask = () => {
  if (!selectedRole.value) {
    ElMessage.warning('请选择督办角色')
    return
  }
  selectedCase.value.assignRole = selectedRole.value
  selectedCase.value.processLogs.push({
    id: Date.now(),
    time: new Date().toLocaleString(),
    content: `已指派角色 ${selectedRole.value === 'inspector' ? '网格巡查员' : selectedRole.value === 'repair' ? '维修班组' : '应急中心'} 进行全程督办`,
    type: 'primary',
    operator: '系统'
  })
  ElMessage.success(`已指定${selectedRole.value}角色进行任务督办`)
}

const viewTaskDetail = () => { detailDialogVisible.value = true }
const playVideo = () => { ElMessage.info('视频播放功能演示') }

</script>

<style scoped>
.case-management {
  background: #f0f2f6;
  min-height: 100vh;
  padding: 20px;
}
.page-header {
  background: white;
  border-radius: 20px;
  padding: 16px 24px;
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.header-title { display: flex; align-items: center; gap: 14px; font-size: 20px; font-weight: 600; }
.header-stats { display: flex; gap: 24px; }
.stat { text-align: center; cursor: pointer; padding: 4px 16px; border-radius: 30px; }
.stat:hover { background: #ecf5ff; }
.num { font-size: 26px; font-weight: bold; }
.num.warning { color: #e6a23c; }
.main-layout { display: flex; gap: 20px; }
.case-list-panel {
  width: 380px;
  background: white;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.list-header {
  padding: 16px;
  border-bottom: 1px solid #e9ecef;
  display: flex;
  justify-content: space-between;
  font-weight: 600;
}
.case-list { flex: 1; overflow-y: auto; padding: 12px; }
.case-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  margin-bottom: 8px;
  border-radius: 14px;
  background: #fafbfc;
  cursor: pointer;
  border: 1px solid transparent;
}
.case-item.active { background: #ecf5ff; border-color: #409eff; }
.case-item.pending { border-left: 3px solid #f56c6c; }
.case-item.processing { border-left: 3px solid #e6a23c; }
.case-info { flex: 1; }
.case-title { font-weight: 600; margin-bottom: 4px; }
.case-location { font-size: 12px; color: #6c757d; display: flex; align-items: center; gap: 4px; }
.case-time { font-size: 11px; color: #aaa; }
.detail-panel {
  flex: 1;
  background: white;
  border-radius: 20px;
  padding: 20px;
  overflow-y: auto;
  max-height: calc(100vh - 140px);
}
.detail-two-col { display: flex; gap: 20px; margin-bottom: 20px; }
.info-section { flex: 1; }
.location-section { flex: 1; }
.section-title {
  font-weight: 600;
  font-size: 16px;
  margin-bottom: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.mock-map {
  background: #e9f5e9;
  border-radius: 16px;
  height: 130px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}
.coords { font-size: 11px; color: #666; margin-top: 4px; }
.device-info { margin-top: 12px; }
.sub-title { font-weight: 500; margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
.media-section, .process-section, .action-bar {
  margin-top: 24px;
  border-top: 1px solid #e9ecef;
  padding-top: 16px;
}
.media-gallery { display: flex; gap: 12px; flex-wrap: wrap; }
.media-img { width: 100px; height: 80px; border-radius: 8px; object-fit: cover; cursor: pointer; }
.video-preview { background: #f0f0f0; padding: 8px 16px; border-radius: 20px; cursor: pointer; display: inline-block; }
.action-buttons { display: flex; gap: 12px; margin-top: 12px; }
.empty-panel { flex: 1; display: flex; align-items: center; justify-content: center; background: white; border-radius: 20px; }
.operator { font-size: 12px; color: #909399; margin-left: 12px; }
.pagination-area { padding: 12px; text-align: center; border-top: 1px solid #eee; }
</style>