<script setup lang="ts">
import { Download } from 'lucide-vue-next'
import { ref } from 'vue'

const activeTab = ref('本月')
const tabs = ['本月', '上月', '本季度', '本年度', '自定义']

const stats = [
  { value: '156', label: '总工单数', color: 'rgba(0,0,0,0.85)' },
  { value: '8', label: '处理中', color: '#4a7c59' },
  { value: '145', label: '已完成', color: '#52C41A' },
  { value: '3', label: '待处理', color: '#FF4D4F' },
]

const faultTypes = [
  { name: '板卡故障', percent: 65.5, color: '#4a7c59' },
  { name: '固件异常', percent: 22.3, color: '#52C41A' },
  { name: '通信故障', percent: 6.3, color: '#FAAD14' },
  { name: '其他', percent: 5.9, color: '#8C8C8C' },
]
</script>

<template>
  <div class="p-6">
    <!-- Page Header -->
    <div class="mb-6 flex items-center justify-between">
      <h2 class="text-2xl font-semibold">维修统计</h2>
      <button class="px-4 py-2 rounded text-white flex items-center gap-2 text-sm" style="background-color: #4a7c59">
        <Download :size="16" /> 导出报告
      </button>
    </div>

    <!-- Time Filter -->
    <div class="bg-white p-4 rounded-lg mb-6" style="box-shadow: 0 1px 2px rgba(0,0,0,0.05)">
      <div class="flex items-center gap-4">
        <span class="text-sm" style="color: rgba(0,0,0,0.65)">时间范围:</span>
        <select class="px-3 py-1.5 border rounded text-sm" style="border-color: #D9D9D9; background-color: #fff">
          <option>本月</option>
        </select>
        <div class="flex items-center gap-1">
          <button
            v-for="tab in tabs" :key="tab"
            class="px-4 py-1.5 rounded text-sm transition-colors"
            :style="{
              backgroundColor: activeTab === tab ? '#4a7c59' : 'transparent',
              color: activeTab === tab ? '#fff' : 'rgba(0,0,0,0.65)',
            }"
            @click="activeTab = tab"
          >{{ tab }}</button>
        </div>
      </div>
    </div>

    <!-- Stats Summary -->
    <div class="mb-6">
      <h3 class="text-base font-medium mb-3" style="color: rgba(0,0,0,0.85)">维修统计</h3>
      <div class="grid grid-cols-4 gap-4">
        <div v-for="s in stats" :key="s.label" class="bg-white p-5 rounded-lg" style="box-shadow: 0 1px 2px rgba(0,0,0,0.05)">
          <div class="text-3xl font-semibold mb-1" :style="{ color: s.color }">{{ s.value }}</div>
          <div class="text-sm" style="color: rgba(0,0,0,0.45)">{{ s.label }}</div>
        </div>
      </div>
    </div>

    <!-- Charts Row -->
    <div class="grid grid-cols-2 gap-6 mb-6">
      <!-- Fault Distribution -->
      <div class="bg-white p-6 rounded-lg" style="box-shadow: 0 1px 2px rgba(0,0,0,0.05)">
        <h3 class="text-base font-semibold mb-5">故障类型分布</h3>
        <div class="space-y-4">
          <div v-for="ft in faultTypes" :key="ft.name" class="flex items-center gap-3">
            <span class="text-sm w-16 flex-shrink-0" style="color: rgba(0,0,0,0.65)">{{ ft.name }}</span>
            <div class="flex-1 h-5 rounded" style="background-color: #F5F5F5; overflow: hidden">
              <div class="h-full rounded" :style="{ width: ft.percent + '%', backgroundColor: ft.color }"></div>
            </div>
            <span class="text-sm w-14 text-right" style="color: rgba(0,0,0,0.85)">{{ ft.percent }}%</span>
          </div>
        </div>
      </div>

      <!-- Trend Placeholder -->
      <div class="bg-white p-6 rounded-lg" style="box-shadow: 0 1px 2px rgba(0,0,0,0.05)">
        <h3 class="text-base font-semibold mb-5">维修趋势</h3>
        <div class="flex items-center justify-center h-40" style="color: rgba(0,0,0,0.25)">
          <div class="text-center text-sm">
            <div>📊 维修趋势图表</div>
            <div>1月-6月趋势</div>
          </div>
        </div>
      </div>
    </div>

   
  </div>
</template>
