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

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

    <!-- 车辆列表 -->
    <view class="mt-2 px-4">
      <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"
          @click="showVehicleDetail(vehicle)"
        >
          <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>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { onPullDownRefresh } from '@dcloudio/uni-app'
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'
import type { Vehicle } from '../../types'

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

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

const filterLabels = filterStatuses.map((s) => s.label)

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

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

function getStatusBgClass(status: string) {
  const map: Record<string, string> = {
    available: 'bg-green-50',
    in_use: 'bg-blue-50',
    maintenance: 'bg-orange-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-orange-500',
  }
  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-orange',
  }
  return map[status] || 'tag-gray'
}

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

function showVehicleDetail(vehicle: Vehicle) {
  const content = [
    `车牌号: ${vehicle.plateNumber}`,
    `类型: ${vehicle.type}`,
    `尺寸: ${vehicle.size || '-'}`,
    `载重: ${vehicle.loadCapacity || '-'}`,
    `容积: ${vehicle.capacity || '-'}`,
    `驾驶员: ${vehicle.driver || '未分配'}`,
    `驾驶员电话: ${vehicle.driverPhone || '-'}`,
    `购车日期: ${vehicle.purchaseDate || '-'}`,
    `里程: ${vehicle.mileage != null ? `${vehicle.mileage} km` : '-'}`,
    `状态: ${getStatusText(vehicle.status)}`,
  ].join('\n')

  uni.showModal({
    title: vehicle.plateNumber,
    content,
    showCancel: false,
  })
}

onMounted(async () => {
  loading.value = true
  setTimeout(() => {
    loading.value = false
  }, 300)
})

// 下拉刷新
onPullDownRefresh(async () => {
  setTimeout(() => {
    uni.stopPullDownRefresh()
  }, 500)
})
</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-orange {
  background: #fff7ed;
  color: #ea580c;
}

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