<template>
  <view class="app-container pb-20">
    <TopBar title="数据可视化" show-back />
    
    <view v-if="loading" class="py-20 text-center">
      <text class="text-gray-400">加载中...</text>
    </view>
    
    <view v-else class="px-4 py-4 gap-y-4">
      <!-- 任务统计 -->
      <uni-card title="任务统计" icon="uniui-flag-filled" extra="实时">
        <view class="grid grid-cols-2 gap-3">
          <view class="bg-blue-50 rounded-xl p-3 text-center">
            <text class="text-xl font-bold text-blue-600 block">{{ stats.task?.total || 0 }}</text>
            <text class="text-xs text-gray-500">总任务</text>
          </view>
          <view class="bg-yellow-50 rounded-xl p-3 text-center">
            <text class="text-xl font-bold text-yellow-600 block">{{ stats.task?.pending || 0 }}</text>
            <text class="text-xs text-gray-500">待处理</text>
          </view>
          <view class="bg-green-50 rounded-xl p-3 text-center">
            <text class="text-xl font-bold text-green-600 block">{{ stats.task?.completed || 0 }}</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">{{ stats.task?.inProgress || 0 }}</text>
            <text class="text-xs text-gray-500">进行中</text>
          </view>
        </view>
      </uni-card>

      <!-- 任务分布图表 -->
      <uni-card title="任务分布" icon="uniui-chart" extra="图表">
        <ChartView type="pie" :data="taskPieData" :height="200" />
      </uni-card>

      <!-- 任务趋势 -->
      <uni-card title="任务趋势" icon="uniui-trend-up" extra="图表">
        <ChartView type="line" :data="taskTrendData" :height="200" />
      </uni-card>

      <!-- 车辆统计 -->
      <uni-card title="车辆状态" icon="uniui-cart-filled" extra="实时">
        <uni-list border>
          <uni-list-item 
            title="总车辆数" 
            :right-text="String(stats.vehicle?.total || 0)"
          />
          <uni-list-item 
            title="可用" 
            :right-text="String(stats.vehicle?.available || 0)"
          />
          <uni-list-item 
            title="使用中" 
            :right-text="String(stats.vehicle?.inUse || 0)"
          />
          <uni-list-item 
            title="维修中" 
            :right-text="String(stats.vehicle?.maintenance || 0)"
          />
        </uni-list>
      </uni-card>

      <!-- 人员统计 -->
      <uni-card title="人员状态" icon="uniui-person-filled" extra="实时">
        <uni-list border>
          <uni-list-item 
            title="总人数" 
            :right-text="String(stats.personnel?.total || 0)"
          />
          <uni-list-item 
            title="在岗" 
            :right-text="String(stats.personnel?.onDuty || 0)"
          />
          <uni-list-item 
            title="施工中" 
            :right-text="String(stats.personnel?.working || 0)"
          />
          <uni-list-item 
            title="休息" 
            :right-text="String(stats.personnel?.rest || 0)"
          />
        </uni-list>
      </uni-card>

      <!-- 应急统计 -->
      <uni-card title="应急状态" icon="uniui-notification-filled" extra="实时">
        <uni-list border>
          <uni-list-item 
            title="待命班组" 
            :right-text="String(stats.emergency?.standbyTeams || 0)"
          />
          <uni-list-item 
            title="待命车辆" 
            :right-text="String(stats.emergency?.standbyVehicles || 0)"
          />
          <uni-list-item 
            title="应急任务" 
            :right-text="String(stats.emergency?.emergencyTasks || 0)"
          />
        </uni-list>
      </uni-card>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import TopBar from '../../components/common/TopBar.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 { getDashboardStats } from '../../api/dashboard'

import ChartView from '../../components/common/ChartView.vue'

const loading = ref(true)
const stats = ref<Record<string, any>>({})

// 图表数据
const taskPieData = ref([
  { label: '已完成', value: 42, color: '#34c759' },
  { label: '进行中', value: 15, color: '#4f8ef7' },
  { label: '待处理', value: 8, color: '#ff9500' },
  { label: '已取消', value: 3, color: '#8e8e93' },
])

const taskTrendData = ref([
  { label: '周一', value: 5 },
  { label: '周二', value: 8 },
  { label: '周三', value: 6 },
  { label: '周四', value: 12 },
  { label: '周五', value: 10 },
  { label: '周六', value: 15 },
  { label: '周日', value: 9 },
])

onMounted(async () => {
  try {
    const res = await getDashboardStats()
    stats.value = res
  } catch (error) {
    console.error('获取统计数据失败:', error)
  } finally {
    loading.value = false
  }
})
</script>
