<template>
  <view class="app-container">
    <HeaderBar :title="form.id ? '编辑车辆' : '新增车辆'" text-align="center" enable-back />
    <image src="https://api.ccttiot.com/64024b0ec02392312a95d75c369308143f64f6cd15b0e9-1KT9Qi_fw1200%201-1747228539523.png" mode="widthFix" class="car-bg" />
    <view class="form-box">
      <form @submit.prevent="submitForm">
        <view class="form-item">
          <view class="label">姓名</view>
          <input class="input" v-model="form.name" placeholder="请输入姓名" />
        </view>
        <view class="form-item">
          <view class="label">联系方式</view>
          <input class="input" v-model="form.mobile" placeholder="请输入联系方式" />
        </view>
        <view class="form-item">
          <view class="label">车牌号<text style="color: #ff4d4f; margin-left: 8rpx;">必填</text></view>
          <input class="input" v-model="form.no" placeholder="请输入车牌号" />
        </view>
        <view class="form-item">
          <view class="label">图片</view>
          <image-upload :limit="1" v-model="form.picture" />
        </view>
        <view class="form-item">
          <view class="label">是否默认</view>
          <switch :checked="form.isDefault" @change="(e) => form.isDefault = e.detail.value" />
        </view>
        <button class="submit-btn" form-type="submit">保存爱车</button>
      </form>
    </view>
  </view>
</template>

<script>
import HeaderBar from '@/components/HeaderBar.vue'
import ImageUpload from '@/components/image-upload/image-upload.vue'
import { appGetCarDetail, appAddCar, appUpdateCar } from '@/api/app/car'

export default {
  name: 'CarEdit',
  components: { HeaderBar, ImageUpload },
  data() {
    return {
      form: {
        id: null,
        name: '',
        mobile: '',
        no: '',
        picture: '',
        isDefault: false
      }
    }
  },
  onLoad(options) {
    if (options.id) {
      appGetCarDetail(options.id).then(res => {
        this.form = res.data
      })
    }
  },
  methods: {
    submitForm() {
      this.$modal.loading("保存中");
      const api = this.form.id ? appUpdateCar : appAddCar
      api(this.form).then(res => {
        if (res.code === 200) {
          this.$modal.msgSuccess('保存成功');
          setTimeout(() => {
            uni.navigateBack()
          }, 1000)
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.form-box {
  position: relative;
  background: #fff;
  border-radius: 20rpx;
  padding: 30rpx 20rpx;
  margin-top: 260rpx;
  margin-left: 20rpx;
  margin-right: 20rpx;
  z-index: 2;
}
.form-item {
  margin-bottom: 30rpx;
  .label {
    font-size: 28rpx;
    color: #333;
    margin-bottom: 10rpx;
  }
  .input {
    background: #f7f8fa;
    border-radius: 10rpx;
    padding: 0 20rpx;
    font-size: 28rpx;
    color: #666;
    width: 100%;
    height: 80rpx;
    line-height: 80rpx;
    box-sizing: border-box;
  }
}
.submit-btn {
  width: 90%;
  margin: 40rpx auto 0;
  display: block;
  background: #2979ff;
  color: #fff;
  border-radius: 50rpx;
  font-size: 32rpx;
  height: 90rpx;
  line-height: 90rpx;
  text-align: center;
  border: none;
}
.car-bg {
  width: 100%;
  height: fit-content;
  position: absolute;
  top: 180rpx;
  left: 0;
  z-index: 1;
}
</style>