<template>
  <div class="vehicles-page">
    <div class="page-header">
      <h2>选择车型</h2>
      <p>浏览全部可用车辆</p>
    </div>

    <!-- 筛选栏 -->
    <div class="filter-bar">
      <el-select v-model="filterType" placeholder="电池类型" size="small" style="width: 100px">
        <el-option label="全部" value="" />
        <el-option label="锂电池" value="锂电池" />
        <el-option label="铅酸电池" value="铅酸电池" />
      </el-select>
      <el-select v-model="filterStatus" placeholder="状态" size="small" style="width: 100px">
        <el-option label="全部" value="" />
        <el-option label="空闲" value="空闲" />
        <el-option label="在租" value="在租" />
      </el-select>
    </div>

    <!-- 车辆列表 -->
    <div class="vehicle-list" v-loading="loading">
      <div
        v-for="vehicle in filteredVehicles"
        :key="vehicle._id"
        class="vehicle-card"
        @click="goDetail(vehicle._id)"
      >
        <div class="vehicle-img">
          <span class="emoji">🛵</span>
          <el-tag
            :type="vehicle.status === '空闲' ? 'success' : 'warning'"
            class="status-tag"
            size="small"
          >
            {{ vehicle.status }}
          </el-tag>
        </div>
        <div class="vehicle-info">
          <h4>{{ vehicle.model }}</h4>
          <div class="tags">
            <el-tag size="small" type="info">{{ vehicle.color }}</el-tag>
            <el-tag size="small" type="info">{{ vehicle.batteryType }}</el-tag>
          </div>
          <div class="price-row">
            <span class="price">¥{{ getDailyRate(vehicle) }}/天</span>
            <span class="deposit">押金: ¥{{ vehicle.purchasePrice ? Math.round(vehicle.purchasePrice * 0.1) : 200 }}</span>
          </div>
        </div>
        <div class="vehicle-arrow">
          <el-icon><ArrowRight /></el-icon>
        </div>
      </div>

      <el-empty v-if="!loading && filteredVehicles.length === 0" description="暂无车辆" />
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ArrowRight } from '@element-plus/icons-vue'
import request from '../utils/request'

const router = useRouter()
const loading = ref(false)
const vehicles = ref([])
const filterType = ref('')
const filterStatus = ref('')

const getDailyRate = (vehicle) => {
  const basePrice = vehicle.purchasePrice || 3000
  return Math.round(basePrice / 100)
}

const filteredVehicles = computed(() => {
  return vehicles.value.filter(v => {
    const typeMatch = !filterType.value || v.batteryType === filterType.value
    const statusMatch = !filterStatus.value || v.status === filterStatus.value
    return typeMatch && statusMatch
  })
})

const fetchVehicles = async () => {
  loading.value = true
  try {
    const res = await request.get('/vehicles')
    if (res.success) {
      vehicles.value = res.data
    }
  } catch (e) {
    // 模拟数据
    vehicles.value = [
      { _id: '1', model: '黑骑士', color: '黑色', batteryType: '锂电池', purchasePrice: 3500, status: '空闲' },
      { _id: '2', model: '黑骑士', color: '白色', batteryType: '锂电池', purchasePrice: 3500, status: '空闲' },
      { _id: '3', model: '电动车', color: '蓝色', batteryType: '铅酸电池', purchasePrice: 2800, status: '空闲' },
      { _id: '4', model: '高端豪车', color: '红色', batteryType: '锂电池', purchasePrice: 8000, status: '空闲' },
      { _id: '5', model: '普通标准套餐', color: '绿色', batteryType: '铅酸电池', purchasePrice: 2500, status: '在租' }
    ]
  } finally {
    loading.value = false
  }
}

const goDetail = (id) => {
  router.push(`/vehicle/${id}`)
}

onMounted(() => {
  fetchVehicles()
})
</script>

<style scoped>
.vehicles-page {
  min-height: 100vh;
  background: #F7F7F7;
  padding-bottom: 20px;
}

.page-header {
  background: #fff;
  padding: 20px 16px 16px;
  border-bottom: 0.5px solid rgba(0,0,0,0.06);
}

.page-header h2 {
  margin: 0 0 4px 0;
  font-size: 20px;
  font-weight: 600;
  color: #1A1A1A;
}

.page-header p {
  margin: 0;
  font-size: 13px;
  color: #B2B2B2;
}

.filter-bar {
  display: flex;
  gap: 10px;
  padding: 12px;
  background: #fff;
  margin-bottom: 4px;
}

.vehicle-list {
  padding: 0 12px;
}

.vehicle-card {
  background: #fff;
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  cursor: pointer;
}

.vehicle-img {
  position: relative;
  width: 72px;
  height: 72px;
  background: #F7F7F7;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.vehicle-img .emoji {
  font-size: 36px;
}

.status-tag {
  position: absolute;
  top: -6px;
  right: -6px;
}

.vehicle-info {
  flex: 1;
  margin-left: 12px;
}

.vehicle-info h4 {
  margin: 0 0 6px 0;
  font-size: 15px;
  color: #1A1A1A;
  font-weight: 500;
}

.tags {
  display: flex;
  gap: 4px;
  margin-bottom: 8px;
}

.price-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.price {
  color: #FF6B00;
  font-size: 17px;
  font-weight: 600;
}

.deposit {
  color: #B2B2B2;
  font-size: 12px;
}

.vehicle-arrow {
  color: #B2B2B2;
  font-size: 14px;
}
</style>
