<template>
  <view class="edit-vehicle-container">
    <!-- 顶部导航栏 -->
    <view class="header-bar">
      <!-- 左侧：返回按钮 -->
      <view class="nav-left" @click="goBack">
        <text class="nav-icon">←</text>
      </view>

      <!-- 中部：页面标题 -->
      <text class="page-title">编辑车辆</text>

      <!-- 右侧：留空 -->
      <view class="nav-right"></view>
    </view>

    <!-- 编辑表单区 -->
    <scroll-view class="form-wrapper" scroll-y="true">
      <!-- 车牌号 -->
      <view class="form-item">
        <text class="item-label">车牌号</text>
        <input class="item-input" v-model="formData.plate_number" placeholder="请输入车牌号" />
      </view>

      <!-- 车辆类型 -->
      <view class="form-item">
        <text class="item-label">车辆类型</text>
        <picker :value="vehicleTypeIndex" :range="vehicleTypes" @change="onVehicleTypeChange">
          <view class="picker-view">{{ formData.vehicle_type ? vehicleTypes[vehicleTypeIndex] : '请选择车辆类型' }}</view>
        </picker>
      </view>

      <!-- 车辆品牌 -->
      <view class="form-item">
        <text class="item-label">车辆品牌</text>
        <input class="item-input" v-model="formData.brand" placeholder="请输入车辆品牌" />
      </view>

      <!-- 车辆颜色 -->
      <view class="form-item">
        <text class="item-label">车辆颜色</text>
        <input class="item-input" v-model="formData.color" placeholder="请输入车辆颜色" />
      </view>

      <!-- 车辆照片 -->
      <view class="form-item">
        <text class="item-label">车辆照片</text>
        <view class="avatar-upload" @click="chooseVehicleImage">
          <image :src="formData.vehicle_image || '/static/default-vehicle.png'" class="avatar-image" />
          <text class="upload-text">点击上传车辆照片</text>
        </view>
      </view>

      <!-- 备注 -->
      <view class="form-item">
        <text class="item-label">备注</text>
        <textarea class="item-textarea" v-model="formData.remark" placeholder="请输入备注信息" />
      </view>
    </scroll-view>

    <!-- 底部操作按钮 -->
    <view class="bottom-actions">
      <button class="action-btn cancel" @click="cancel">取消</button>
      <button class="action-btn save" @click="saveVehicle">保存</button>
    </view>
  </view>
</template>

<script lang="uts">
export default {
  data() {
    return {
      // 当前车辆ID
      vehicleId: '',
      // 表单数据
      formData: {
        plate_number: '',
        vehicle_type: 0,
        brand: '',
        color: '',
        vehicle_image: '',
        remark: ''
      },
      // 车辆类型选项
      vehicleTypes: ['电动车', '摩托车', '面包车', '小型货车'],
      vehicleTypeIndex: 0
    }
  },

  onLoad(options: any) {
    this.vehicleId = options.id as string
    if (this.vehicleId) {
      this.loadVehicleData()
    }
  },

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

    // 加载车辆数据
    loadVehicleData() {
      // 模拟从API获取数据
      // 实际项目中应调用API
      const mockVehicles = [
        {
          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',
          brand: '雅迪',
          color: '蓝色',
          image: '/static/vehicle1.jpg',
          remark: '日常使用'
        },
        {
          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',
          brand: '本田',
          color: '黑色',
          image: '/static/vehicle2.jpg',
          remark: '维修中'
        }
      ]

      const found = mockVehicles.find(v => v.id === this.vehicleId)
      if (found) {
        this.formData = {
          plate_number: found.plate_number,
          vehicle_type: found.vehicle_type,
          brand: found.brand,
          color: found.color,
          vehicle_image: found.image,
          remark: found.remark
        }
        // 设置车辆类型索引
        this.vehicleTypeIndex = this.vehicleTypes.indexOf(found.vehicle_type_name)
      }
    },

    // 选择车辆类型
    onVehicleTypeChange(e: UniEvent<HTMLInputElement>) {
      const index = parseInt(e.detail.value)
      this.vehicleTypeIndex = index
      this.formData.vehicle_type = index + 1 // 假设后端从1开始
    },

    // 选择车辆照片
    chooseVehicleImage() {
      uni.chooseImage({
        count: 1,
        sizeType: ['compressed'],
        sourceType: ['album', 'camera'],
        success: (res) => {
          this.formData.vehicle_image = res.tempFilePaths[0]
        }
      })
    },

    // 取消
    cancel() {
      uni.navigateBack()
    },

    // 保存
    saveVehicle() {
      // 验证输入
      if (!this.formData.plate_number.trim()) {
        uni.showToast({
          title: '请输入车牌号',
          icon: 'none'
        })
        return
      }

      // 模拟更新车辆数据
      const updatedVehicle = {
        id: this.vehicleId,
        plate_number: this.formData.plate_number,
        vehicle_type: this.formData.vehicle_type,
        vehicle_type_name: this.vehicleTypes[this.vehicleTypeIndex],
        brand: this.formData.brand,
        color: this.formData.color,
        image: this.formData.vehicle_image,
        remark: this.formData.remark,
        updated_at: new Date().toISOString()
      }

      // 将更新后的车辆数据保存到本地存储，以便上一页可以获取
      uni.setStorageSync('updated_vehicle_for_list', updatedVehicle)

      // 模拟保存过程
      uni.showLoading({
        title: '保存中...'
      })

      setTimeout(() => {
        uni.hideLoading()
        uni.showToast({
          title: '保存成功',
          icon: 'success'
        })
        // 保存成功后返回上一页
        uni.navigateBack()
      }, 1000)

      // 实际项目中应调用 API 保存数据
      console.log('更新的车辆数据:', updatedVehicle)
    }
  }
}
</script>

<style scoped>
.edit-vehicle-container {
  background-color: #f8f9fa;
  min-height: 100vh;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

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

.nav-left {
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: 10rpx;
  border-radius: 8rpx;
  transition: background-color 0.2s ease;
}

.nav-left:hover {
  background-color: #f0f0f0;
}

.nav-left:active {
  background-color: #e0e0e0;
}

.nav-icon {
  font-size: 36rpx;
  color: #333;
}

.page-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  text-align: center;
  flex: 1; /* 让标题占据中间剩余空间 */
}

.nav-right {
  width: 60rpx; /* 与左侧箭头区域宽度一致 */
  height: 1rpx;
}

.form-wrapper {
  flex: 1;
  padding: 20rpx 0;
}

.form-item {
  background-color: #fff;
  margin: 20rpx;
  padding: 20rpx 30rpx;
  border-radius: 16rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
}

.item-label {
  font-size: 28rpx;
  color: #333;
  font-weight: 500;
  margin-bottom: 10rpx;
}

.item-input {
  width: 100%;
  font-size: 28rpx;
  color: #333;
  padding: 10rpx 0;
  border: none;
  outline: none;
  text-align: right;
}

.picker-view {
  font-size: 28rpx;
  color: #333;
  text-align: right;
  padding: 10rpx 0;
}

.avatar-upload {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
}

.avatar-image {
  width: 120rpx;
  height: 120rpx;
  border-radius: 60rpx;
  border: 4rpx solid #ddd;
  margin-bottom: 10rpx;
}

.upload-text {
  font-size: 24rpx;
  color: #666;
}

.item-textarea {
  width: 100%;
  font-size: 28rpx;
  color: #333;
  padding: 10rpx 0;
  border: none;
  outline: none;
  text-align: right;
  height: 100rpx;
  resize: none;
}

.bottom-actions {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  padding: 25rpx 30rpx;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1);
  display: flex;
  gap: 15rpx;
}

.action-btn {
  flex: 1;
  height: 80rpx;
  border-radius: 35rpx;
  font-size: 26rpx;
  border: none;
  font-weight: 500;
  padding: 0 10rpx;
  box-sizing: border-box;
}

.cancel {
  background-color: #f0f0f0;
  color: #333;
}

.save {
  background-color: #4CAF50;
  color: #fff;
}
</style>