<script setup lang="ts">
/**
 * 有限空间作业记录列表页
 *
 * 展示有限空间作业记录，支持搜索和状态筛选（全部/进行中/已完成），
 * 点击卡片跳转作业记录详情。
 * Design: #1E74FF NavBar, #F4F7F8 bg, white cards border-radius 10px, styled tabs.
 */
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, 'warning' | 'primary' | 'success'> = {
  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">
    <!-- NavBar — brand blue -->
    <van-nav-bar
      title="有限空间作业记录"
      left-arrow
      fixed
      placeholder
      @click-left="router.back()"
    />

    <!-- Search -->
    <div class="search-wrapper">
      <van-search
        v-model="searchText"
        placeholder="搜索作业标题、位置、作业员"
        shape="round"
        background="transparent"
      />
    </div>

    <!-- Tabs -->
    <van-tabs
      v-model:active="activeTab"
      sticky
      :duration="0.3"
      swipeable
      color="#1E74FF"
      title-active-color="#1E74FF"
      title-inactive-color="#646566"
      line-width="20"
      line-height="3"
    >
      <van-tab title="全部" />
      <van-tab title="进行中" />
      <van-tab title="已完成" />
    </van-tabs>

    <!-- Record List -->
    <div class="record-list">
      <van-empty
        v-if="filteredRecords.length === 0"
        image="search"
        description="暂无作业记录"
      />
      <div
        v-for="record in filteredRecords"
        :key="record.id"
        class="record-card"
        @click="goDetail(record.id)"
      >
        <!-- Card Header -->
        <div class="record-card__header">
          <van-icon :name="spaceIconMap[record.spaceType] || 'label-o'" size="22" color="#969799" class="space-icon" />
          <h4 class="record-card__title">{{ record.title }}</h4>
          <van-tag :type="statusColorMap[record.status]" size="medium" round class="status-badge">
            {{ statusMap[record.status] }}
          </van-tag>
        </div>

        <!-- Card Body -->
        <div class="record-card__body">
          <div class="record-info">
            <span class="info-item">
              <van-icon name="location-o" size="13" />
              {{ record.location }}
            </span>
          </div>
        </div>

        <!-- Card Footer -->
        <div class="record-card__footer">
          <span class="meta-text">
            <van-icon name="user-o" size="12" color="#969799" />
            {{ record.operator }}
          </span>
          <span class="meta-text">
            <van-icon name="clock-o" size="12" color="#969799" />
            {{ record.startTime }}
          </span>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.yxkjzy-records-page {
  min-height: 100vh;
  background: #F4F7F8;

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

// Search
.search-wrapper {
  padding: 8px 12px 0;
  background: #F4F7F8;
  :deep(.van-search__content) {
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  }
}

// Tabs
:deep(.van-tabs) { background: #fff; }
:deep(.van-tabs__wrap) { padding: 0 8px; }
:deep(.van-tab) { font-size: 14px; }

// Record List
.record-list { padding: 8px 12px 16px; }

.record-card {
  background: #fff;
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 10px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  cursor: pointer;
  transition: box-shadow 0.15s ease;
  &:active { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); }
}

.record-card__header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.space-icon {
  flex-shrink: 0;
}

.record-card__title {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text-primary);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.status-badge {
  flex-shrink: 0;
}

.record-card__body {
  margin-bottom: 6px;
}

.record-info {
  font-size: 13px;
  color: var(--color-text-regular);
}

.info-item {
  display: flex;
  align-items: center;
  gap: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.record-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 8px;
  border-top: 1px solid var(--color-border-light);
}

.meta-text {
  font-size: 12px;
  color: var(--color-text-placeholder);
  display: flex;
  align-items: center;
  gap: 4px;
}
</style>
