<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, taskName: '管网巡检-城北片区', inspector: '张工', startTime: '2025-06-15 09:00', endTime: '2025-06-15 11:30', result: 'normal', problemCount: 0, photos: 5 },
  { id: 2, taskName: '阀门巡检-高新区', inspector: '李工', startTime: '2025-06-15 14:00', endTime: '2025-06-15 16:00', result: 'abnormal', problemCount: 3, photos: 8 },
  { id: 3, taskName: '水表巡检-老城区', inspector: '王工', startTime: '2025-06-14 08:30', endTime: '2025-06-14 10:00', result: 'normal', problemCount: 0, photos: 3 },
  { id: 4, taskName: '消防栓巡检-商业区', inspector: '孙工', startTime: '2025-06-13 15:00', endTime: '2025-06-13 17:00', result: 'abnormal', problemCount: 1, photos: 6 },
  { id: 5, taskName: '泵站巡检-东区', inspector: '赵工', startTime: '2025-06-10 09:00', endTime: '2025-06-10 11:00', result: 'normal', problemCount: 0, photos: 4 },
]

/** 结果映射 */
const resultMap: Record<string, string> = {
  normal: '正常',
  abnormal: '异常',
}

const resultColorMap: Record<string, 'success' | 'danger'> = {
  normal: 'success',
  abnormal: 'danger',
}

/** 日期筛选 */
function getToday() {
  const d = new Date()
  return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`
}

const today = getToday()

function isThisWeek(dateStr: string) {
  const d = new Date(dateStr)
  const now = new Date()
  const startOfWeek = new Date(now)
  startOfWeek.setDate(now.getDate() - now.getDay())
  startOfWeek.setHours(0, 0, 0, 0)
  return d >= startOfWeek
}

function isThisMonth(dateStr: string) {
  const d = new Date(dateStr)
  const now = new Date()
  return d.getFullYear() === now.getFullYear() && d.getMonth() === now.getMonth()
}

/** 筛选后的记录列表 */
const filteredRecords = computed(() => {
  let list = mockRecords
  if (searchText.value) {
    const kw = searchText.value.toLowerCase()
    list = list.filter(r =>
      r.taskName.toLowerCase().includes(kw) ||
      r.inspector.toLowerCase().includes(kw)
    )
  }
  if (activeTab.value === 1) list = list.filter(r => r.startTime.startsWith(today))
  else if (activeTab.value === 2) list = list.filter(r => isThisWeek(r.startTime))
  else if (activeTab.value === 3) list = list.filter(r => isThisMonth(r.startTime))
  return list
})

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

<template>
  <div class="records-page">
    <!-- NavBar -->
    <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-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">
          <h4 class="record-card__title">{{ record.taskName }}</h4>
          <div class="record-card__badges">
            <van-tag :type="resultColorMap[record.result]" size="medium" round>
              {{ resultMap[record.result] }}
            </van-tag>
            <van-tag
              v-if="record.problemCount > 0"
              type="danger"
              size="medium"
              plain
              round
            >
              {{ record.problemCount }}个问题
            </van-tag>
          </div>
        </div>

        <!-- Card Body -->
        <div class="record-card__body">
          <div class="record-info">
            <span class="info-item">
              <van-icon name="user-o" size="13" />
              {{ record.inspector }}
            </span>
            <span class="info-item">
              <van-icon name="clock-o" size="13" />
              {{ record.startTime }}
            </span>
          </div>
          <div class="record-info">
            <span class="info-item">
              <van-icon name="flag-o" size="13" />
              结束: {{ record.endTime }}
            </span>
          </div>
        </div>

        <!-- Photo Thumbnails -->
        <div class="record-card__photos" v-if="record.photos > 0">
          <div class="photo-thumb" v-for="i in Math.min(record.photos, 4)" :key="i">
            <van-icon name="photo-o" size="20" color="#C8C9CC" />
          </div>
          <div v-if="record.photos > 4" class="photo-thumb photo-thumb--more">
            +{{ record.photos - 4 }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.records-page {
  min-height: 100vh;
  background: var(--color-bg-page);

  // NavBar — brand blue bg, white text
  :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 — rounded, white bg
.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: flex-start;
  justify-content: space-between;
  margin-bottom: 10px;
}

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

.record-card__badges {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.record-card__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 8px;
}

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

.info-item {
  display: flex;
  align-items: center;
  gap: 4px;
}

// Photo Thumbnails
.record-card__photos {
  display: flex;
  gap: 6px;
  padding-top: 8px;
  border-top: 1px solid var(--color-border-light);
}

.photo-thumb {
  width: 52px;
  height: 52px;
  border-radius: 6px;
  background: #F2F3F5;
  display: flex;
  align-items: center;
  justify-content: center;

  &--more {
    background: #E3F2FD;
    color: #1E74FF;
    font-size: 13px;
    font-weight: 600;
  }
}
</style>
