<!--工单处置管理-->
<template>
  <div class="workorder-management">
    <!-- 页面头部统计 -->
    <div class="page-header">
      <div class="header-title">
        <el-icon><Tickets /></el-icon>
        <span>工单任务管理中心</span>
        <el-tag type="primary" effect="dark">待办工单 {{ pendingCount }}</el-tag>
      </div>
      <div class="header-stats">
        <div class="stat" @click="filterStatus('')">
          <div class="num">{{ totalOrders }}</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('feedback')">
          <div class="num">{{ feedbackCount }}</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="order-list-panel">
        <div class="list-header">
          <span>工单列表</span>
          <el-input v-model="searchKeyword" placeholder="搜索工单/案件编号" prefix-icon="Search" clearable size="small" style="width: 180px" />
        </div>
        <div class="order-list">
          <div
              v-for="order in paginatedOrders"
              :key="order.id"
              class="order-item"
              :class="{ active: selectedOrder?.id === order.id, [order.status]: true }"
              @click="selectOrder(order)"
          >
            <div class="order-header">
              <span class="order-code">{{ order.code }}</span>
              <el-tag :type="getStatusType(order.status)" size="small">{{ getStatusText(order.status) }}</el-tag>
            </div>
            <div class="order-case">关联案件: {{ order.caseCode }}</div>
            <div class="order-location">{{ order.address }}</div>
            <div class="order-time">创建: {{ order.createTime }}</div>
          </div>
        </div>
        <div class="pagination-area">
          <el-pagination small layout="prev, pager, next" :total="filteredOrders.length" :page-size="pageSize" v-model:current-page="currentPage" />
        </div>
      </div>

      <!-- 右侧工单详情与操作区 -->
      <div class="detail-panel" v-if="selectedOrder">
        <el-tabs v-model="activeTab">
          <!-- 工单基本信息与案件信息 -->
          <el-tab-pane label="工单信息" name="info">
            <div class="info-section">
              <div class="section-title">
                <span><el-icon><Document /></el-icon> 工单基本信息</span>
                <div class="assign-area">
                  <el-select v-model="selectedWorker" placeholder="选择维护人员" size="small" style="width: 160px" clearable>
                    <el-option v-for="worker in workers" :key="worker.id" :label="worker.name" :value="worker.id" />
                  </el-select>
                  <el-button type="primary" size="small" @click="assignWorker">下派任务</el-button>
                </div>
              </div>
              <el-descriptions :column="2" border>
                <el-descriptions-item label="工单编号">{{ selectedOrder.code }}</el-descriptions-item>
                <el-descriptions-item label="工单状态">{{ getStatusText(selectedOrder.status) }}</el-descriptions-item>
                <el-descriptions-item label="关联案件编号">
                  <el-link type="primary" @click="viewCase">{{ selectedOrder.caseCode }}</el-link>
                </el-descriptions-item>
                <el-descriptions-item label="报警级别">
                  <el-tag :type="selectedOrder.alertLevel === 'critical' ? 'danger' : 'warning'" size="small">
                    {{ selectedOrder.alertLevel === 'critical' ? '严重' : '一般' }}
                  </el-tag>
                </el-descriptions-item>
                <el-descriptions-item label="报警类型">{{ selectedOrder.alertType }}</el-descriptions-item>
                <el-descriptions-item label="权属单位">{{ selectedOrder.ownerUnit }}</el-descriptions-item>
                <el-descriptions-item label="报警描述" :span="2">{{ selectedOrder.alertDesc }}</el-descriptions-item>
                <el-descriptions-item label="详细地址" :span="2">{{ selectedOrder.address }}</el-descriptions-item>
                <el-descriptions-item label="用途">{{ selectedOrder.purpose || '市政排水' }}</el-descriptions-item>
                <el-descriptions-item label="指派人">{{ selectedOrder.assignee || '未指派' }}</el-descriptions-item>
              </el-descriptions>
            </div>

            <!-- 延期/缓办操作 -->
            <div class="delay-section">
              <div class="section-title"><el-icon><Timer /></el-icon> 工单延期/缓办</div>
              <div class="delay-buttons">
                <el-button size="small" type="warning" @click="openDelayDialog('延期')">申请延期</el-button>
                <el-button size="small" type="info" @click="openDelayDialog('缓办')">申请缓办</el-button>
              </div>
              <div v-if="selectedOrder.delayRecords?.length" class="delay-history">
                <div v-for="(rec, idx) in selectedOrder.delayRecords" :key="idx" class="delay-item">
                  {{ rec.type }} 至 {{ rec.deadline }}，理由: {{ rec.reason }}
                </div>
              </div>
            </div>
          </el-tab-pane>

          <!-- 处置反馈与审批 -->
          <el-tab-pane label="处置反馈与审批" name="feedback">
            <div class="feedback-section">
              <div class="section-title"><el-icon><Picture /></el-icon> 现场处置反馈（负责人上报）</div>
              <div v-if="selectedOrder.feedback">
                <el-descriptions :column="1" border>
                  <el-descriptions-item label="处置人员">{{ selectedOrder.feedback.workerName }}</el-descriptions-item>
                  <el-descriptions-item label="处置时间">{{ selectedOrder.feedback.feedbackTime }}</el-descriptions-item>
                  <el-descriptions-item label="处置说明">{{ selectedOrder.feedback.description }}</el-descriptions-item>
                  <el-descriptions-item label="现场照片">
                    <div class="feedback-images">
                      <el-image v-for="(img, idx) in selectedOrder.feedback.images" :key="idx" :src="img" fit="cover" class="feedback-img" preview-teleported />
                    </div>
                  </el-descriptions-item>
                </el-descriptions>
                <!-- 周边视频监控 -->
                <div class="video-section" v-if="selectedOrder.surroundVideo">
                  <div class="sub-title"><el-icon><VideoCamera /></el-icon> 井盖周边视频监控</div>
                  <div class="video-preview" @click="playVideo">点击查看周边监控录像</div>
                </div>
              </div>
              <div v-else class="no-feedback">暂无处置反馈信息，等待负责人上报</div>

              <!-- 审批操作栏 -->
              <div class="approval-section" v-if="selectedOrder.status === 'feedback'">
                <div class="section-title"><el-icon><Checked /></el-icon> 工单审批</div>
                <div class="approval-buttons">
                  <el-button type="success" @click="approveOrder(true)">审批通过</el-button>
                  <el-button type="danger" @click="approveOrder(false)">驳回重办</el-button>
                </div>
                <el-input type="textarea" v-model="approvalRemark" placeholder="审批意见（可选）" rows="2" style="margin-top: 12px" />
              </div>
              <div v-else-if="selectedOrder.status === 'completed'" class="approved-info">
                <el-alert title="工单已完成审批" type="success" :closable="false" show-icon />
              </div>
            </div>
          </el-tab-pane>

          <!-- 工单处理历史 -->
          <el-tab-pane label="处理历史" name="history">
            <el-timeline>
              <el-timeline-item v-for="log in selectedOrder.processLogs" :key="log.id" :timestamp="log.time" :type="log.type">
                {{ log.content }}
                <span v-if="log.operator" class="operator">操作人: {{ log.operator }}</span>
              </el-timeline-item>
            </el-timeline>
          </el-tab-pane>
        </el-tabs>
      </div>

      <!-- 未选中状态 -->
      <div v-else class="empty-panel">
        <el-empty description="请从左侧选择工单进行处理" :image-size="140" />
      </div>
    </div>

    <!-- 延期/缓办对话框 -->
    <el-dialog v-model="delayDialogVisible" :title="delayType + '申请'" width="450px">
      <el-form>
        <el-form-item :label="delayType === '延期' ? '延期截止时间' : '缓办截止时间'">
          <el-date-picker v-model="delayDeadline" type="datetime" placeholder="选择截止时间" format="YYYY-MM-DD HH:mm" />
        </el-form-item>
        <el-form-item label="申请理由">
          <el-input type="textarea" v-model="delayReason" placeholder="请详细说明延期或缓办理由" rows="3" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="delayDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitDelay">提交申请</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { Tickets, Search, Document, Timer, Picture, VideoCamera, Checked } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'

// 模拟维护人员列表
const workers = ref([
  { id: 'w1', name: '张建国 - 维修一组' },
  { id: 'w2', name: '李志强 - 维修二组' },
  { id: 'w3', name: '王大明 - 应急抢修队' },
  { id: 'w4', name: '陈辉 - 巡检专员' }
])

// 模拟工单数据
const mockOrders = ref([
  {
    id: 1, code: 'WO-20250402-001', caseCode: 'CASE-20250402-001', alertLevel: 'critical', alertType: '倾斜超标',
    alertDesc: '井盖倾斜角度14.2°，超过阈值8°，有跌落风险', ownerUnit: '市政工程管理处', address: '人民路与解放路口东50m',
    purpose: '主干道排水', status: 'pending', createTime: '2025-04-02 14:25:00', assignee: null,
    processLogs: [{ id: 1, time: '2025-04-02 14:25:00', content: '工单自动创建', type: 'info', operator: '系统' }],
    delayRecords: [], feedback: null
  },
  {
    id: 2, code: 'WO-20250402-002', caseCode: 'CASE-20250402-002', alertLevel: 'critical', alertType: '水位超限',
    alertDesc: '井下水位62cm，超过阈值40cm，溢水风险', ownerUnit: '水务集团', address: '滨江路化工园区南门',
    purpose: '化工区雨水排放', status: 'processing', createTime: '2025-04-02 14:00:00', assignee: '张建国',
    processLogs: [
      { id: 1, time: '2025-04-02 14:00:00', content: '工单自动创建', type: 'info', operator: '系统' },
      { id: 2, time: '2025-04-02 14:30:00', content: '已指派张建国前往处置', type: 'primary', operator: '调度中心' }
    ],
    delayRecords: [],
    feedback: null
  },
  {
    id: 3, code: 'WO-20250402-003', caseCode: 'CASE-20250402-003', alertLevel: 'warning', alertType: '异常震动',
    alertDesc: '异常震动112mg，超过阈值80mg，疑似外力冲击', ownerUnit: '市政设施管理处', address: '古城街北段树下',
    purpose: '老城区排水', status: 'feedback', createTime: '2025-04-02 12:15:00', assignee: '李志强',
    surroundVideo: true,
    feedback: {
      workerName: '李志强', feedbackTime: '2025-04-02 15:20:00', description: '现场井盖因车辆碾轧移位，已复位加固，设备恢复正常',
      images: ['https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg']
    },
    processLogs: [
      { id: 1, time: '2025-04-02 12:15:00', content: '工单自动创建', type: 'info', operator: '系统' },
      { id: 2, time: '2025-04-02 13:00:00', content: '指派李志强现场处置', type: 'primary', operator: '调度中心' },
      { id: 3, time: '2025-04-02 15:20:00', content: '负责人提交处置反馈，待审批', type: 'warning', operator: '李志强' }
    ],
    delayRecords: []
  },
  {
    id: 4, code: 'WO-20250402-004', caseCode: 'CASE-20250402-004', alertLevel: 'warning', alertType: '井盖开启异常',
    alertDesc: '井盖非正常开启', ownerUnit: '市政工程管理处', address: '南港路旧车站段',
    purpose: '市政井盖', status: 'completed', createTime: '2025-04-02 11:50:00', assignee: '王大明',
    feedback: {
      workerName: '王大明', feedbackTime: '2025-04-02 14:10:00', description: '经核实为附近施工人员误开，已关闭并加锁',
      images: ['https://fuss10.elemecdn.com/3/5e/4bbf4c1b1b4f1e1c0b4b4c1b1b4f1e1c.jpeg']
    },
    processLogs: [
      { id: 1, time: '2025-04-02 11:50:00', content: '工单创建', type: 'info', operator: '系统' },
      { id: 2, time: '2025-04-02 13:00:00', content: '指派王大明处置', type: 'primary', operator: '调度中心' },
      { id: 3, time: '2025-04-02 14:10:00', content: '提交反馈并审批通过', type: 'success', operator: '审批人' }
    ],
    delayRecords: [],
    approved: true
  }
])

const searchKeyword = ref('')
const statusFilter = ref('')
const currentPage = ref(1)
const pageSize = 5
const selectedOrder = ref(mockOrders.value[0])
const selectedWorker = ref('')
const activeTab = ref('info')
const delayDialogVisible = ref(false)
const delayType = ref('延期')
const delayDeadline = ref('')
const delayReason = ref('')
const approvalRemark = ref('')

// 过滤与分页
const filteredOrders = computed(() => {
  let list = mockOrders.value
  if (statusFilter.value) list = list.filter(o => o.status === statusFilter.value)
  if (searchKeyword.value) {
    const kw = searchKeyword.value.toLowerCase()
    list = list.filter(o => o.code.toLowerCase().includes(kw) || o.caseCode.toLowerCase().includes(kw))
  }
  return list
})
const paginatedOrders = computed(() => {
  const start = (currentPage.value - 1) * pageSize
  return filteredOrders.value.slice(start, start + pageSize)
})

const totalOrders = computed(() => mockOrders.value.length)
const pendingCount = computed(() => mockOrders.value.filter(o => o.status === 'pending').length)
const processingCount = computed(() => mockOrders.value.filter(o => o.status === 'processing').length)
const feedbackCount = computed(() => mockOrders.value.filter(o => o.status === 'feedback').length)
const completedCount = computed(() => mockOrders.value.filter(o => o.status === 'completed').length)

const filterStatus = (status) => { statusFilter.value = status; currentPage.value = 1 }
const selectOrder = (order) => { selectedOrder.value = order; selectedWorker.value = order.assignee ? workers.value.find(w => w.name === order.assignee)?.id || '' : '' }

const getStatusType = (status) => {
  if (status === 'pending') return 'danger'
  if (status === 'processing') return 'warning'
  if (status === 'feedback') return 'info'
  return 'success'
}
const getStatusText = (status) => {
  const map = { pending: '待处理', processing: '处理中', feedback: '待审批', completed: '已完成' }
  return map[status] || status
}

// 下派任务
const assignWorker = () => {
  if (!selectedWorker.value) { ElMessage.warning('请选择维护人员'); return }
  const worker = workers.value.find(w => w.id === selectedWorker.value)
  if (selectedOrder.value.status === 'pending') {
    selectedOrder.value.status = 'processing'
    selectedOrder.value.assignee = worker.name
    selectedOrder.value.processLogs.push({
      id: Date.now(),
      time: new Date().toLocaleString(),
      content: `已下派任务给 ${worker.name}`,
      type: 'primary',
      operator: '平台调度员'
    })
    ElMessage.success(`工单已下派至 ${worker.name}`)
  } else {
    ElMessage.warning('当前工单状态不可下派')
  }
}

// 延期/缓办
const openDelayDialog = (type) => {
  delayType.value = type
  delayDialogVisible.value = true
}
const submitDelay = () => {
  if (!delayDeadline.value) { ElMessage.warning('请选择截止时间'); return }
  if (!delayReason.value) { ElMessage.warning('请填写申请理由'); return }
  const record = {
    type: delayType.value,
    deadline: new Date(delayDeadline.value).toLocaleString(),
    reason: delayReason.value,
    applyTime: new Date().toLocaleString()
  }
  if (!selectedOrder.value.delayRecords) selectedOrder.value.delayRecords = []
  selectedOrder.value.delayRecords.push(record)
  selectedOrder.value.processLogs.push({
    id: Date.now(),
    time: new Date().toLocaleString(),
    content: `申请${delayType.value}，截止时间：${record.deadline}，理由：${delayReason.value}`,
    type: 'warning',
    operator: '工单负责人'
  })
  ElMessage.success(`${delayType.value}申请已提交，待审批`)
  delayDialogVisible.value = false
  delayDeadline.value = ''
  delayReason.value = ''
}

// 审批功能
const approveOrder = (isApproved) => {
  if (selectedOrder.value.status !== 'feedback') return
  if (isApproved) {
    selectedOrder.value.status = 'completed'
    selectedOrder.value.processLogs.push({
      id: Date.now(),
      time: new Date().toLocaleString(),
      content: `审批通过，工单办结。审批意见：${approvalRemark.value || '无'}`,
      type: 'success',
      operator: '审批人'
    })
    ElMessage.success('工单审批通过，已办结')
  } else {
    selectedOrder.value.status = 'processing'
    selectedOrder.value.processLogs.push({
      id: Date.now(),
      time: new Date().toLocaleString(),
      content: `审批驳回，需重新处置。驳回意见：${approvalRemark.value || '请重新反馈'}`,
      type: 'danger',
      operator: '审批人'
    })
    // 清除原反馈，等待重新上报
    selectedOrder.value.feedback = null
    ElMessage.warning('工单已驳回，请重新处置反馈')
  }
  approvalRemark.value = ''
}

const viewCase = () => { ElMessage.info('跳转案件详情（演示）') }
const playVideo = () => { ElMessage.info('模拟播放周边视频监控') }

</script>

<style scoped>
.workorder-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; }
.order-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;
}
.order-list { flex: 1; overflow-y: auto; padding: 12px; }
.order-item {
  padding: 12px;
  margin-bottom: 8px;
  border-radius: 14px;
  background: #fafbfc;
  cursor: pointer;
  border: 1px solid transparent;
}
.order-item.active { background: #ecf5ff; border-color: #409eff; }
.order-item.pending { border-left: 3px solid #f56c6c; }
.order-item.processing { border-left: 3px solid #e6a23c; }
.order-item.feedback { border-left: 3px solid #909399; }
.order-header { display: flex; justify-content: space-between; margin-bottom: 6px; }
.order-code { font-weight: 600; }
.order-location { font-size: 12px; color: #666; margin: 4px 0; }
.order-time { font-size: 11px; color: #aaa; }
.detail-panel {
  flex: 1;
  background: white;
  border-radius: 20px;
  padding: 20px;
  overflow-y: auto;
}
.section-title {
  font-weight: 600;
  font-size: 16px;
  margin: 16px 0 12px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.assign-area { display: flex; gap: 8px; }
.delay-buttons { display: flex; gap: 12px; margin-bottom: 12px; }
.delay-history { background: #fef7e0; padding: 8px 12px; border-radius: 8px; font-size: 13px; }
.feedback-images { display: flex; gap: 12px; margin-top: 8px; }
.feedback-img { width: 100px; height: 80px; border-radius: 8px; object-fit: cover; }
.video-preview { background: #eef2fa; padding: 10px; border-radius: 12px; text-align: center; cursor: pointer; margin-top: 12px; }
.approval-section { margin-top: 20px; border-top: 1px solid #e9ecef; padding-top: 16px; }
.approval-buttons { display: flex; gap: 12px; margin: 12px 0; }
.approved-info { margin-top: 16px; }
.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>