<template>
  <div class="case-tracker">
    <el-card class="case-list">
      <div class="case-header">
        <h3>案件跟踪</h3>
        <el-form :inline="true" class="case-query-form">
          <!-- 筛选功能 -->
          <el-form-item label="报警级别">
            <el-select v-model="alarmLevel" placeholder="请选择">
              <el-option label="全部" value=""></el-option>
              <el-option label="一级" value="1"></el-option>
              <el-option label="二级" value="2"></el-option>
              <el-option label="三级" value="3"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="报警区域">
            <el-select v-model="alarmArea" placeholder="请选择">
              <el-option label="全部" value=""></el-option>
              <el-option label="区域A" value="区域A"></el-option>
              <el-option label="区域B" value="区域B"></el-option>
              <el-option label="区域C" value="区域C"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="事项类型">
            <el-select v-model="matterType" placeholder="请选择">
              <el-option label="全部" value=""></el-option>
              <el-option label="类型1" value="类型1"></el-option>
              <el-option label="类型2" value="类型2"></el-option>
              <el-option label="类型3" value="类型3"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleQuery">查询案件</el-button>
          </el-form-item>
        </el-form>
      </div>
      <el-table :data="filteredCases" style="width: 100%" :default-sort="{prop: 'arrivalTime', order: 'descending'}">
        <el-table-column prop="caseNumber" label="案件编号"></el-table-column>
        <el-table-column prop="alarmLevel" label="报警级别" :formatter="formatAlarmLevel"></el-table-column>
        <el-table-column prop="alarmType" label="报警类型"></el-table-column>
        <el-table-column prop="description" label="报警描述"></el-table-column>
        <el-table-column prop="purpose" label="用途"></el-table-column>
        <el-table-column prop="ownerUnit" label="权属单位"></el-table-column>
        <el-table-column prop="address" label="详细地址"></el-table-column>
        <el-table-column prop="arrivalTime" label="到达时间"></el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <el-button type="text" @click="viewDetails(scope.row)">查看详情</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 案件详情模态框 -->
    <el-dialog v-model="caseDetailVisible" title="案件详情" width="60%">
      <el-descriptions :column="1" border>
        <el-descriptions-item label="案件编号">{{ selectedCase.caseNumber }}</el-descriptions-item>
        <el-descriptions-item label="报警级别">{{ formatAlarmLevel(selectedCase.alarmLevel) }}</el-descriptions-item>
        <el-descriptions-item label="报警类型">{{ selectedCase.alarmType }}</el-descriptions-item>
        <el-descriptions-item label="报警描述">{{ selectedCase.description }}</el-descriptions-item>
        <el-descriptions-item label="用途">{{ selectedCase.purpose }}</el-descriptions-item>
        <el-descriptions-item label="权属单位">{{ selectedCase.ownerUnit }}</el-descriptions-item>
        <el-descriptions-item label="详细地址">{{ selectedCase.address }}</el-descriptions-item>
        <el-descriptions-item label="到达时间">{{ selectedCase.arrivalTime }}</el-descriptions-item>
        <el-descriptions-item label="办理经过">
          <el-timeline>
            <el-timeline-item v-for="(item, index) in selectedCase.processHistory" :key="index" :timestamp="item.time" placement="top">
              <el-card>
                <p>{{ item.action }} - {{ item.operator }}</p>
                <p>{{ item.remarks }}</p>
              </el-card>
            </el-timeline-item>
          </el-timeline>
        </el-descriptions-item>
        <el-descriptions-item label="附件信息">
          <el-row :gutter="20">
            <el-col :span="8" v-for="(attachment, index) in selectedCase.attachments" :key="index">
              <el-card :body-style="{ padding: '0px' }">
                <img :src="attachment.url" class="image" />
                <div style="padding: 14px;">
                  <span>{{ attachment.type }}</span>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </el-descriptions-item>
      </el-descriptions>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { ElMessage } from 'element-plus';

// 模拟案件数据
const cases = ref([
  {
    caseNumber: '001',
    alarmLevel: '1',
    alarmType: '紧急情况',
    description: '详细描述1',
    purpose: '目的1',
    ownerUnit: '单位1',
    address: '地址1',
    arrivalTime: '2023-09-15 14:30:00',
    processHistory: [
      { action: '立案', operator: '张三', time: '2023-09-15 14:30:00', remarks: '立案成功' },
      { action: '下派', operator: '李四', time: '2023-09-15 14:35:00', remarks: '已下派至单位1' },
      { action: '核查', operator: '王五', time: '2023-09-15 14:40:00', remarks: '已核查，无误' }
    ],
    attachments: [
      { url: 'https://example.com/image1.jpg', type: '图片' },
      { url: 'https://example.com/video1.mp4', type: '视频' }
    ]
  },
  // 可以添加更多模拟数据
]);

// 控制案件详情模态框的显示与隐藏
const caseDetailVisible = ref(false);

// 当前选中的案件信息
const selectedCase = ref({});

// 筛选条件
const alarmLevel = ref('');
const alarmArea = ref('');
const matterType = ref('');

// 查询案件
const handleQuery = () => {
  console.log('查询案件');

  // 根据筛选条件过滤数据
  const filteredData = cases.value.filter(item => {
    return (
        (!alarmLevel.value || item.alarmLevel === alarmLevel.value) &&
        (!alarmArea.value || item.area === alarmArea.value) &&
        (!matterType.value || item.matterType === matterType.value)
    );
  });

  // 更新案件数据
  cases.value = filteredData;
};

// 查看案件详情
const viewDetails = (row) => {
  console.log('查看案件详情', row);
  // 设置当前选中的案件信息
  selectedCase.value = row;
  // 打开模态框
  caseDetailVisible.value = true;
};

// 格式化报警级别
const formatAlarmLevel = (level) => {
  switch (level) {
    case '1':
      return '一级（红色）';
    case '2':
      return '二级（橙色）';
    case '3':
      return '三级（黄色）';
    default:
      return '未知级别';
  }
};

// 过滤后的案件数据
const filteredCases = computed(() => {
  let filtered = cases.value;

  if (alarmLevel.value) {
    filtered = filtered.filter(item => item.alarmLevel === alarmLevel.value);
  }

  if (alarmArea.value) {
    filtered = filtered.filter(item => item.area === alarmArea.value);
  }

  if (matterType.value) {
    filtered = filtered.filter(item => item.matterType === matterType.value);
  }

  return filtered.sort((a, b) => new Date(b.arrivalTime) - new Date(a.arrivalTime));
});
</script>

<style scoped>
.case-tracker {
  padding: 20px;
}
.case-list {
  margin-bottom: 20px;
}
.case-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.image {
  width: 100%;
  display: block;
}
</style>
