<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 mockCheckList = [
  { id: 1, pshName: '华丰食品厂', checkDate: '2025-06-15', inspector: '张检查员', result: 'pass', score: 92, items: '排水设施、预处理设备' },
  { id: 2, pshName: '阳光花园小区', checkDate: '2025-06-14', inspector: '李检查员', result: 'pass', score: 85, items: '化粪池、雨污管道' },
  { id: 3, pshName: '万达商业广场', checkDate: '2025-06-13', inspector: '王检查员', result: 'fail', score: 55, items: '油脂分离器、排水口' },
  { id: 4, pshName: '东风化工厂', checkDate: '2025-06-12', inspector: '赵检查员', result: 'fail', score: 40, items: '污水处理设备、排放口' },
  { id: 5, pshName: '翠湖小区', checkDate: '2025-06-11', inspector: '孙检查员', result: 'pass', score: 88, items: '雨污分流、管道畅通' },
]

/** 结果映射 */
const resultMap: Record<string, string> = {
  pass: '合格',
  fail: '不合格',
}

const resultColorMap: Record<string, 'success' | 'danger'> = {
  pass: 'success',
  fail: 'danger',
}

/** 分数颜色 */
function getScoreColor(score: number): string {
  if (score >= 80) return '#07c160'
  if (score >= 60) return '#ff976a'
  return '#ee0a24'
}

/** 筛选后的列表 */
const filteredList = computed(() => {
  let list = mockCheckList
  if (searchText.value) {
    const kw = searchText.value.toLowerCase()
    list = list.filter(c =>
      c.pshName.toLowerCase().includes(kw) ||
      c.inspector.toLowerCase().includes(kw) ||
      c.items.toLowerCase().includes(kw)
    )
  }
  if (activeTab.value === 1) list = list.filter(c => c.result === 'pass')
  else if (activeTab.value === 2) list = list.filter(c => c.result === 'fail')
  return list
})

/** 跳转详情 */
function goDetail(id: number) {
  router.push(`/pshCheckList/${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="card-list">
      <van-empty v-if="filteredList.length === 0" description="暂无检查记录" />
      <van-card
        v-for="item in filteredList"
        :key="item.id"
        :title="item.pshName"
        :desc="`检查项: ${item.items}`"
        @click="goDetail(item.id)"
      >
        <template #tags>
          <van-tag :type="resultColorMap[item.result]" size="medium">
            {{ resultMap[item.result] }}
          </van-tag>
          <van-tag :color="getScoreColor(item.score)" size="medium" text-color="#fff">
            {{ item.score }} 分
          </van-tag>
        </template>
        <template #footer>
          <div class="card-meta">
            <span>检查员: {{ item.inspector }}</span>
            <span>{{ item.checkDate }}</span>
          </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;
  }
}

.card-list {
  padding: 0 8px;

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

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

.card-meta {
  display: flex;
  gap: 12px;
  font-size: 12px;
  color: var(--color-text-secondary);
}
</style>
