<template>
  <view class="app-container pb-20">
    <TopBar title="应急班组" show-back />
    
    <view class="px-4 py-4 gap-y-4">
      <!-- 应急状态概览 -->
      <uni-card title="应急状态" icon="uniui-notification-filled" extra="实时">
        <view class="grid grid-cols-3 gap-3">
          <view class="bg-red-50 rounded-xl p-3 text-center">
            <text class="text-xl font-bold text-red-600 block">{{ standbyTeams }}</text>
            <text class="text-xs text-gray-500">待命班组</text>
          </view>
          <view class="bg-orange-50 rounded-xl p-3 text-center">
            <text class="text-xl font-bold text-orange-600 block">{{ standbyVehicles }}</text>
            <text class="text-xs text-gray-500">待命车辆</text>
          </view>
          <view class="bg-purple-50 rounded-xl p-3 text-center">
            <text class="text-xl font-bold text-purple-600 block">{{ emergencyTasks }}</text>
            <text class="text-xs text-gray-500">应急任务</text>
          </view>
        </view>
      </uni-card>

      <!-- 应急任务列表 -->
      <uni-card title="应急任务" icon="uniui-flag-filled">
        <view v-if="loading" class="py-6 text-center">
          <text class="text-gray-400">加载中...</text>
        </view>
        <view v-else-if="emergencyTaskList.length === 0">
          <EmptyState message="暂无应急任务" />
        </view>
        <uni-list v-else border>
          <uni-list-item 
            v-for="task in emergencyTaskList" 
            :key="task.id"
            :title="task.projectName || '应急任务'"
            :note="task.address"
            right-text="应急"
            show-arrow
            @click="goToTaskDetail(task.id)"
          >
            <template #header>
              <view class="w-10 h-10 rounded-xl bg-red-50 flex items-center justify-center mr-3">
                <text class="uni-icons uniui-notification-filled text-red-500"></text>
              </view>
            </template>
          </uni-list-item>
        </uni-list>
      </uni-card>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import TopBar from '../../components/common/TopBar.vue'
import EmptyState from '../../components/common/EmptyState.vue'
import UniCard from '../../components/uni-card/uni-card.vue'
import UniList from '../../components/uni-list/uni-list.vue'
import UniListItem from '../../components/uni-list/uni-list-item.vue'
import { getTaskList } from '../../api/task'
import { getStaffList } from '../../api/staff'
import { getVehicleList } from '../../api/vehicle'

const loading = ref(false)
const taskList = ref<any[]>([])
const staffList = ref<any[]>([])
const vehicleList = ref<any[]>([])

const emergencyTaskList = computed(() => taskList.value.filter(t => t.type === 'emergency'))

const standbyTeams = computed(() => {
  return staffList.value.filter(s => s.status === 'on_duty').length
})

const standbyVehicles = computed(() => {
  return vehicleList.value.filter(v => v.status === 'available').length
})

const emergencyTasks = computed(() => emergencyTaskList.value.length)

function goToTaskDetail(taskId: string) {
  uni.navigateTo({ url: `/subPackages/pages-dispatch/taskDetail?id=${taskId}` })
}

onMounted(async () => {
  loading.value = true
  try {
    const [taskRes, staffRes, vehicleRes] = await Promise.all([
      getTaskList(),
      getStaffList(),
      getVehicleList(),
    ])
    taskList.value = taskRes.rows || []
    staffList.value = staffRes.rows || []
    vehicleList.value = vehicleRes.rows || []
  } catch (error) {
    console.error('获取数据失败:', error)
  } finally {
    loading.value = false
  }
})
</script>
