<script setup lang="ts">
/**
 * 问题工单列表页
 *
 * 支持搜索、状态筛选（全部/待处理/处理中/已解决），
 * 点击工单卡片跳转详情。
 */
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

/** 搜索关键词 */
const searchText = ref('')

/** 当前激活的 Tab */
const activeTab = ref(0)

/** 模拟工单数据 */
const mockOrders = [
  { id: 1, title: '管道渗漏-城北片区', facility: '供水管网', status: 'pending', reporter: '张工', reportTime: '2025-06-15 09:30', address: '城北工业大道12号' },
  { id: 2, title: '阀门损坏-高新区', facility: '阀门井', status: 'processing', reporter: '李工', reportTime: '2025-06-15 11:00', address: '高新区创新路55号' },
  { id: 3, title: '水表故障-老城区', facility: '水表', status: 'resolved', reporter: '王工', reportTime: '2025-06-14 08:00', address: '老城区中山路88号' },
  { id: 4, title: '消防栓漏水-商业区', facility: '消防栓', status: 'pending', reporter: '孙工', reportTime: '2025-06-16 10:00', address: '商业区解放路101号' },
  { id: 5, title: '泵站异常-东区', facility: '泵站', status: 'processing', reporter: '赵工', reportTime: '2025-06-15 14:30', address: '东区滨河路88号' },
]

/** 状态映射 */
const statusMap: Record<string, string> = {
  pending: '待处理',
  processing: '处理中',
  resolved: '已解决',
}

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

/** 筛选后的工单列表 */
const filteredOrders = computed(() => {
  let list = mockOrders
  if (searchText.value) {
    const kw = searchText.value.toLowerCase()
    list = list.filter(o =>
      o.title.toLowerCase().includes(kw) ||
      o.facility.toLowerCase().includes(kw) ||
      o.address.toLowerCase().includes(kw)
    )
  }
  if (activeTab.value === 1) list = list.filter(o => o.status === 'pending')
  else if (activeTab.value === 2) list = list.filter(o => o.status === 'processing')
  else if (activeTab.value === 3) list = list.filter(o => o.status === 'resolved')
  return list
})

/** 跳转详情 */
function goDetail(id: number) {
  router.push(`/inspectionProblemDetail/${id}`)
}
</script>

<template>
  <div class="problem-page">
    <van-nav-bar title="问题工单" left-arrow fixed placeholder @click-left="router.back()" />

    <van-search v-model="searchText" placeholder="搜索工单标题、设施、地址" shape="round" />

    <van-tabs v-model:active="activeTab" sticky>
      <van-tab title="全部" />
      <van-tab title="待处理" />
      <van-tab title="处理中" />
      <van-tab title="已解决" />
    </van-tabs>

    <div class="order-list">
      <van-empty v-if="filteredOrders.length === 0" description="暂无问题工单" />
      <van-card
        v-for="order in filteredOrders"
        :key="order.id"
        :title="order.title"
        :desc="`设施: ${order.facility}`"
        @click="goDetail(order.id)"
      >
        <template #tags>
          <van-tag :type="statusColorMap[order.status]" size="medium">
            {{ statusMap[order.status] }}
          </van-tag>
        </template>
        <template #footer>
          <div class="order-meta">
            <span>上报人: {{ order.reporter }}</span>
            <span>{{ order.reportTime }}</span>
          </div>
          <div class="order-address">{{ order.address }}</div>
        </template>
      </van-card>
    </div>
  </div>
</template>

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

  :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;
  }
}

.order-list {
  padding: 0 8px;

  :deep(.van-card) {
    margin: 8px;
    border-radius: 10px;
    background: var(--color-bg-card);
  }
}

.order-meta {
  display: flex;
  gap: 12px;
  font-size: 12px;
  color: var(--color-text-secondary);
}

.order-address {
  margin-top: 4px;
  font-size: 12px;
  color: var(--color-text-placeholder);
}
</style>
