<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, supervisorName: '张监督', project: '城北供水改造工程', type: 'daily', result: 'qualified', date: '2025-06-15', content: '对管道焊接质量进行日常监督' },
  { id: 2, supervisorName: '李监督', project: '高新区管网新建', type: 'special', result: 'unqualified', date: '2025-06-14', content: '专项检查管材进场质量' },
  { id: 3, supervisorName: '王监督', project: '老城区雨污分流', type: 'rectify', result: 'qualified', date: '2025-06-13', content: '复查上次整改问题落实情况' },
  { id: 4, supervisorName: '赵监督', project: '东区泵站升级', type: 'daily', result: 'qualified', date: '2025-06-12', content: '泵站基础施工日常监督' },
  { id: 5, supervisorName: '孙监督', project: '商业区管道维护', type: 'special', result: 'unqualified', date: '2025-06-11', content: '专项检查管道防腐处理' },
]

/** 类型映射 */
const typeMap: Record<string, string> = {
  daily: '日常监督',
  special: '专项监督',
  rectify: '整改复查',
}

const typeColorMap: Record<string, string> = {
  daily: 'primary',
  special: 'warning',
  rectify: 'success',
}

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

const resultColorMap: Record<string, 'success' | 'danger'> = {
  qualified: 'success',
  unqualified: 'danger',
}

/** 筛选后的记录列表 */
const filteredRecords = computed(() => {
  let list = mockRecords
  if (searchText.value) {
    const kw = searchText.value.toLowerCase()
    list = list.filter(r =>
      r.supervisorName.toLowerCase().includes(kw) ||
      r.project.toLowerCase().includes(kw) ||
      r.content.toLowerCase().includes(kw)
    )
  }
  if (activeTab.value === 1) list = list.filter(r => r.type === 'daily')
  else if (activeTab.value === 2) list = list.filter(r => r.type === 'special')
  else if (activeTab.value === 3) list = list.filter(r => r.type === 'rectify')
  return list
})

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

<template>
  <div class="record-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="record-list">
      <van-empty v-if="filteredRecords.length === 0" description="暂无监督记录" />
      <van-card
        v-for="record in filteredRecords"
        :key="record.id"
        :title="record.project"
        :desc="`监督人: ${record.supervisorName}`"
        @click="goDetail(record.id)"
      >
        <template #tags>
          <van-tag :type="typeColorMap[record.type] as 'primary' | 'success' | 'warning' | 'danger'" size="medium">
            {{ typeMap[record.type] }}
          </van-tag>
          <van-tag :type="resultColorMap[record.result]" size="medium" plain>
            {{ resultMap[record.result] }}
          </van-tag>
        </template>
        <template #footer>
          <div class="record-meta">
            <span>{{ record.date }}</span>
            <span>{{ record.content }}</span>
          </div>
        </template>
      </van-card>
    </div>
  </div>
</template>

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