<script setup lang="ts">
/**
 * 防汛物资管理
 *
 * 展示防汛物资库存列表，支持按类型筛选和搜索，
 * 显示各物资的库存数量。
 */
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

const searchText = ref('')
const activeTab = ref(0)

/** 物资类型映射 */
const typeMap: Record<string, string> = {
  pump: '水泵类',
  sandbag: '沙袋类',
  tool: '工具类',
  rescue: '救援类',
}

const typeColorMap: Record<string, string> = {
  pump: '#1989fa',
  sandbag: '#ff976a',
  tool: '#07c160',
  rescue: '#ee0a24',
}

/** 库存状态 */
const stockStatusMap: Record<string, { label: string; type: 'success' | 'warning' | 'danger' }> = {
  sufficient: { label: '充足', type: 'success' },
  normal: { label: '正常', type: '' as 'success' },
  low: { label: '偏低', type: 'warning' },
  shortage: { label: '紧缺', type: 'danger' },
}

/** 模拟物资数据 */
const mockMaterials = [
  { id: 1, name: '柴油水泵', type: 'pump', stock: 12, unit: '台', minStock: 5, status: 'sufficient', location: '1号仓库' },
  { id: 2, name: '防洪沙袋', type: 'sandbag', stock: 500, unit: '个', minStock: 200, status: 'sufficient', location: '2号仓库' },
  { id: 3, name: '救生衣', type: 'rescue', stock: 30, unit: '件', minStock: 50, status: 'low', location: '1号仓库' },
  { id: 4, name: '铁锹', type: 'tool', stock: 8, unit: '把', minStock: 20, status: 'shortage', location: '2号仓库' },
  { id: 5, name: '发电机', type: 'pump', stock: 6, unit: '台', minStock: 3, status: 'normal', location: '1号仓库' },
  { id: 6, name: '应急照明灯', type: 'tool', stock: 15, unit: '个', minStock: 10, status: 'normal', location: '3号仓库' },
]

const typeTabs = ['all', 'pump', 'sandbag', 'tool', 'rescue']
const typeTabNames = ['全部', '水泵类', '沙袋类', '工具类', '救援类']

const filteredList = computed(() => {
  let list = mockMaterials
  if (searchText.value) {
    const kw = searchText.value.toLowerCase()
    list = list.filter(m =>
      m.name.toLowerCase().includes(kw) ||
      m.location.toLowerCase().includes(kw)
    )
  }
  if (activeTab.value > 0) {
    list = list.filter(m => m.type === typeTabs[activeTab.value])
  }
  return list
})

function goInventory(id: number) {
  router.push(`/managementInventory/${id}`)
}
</script>

<template>
  <div class="page-container">
    <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 v-for="(name, i) in typeTabNames" :key="i" :title="name" />
    </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.location}`"
        @click="goInventory(item.id)"
      >
        <template #tags>
          <van-tag :color="typeColorMap[item.type]" size="medium" text-color="#fff">
            {{ typeMap[item.type] }}
          </van-tag>
          <van-tag :type="stockStatusMap[item.status].type" size="medium">
            {{ stockStatusMap[item.status].label }}
          </van-tag>
        </template>
        <template #footer>
          <div class="card-meta">
            <span class="stock-count">库存: {{ item.stock }} {{ item.unit }}</span>
            <span class="stock-min">最低库存: {{ item.minStock }} {{ item.unit }}</span>
          </div>
        </template>
      </van-card>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.page-container {
  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);

  .stock-count {
    font-weight: 500;
    color: var(--color-text-primary);
  }

  .stock-min {
    color: var(--color-text-placeholder);
  }
}
</style>
