<script setup lang="ts">
/**
 * 问题工单详情页
 *
 * 展示工单详细信息，支持接单/转派/解决操作。
 * Design: #1E74FF NavBar, #F4F7F8 bg, white cards border-radius 10px, subtle shadows.
 */
import { ref } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { showToast, showConfirmDialog } 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',
}

const severityTagMap: Record<string, 'success' | 'warning' | 'danger'> = {
  low: 'success',
  medium: 'warning',
  high: 'danger',
  critical: 'danger',
}

/** 接单 */
function acceptOrder() {
  showConfirmDialog({ title: '确认接单', message: '确认接单处理该工单吗？' })
    .then(() => showToast('已接单'))
    .catch(() => {})
}

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

/** 解决 */
function resolveOrder() {
  showConfirmDialog({ title: '确认解决', message: '确认标记该工单为已解决吗？' })
    .then(() => showToast('已标记为已解决'))
    .catch(() => {})
}
</script>

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

    <!-- Status & Severity Bar -->
    <div class="status-bar">
      <van-tag :type="statusColorMap[order.status]" size="large" round>
        {{ statusMap[order.status] }}
      </van-tag>
      <van-tag :type="severityTagMap[order.severity]" size="large" plain round>
        严重程度: {{ severityMap[order.severity] }}
      </van-tag>
    </div>

    <!-- 基本信息 Card -->
    <div class="info-card">
      <div class="card-header">
        <span class="card-header__accent"></span>
        <h5 class="card-header__title">基本信息</h5>
      </div>
      <div class="card-body">
        <div class="info-row">
          <span class="info-row__label">工单编号</span>
          <span class="info-row__value">WO-{{ order.id }}</span>
        </div>
        <div class="info-row">
          <span class="info-row__label">工单标题</span>
          <span class="info-row__value">{{ order.title }}</span>
        </div>
        <div class="info-row">
          <span class="info-row__label">设施类型</span>
          <span class="info-row__value">{{ order.facility }}</span>
        </div>
        <div class="info-row">
          <span class="info-row__label">上报人员</span>
          <span class="info-row__value">{{ order.reporter }}</span>
        </div>
        <div class="info-row">
          <span class="info-row__label">上报时间</span>
          <span class="info-row__value">{{ order.reportTime }}</span>
        </div>
        <div class="info-row">
          <span class="info-row__label">问题地址</span>
          <span class="info-row__value">{{ order.address }}</span>
        </div>
        <div class="info-row">
          <span class="info-row__label">责任人</span>
          <span class="info-row__value" :class="{ 'text-muted': order.assignee === '待分配' }">
            {{ order.assignee }}
          </span>
        </div>
      </div>
    </div>

    <!-- 问题描述 Card -->
    <div class="info-card">
      <div class="card-header">
        <span class="card-header__accent"></span>
        <h5 class="card-header__title">问题描述</h5>
      </div>
      <div class="card-body">
        <p class="desc-text">{{ order.description }}</p>
      </div>
    </div>

    <!-- 时间信息 Card -->
    <div class="info-card">
      <div class="card-header">
        <span class="card-header__accent"></span>
        <h5 class="card-header__title">时间信息</h5>
      </div>
      <div class="card-body">
        <div class="info-row">
          <span class="info-row__label">创建时间</span>
          <span class="info-row__value">{{ order.createTime }}</span>
        </div>
        <div class="info-row">
          <span class="info-row__label">更新时间</span>
          <span class="info-row__value">{{ order.updateTime }}</span>
        </div>
      </div>
    </div>

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

<style lang="scss" scoped>
.detail-page {
  min-height: 100vh;
  background: #F4F7F8;
  padding-bottom: 24px;

  // NavBar — brand blue
  :deep(.van-nav-bar) {
    background: #1E74FF;
  }
  :deep(.van-nav-bar__title) {
    color: #fff;
    font-size: 18px;
    font-weight: 600;
  }
  :deep(.van-nav-bar__text),
  :deep(.van-nav-bar__arrow) {
    color: #fff;
  }
  :deep(.van-nav-bar .van-icon) {
    color: #fff;
  }
}

// Status Bar
.status-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 16px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

// Info Card — white card with subtle shadow
.info-card {
  background: #fff;
  border-radius: 10px;
  margin: 10px 12px 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  overflow: hidden;
}

.card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 16px 10px;

  &__accent {
    width: 3px;
    height: 16px;
    border-radius: 2px;
    background: #1E74FF;
    flex-shrink: 0;
  }

  &__title {
    font-size: 15px;
    font-weight: 600;
    color: var(--color-text-primary);
  }
}

.card-body {
  padding: 0 16px 14px;
}

// Info Rows
.info-row {
  display: flex;
  align-items: flex-start;
  padding: 8px 0;

  & + & {
    border-top: 1px solid var(--color-border-light);
  }

  &__label {
    width: 72px;
    flex-shrink: 0;
    font-size: 13px;
    color: var(--color-text-secondary);
  }

  &__value {
    flex: 1;
    font-size: 14px;
    color: var(--color-text-primary);
    word-break: break-all;
  }
}

.text-muted {
  color: var(--color-text-placeholder);
}

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

// Action Buttons
.action-buttons {
  padding: 20px 16px;

  .btn-gap {
    margin-top: 12px;
  }
}
</style>
