<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 mockRecords = [
  { id: 1, title: '污水井清淤作业 2025-0615-01', location: '城北工业大道12号污水井', status: 'in_progress', operator: '张作业员', startTime: '2025-06-15 08:00', spaceType: '污水井' },
  { id: 2, title: '阀门井维修作业 2025-0614-03', location: '高新区3号阀门井', status: 'completed', operator: '李作业员', startTime: '2025-06-14 14:00', spaceType: '阀门井' },
  { id: 3, title: '蓄水池清洗作业 2025-0615-02', location: '东区蓄水池2号', status: 'in_progress', operator: '王作业员', startTime: '2025-06-15 09:00', spaceType: '蓄水池' },
  { id: 4, title: '管道检修作业 2025-0613-01', location: '商业区地下管廊B段', status: 'completed', operator: '赵作业员', startTime: '2025-06-13 10:00', spaceType: '管廊' },
  { id: 5, title: '检查井勘察作业 2025-0615-04', location: '老城区中山路检查井', status: 'pending', operator: '孙作业员', startTime: '2025-06-15 13:00', spaceType: '检查井' },
  { id: 6, title: '污水井疏通作业 2025-0612-02', location: '南城污水处理厂入口井', status: 'completed', operator: '钱作业员', startTime: '2025-06-12 08:30', spaceType: '污水井' },
]

/** 状态映射 */
const statusMap: Record<string, string> = {
  pending: '待开始',
  in_progress: '进行中',
  completed: '已完成',
}

const statusColorMap: Record<string, string> = {
  pending: 'warning',
  in_progress: 'primary',
  completed: 'success',
}

/** 空间类型图标映射 */
const spaceIconMap: Record<string, string> = {
  '污水井': 'orders-o',
  '阀门井': 'setting-o',
  '蓄水池': 'aim-o',
  '管廊': 'guide-o',
  '检查井': 'search',
}

/** 筛选后的列表 */
const filteredRecords = computed(() => {
  let list = mockRecords
  if (searchText.value) {
    const kw = searchText.value.toLowerCase()
    list = list.filter(r =>
      r.title.toLowerCase().includes(kw) ||
      r.location.toLowerCase().includes(kw) ||
      r.operator.toLowerCase().includes(kw) ||
      r.spaceType.toLowerCase().includes(kw)
    )
  }
  if (activeTab.value === 1) list = list.filter(r => r.status === 'in_progress')
  else if (activeTab.value === 2) list = list.filter(r => r.status === 'completed')
  return list
})

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

<template>
  <div class="yxkjzy-records-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-tabs>

    <div class="record-list">
      <van-empty v-if="filteredRecords.length === 0" description="暂无作业记录" />
      <van-card
        v-for="record in filteredRecords"
        :key="record.id"
        :title="record.title"
        :desc="`位置: ${record.location}`"
        @click="goDetail(record.id)"
      >
        <template #tags>
          <van-tag :type="statusColorMap[record.status] as never" size="medium">
            {{ statusMap[record.status] }}
          </van-tag>
        </template>
        <template #thumb>
          <van-icon :name="spaceIconMap[record.spaceType] || 'label-o'" size="32" color="#999" />
        </template>
        <template #footer>
          <div class="record-meta">
            <span class="meta-type">空间类型: {{ record.spaceType }}</span>
            <span>作业员: {{ record.operator }}</span>
            <span>开始时间: {{ record.startTime }}</span>
          </div>
        </template>
      </van-card>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.yxkjzy-records-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;
  }
}

.record-list {
  padding: 0 8px;

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

  :deep(.van-tag) {
    margin-right: 4px;
  }
}

.record-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 12px;
  color: var(--color-text-secondary);

  .meta-type {
    color: var(--color-text-regular);
  }
}
</style>
