<template>
  <layout-card>
    <el-divider content-position="left">基本信息</el-divider>
    <el-form
      ref="formRef"
      :model="data.form"
      :rules="rules"
      label-width="100px"
    >
      <el-row>
        <el-col :span="6">
          <el-form-item label="编号" prop="GOODSSELFNUMBER">
            <el-input v-model="data.form.GOODSSELFNUMBER" placeholder="请填写自编号" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item prop="PLATE_NUMBER" label="车牌号">
            <el-input v-model = "data.form.PLATE_NUMBER" placeholder = "请填写车牌号"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="车辆颜色" prop="VEHICLE_COLOR">
            <el-select v-model="data.form.VEHICLE_COLOR">
              <el-option
                v-for="item in getVehicleColorList"
                :key="item.BIANMA"
                :label="item.NAME"
                :value="item.NAME"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="车架号" prop="FRAMES_NUMBER">
            <el-input v-model="data.form.FRAMES_NUMBER" placeholder="请填写车架号"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="发动机号" prop="ENGINE_NUMBER">
            <el-input v-model="data.form.ENGINE_NUMBER" placeholder="请填写发动机号"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="营运证号" prop="OPERATING_CERTIFICATE">
            <el-input v-model="data.form.OPERATING_CERTIFICATE" placeholder="请填写营运证号"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="运输类别" prop="TRANSPORT_TYPE">
            <el-select v-model="data.form.TRANSPORT_TYPE">
              <el-option
                v-for="item in getTransportCategoryList"
                :key="item.BIANMA"
                :label="item.NAME"
                :value="item.NAME"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="归属部门" prop="BELONGING_DEPARTMENT">
            <el-select v-model="data.form.BELONGING_DEPARTMENT" placeholder="请选择归属部门">
              <el-option
                v-for="item in getBelongingDepartment"
                :key="item.BIANMA"
                :label="item.NAME"
                :value="item.NAME"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="车辆类型" prop="VEHICLE_TYPE">
            <el-select v-model="data.form.VEHICLE_TYPE">
              <el-option
                v-for="item in getVehicleTypeList"
                :key="item.BIANMA"
                :label="item.NAME"
                :value="item.NAME"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="车主/业主" prop="VEHICLEOWNER">
            <el-input v-model="data.form.VEHICLEOWNER" placeholder="请填写车主/业主"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="车主电话" prop="VEHICLEOWNER_NUMBER">
            <el-input v-model="data.form.VEHICLEOWNER_NUMBER" placeholder="请填写车主电话"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="车主住址" prop="VEHICLEOWNER_ADDRESS">
            <el-input v-model="data.form.VEHICLEOWNER_ADDRESS" placeholder="请填写车主住址"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="联系人" prop="CONTACT">
            <el-input v-model="data.form.CONTACT" placeholder="请填写联系人"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="联系电话" prop="CONTACT_NUMBER">
            <el-input v-model="data.form.CONTACT_NUMBER" placeholder="请填写联系电话"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="家庭住址" prop="HOME_ADDRESS">
            <el-input v-model="data.form.HOME_ADDRESS" placeholder="请输入家庭住址"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="实际住址" prop="PHYSICAL_ADDRESS">
            <el-input v-model="data.form.PHYSICAL_ADDRESS" placeholder="请输入实际住址"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="初登日期" prop="FIRSTSHOW_DATE">
            <el-date-picker
              v-model="data.form.FIRSTSHOW_DATE"
              value-format="YYYY-MM-DD"
              format="YYYY-MM-DD"
              type="date"
              placeholder="请选择初登日期"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="发证日期" prop="CERTIFICATE_DATE">
            <el-date-picker
              v-model="data.form.CERTIFICATE_DATE"
              value-format="YYYY-MM-DD"
              format="YYYY-MM-DD"
              type="date"
              placeholder="请选择发证日期"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="到期日期" prop="EXPIRE_DATE">
            <el-date-picker
              v-model="data.form.EXPIRE_DATE"
              value-format="YYYY-MM-DD"
              format="YYYY-MM-DD"
              type="date"
              placeholder="请选择到期日期"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="车载设备" prop="VEHICLE_EQUIPMENT">
            <el-select v-model="data.form.VEHICLE_EQUIPMENT">
              <el-option
                v-for="item in getMobileUnitList"
                :key="item.BIANMA"
                :label="item.NAME"
                :value="item.NAME"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-divider content-position="left">检查内容</el-divider>
        <el-col :span="6">
          <el-form-item label="车辆品牌" prop="VEHICLE_BRAND">
            <el-input v-model="data.form.VEHICLE_BRAND" placeholder="请填写车辆品牌"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="车辆型号" prop="VEHICLE_MODEL">
            <el-input v-model="data.form.VEHICLE_MODEL" placeholder="请填写车辆型号"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="燃料类型" prop="FUEL_TYPE">
            <el-select v-model="data.form.FUEL_TYPE">
              <el-option
                v-for="item in getFuelTypeList"
                :key="item.BIANMA"
                :label="item.NAME"
                :value="item.NAME"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="排放标准" prop="EMISSION_STANDARD">
            <el-select v-model="data.form.EMISSION_STANDARD">
              <el-option
                v-for="item in getEmissionStandardList"
                :key="item.BIANMA"
                :label="item.NAME"
                :value="item.NAME"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="核定总质量" prop="VOUCH_TOTALMASS">
            <el-input v-model="data.form.VOUCH_TOTALMASS" placeholder="请填写核定总质量"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="核定载人数" prop="VOUCH_NUMBERLOAD">
            <el-input v-model="data.form.VOUCH_NUMBERLOAD" placeholder="请填写核定载人数"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="核定载质量" prop="VOUCH_PAYLOAD">
            <el-input v-model="data.form.VOUCH_PAYLOAD" placeholder="请填写核定载质量"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="准牵引质量" prop="RACTIONMASS_QUALITY">
            <el-input v-model="data.form.RACTIONMASS_QUALITY" placeholder="请填写准牵引质量"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="备注" prop="REMARK">
            <el-input
              v-model="data.form.REMARK"
              placeholder="请填写备注"
              type="textarea"
              :autosize="{ minRows: 3 }"
            />
          </el-form-item>
        </el-col>
        <el-divider content-position="left">相关照片</el-divider>
        <el-col :span="7">
          <el-form-item label="上传车头图片" prop="HEADSTOCK_PHOTO">
            <layout-upload
              v-model:file-list="data.form.HEADSTOCK_PHOTO"
              list-type="picture-card"
              accept=".jpg,.jpeg,.png"
            />
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item label="上传行驶证照片" prop="DRIVINGLICENSE_PHOTO">
            <layout-upload
              v-model:file-list="data.form.DRIVINGLICENSE_PHOTO"
              list-type="picture-card"
              accept=".jpg,.jpeg,.png"
            />
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item label="上传营运证照片" prop="OPERATING_CERTIFICATE_PHOTO">
            <layout-upload
              v-model:file-list="data.form.OPERATING_CERTIFICATE_PHOTO"
              list-type="picture-card"
              accept=".jpg,.jpeg,.png"
            />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="车辆资料" prop="VEHICLE_MATERIAL">
            <el-input
              v-model="data.form.VEHICLE_MATERIAL"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div class="tc mt-10">
      <el-button type="primary" @click="fnSubmit">保存</el-button>
    </div>
  </layout-card>
</template>

<script setup>
import { reactive, ref } from "vue";
import {
  layoutFnGetVehicleColor,
  layoutFnGetTransportCategory,
  layoutFnGetBelongingDepartment,
  layoutFnGetFuelType,
  layoutFnGetEmissionStandard,
  layoutFnGetVehicleType,
  layoutFnGetMobileUnit,
} from "@/assets/js/operation_vehicle.js";
import {
  findByIdOperatingVehicleInfo,
  editOperatingVehicleInfo
} from "@/request/operation_vehicle.js";
import useFormValidate from "@/assets/js/useFormValidate.js";

import LayoutUpload from "@/components/upload/index.vue";
import { ElMessage } from "element-plus";
import { debounce } from "throttle-debounce";
import { useRoute, useRouter } from "vue-router";



const route = useRoute();
const router = useRouter();
const { OPERATING_ID } = route.query;

const rules = {
  PLATE_NUMBER: [{ required: true, message: "车牌号不能为空", trigger: "blur" }],
  VEHICLE_COLOR: [{required: true, message: "车辆颜色不能为空", trigger: "change"}],
  FRAMES_NUMBER: [{required: true, message: "车架号不能为空", trigger: "change"}],
  OPERATING_CERTIFICATE: [{required: true, message: "营运证号不能为空", trigger: "blur"}],
  TRANSPORT_TYPE: [{ required: true, message: "运输类别不能为空", trigger: "change" }],
  VEHICLE_TYPE: [{ required: true, message: "车辆类型不能为空", trigger: "blur" }],
  VEHICLEOWNER: [{ required: true, message: "车主/业主不能为空", trigger: "blur" }],
  VEHICLEOWNER_NUMBER: [{required: true, message: "车主电话不能为空", trigger: "blur"}],
  CONTACT: [{required: true, message: "联系人不能为空", trigger: "blur"}],
  CONTACT_NUMBER: [{required: true, message: "联系电话不能为空", trigger: "blur"}],
  FIRSTSHOW_DATE: [{required: true, message: "初登日期不能为空", trigger: "blur"}],
  VEHICLE_EQUIPMENT: [{required: true, message: "车载设备不能为空", trigger: "change"}],
};
const formRef = ref(null);
const data = reactive({
  form: {
    GOODSSELFNUMBER: "",
    PLATE_NUMBER: "",
    VEHICLE_COLOR: "",
    FRAMES_NUMBER: "",
    ENGINE_NUMBER: "",
    OPERATING_CERTIFICATE: [],
    TRANSPORT_ENTERPRISES: "",
    TRANSPORT_TYPE: "",
    BELONGING_DEPARTMENT: "",
    VEHICLE_TYPE: "",
    VEHICLEOWNER: "",
    VEHICLEOWNER_NUMBER: "",
    VEHICLEOWNER_ADDRESS: "",
    CONTACT: "",
    CONTACT_NUMBER: "",
    HOME_ADDRESS: "",
    PHYSICAL_ADDRESS: "",
    FIRSTSHOW_DATE: "",
    CERTIFICATE_DATE: "",
    EXPIRE_DATE: "",
    GOVERNMENT_OVERSIGHT: "",
    VEHICLE_BRAND: "",
    VEHICLE_MODEL: "",
    FUEL_TYPE: "",
    EMISSION_STANDARD: "",
    VOUCH_TOTALMASS: "",
    VOUCH_NUMBERLOAD: "",
    VOUCH_PAYLOAD: "",
    RACTIONMASS_QUALITY: "",
    REMARK: "",
    HEADSTOCK_PHOTO: [],
    DRIVINGLICENSE_PHOTO: [],
    OPERATING_CERTIFICATE_PHOTO: [],
    NETWORK_STATUS: "",
    DYNAMIC_SUPERVISION: "",
    ACTIVE_SAFETY: "",
    DRIVINGPREMIT_STATUS: "",
    TRANSPORT_CATEGORY: "",
    VEHICLE_MATERIAL: "",
    FREIGHT_TYPE: "",
  },
});
const getVehicleColorList = await layoutFnGetVehicleColor();
const getTransportCategoryList = await layoutFnGetTransportCategory();
const getBelongingDepartment = await layoutFnGetBelongingDepartment();
const getFuelTypeList = await layoutFnGetFuelType();
const getEmissionStandardList = await layoutFnGetEmissionStandard();
const getVehicleTypeList = await layoutFnGetVehicleType();
const getMobileUnitList = await layoutFnGetMobileUnit();

const fnGetData = async () => {
  if(OPERATING_ID) {
    const resData = await findByIdOperatingVehicleInfo({ OPERATING_ID });
    data.form = resData.pd;
  }
}
fnGetData();
const fnSubmit = debounce(
  1000,
  async () => {
    await useFormValidate(formRef);
    const formData = new FormData();
    Object.keys(data.form).forEach((key) => {
      formData.append(key, data.form[key]);
    });
    formData.delete("HEADSTOCK_PHOTO");
    formData.delete("DRIVINGLICENSE_PHOTO");
    formData.delete("OPERATING_CERTIFICATE_PHOTO");
    if(data.form.HEADSTOCK_PHOTO){
      if (data.form.HEADSTOCK_PHOTO[0].raw) formData.append("headstockFile", data.form.HEADSTOCK_PHOTO[0].raw);
      formData.append("headstockFileType", !!data.form.HEADSTOCK_PHOTO[0].raw);
    }
    if(data.form.DRIVINGLICENSE_PHOTO){
      if (data.form.DRIVINGLICENSE_PHOTO[0].raw) formData.append("drivinglicenseFile", data.form.DRIVINGLICENSE_PHOTO[0].raw);
      formData.append("drivinglicenseFileType", !!data.form.DRIVINGLICENSE_PHOTO[0].raw);
    }
    if(data.form.OPERATING_CERTIFICATE_PHOTO){
      if (data.form.OPERATING_CERTIFICATE_PHOTO[0].raw) formData.append("operatingCertificateFile", data.form.OPERATING_CERTIFICATE_PHOTO[0].raw);
      formData.append("operatingCertificateFileType", !!data.form.OPERATING_CERTIFICATE_PHOTO[0].raw);
    }
    await editOperatingVehicleInfo(formData);
    ElMessage.success("提交成功");
    router.back();
  },
);
</script>

<style scoped lang="scss"></style>
