<script setup lang="ts">
/**
 * 问题工单详情页
 *
 * 展示工单详细信息，支持接单/转派/解决操作。
 */
import { ref } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { showToast } from 'vant'

const router = useRouter()
const route = useRoute()

const orderId = (route.params.detail || route.query.id) as string

/** 模拟工单详情 */
const order = ref({
  id: orderId || '1',
  title: '管道渗漏-城北片区',
  facility: '供水管网',
  status: 'pending',
  reporter: '张工',
  reportTime: '2025-06-15 09:30',
  address: '城北工业大道12号',
  description: '巡检过程中发现城北工业大道12号附近供水管道存在渗漏现象，渗漏点位于主管道与分支管道连接处，初步判断为密封圈老化导致。需尽快安排维修处理，避免水资源浪费及路面塌陷风险。',
  severity: 'medium',
  assignee: '待分配',
  createTime: '2025-06-15 09:30:00',
  updateTime: '2025-06-15 09:30:00',
})

const statusMap: Record<string, string> = {
  pending: '待处理',
  processing: '处理中',
  resolved: '已解决',
}

const statusColorMap: Record<string, 'primary' | 'success' | 'warning' | 'danger'> = {
  pending: 'warning',
  processing: 'primary',
  resolved: 'success',
}

const severityMap: Record<string, string> = {
  low: '低',
  medium: '中',
  high: '高',
  critical: '紧急',
}

const severityColorMap: Record<string, string> = {
  low: '#07c160',
  medium: '#ff976a',
  high: '#ee0a24',
  critical: '#ee0a24',
}

/** 接单 */
function acceptOrder() {
  showToast('已接单')
}

/** 转派 */
function transferOrder() {
  showToast('转派功能')
}

/** 解决 */
function resolveOrder() {
  showToast('已标记为已解决')
}
</script>

<template>
  <div class="detail-page">
    <van-nav-bar title="工单详情" left-text="返回" left-arrow fixed placeholder @click-left="router.back()" />

    <!-- 状态栏 -->
    <div class="status-bar">
      <van-tag :type="statusColorMap[order.status]" size="large">
        {{ statusMap[order.status] }}
      </van-tag>
      <span class="severity-tag" :style="{ color: severityColorMap[order.severity] }">
        严重程度: {{ severityMap[order.severity] }}
      </span>
    </div>

    <!-- 基本信息 -->
    <van-cell-group title="基本信息" class="info-group">
      <van-cell title="工单编号" :value="`WO-${order.id}`" />
      <van-cell title="工单标题" :value="order.title" />
      <van-cell title="设施类型" :value="order.facility" />
      <van-cell title="上报人员" :value="order.reporter" />
      <van-cell title="上报时间" :value="order.reportTime" />
      <van-cell title="问题地址" :value="order.address" />
      <van-cell title="责任人" :value="order.assignee" />
    </van-cell-group>

    <!-- 问题描述 -->
    <van-cell-group title="问题描述" class="info-group">
      <van-cell>
        <p class="desc-text">{{ order.description }}</p>
      </van-cell>
    </van-cell-group>

    <!-- 时间信息 -->
    <van-cell-group title="时间信息" class="info-group">
      <van-cell title="创建时间" :value="order.createTime" />
      <van-cell title="更新时间" :value="order.updateTime" />
    </van-cell-group>

    <!-- 操作按钮 -->
    <div class="action-buttons">
      <van-button type="primary" block round @click="acceptOrder">接单处理</van-button>
      <van-button plain block round class="mt-sm" @click="transferOrder">转派他人</van-button>
      <van-button type="success" block round class="mt-sm" @click="resolveOrder">标记已解决</van-button>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.detail-page {
  min-height: 100vh;
  background: var(--color-bg-page);
  padding-bottom: 24px;

  :deep(.van-nav-bar) {
    background: var(--color-primary);
    --van-nav-bar-title-text-color: #fff;
    --van-nav-bar-text-color: #fff;
    --van-nav-bar-icon-color: #fff;
  }
}

.status-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--color-bg-card);
}

.severity-tag {
  font-size: 13px;
  font-weight: 500;
}

.info-group {
  margin-top: 8px;
}

.desc-text {
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-text-regular);
  padding: 4px 0;
}

.action-buttons {
  padding: 24px 16px;

  .mt-sm {
    margin-top: 12px;
  }
}
</style>
