<script setup lang="ts">
/**
 * 排水户任务管理页
 *
 * 展示排水户相关任务列表，支持搜索和状态筛选。
 */
import { ref, computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'

const router = useRouter()
const route = useRoute()

const pshId = (route.params.detail || route.query.id) as string

/** 搜索关键词 */
const searchText = ref('')

/** 当前激活的 Tab */
const activeTab = ref(0)

/** 模拟任务数据 */
const mockTasks = [
  { id: 1, pshName: '华丰食品厂', title: '排水管道清淤', type: 'clean', status: 'pending', assignee: '李师傅', deadline: '2025-06-20', createTime: '2025-06-15' },
  { id: 2, pshName: '阳光花园小区', title: '化粪池清理', type: 'maintenance', status: 'doing', assignee: '王师傅', deadline: '2025-06-18', createTime: '2025-06-14' },
  { id: 3, pshName: '万达商业广场', title: '油脂分离器检修', type: 'repair', status: 'done', assignee: '赵师傅', deadline: '2025-06-16', createTime: '2025-06-13' },
  { id: 4, pshName: '东风化工厂', title: '污水取样检测', type: 'inspection', status: 'pending', assignee: '孙师傅', deadline: '2025-06-22', createTime: '2025-06-16' },
  { id: 5, pshName: '翠湖小区', title: '雨污分流改造', type: 'construction', status: 'doing', assignee: '周师傅', deadline: '2025-07-01', createTime: '2025-06-10' },
]

/** 状态映射 */
const statusMap: Record<string, string> = {
  pending: '待执行',
  doing: '执行中',
  done: '已完成',
}

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

/** 任务类型映射 */
const typeMap: Record<string, string> = {
  clean: '清淤',
  maintenance: '养护',
  repair: '维修',
  inspection: '检查',
  construction: '施工',
}

const typeColorMap: Record<string, string> = {
  clean: '#1989fa',
  maintenance: '#07c160',
  repair: '#ff976a',
  inspection: '#7232dd',
  construction: '#ee0a24',
}

/** 筛选后的任务列表 */
const filteredTasks = computed(() => {
  let list = mockTasks
  if (searchText.value) {
    const kw = searchText.value.toLowerCase()
    list = list.filter(t =>
      t.title.toLowerCase().includes(kw) ||
      t.pshName.toLowerCase().includes(kw) ||
      t.assignee.toLowerCase().includes(kw)
    )
  }
  if (activeTab.value === 1) list = list.filter(t => t.status === 'pending')
  else if (activeTab.value === 2) list = list.filter(t => t.status === 'doing')
  else if (activeTab.value === 3) list = list.filter(t => t.status === 'done')
  return list
})

/** 跳转任务详情 */
function goTaskDetail(id: number) {
  router.push(`/pshTaskList/${id}`)
}
</script>

<template>
  <div class="task-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="card-list">
      <van-empty v-if="filteredTasks.length === 0" description="暂无任务" />
      <van-card
        v-for="task in filteredTasks"
        :key="task.id"
        :title="task.title"
        :desc="`排水户: ${task.pshName}`"
        @click="goTaskDetail(task.id)"
      >
        <template #tags>
          <van-tag :color="typeColorMap[task.type]" size="medium" text-color="#fff">
            {{ typeMap[task.type] }}
          </van-tag>
          <van-tag :type="statusColorMap[task.status]" size="medium">
            {{ statusMap[task.status] }}
          </van-tag>
        </template>
        <template #footer>
          <div class="card-meta">
            <span>负责人: {{ task.assignee }}</span>
          </div>
          <div class="card-meta">
            <span>截止: {{ task.deadline }}</span>
            <span>创建: {{ task.createTime }}</span>
          </div>
        </template>
      </van-card>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.task-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);
  margin-top: 2px;
}
</style>
