<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 mockTasks = [
  { id: 1, name: '管网养护-城北片区', facility: '供水管网', type: '定期养护', status: 'pending', planDate: '2025-06-15', maintainer: '刘工', address: '城北工业大道1-50号' },
  { id: 2, name: '阀门更换-高新区', facility: '阀门井', type: '紧急养护', status: 'in_progress', planDate: '2025-06-15', maintainer: '陈工', address: '高新区创新路55号' },
  { id: 3, name: '水表检修-老城区', facility: '水表', type: '定期养护', status: 'completed', planDate: '2025-06-14', maintainer: '杨工', address: '老城区中山路88号' },
  { id: 4, name: '消防栓检查-商业区', facility: '消防栓', type: '专项养护', status: 'pending', planDate: '2025-06-16', maintainer: '周工', address: '商业区解放路101号' },
  { id: 5, name: '泵站保养-东区', facility: '泵站', type: '定期养护', status: 'in_progress', planDate: '2025-06-15', maintainer: '吴工', address: '东区滨河路88号' },
]

/** 状态映射 */
const statusMap: Record<string, string> = {
  pending: '待养护',
  in_progress: '养护中',
  completed: '已完成',
}

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

/** 养护类型映射 */
const typeColorMap: Record<string, string> = {
  '定期养护': '#1E74FF',
  '紧急养护': '#EE0A24',
  '专项养护': '#FF976A',
}

/** 筛选后的任务列表 */
const filteredTasks = computed(() => {
  let list = mockTasks

  // 搜索筛选
  if (searchText.value) {
    const kw = searchText.value.toLowerCase()
    list = list.filter(t =>
      t.name.toLowerCase().includes(kw) ||
      t.facility.toLowerCase().includes(kw) ||
      t.address.toLowerCase().includes(kw) ||
      t.maintainer.toLowerCase().includes(kw)
    )
  }

  // Tab 筛选
  if (activeTab.value === 1) {
    list = list.filter(t => t.type === '定期养护')
  } else if (activeTab.value === 2) {
    list = list.filter(t => t.type === '紧急养护')
  } else if (activeTab.value === 3) {
    list = list.filter(t => t.type === '专项养护')
  }

  return list
})

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

<template>
  <div class="maintenance-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-tab title="专项养护" />
    </van-tabs>

    <!-- Task List -->
    <div class="task-list">
      <van-empty
        v-if="filteredTasks.length === 0"
        image="search"
        description="暂无养护任务"
      />
      <div
        v-for="task in filteredTasks"
        :key="task.id"
        class="task-card"
        @click="goDetail(task.id)"
      >
        <!-- Card Header -->
        <div class="task-card__header">
          <h4 class="task-card__title">{{ task.name }}</h4>
          <span
            class="task-card__type"
            :style="{ color: typeColorMap[task.type], borderColor: typeColorMap[task.type] }"
          >
            {{ task.type }}
          </span>
        </div>

        <!-- Card Body -->
        <div class="task-card__body">
          <div class="task-info">
            <span class="info-item">
              <van-icon name="cluster-o" size="13" />
              {{ task.facility }}
            </span>
            <span class="info-item">
              <van-icon name="user-o" size="13" />
              {{ task.maintainer }}
            </span>
          </div>
          <div class="task-info">
            <span class="info-item">
              <van-icon name="clock-o" size="13" />
              {{ task.planDate }}
            </span>
          </div>
        </div>

        <!-- Card Footer -->
        <div class="task-card__footer">
          <span class="address-text">
            <van-icon name="location-o" size="12" color="#969799" />
            {{ task.address }}
          </span>
          <van-tag
            :type="statusColorMap[task.status]"
            size="medium"
            round
            class="status-badge"
          >
            {{ statusMap[task.status] }}
          </van-tag>
        </div>
      </div>
    </div>
  </div>
</template>

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

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

// Task List
.task-list {
  padding: 8px 12px 16px;
}

.task-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);
  }
}

.task-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 10px;
}

.task-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;
}

.task-card__type {
  font-size: 11px;
  font-weight: 500;
  padding: 2px 8px;
  border: 1px solid;
  border-radius: 4px;
  flex-shrink: 0;
  line-height: 1.4;
}

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

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

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

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

.address-text {
  font-size: 12px;
  color: var(--color-text-placeholder);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  margin-right: 8px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.status-badge {
  flex-shrink: 0;
}
</style>
