<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 mockPshList = [
  { id: 1, name: '华丰食品厂', type: 'industrial', address: '城北工业园区A1栋', contact: '张经理', phone: '13800001011', status: 'normal', drainNo: 'PSH-2025-001' },
  { id: 2, name: '阳光花园小区', type: 'domestic', address: '阳光路88号', contact: '李主任', phone: '13800001012', status: 'normal', drainNo: 'PSH-2025-002' },
  { id: 3, name: '万达商业广场', type: 'commercial', address: '中山路100号', contact: '王主管', phone: '13800001013', status: 'warning', drainNo: 'PSH-2025-003' },
  { id: 4, name: '东风化工厂', type: 'industrial', address: '高新区化工大道56号', contact: '赵厂长', phone: '13800001014', status: 'danger', drainNo: 'PSH-2025-004' },
  { id: 5, name: '翠湖小区', type: 'domestic', address: '翠湖路66号', contact: '孙主任', phone: '13800001015', status: 'normal', drainNo: 'PSH-2025-005' },
]

/** 类型映射 */
const typeMap: Record<string, string> = {
  industrial: '工业',
  domestic: '生活',
  commercial: '商业',
}

const typeColorMap: Record<string, string> = {
  industrial: '#1989fa',
  domestic: '#07c160',
  commercial: '#ff976a',
}

/** 状态映射 */
const statusMap: Record<string, string> = {
  normal: '正常',
  warning: '异常',
  danger: '严重',
}

const statusColorMap: Record<string, 'success' | 'warning' | 'danger'> = {
  normal: 'success',
  warning: 'warning',
  danger: 'danger',
}

/** 筛选后的列表 */
const filteredList = computed(() => {
  let list = mockPshList
  if (searchText.value) {
    const kw = searchText.value.toLowerCase()
    list = list.filter(p =>
      p.name.toLowerCase().includes(kw) ||
      p.address.toLowerCase().includes(kw) ||
      p.drainNo.toLowerCase().includes(kw)
    )
  }
  if (activeTab.value === 1) list = list.filter(p => p.type === 'industrial')
  else if (activeTab.value === 2) list = list.filter(p => p.type === 'domestic')
  else if (activeTab.value === 3) list = list.filter(p => p.type === 'commercial')
  return list
})

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

<template>
  <div class="psh-list-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="filteredList.length === 0" description="暂无排水户" />
      <van-card
        v-for="item in filteredList"
        :key="item.id"
        :title="item.name"
        :desc="item.address"
        @click="goDetail(item.id)"
      >
        <template #tags>
          <van-tag :color="typeColorMap[item.type]" size="medium" text-color="#fff">
            {{ typeMap[item.type] }}
          </van-tag>
          <van-tag :type="statusColorMap[item.status]" size="medium">
            {{ statusMap[item.status] }}
          </van-tag>
        </template>
        <template #footer>
          <div class="card-meta">
            <span>联系人: {{ item.contact }}</span>
            <span>{{ item.drainNo }}</span>
          </div>
        </template>
      </van-card>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.psh-list-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>
