<template>
  <view class="container">
    <VNavigationBar title="车辆详情" background-color="#fff" title-color="#333"></VNavigationBar>
    <view class="body">
      <view class="card">
        <view class="formItem">
          <text class="formLabel">车牌号</text>
          <input type="text" placeholder="请输入文本" v-model="car.licenseNumber"/>
        </view>
        <view class="formItem">
          <text class="formLabel">品牌</text>
          <picker @change="brandChange" :value="brandIndex" :range="brandNamesComputed">
            <view class="uni-input">{{ brandNamesComputed[brandIndex] }}</view>
          </picker>
        </view>
        <view class="formItem">
          <text class="formLabel">型号</text>
          <input type="text" placeholder="请输入文本" v-model="car.carModelInput"/>
        </view>
        <view class="formItem">
          <text class="formLabel">车辆类别</text>
          <picker @change="categoryChange" :value="categoryIndex" :range="categoryNamesComputed">
            <view class="uni-input">{{ categoryNamesComputed[categoryIndex] }}</view>
          </picker>
        </view>
        <view class="formItem">
          <text class="formLabel">车辆性质</text>
          <picker @change="natureChange" :value="natureIndex" :range="natureNamesComputed">
            <view class="uni-input">{{ natureNamesComputed[natureIndex] }}</view>
          </picker>
        </view>
        <view class="formItem">
          <text class="formLabel">注册日期</text>
          <picker
              mode="date"
              :value="car.carRegisterDate"
              start="2020-01-01"
              end="2030-12-31"
              @change="bindDateChange1">
            <view style="margin-left: 10rpx">
              {{ car.carRegisterDate}}
            </view>
          </picker>
        </view>
<!--        <view class="formItem">-->
<!--          <text class="formLabel">车辆图片</text>-->

<!--          <u-upload-->
<!--              :action="uploadUrl"-->
<!--              :headers="headers"-->
<!--              :file-list="fileList"-->
<!--              :max-count="3"-->
<!--              :show-upload-btn="true"-->
<!--              @after-read="afterRead"-->
<!--              @delete="deleteFile"-->
<!--              @success="uploadSuccess"-->
<!--              @fail="uploadFail"-->
<!--          ></u-upload>-->

<!--        </view>-->
      </view>
    </view>
    <view class="footer">
      <view class="btnItem edit" @click="submit" v-if="bo2">
        确定
      </view>

      <view class="btnItem delete" v-if="bo1" @click="del">
        <uni-icons type="trash" color="#F92C2C"></uni-icons>
        删除
      </view>
      <view class="line" v-if="bo1"></view>
      <view class="btnItem edit" v-if="bo1" @click="update">
        <uni-icons type="compose" color="#0174F6"></uni-icons>
        编辑
      </view>
    </view>
  </view>
</template>

<script>
import VNavigationBar from '@/components/VNavigationBar.vue';
import request from "../../utils/request";

export default {
  components: {
    VNavigationBar
  },
  data() {
    return {

      // uploadUrl: 'https://your-server.com/upload',
      // headers: {},
      // fileList: [],

      car: {
        // 车牌号
        licenseNumber: '',
        // 型号
        carModelInput: '',
        // 品牌id
        carBrand:'',
        // 车辆类别  字典字段
        carCategory:'',
        // 车辆性质  字典字段
        carNature:'',
        // 注册日期
        carRegisterDate:'2024-09-24',


      },
      bo1: false,
      bo2: true,
      categoryIndex: 0,
      natureIndex: 0,
      brandIndex: 0,
      categoryList: [],
      natureList: [],
      brandList: []

    };
  },
  // 计算属性，将对象数组转换为字符串数组
  computed: {
    // 计算属性，将对象数组转换为字符串数组   picker 标签的 range 属性 只能绑定数组
    brandNamesComputed() {
      return this.brandList.map(item => item.brandName);
    },
    natureNamesComputed() {
      return this.natureList.map(item => item.label);
    },
    categoryNamesComputed() {
      return this.categoryList.map(item => item.label);
    }
  },

  onLoad(options) {
    // 如果是修改
    if (options.car) {
      // 有数据为编辑 或 删除
      this.car = JSON.parse(decodeURIComponent(options.car));
      console.log('初始化页面数据', this.car)
      this.bo1 = true;
      this.bo2 = false;
    } else {
      // 没有数据 需要赋值一下初始化
      this.bo1 = false;
      this.bo2 = true;
    }

    // 初始化
    this.getCategoryList();
    this.getNatureList();
    this.getBrandList();

  },
  methods: {
    // afterRead(file) {
    //   console.log('文件读取完成');
    // },
    // deleteFile(file, index) {
    //   console.log('删除文件');
    //   this.fileList.splice(index, 1);
    // },
    // uploadSuccess(res, file) {
    //   console.log('上传成功', res);
    // },
    // uploadFail(error, file) {
    //   console.log('上传失败', error);
    // },

    // 品牌选择事件
    brandChange(event) {
      // 下标
      const newIndex = event.detail.value;
      this.brandIndex = newIndex;
     //
      this.car.carBrand = this.brandList[newIndex].id;
    },
    // 车辆类别选择事件
    categoryChange(event) {
      const newIndex = event.detail.value;
      this.categoryIndex = newIndex;
    //
      this.car.carCategory = this.categoryList[newIndex].value;
    },
    // 车辆性质选择事件
    natureChange(event) {
      const newIndex = event.detail.value;
      this.natureIndex = newIndex;
    //
      this.car.carNature = this.natureList[newIndex].value;
    },

    // 日期选择 事件
    bindDateChange1(e) {
      this.car.carRegisterDate = e.target.value; // 更新选择的日期到data中的date变量

    },

    // 查询下拉 车辆类别
    async getCategoryList() {
      let res = await request({
        url: '/admin-api/system/dict-data/type?type=car_category',
        method: 'get',
        noTenantId: false
      })
      if (res.code == 200) {
        console.log('车辆类别', res.data)
        this.categoryList = res.data;
        if (this.bo2 == true){
          this.car.carCategory = res.data[0].value;
        }
        else {
        // 如果是修改 遍历当前集合 将index 同步
          this.categoryList.forEach((item, index) => {
            if (item.value == this.car.carCategory) {
              this.categoryIndex = index;
            }
          })

        }
      }
    },
    // 查询下拉 车辆性质
    async getNatureList() {
      let res = await request({
        url: '/admin-api/system/dict-data/type?type=car_nature',
        method: 'get',
        noTenantId: false
      })
      if (res.code == 200) {
        console.log('车辆性质', res.data)
        this.natureList = res.data;
        if (this.bo2 == true){
          this.car.carNature = res.data[0].value;
        }
        else {
          // 如果是修改 遍历当前集合 将index 同步
          this.natureList.forEach((item, index) => {
            if (item.value == this.car.carNature) {
              this.natureIndex = index;
            }
          })
        }
      }
    },
    // 查询下拉 车辆品牌
    async getBrandList() {
      let res = await request({
        url: '/userClient/base/carBrand/list',
        method: 'get',
      })
      if (res.code == 200) {
        console.log('车辆品牌', res.data)
        this.brandList = res.data;
        if (this.bo2 == true){
          this.car.carBrand= res.data[0].id;
        }else {
          // 如果是修改 遍历当前集合 将index 同步
          this.brandList.forEach((item, index) => {
            if (item.id == this.car.carBrand) {
              this.brandIndex = index;
            }
          })
        }
      }
    },
    // 新增
    async submit() {
      let res = await request({
        url: '/userClient/base/myCar/create',
        method: 'POST',
        data: this.car,
      })
      if (res.code == 200) {
        // 新增成功返回上一个页面

        uni.navigateBack();

      }
    },
    //删除
    async del() {
      let res = await request({
        url: `/userClient/base/myCar/delete?id=${this.car.id}`,
        method: 'Delete',

      })
      if (res.code == 200) {
        // 新增成功返回上一个页面  并且上一个页面重新初始化 获取数据 怎么写
        uni.navigateBack();

      }
    },
    // 修改
    async update() {
      let res = await request({
        url: `/userClient/base/myCar/update`,
        data: this.car,
        method: 'Put',
      })
      if (res.code == 200) {

      }
    }

  }
}
</script>

<style lang="less" scoped>


.container {
  box-sizing: border-box;
  height: 100%;
  background-color: #f3f5f7;
  display: flex;
  flex-direction: column;

  .body {
    flex: 1;
    height: 0;
    overflow: auto;

    .card {
      margin: 20rpx 0;
      padding: 0 32rpx;
      background-color: #fff;

      .formItem {
        box-sizing: border-box;
        width: 686rpx;
        margin: 0 auto;
        padding: 40rpx;

        display: flex;
        align-items: center;
        justify-content: space-between;
        column-gap: 20rpx;

        border-bottom: 1rpx solid #dddddd;

        &:last-child {
          border: none;
        }
      }

      .labelVal {
        display: flex;
        align-items: center;
        justify-content: space-between;
        column-gap: 20rpx;
      }


      .formLabel {
        font-size: 32rpx;
        color: #333333;
      }

      .formValue {
        flex: 1;
        width: 0;
        text-align: right;
        font-size: 32rpx;
        color: #999999;
      }

      .carImg {
        width: 240rpx;
        height: 150rpx;
        border-radius: 8rpx 8rpx 8rpx 8rpx;
        background-color: #efefef;
      }

      .formImg {
        margin-top: 30rpx;
        width: 240rpx;
        height: 150rpx;
        border-radius: 12rpx 12rpx 12rpx 12rpx;
        background-color: #efefef;
      }
    }
  }

  .footer {
    background: #ffffff;
    display: flex;
    align-items: center;

    .line {
      width: 2rpx;
      background-color: #dddddd;
    }

    .btnItem {
      flex: 1;
      width: 0;
      padding: 34rpx 0;

      display: flex;
      align-items: center;
      justify-content: center;

      font-size: 32rpx;

      &.delete {
        color: #f92c2c;
      }

      &.edit {
        color: #0174f6;
      }
    }
  }
}
</style>
