<template>
  <layout-card>
    <el-form ref="formRef" :model="form" :rules="rules" label-width="100px">
      <el-row :gutter="20">
        <el-col :span="24">
          <el-divider content-position="left">基本信息</el-divider>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item label="编号" prop="GOODSSELFNUMBER">
            <el-input v-model="form.GOODSSELFNUMBER" placeholder="请填写编号" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item prop="PLATE_NUMBER" label="车牌号">
            <el-input v-model = "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="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="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="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="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="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="form.BELONGING_DEPARTMENT">
              <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="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="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="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="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="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="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="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="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="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="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="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="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="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="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="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="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="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="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="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="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="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="form.HEADSTOCK_PHOTO"
              list-type="picture-card"
              accept=".jpg,.jpeg,.png"
              delete-to-server
            />
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item label="行驶证照片" prop="DRIVINGLICENSE_PHOTO">
            <layout-upload
              v-model:file-list="form.DRIVINGLICENSE_PHOTO"
              list-type="picture-card"
              accept=".jpg,.jpeg,.png"
              delete-to-server
            />
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item label="营运证照片" prop="OPERATING_CERTIFICATE_PHOTO">
            <layout-upload
              v-model:file-list="form.OPERATING_CERTIFICATE_PHOTO"
              list-type="picture-card"
              accept=".jpg,.jpeg,.png"
              delete-to-server
            />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="车辆资料" prop="VEHICLE_MATERIAL">
            <el-input
              v-model="form.VEHICLE_MATERIAL"
              placeholder="请填写车辆资料"
              type="textarea"
              :autosize="{ minRows: 3 }"
            />
          </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 { ref } from "vue";
import {
  layoutFnGetVehicleColor,
  layoutFnGetTransportCategory,
  layoutFnGetBelongingDepartment,
  layoutFnGetFuelType,
  layoutFnGetEmissionStandard,
  layoutFnGetVehicleType,
  layoutFnGetMobileUnit,
} from "@/assets/js/operation_vehicle.js";
import {
  addOperatingVehicleInfo,
  editOperatingVehicleInfo,
  findByIdOperatingVehicleInfo
} 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";
import { setUploadImg } from "@/request/api.js";
import { addingPrefixToFile } from "@/assets/js/utils.js";
const router = useRouter();
const route = useRoute();
const OPERATING_ID = route.query.OPERATING_ID

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"}],
  HEADSTOCK_PHOTO: [{required: true, message: "车头照片不能为空", trigger: "blur"}],
  DRIVINGLICENSE_PHOTO: [{required: true, message: "行驶证照片不能为空", trigger: "blur"}],
  OPERATING_CERTIFICATE_PHOTO: [{required: true, message: "营运证照片不能为空", trigger: "blur"}],
};
const formRef = ref(null);
const form = ref({
  GOODSSELFNUMBER: '',
  PLATE_NUMBER: '',
  VEHICLE_COLOR: '',
  FRAMES_NUMBER: '',
  ENGINE_NUMBER: '',
  MANAGING_ENTERPRISE: '',
  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: '',
  VEHICLE_EQUIPMENT: '',
  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: '',
  HOME_TERRITORY: '',
  MANAGEMENT_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) return;
  const resData = await findByIdOperatingVehicleInfo({ OPERATING_ID });
  form.value = resData.pd;
  form.value.HEADSTOCK_PHOTO = addingPrefixToFile(
    resData.headstockphoto
  );
  form.value.DRIVINGLICENSE_PHOTO = addingPrefixToFile(
    resData.drivinglicensephoto
  );
  form.value.OPERATING_CERTIFICATE_PHOTO = addingPrefixToFile(
    resData.operatingcertificatephoto
  );
};
fnGetData();
const fnSubmit = debounce(
  1000,
  async () => {
    await useFormValidate(formRef);
    const resData = ! OPERATING_ID
      ? await addOperatingVehicleInfo({...form.value} )
      : await editOperatingVehicleInfo({...form.value, OPERATING_ID:OPERATING_ID});
    const currentOperatingVehicleId = resData.pd.OPERATING_ID
    for (let i = 0; i < form.value.HEADSTOCK_PHOTO.length; i++){
      if(form.value.HEADSTOCK_PHOTO[i].raw) {
        await fnUploadImage(currentOperatingVehicleId, form.value.HEADSTOCK_PHOTO[i].raw, 120)
      }
    }
    for (let i = 0; i < form.value.DRIVINGLICENSE_PHOTO.length; i++){
      if(form.value.DRIVINGLICENSE_PHOTO[i].raw) {
        await fnUploadImage(currentOperatingVehicleId, form.value.DRIVINGLICENSE_PHOTO[i].raw, 121)
      }
    }
    for (let i = 0; i < form.value.OPERATING_CERTIFICATE_PHOTO.length; i++){
      if(form.value.OPERATING_CERTIFICATE_PHOTO[i].raw) {
        await fnUploadImage(currentOperatingVehicleId, form.value.OPERATING_CERTIFICATE_PHOTO[i].raw, 122)
      }
    }
    ElMessage.success("提交成功");
    router.back();
  },
    { atBegin: true }
);
const fnUploadImage = async (HIDDEN_ID, FFILE, TYPE) => {
  const formData = new FormData();
  formData.append("FOREIGN_KEY", HIDDEN_ID);
  formData.append("TYPE", TYPE);
  formData.append("FFILE", FFILE);
  await setUploadImg(formData);
};
</script>

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