<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 mockChecks = [
  { id: 1, name: '管网养护检查-城北片区', maintainer: '刘工', checkDate: '2025-06-15', status: 'pending', address: '城北工业大道1-50号', facility: '供水管网', lastScore: 95 },
  { id: 2, name: '阀门养护检查-高新区', maintainer: '陈工', checkDate: '2025-06-15', status: 'checked', address: '高新区创新路', facility: '阀门井', score: 88, checkedBy: '主管张', checkTime: '2025-06-15 17:00' },
  { id: 3, name: '水表养护检查-老城区', maintainer: '杨工', checkDate: '2025-06-14', status: 'pending', address: '老城区中山路', facility: '水表', lastScore: 91 },
  { id: 4, name: '消防栓养护检查-商业区', maintainer: '周工', checkDate: '2025-06-13', status: 'checked', address: '商业区解放路', facility: '消防栓', score: 76, checkedBy: '主管李', checkTime: '2025-06-13 18:00' },
  { id: 5, name: '泵站养护检查-东区', maintainer: '吴工', checkDate: '2025-06-10', status: 'checked', address: '东区滨河路88号', facility: '泵站', score: 93, checkedBy: '主管王', checkTime: '2025-06-10 16:30' },
]

/** 状态映射 */
const statusMap: Record<string, string> = {
  pending: '待检查',
  checked: '已检查',
}

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

/** 筛选后的检查列表 */
const filteredChecks = computed(() => {
  let list = mockChecks
  // 搜索筛选
  if (searchText.value) {
    const kw = searchText.value.toLowerCase()
    list = list.filter(c =>
      c.name.toLowerCase().includes(kw) ||
      c.maintainer.toLowerCase().includes(kw) ||
      c.facility.toLowerCase().includes(kw) ||
      c.address.toLowerCase().includes(kw)
    )
  }
  // 状态筛选
  if (activeTab.value === 1) {
    list = list.filter(c => c.status === 'pending')
  } else if (activeTab.value === 2) {
    list = list.filter(c => c.status === 'checked')
  }
  return list
})

/** 跳转到检查详情 */
function goDetail(id: number) {
  router.push(`/maintenance/detail?id=${id}`)
}
</script>

<template>
  <div class="check-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="check-list">
      <van-empty v-if="filteredChecks.length === 0" description="暂无检查任务" />
      <van-card
        v-for="check in filteredChecks"
        :key="check.id"
        :title="check.name"
        :desc="`设施: ${check.facility} | 养护人: ${check.maintainer}`"
        @click="goDetail(check.id)"
      >
        <template #tags>
          <van-tag :type="statusColorMap[check.status]" size="medium">
            {{ statusMap[check.status] }}
          </van-tag>
          <van-tag v-if="check.status === 'checked' && check.score" type="primary" size="medium" plain>
            评分 {{ check.score }}
          </van-tag>
          <van-tag v-if="check.status === 'pending' && check.lastScore" type="primary" size="medium" plain>
            上次 {{ check.lastScore }}分
          </van-tag>
        </template>
        <template #footer>
          <div class="check-meta">
            <span>检查日期: {{ check.checkDate }}</span>
            <span v-if="check.checkedBy">检查人: {{ check.checkedBy }}</span>
          </div>
          <div class="check-address">{{ check.address }}</div>
        </template>
      </van-card>
    </div>
  </div>
</template>

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

.check-list {
  padding: 0 8px;

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

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

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

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