<template>
  <view class="container">
    <VNavigationBar :title="pageTitle" background-color="#fff" title-color="#333"></VNavigationBar>
    <view class="body">
      <u-form labelPosition="top">
        <view class="card">
          <u-form-item borderBottom label="客户姓名" label-width="200">
            <u-input v-model="userInfo.cusName" border="none" placeholder="请输入客户姓名"></u-input>
          </u-form-item>
          <u-form-item borderBottom label="客户性别" label-width="200">
            <u-radio-group
                v-model="userInfo.sex"
                placement="row"
            >
              <u-radio key="0" label="男" name="0" style="margin-right: 100rpx"></u-radio>
              <u-radio key="1" label="女" name="1"></u-radio>
            </u-radio-group>
          </u-form-item>
          <u-form-item borderBottom label="客户联系方式" label-width="200">
            <u-input v-model="userInfo.phoneNumber" border="none" placeholder="请输入客户手机号" type="number"></u-input>
          </u-form-item>
        </view>

        <view class="card">
          <u-form-item borderBottom label="上传行驶证自动识别" labelWidth="200">
            <u-upload
                :fileList="fileList1"
                @afterRead="afterRead"
                @delete="deletePic"
                name="1"
                :maxCount="1"
                multiple
            ></u-upload>
          </u-form-item>
          <u-form-item borderBottom label="车牌号" labelWidth="200" @click="carInputClick();">
            <u-input
                @click="carInputClick();"
                v-model="car.licenseNumber"
                border="none"
                disabled
                disabledColor="#ffffff"
                placeholder="请输入车牌号"
            ></u-input>
            <u-icon
                slot="right"
                name="arrow-right"
            ></u-icon>
          </u-form-item>
          <!--          @click="brandType = true;"-->
          <u-form-item label="车辆品牌" labelWidth="200">
            <song-data-picker
                ref="songpicker"
                style=" width: 100%;"
                :localdata="brandList"
                popup-title="请选择品牌"
                :openSearch="true"
                @change="onchange"
                @nodeclick="onnodeclick"
            ></song-data-picker>
<!--            <picker @change="picker($event)" :value="arrayIndex" :range="brandList" range-key="brandName" v-if="brandList">-->
<!--              <view class="uni-input">{{ brandList && brandList[arrayIndex] ? brandList[arrayIndex].brandName : '' }}</view>-->
<!--            </picker>-->
          </u-form-item>
          <u-form-item label="车辆型号" labelWidth="200">
            <u-input
                v-model="car.carModel"
                border="none"
                placeholder="请输入车辆型号"
            ></u-input>
          </u-form-item>
          <u-form-item v-if="natureList.length>0" class="formItem" label="车辆性质" labelWidth="200">
            <picker @change="natureChange" :value="natureIndex" :range="natureList" range-key="value" v-if="natureList">
              <view class="uni-input">{{ natureList[natureIndex].value}}</view>
            </picker>
          </u-form-item>
        </view>

        <view class="card">
          <u-form-item borderBottom label="车架号" labelWidth="200">
            <u-input v-model="car.vin" border="none" placeholder="请输入车架号"></u-input>
          </u-form-item>
          <u-form-item borderBottom label="发动机号" labelWidth="200">
            <u-input v-model="car.engineNumber" border="none" placeholder="请输入发动机号"></u-input>
          </u-form-item>
          <u-form-item borderBottom label="年检到期时间" labelWidth="200" @click="openDatePicker('nj'); ">
            <u-input
                v-model="car.nextInspectionDate"
                border="none"
                disabled
                disabledColor="#ffffff"
                placeholder="请选择年检到期时间"
            ></u-input>
            <u-icon
                slot="right"
                name="arrow-right"
            ></u-icon>
          </u-form-item>
          <u-form-item borderBottom label="保险到期时间" labelWidth="200" @click="openDatePicker('bx'); hideKeyboard()">
            <u-input
                v-model="car.insuranceExpiryDate"
                border="none"
                disabled
                disabledColor="#ffffff"
                placeholder="请选择保险到期时间"
            ></u-input>
            <u-icon
                slot="right"
                name="arrow-right"
            ></u-icon>
          </u-form-item>
          <u-form-item label="注册日期时间" labelWidth="200" @click="openDatePicker('zcrq'); hideKeyboard()">
            <u-input
                v-model="car.carRegisterDate"
                border="none"
                disabled
                disabledColor="#ffffff"
                placeholder="请选择注册日期时间"
            ></u-input>
            <u-icon
                slot="right"
                name="arrow-right"
            ></u-icon>
          </u-form-item>
        </view>
      </u-form>


      <keyboard-plate ref="plateNumber" :plateNum.sync='car.licenseNumber' isShow
                      @change="getPlateNum"></keyboard-plate>
      <u-datetime-picker
          v-model="datePickerValue"
          :formatter="formatter"
          :show="datePickerShow"
          mode="date"
          @cancel="datePickerCancel"
          @confirm="datePickerConfirm"
      ></u-datetime-picker>
    </view>
    <view class="footer">
      <view class="btnItem edit" @click="submit">
        确定
      </view>
    </view>
  </view>
</template>

<script>
import VNavigationBar from '@/components/VNavigationBar.vue';
import request from "@/utils/request";
import config from '@/config'
import upload from "@/utils/upload";
import {getDictByCode} from "@/utils/utils";

export default {
  components: {
    VNavigationBar
  },
  data() {
    return {
      pageTitle: '',
      car: {
        // 车牌号
        licenseNumber: '',
        // 型号
        carModelInput: '',
        // 品牌id
        carBrand: '',
        // 车辆类别  字典字段
        carCategory: '',
        // 车辆性质  字典字段
        carNature: '',
        // 注册日期
        carRegisterDate: '',
        // 车辆品牌型号数组
        brandAndModel: [],
      },
      userInfo: {
        cusName:"",
        sex:"0",
        phoneNumber:"",
        car:{}
      },
      bo1: false,
      bo2: true,

      datePickerShow: false,
      datePickerValue: new Date().getTime(),
      pickerConfirmField: 'njDate',
      showType: false,
      brandType: false,
      typeList: [],
      //所有可选车辆品牌
      brandList: [],
      //选中的车辆品牌id
      brandId: '',
      //选中的车辆品牌名称
      brandName: 0,
      fileList1: [],
      imageUrl: '',
      //可选车辆性质范围
      natureList: [],
      natureIndex: 0,
    };
  },
  onLoad(data) {
    // 没有数据 需要赋值一下初始化
    if(data && data.hasOwnProperty("userInfo")){
      let thisUserInfoObj = JSON.parse(data.userInfo)
      console.log("thisUserInfoObj",thisUserInfoObj)
      this.userInfo.cusName = thisUserInfoObj.cusName
      this.userInfo.sex = thisUserInfoObj.sex
      this.userInfo.phoneNumber = thisUserInfoObj.phoneNumber
    }
    if(data && data.hasOwnProperty("phoneNum")){
      this.userInfo.phoneNumber = data.phoneNum
    }
    this.bo1 = false;
    this.bo2 = true;
    this.pageTitle = '添加车辆信息'
    this.getBrandList()
    this.getNatureList()
  },
  methods: {
    onchange(e) {
      this.brandId = e.detail.value[0].id
      this.brandName = e.detail.value[0].brandName
    },
    onnodeclick(node) {
      console.log(node,"node")
    },
    typeSelect(e) {
    },
    // 车辆性质选择事件
    natureChange(event) {
      const newIndex = event.detail.value;
      this.natureIndex = newIndex;
      //
      this.car.carNature = this.natureList[newIndex].value;
    },
    getBrandList() {
      request({
        url: '/admin-api/base/carBrand/page',
        method: 'GET',
        params: {
          pageNo: 1,
          pageSize: 10000
        }
      }).then(res => {
        res.data.records.forEach(item => {
                item.text = item.brandName,
                item.value = item.id
        })
        this.brandList = res.data.records
        if (this.car) {
          for (let i = 0; i < this.brandList.length; i++) {
            if (this.car.carBrand == this.brandList[i].id) {
              this.setCarBrand(this.brandList[i].id,this.brandList[i].brandName)
            }
          }
        }
      })
    },

    // 打开车牌选择器
    carInputClick() {
      this.$refs.plateNumber.open();
    },
    getPlateNum(e) {

    },

    openDatePicker(picker) {
      if (picker === 'nj') {
        this.pickerConfirmField = 'nextInspectionDate'
      } else if (picker === 'bx') {
        this.pickerConfirmField = 'insuranceExpiryDate'
      } else if (picker === 'zcrq') {
        this.pickerConfirmField = 'carRegisterDate'
      }
      this.datePickerShow = true
    },
    datePickerConfirm({value}, field, picker) {
      let date;

      // 检查 value 是否为时间戳
      if (typeof value === 'number') {
        // 如果是时间戳，确保是毫秒单位
        date = new Date(value);
      } else if (typeof value === 'string') {
        // 如果是日期字符串，尝试解析
        date = new Date(value);
      }

      // 检查日期是否有效
      if (isNaN(date.getTime())) {
        console.error('Invalid date:', value);
        return;
      }
      this.car[this.pickerConfirmField] = date.getFullYear() + '-' + (Number(date.getMonth()) + 1 + '').padStart(2, '0') + '-' + (date.getDate() + '').padStart(2, '0')
      this.datePickerCancel(picker)
    },
    datePickerCancel(picker) {
      this.datePickerValue = new Date().getTime()
      this.datePickerShow = false
    },
    formatter(type, value) {
      if (type === 'year') {
        return `${value}年`
      }
      if (type === 'month') {
        return `${value}月`
      }
      if (type === 'day') {
        return `${value}日`
      }
      return value
    },
    // 新增
    async submit() {
      let jsonData = {}
      if(!this.userInfo.cusName){
        uni.showToast({
          title: '请输入客户名称',
          icon: 'none'
        })
      }
      if(!this.userInfo.phoneNumber){
        uni.showToast({
          title: '请输入客户手机号',
          icon: 'none'
        })
      }
      if(!this.car.licenseNumber){
        uni.showToast({
          title: '请输入车牌号',
          icon: 'none'
        })
      }
      this.car.carBrand = this.brandId
      // bus.$emit('updateCarInfo', this.car)
      this.car.brandAndModel = [this.brandId, this.car.carModel]
      //将日期转为时间戳
      if (this.car.nextInspectionDate) {
        this.car.nextInspectionDate = new Date(this.car.nextInspectionDate).getTime()
      }else {
        this.car.nextInspectionDate = undefined
      }
      if (this.car.insuranceExpiryDate) {
        this.car.insuranceExpiryDate = new Date(this.car.insuranceExpiryDate).getTime()
      }else {
        this.car.insuranceExpiryDate = undefined
      }
      if (this.car.carRegisterDate) {
        this.car.carRegisterDate = new Date(this.car.carRegisterDate).getTime()
      }else {
        this.car.carRegisterDate = undefined
      }
      this.userInfo.car = this.car
      //提交保存数据
      request({
        url: '/admin-api/base/custom/saveCustomerAndCar',
        method: 'POST',
        data: this.userInfo,
      }).then(res => {
        if(res.code==200){
          //保存成功
          uni.showToast({
            title: "新增成功",
            icon: 'none'
          })
          setTimeout(()=>{
            uni.navigateTo({
              url: `/pages-order/addOrder/addOrder?phone=${this.userInfo.phoneNumber}&carId=${res.data.carId}`
            });
          },700)
        }else{
          uni.showToast({
            title: res.msg,
            icon: 'none'
          })
        }
      })
    },
    // 查询下拉 车辆性质
    async getNatureList() {
      request({
        url: '/admin-api/system/dict-data/type',
        method: 'get',
        params:{type:"car_nature"}
      }).then((res) => {
        console.log(res)
        if (res.code == 200) {
         this.natureList = res.data
          if (this.bo2 == true) {
            // setTimeout(() => {
            //   this.car.carNature = this.natureList[0].value;
            // }, 15000)
          } else {
            // 如果是修改 遍历当前集合 将index 同步
            this.natureList.forEach((item, index) => {
              if (item.value == this.car.carNature) {
                this.natureIndex = index;
              }
            })
          }
        }
      })
    },
    // 删除图片
    deletePic(event) {
      this[`fileList${event.name}`].splice(event.index, 1)
    },
    // 新增图片
    async afterRead(event) {
      // 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
      let lists = [].concat(event.file)
      let fileListLen = this[`fileList${event.name}`].length
      lists.map((item) => {
        this[`fileList${event.name}`].push({
          ...item,
          status: 'uploading',
          message: '上传中'
        })
      })
      uni.showLoading({
        title: '正在识别中...'
      });
      try {
        for (let i = 0; i < lists.length; i++) {
          const result = await this.uploadFilePromise(lists[i].url)
          let item = this[`fileList${event.name}`][fileListLen]
          this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
            status: 'success',
            message: '',
            url: result
          }))
          fileListLen++
        }
      }catch (e){
        uni.hideLoading()
      }
    },
    uploadFilePromise(url) {
      return new Promise((resolve, reject) => {
        upload({
          url: '/admin-api/infra/file/upload',
          filePath: url
        }).then(res => {
          resolve(config.baseImageUrl +res.data)
          this.car.carLicenseImg = res.data
          this.imageUrl = config.baseImageUrl + res.data
          request({
            url: '/admin-api/base/carMain/vehicleLicenseOCR',
            method: 'POST',
            data: this.imageUrl,
            tenantIdFlag: false
          }).then((res) => {
            this.car.vin = res.data.vin
            this.car.licenseNumber = res.data.plateNo
            this.car.carRegisterDate = res.data.issueDate
            this.car.engineNumber = res.data.engineNo
            //车辆品牌自动定位
            this.brandList.forEach((item, index) => {
              if (item.brandName == res.data.brand) {
                this.setCarBrand(item.id,item.brandName)
              }
            })
            //车辆性质自动定位
            this.natureList.forEach((item, index) => {
              if (item.label == res.data.useCharacter) {
                this.natureIndex = index;
                this.car.carNature = this.natureList[index].value;
              }
            })
            uni.hideLoading()
          })
        })
      })
    },
    /**
     * 设置选中的车辆品牌
     * @param id
     * @param name
     */
    setCarBrand(id,name){
      this.$nextTick(()=>{
        this.brandId = id
        this.brandName = name
        this.$refs.songpicker.inputSelected=[{text:name,value:id}]
      })
    }
  }
}
</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 30rpx;
      padding: 0 30rpx;
      background-color: #fff;
    }
  }

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

    padding: 30rpx 0;

    .btnItem {
      width: 510rpx;
      height: 76rpx;
      background: #0174F6;
      border-radius: 38rpx 38rpx 38rpx 38rpx;

      font-size: 32rpx;
      color: #FFFFFF;

      line-height: 76rpx;
      text-align: center;
    }
  }
}
</style>
