<!-- 配送端 - 车辆管理 -->
<template>
  <view class="vehicle-container">
    <!-- 头部标题 -->
    <view class="page-header">
      <!-- 返回按钮：左上角垂直居中 -->
      <view class="back-box" @click="goBack">
        <text class="back-icon">‹</text>
        <text class="back-text">返回</text>
      </view>
      <text class="page-title">车辆管理</text>
    </view>

    <!-- 主要内容区域 -->
    <view class="content-wrapper">
      <!-- 车辆列表 -->
      <view v-if="vehicleList.length > 0" class="vehicle-list">
        <view v-for="vehicle in vehicleList" :key="vehicle.id" class="vehicle-item">
          <view class="vehicle-info">
            <text class="vehicle-icon">🚗</text>
            <view class="info-details">
              <text class="info-label">车牌号: {{ vehicle.plate_number }}</text>
              <text class="info-label">车型: {{ vehicle.vehicle_type_name }}</text>
              <text class="info-label">状态: {{ getVehicleStatusText(vehicle.status) }}</text>
            </view>
          </view>
          <view class="vehicle-actions">
            <button class="action-btn primary" @click="editVehicle(vehicle.id)">编辑</button>
            <button class="action-btn secondary" @click="deleteVehicle(vehicle.id)">删除</button>
          </view>
        </view>
      </view>

      <!-- 无数据时显示 -->
      <view v-else class="no-data">
        <text class="no-data-text">暂无车辆信息</text>
        <button class="add-btn" @click="addVehicle">添加车辆</button>
      </view>

      <!-- 添加车辆按钮（如果列表为空） -->
      <view v-if="vehicleList.length > 0" class="add-button-section">
        <button class="add-btn" @click="addVehicle">添加新车辆</button>
      </view>
    </view>
  </view>
</template>

<script lang="uts">
import type { DeliveryDriverType } from '@/types/mall-types.uts'

export default {
  data() {
    return {
      // 模拟车辆数据
      vehicleList: [] as Array<VehicleType>
    }
  },

  onLoad() {
    this.loadVehicles()
  },

  onShow() {
    // 页面每次显示时都检查是否有新添加的车辆
    this.loadVehicles()
  },

  methods: {
    // 返回上一页
    goBack() {
      uni.navigateBack()
    },

    // 加载车辆信息
    loadVehicles() {
      // 1. 从本地存储获取新添加的车辆（如果存在）
      const newVehicleFromStorage = uni.getStorageSync('new_vehicle_for_list')
      if (newVehicleFromStorage) {
        // 2. 清除本地存储，防止重复添加
        uni.removeStorageSync('new_vehicle_for_list')
        // 3. 将新车辆添加到列表开头
        this.vehicleList.unshift(newVehicleFromStorage)
        return // 如果有新数据，直接使用，不加载旧的模拟数据
      }

      // 4. 如果没有新数据，才加载旧的模拟数据（实际项目中应从API获取）
      if (this.vehicleList.length === 0) { // 避免重复加载模拟数据
        this.vehicleList = [
          {
            id: '1',
            plate_number: '京A12345',
            vehicle_type: 1,
            vehicle_type_name: '电动车',
            status: 1, // 1: 正常, 2: 维修中, 3: 停用
            driver_id: 'driver001',
            created_at: '2024-01-01',
            updated_at: '2024-12-01'
          },
          {
            id: '2',
            plate_number: '沪B67890',
            vehicle_type: 2,
            vehicle_type_name: '摩托车',
            status: 2, // 维修中
            driver_id: 'driver001',
            created_at: '2024-01-02',
            updated_at: '2024-12-02'
          },
          {
            id: '3',
            plate_number: '粤C11223',
            vehicle_type: 3,
            vehicle_type_name: '汽车',
            status: 3, // 停用
            driver_id: 'driver001',
            created_at: '2024-01-03',
            updated_at: '2024-12-03'
          }
        ]
      }
    },

    // 获取车辆状态文本
    getVehicleStatusText(status: number): string {
      const statusMap = {
        1: '正常',
        2: '维修中',
        3: '停用'
      }
      return statusMap[status] || '未知状态'
    },

    // 编辑车辆
    editVehicle(vehicleId: string) {
      uni.navigateTo({
        url: `/pages/mall/delivery/vehicle-edit?id=${vehicleId}`
      })
    },

    // 删除车辆
    deleteVehicle(vehicleId: string) {
      uni.showModal({
        title: '确认删除',
        content: '确定要删除该车辆吗？',
        success: (res) => {
          if (res.confirm) {
            // TODO: 调用API删除车辆
            this.vehicleList = this.vehicleList.filter(v => v.id !== vehicleId)
            uni.showToast({
              title: '删除成功',
              icon: 'success'
            })
          }
        }
      })
    },

    // 添加车辆
    addVehicle() {
      uni.navigateTo({
        url: '/pages/mall/delivery/vehicle-add'
      })
    }
  }
}

// 定义 VehicleType 类型
type VehicleType = {
  id: string
  plate_number: string
  vehicle_type: number
  vehicle_type_name: string
  status: number
  driver_id: string
  created_at: string
  updated_at: string
  brand?: string
  color?: string
  image?: string
  remark?: string
}
</script>

<style scoped>
.vehicle-container {
  background-color: #f5f5f5;
  min-height: 100vh;
  padding: 20rpx 30rpx;
}

.page-header {
  background-color: #fff;
  padding: 20rpx 30rpx;
  border-bottom: 1rpx solid #e9ecef;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
  position: relative;
  height: 80rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.back-box {
  position: absolute;
  left: 30rpx;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: 10rpx;
  border-radius: 8rpx;
  transition: background-color 0.2s ease;
}

.back-box:active {
  background-color: #f0f0f0;
}

.back-icon {
  font-size: 36rpx;
  color: #333;
  margin-right: 5rpx;
}

.back-text {
  font-size: 28rpx;
  color: #333;
  font-weight: 500;
}

.page-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  text-align: center;
}

.content-wrapper {
  margin-top: 20rpx;
}

.vehicle-list {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.vehicle-item {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 20rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
  border-left: 6rpx solid #4CAF50;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.vehicle-info {
  display: flex;
  align-items: center;
  flex: 1;
}

.vehicle-icon {
  font-size: 48rpx;
  margin-right: 15rpx;
  color: #4CAF50;
}

.info-details {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.info-label {
  font-size: 24rpx;
  color: #333;
  margin-bottom: 8rpx;
}

.vehicle-actions {
  display: flex;
  gap: 10rpx;
}

.action-btn {
  padding: 20rpx;
  border-radius: 15rpx;
  font-size: 26rpx;
  border: none;
  font-weight: 500;
  padding: 0 10rpx;
  box-sizing: border-box;
}

.primary {
  background: #4CAF50;
  color: white;
}

.secondary {
  background: #f0f0f0;
  color: #333;
  border: 1rpx solid #ddd;
}

.no-data {
  text-align: center;
  padding: 80rpx 30rpx;
  border-radius: 16rpx;
  background-color: #fff;
}

.no-data-text {
  font-size: 32rpx;
  color: #999;
  margin-bottom: 15rpx;
}

.add-btn {
  background-color: #4CAF50;
  color: #fff;
  border: none;
  border-radius: 8rpx;
  padding: 20rpx 40rpx;
  font-size: 28rpx;
  font-weight: bold;
  margin-top: 20rpx;
}

.add-button-section {
  text-align: center;
  margin-top: 20rpx;
}
</style>