<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 statusMap: Record<string, string> = {
  pending: '待接收',
  accepted: '已接收',
  completed: '已完成',
}

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

/** 级别映射 */
const levelMap: Record<string, string> = {
  urgent: '紧急',
  normal: '普通',
}

const levelColorMap: Record<string, string> = {
  urgent: '#ee0a24',
  normal: '#1989fa',
}

/** 模拟指令数据 */
const mockInstructions = [
  { id: 1, title: '启动III级防汛应急响应', level: 'urgent', from: '市防汛指挥部', time: '2025-06-15 08:00', status: 'pending' },
  { id: 2, title: '河道巡查任务通知', level: 'normal', from: '水务局', time: '2025-06-14 14:30', status: 'accepted' },
  { id: 3, title: '泵站设备检修通知', level: 'normal', from: '运维中心', time: '2025-06-13 09:00', status: 'completed' },
  { id: 4, title: '重点积水路段值守', level: 'urgent', from: '市政管理处', time: '2025-06-15 07:30', status: 'pending' },
]

const filteredList = computed(() => {
  let list = mockInstructions
  if (searchText.value) {
    const kw = searchText.value.toLowerCase()
    list = list.filter(i =>
      i.title.toLowerCase().includes(kw) ||
      i.from.toLowerCase().includes(kw)
    )
  }
  if (activeTab.value === 1) list = list.filter(i => i.status === 'pending')
  else if (activeTab.value === 2) list = list.filter(i => i.status === 'accepted')
  else if (activeTab.value === 3) list = list.filter(i => i.status === 'completed')
  return list
})

function goReceive(id: number) {
  router.push('/instructionReceive')
}
</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 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.title"
        :desc="`来自: ${item.from}`"
        @click="goReceive(item.id)"
      >
        <template #tags>
          <van-tag :color="levelColorMap[item.level]" size="medium" text-color="#fff">
            {{ levelMap[item.level] }}
          </van-tag>
          <van-tag :type="statusColorMap[item.status]" size="medium">
            {{ statusMap[item.status] }}
          </van-tag>
        </template>
        <template #footer>
          <div class="card-meta">
            <span>{{ item.time }}</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 {
  font-size: 12px;
  color: var(--color-text-secondary);
}
</style>
