<template>
  <view class="app-container pb-20">
    <TopBar title="可用车辆" show-back />

    <!-- 统计卡片 -->
    <view class="px-4 py-4">
      <view class="grid grid-cols-3 gap-3">
        <view class="bg-green-50 rounded-xl p-3 text-center">
          <text class="text-xl font-bold text-green-600 block">{{ availableCount }}</text>
          <text class="text-xs text-gray-500">可用</text>
        </view>
        <view class="bg-blue-50 rounded-xl p-3 text-center">
          <text class="text-xl font-bold text-blue-600 block">{{ inUseCount }}</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">{{ maintenanceCount }}</text>
          <text class="text-xs text-gray-500">维修中</text>
        </view>
      </view>
    </view>

    <!-- 筛选 -->
    <view class="px-4 pb-2">
      <uni-segmented-control
        :current="currentFilterIndex"
        :values="filterLabels"
        style-type="text"
        active-color="#4f8ef7"
        @clickItem="onFilterChange"
      />
    </view>

    <!-- 车辆列表 -->
    <view class="px-4 mt-2">
      <view v-if="loading" class="py-10 text-center">
        <text class="text-gray-400">加载中...</text>
      </view>

      <view v-else-if="filteredVehicles.length === 0">
        <EmptyState message="暂无车辆" />
      </view>

      <view v-else class="gap-y-3">
        <view
          v-for="vehicle in filteredVehicles"
          :key="vehicle.id"
          class="card p-4"
        >
          <view class="flex items-center justify-between mb-3">
            <view class="flex items-center">
              <view class="w-10 h-10 rounded-xl flex items-center justify-center mr-3" :class="getStatusBgClass(vehicle.status)">
                <text class="uni-icons text-lg" :class="getStatusIconClass(vehicle.status)"></text>
              </view>
              <view>
                <text class="text-sm font-semibold text-gray-800">{{ vehicle.plateNumber }}</text>
                <text class="text-xs text-gray-500">{{ vehicle.type }}</text>
              </view>
            </view>
            <text class="tag" :class="getStatusTagClass(vehicle.status)">{{ getStatusText(vehicle.status) }}</text>
          </view>

          <view class="grid grid-cols-2 gap-y-2 gap-x-4 text-sm">
            <view class="flex justify-between">
              <text class="text-gray-400">尺寸</text>
              <text class="text-gray-700">{{ vehicle.size || '-' }}</text>
            </view>
            <view class="flex justify-between">
              <text class="text-gray-400">载重</text>
              <text class="text-gray-700">{{ vehicle.loadCapacity || '-' }}</text>
            </view>
            <view class="flex justify-between">
              <text class="text-gray-400">容积</text>
              <text class="text-gray-700">{{ vehicle.capacity || '-' }}</text>
            </view>
            <view class="flex justify-between">
              <text class="text-gray-400">驾驶员</text>
              <text class="text-gray-700">{{ vehicle.driver || '未分配' }}</text>
            </view>
          </view>

          <view class="mt-3 pt-3 border-t border-gray-100 flex gap-3">
            <button
              v-if="vehicle.driverPhone"
              class="flex-1 py-2 bg-primary-light text-primary rounded-lg text-sm font-medium"
              @click="callPhone(vehicle.driverPhone)"
            >
              联系司机
            </button>
            <button
              v-else
              class="flex-1 py-2 bg-gray-100 text-gray-400 rounded-lg text-sm font-medium"
              disabled
            >
              暂无司机
            </button>
          </view>
        </view>
      </view>
    </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 UniSegmentedControl from '../../components/uni-segmented-control/uni-segmented-control.vue'
import { useVehicleStore } from '../../stores/vehicle'

const vehicleStore = useVehicleStore()
const loading = ref(false)
const currentFilterIndex = ref(0)

const filterTypes = [
  { value: 'all', label: '全部' },
  { value: 'available', label: '可用' },
  { value: 'in_use', label: '使用中' },
  { value: 'maintenance', label: '维修中' },
]

const filterLabels = filterTypes.map((t) => t.label)

const filteredVehicles = computed(() => {
  const filterValue = filterTypes[currentFilterIndex.value].value
  if (filterValue === 'all') return vehicleStore.vehicles
  return vehicleStore.vehicles.filter((v) => v.status === filterValue)
})

const availableCount = computed(() => vehicleStore.vehicles.filter((v) => v.status === 'available').length)
const inUseCount = computed(() => vehicleStore.vehicles.filter((v) => v.status === 'in_use').length)
const maintenanceCount = computed(() => vehicleStore.vehicles.filter((v) => v.status === 'maintenance').length)

function getStatusText(status: string) {
  const map: Record<string, string> = {
    available: '可用',
    in_use: '使用中',
    maintenance: '维修中',
    offline: '离线',
  }
  return map[status] || status
}

function getStatusBgClass(status: string) {
  const map: Record<string, string> = {
    available: 'bg-green-50',
    in_use: 'bg-blue-50',
    maintenance: 'bg-yellow-50',
    offline: 'bg-gray-50',
  }
  return map[status] || 'bg-gray-50'
}

function getStatusIconClass(status: string) {
  const map: Record<string, string> = {
    available: 'uniui-checkmarkempty text-green-500',
    in_use: 'uniui-cart-filled text-blue-500',
    maintenance: 'uniui-gear-filled text-yellow-500',
    offline: 'uniui-close text-gray-400',
  }
  return map[status] || 'uniui-cart text-gray-400'
}

function getStatusTagClass(status: string) {
  const map: Record<string, string> = {
    available: 'tag-green',
    in_use: 'tag-blue',
    maintenance: 'tag-yellow',
    offline: 'tag-gray',
  }
  return map[status] || 'tag-gray'
}

function onFilterChange(index: number) {
  currentFilterIndex.value = index
}

function callPhone(phone: string) {
  if (!phone) return
  uni.makePhoneCall({ phoneNumber: phone })
}

onMounted(() => {
  loading.value = true
  setTimeout(() => {
    loading.value = false
  }, 300)
})
</script>

<style scoped>
.tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
}

.tag-green {
  background: #e6f7f1;
  color: #059669;
}

.tag-blue {
  background: #eff6ff;
  color: #2563eb;
}

.tag-yellow {
  background: #fffbeb;
  color: #d97706;
}

.tag-gray {
  background: #f3f4f6;
  color: #6b7280;
}
</style>
