<template>
  <layout-card>
    <el-divider content-position="left">车辆选择</el-divider>
    <el-form ref="formRef" :model="form" :rules="rules" label-width="100px">
      <el-row>
        <el-col :span="6">
          <el-form-item label="登记编号" prop="RECORD_NUMBER">
            <el-input
              v-model="form.RECORD_NUMBER"
              placeholder="请输入登记编号"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="过户车型" prop="ASSIGNED_VEHICLE_MODEL">
            <el-select
              v-model="form.ASSIGNED_VEHICLE_MODEL"
              placeholder="请选择过户车型"
              @change="fnEditVehicleModel"
            >
              <el-option
                v-for="item in assignedVehicleModelList"
                :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_PLATE_NUMBER">
            <el-select
              v-model="form.VEHICLE_PLATE_NUMBER"
              @change="fnGetVehicleInfo"
            >
              <el-option
                v-for="item in form.ALLVEHICLE"
                :key="item.PLATE_NUMBER"
                :label="item.PLATE_NUMBER"
                :value="item.PLATE_NUMBER"
                placeholder="请选择过户车辆"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-divider content-position="left">过户前数据</el-divider>
      <el-row>
        <el-col :span="6">
          <el-form-item label="原车牌号" prop="RAW_PLATE_NUMBER">
            <el-input
              v-model="form.VEHICLE.PLATE_NUMBER"
              placeholder="--"
              disabled
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="原车主/业主" prop="RAW_OWNERS">
            <el-input
              v-model="form.VEHICLE.RAW_OWNERS"
              placeholder="--"
              disabled
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="原车主电话" prop="RAW_OWNERS_NUMBER">
            <el-input
              v-model="form.VEHICLE.RAW_OWNERS_NUMBER"
              placeholder="--"
              disabled
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item
            label="原车辆营运证"
            prop="RAW_VEHICLE_OPERATION_CERTIFICATE"
          >
            <el-input
              v-model="form.VEHICLE.RAW_VEHICLE_OPERATION_CERTIFICATE"
              placeholder="--"
              disabled
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="车架号" prop="FRAMES_NUMBER">
            <el-input
              v-model="form.VEHICLE.FRAMES_NUMBER"
              placeholder="--"
              disabled
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item label="原行驶证照片" prop="RAW_DRIVINGLICENSE_IMG">
            <layout-upload
              v-model:file-list="form.VEHICLE.RAW_DRIVINGLICENSE_IMG"
              list-type="picture-card"
              accept=".jpg,.jpeg,.png"
              delete-to-server
              disabled
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-divider content-position="left">过户后数据</el-divider>
      <el-row>
        <el-col :span="6">
          <el-form-item label="过户类型" prop="ASSIGNED_TYPE">
            <el-select
              v-model="form.ASSIGNED_TYPE"
              placeholder="请选择过户类型"
            >
              <el-option
                v-for="item in relatedClassificationList"
                :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="ASSIGNED_WAY">
            <el-select
              v-model="form.ASSIGNED_WAY"
              placeholder="请选择过户方式"
              @change="fnEditAssignedWay"
            >
              <el-option
                v-for="item in assignedWayList"
                :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="TRANSACTION_DATE">
            <el-date-picker
              v-model="form.TRANSACTION_DATE"
              value-format="YYYY-MM-DD"
              format="YYYY-MM-DD"
              type="date"
              placeholder="请选择办理日期"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item label="现车主/业主" prop="NOW_OWNERS">
            <el-input
              v-model="form.NOW_OWNERS"
              placeholder="请填写现车主/业主"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="现车主电话" prop="NOW_OWNERS_NUMBER">
            <el-input
              v-model="form.NOW_OWNERS_NUMBER"
              placeholder="请填写现车主电话"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="登记人" prop="REGISTRANT">
            <el-input v-model="form.REGISTRANT" placeholder="请填写登记人" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item label="现车牌号" prop="NOW_PLATE_NUMBER">
            <el-input
              v-model="form.NOW_PLATE_NUMBER"
              :disabled="form.ASSIGNED_WAY === '协议过户'"
              label="1"
              placeholder="请填写现车牌号"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="现营运证号" prop="NOW_OPERATION_CERTIFICATE">
            <el-input
              v-model="form.NOW_OPERATION_CERTIFICATE"
              :disabled="form.ASSIGNED_WAY === '协议过户'"
              label="1"
              placeholder="请填写现营运证号"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="现登记日期" prop="NOW_RECORD_DATE">
            <el-date-picker
              v-model="form.NOW_RECORD_DATE"
              value-format="YYYY-MM-DD"
              format="YYYY-MM-DD"
              type="date"
              placeholder="请填写现登记日期"
              :disabled="form.ASSIGNED_WAY === '协议过户'"
              label="1"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item
            label="现车辆营运证照片"
            prop="NOW_VEHICLE_OPERATION_CERTIFICATE"
          >
            <layout-upload
              v-model:file-list="form.NOW_VEHICLE_OPERATION_CERTIFICATE"
              list-type="picture-card"
              accept=".jpg,.jpeg,.png"
              delete-to-server
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="现行驶证照片" prop="NOW_DRIVINGLICENSE_IMG">
            <layout-upload
              v-model:file-list="form.NOW_DRIVINGLICENSE_IMG"
              list-type="picture-card"
              accept=".jpg,.jpeg,.png"
              delete-to-server
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="过户资料" prop="ASSIGNED_MATERIAL">
            <el-input
              v-model="form.ASSIGNED_MATERIAL"
              type="textarea"
              :autosize="{ minRows: 3 }"
              placeholder="请填写过户资料"
            />
          </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-row>
    </el-form>
    <div class="tc mt-10">
      <el-button type="primary" @click="fnSubmit">保存</el-button>
    </div>
  </layout-card>
</template>

<script setup>
import { onMounted, ref } from "vue";
import {
  layoutFnGetAssignedWay,
  layoutFnGetAssignedVehicleModel,
} from "@/assets/js/assigned_manage.js";
import {
  getFreightTrailerView,
} from "@/request/enterprise_management.js";
import {
  findByIdOperatingVehicleInfo,
} from "@/request/operation_vehicle.js";
import LayoutUpload from "@/components/upload/index.vue";
import { debounce } from "throttle-debounce";
import useFormValidate from "@/assets/js/useFormValidate.js";
import { addingPrefixToFile } from "@/assets/js/utils.js";
import {
  setAssignedManageAdd,
  setAssignedManageEdit,
  layoutFnGetScrapVehicleType,
  getAssignedOperationVehicleList,
  getAssignedFreightTrailerList
} from "@/request/assigned_manage.js";
import { setUploadImg } from "@/request/api.js";
import { ElMessage } from "element-plus";
import { useRoute, useRouter } from "vue-router";
const route = useRoute();
const router = useRouter();
const ASSIGNED_ID = route.query.ASSIGNED_ID;
const assignedVehicleModelList = await layoutFnGetAssignedVehicleModel();
const relatedClassificationList = ref(null);

onMounted(async () => {
  const data = await layoutFnGetScrapVehicleType();
  relatedClassificationList.value = JSON.parse(data.value.zTreeNodes);
});

const freightVehicleList = await getAssignedFreightTrailerList();
const assignedWayList = await layoutFnGetAssignedWay();
const operationList = await getAssignedOperationVehicleList();

console.log("筛选后的挂车车辆",freightVehicleList);
const rules = {
  ASSIGNED_VEHICLE_MODEL: [
    { required: true, message: "过户车型不能为空", trigger: "change" },
  ],
  ASSIGNED_VEHICLE: [
    { required: true, message: "过户车辆不能为空", trigger: "blur" },
  ],
  ASSIGNED_TYPE: [
    { required: true, message: "过户类型不能为空", trigger: "change" },
  ],
  ASSIGNED_WAY: [
    { required: true, message: "过户方式不能为空", trigger: "change" },
  ],
  TRANSACTION_DATE: [
    { required: true, message: "办理日期不能为空", trigger: "change" },
  ],
  REGISTRANT: [{ required: true, message: "登记人不能为空", trigger: "blur" }],
  NOW_VEHICLE_OPERATION_CERTIFICATE: [
    { required: true, message: "现车辆营运证照片不能为空", trigger: "blur" },
  ],
  NOW_DRIVINGLICENSE_IMG: [
    { required: true, message: "现行驶证照片不能为空", trigger: "blur" },
  ],
  NOW_OWNERS_NUMBER: [
    { required: true, message: "请输入现车主电话", trigger: "blur" },
    { min: 11, max: 11, message: "请输入11位手机号码", trigger: "blur" },
    {
      pattern:
        /^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[189]))\d{8}$/,
      message: "请输入正确的手机号码",
    },
  ],
};
const formRef = ref(null);
const form = ref({
  VEHICLE_PLATE_NUMBER: "",
  ASSIGNED_ID: "",
  RECORD_NUMBER: "",
  ASSIGNED_TYPE: "",
  RAW_PLATE_NUMBER: "",
  NOW_PLATE_NUMBER: "",
  RAW_OWNERS: "",
  NOW_OWNERS: "",
  ASSIGNED_DATE: "",
  REGISTRANT: "",
  RAW_TRANSPORT_ENTERPRISES: "",
  ASSIGNED_VEHICLE_MODEL: "",
  ASSIGNED_VEHICLE: "",
  RAW_OWNERS_NUMBER: "",
  RAW_VEHICLE_OPERATION_CERTIFICATE: "",
  FRAMES_NUMBER: "",
  RAW_DRIVINGLICENSE_IMG: [],
  ASSIGNED_WAY: "",
  TRANSACTION_DATE: "",
  NOW_OWNERS_NUMBER: "",
  NOW_DRIVINGLICENSE_IMG: [],
  NOW_VEHICLE_OPERATION_CERTIFICATE: [],
  ASSIGNED_MATERIAL: "",
  REMARK: "",
  VEHICLE_TYPE: "",
  VEHICLE_BRAND: "",
  VEHICLE_MODEL: "",
  ENGINE_NUMBER: "",
  POWER_TYPE: "",
  EMISSION_STANDARD: "",
  RAW_CONTACT_NUMBE: "",
  NOW_CONTACT_NUMBER: "",
  RAW_OPERATION_CERTIFICATE: "",
  NOW_OPERATION_CERTIFICATE: "",
  TRANSPORT_ENTERPRISES: "",
  RAW_CONTACT_NUMBER: "",
  NOW_RECORD_DATE: "",
  OPERATING_ID: "",
  OPERATIONINFO: {},
  PLATE_NUMBER: "",
  VEHICLEOWNER: "",
  VEHICLEOWNER_NUMBER: "",
  OPERATING_CERTIFICATE: "",
  DRIVINGLICENSE_PHOTO: "",
  ALLVEHICLE: {},
  OPERATIONVEHICLELIST: [],
  FREIGHTVEHICLELIST: [],
  VEHICLE: {
    PLATE_NUMBER: "",
    RAW_OWNERS: "",
    RAW_OWNERS_NUMBER: "",
    RAW_VEHICLE_OPERATION_CERTIFICATE: "",
    FRAMES_NUMBER: "",
    RAW_DRIVINGLICENSE_IMG: "",
  },
});
const info = ref({});
const fnEditVehicleModel = async () => {
  form.value.VEHICLE_PLATE_NUMBER = null;
  form.value.VEHICLE = {};
  if (form.value.ASSIGNED_VEHICLE_MODEL === "运输车辆") {
    form.value.ALLVEHICLE = operationList.varList;
    form.value.OPERATIONVEHICLELIST = form.value.ALLVEHICLE;
  } else if (form.value.ASSIGNED_VEHICLE_MODEL === "货运挂车") {
    form.value.ALLVEHICLE = freightVehicleList.varList;
    form.value.FREIGHTVEHICLELIST = form.value.ALLVEHICLE;
  }
};
const fnGetVehicleInfo = async () => {
  if (form.value.ASSIGNED_VEHICLE_MODEL === "运输车辆") {
    for (let i = 0; i < form.value.OPERATIONVEHICLELIST.length; i++) {
      if (
        form.value.OPERATIONVEHICLELIST[i].PLATE_NUMBER ===
        form.value.VEHICLE_PLATE_NUMBER
      ) {
        const OPERATING_ID = form.value.OPERATIONVEHICLELIST[i].OPERATING_ID;
        const resData = await findByIdOperatingVehicleInfo({ OPERATING_ID });
        info.value = resData.pd;
        form.value.VEHICLE.PLATE_NUMBER = info.value.PLATE_NUMBER;
        form.value.VEHICLE.RAW_OWNERS = info.value.VEHICLEOWNER;
        form.value.VEHICLE.RAW_OWNERS_NUMBER = info.value.VEHICLEOWNER_NUMBER;
        form.value.VEHICLE.RAW_VEHICLE_OPERATION_CERTIFICATE =
          info.value.OPERATING_CERTIFICATE;
        form.value.VEHICLE.FRAMES_NUMBER = info.value.FRAMES_NUMBER;
        form.value.VEHICLE.RAW_DRIVINGLICENSE_IMG =
          info.value.DRIVINGLICENSE_PHOTO;
        form.value.FRAMES_NUMBER = info.value.FRAMES_NUMBER;
        form.value.VEHICLE_BRAND = info.value.VEHICLE_BRAND;
        form.value.VEHICLE_MODEL = info.value.VEHICLE_MODEL;
        form.value.ENGINE_NUMBER = info.value.ENGINE_NUMBER;
        form.value.POWER_TYPE = info.value.FUEL_TYPE;
        form.value.EMISSION_STANDARD = info.value.EMISSION_STANDARD;
        form.value.RAW_PLATE_NUMBER = info.value.PLATE_NUMBER;
        form.value.RAW_OWNERS = info.value.VEHICLEOWNER;
        form.value.RAW_CONTACT_NUMBER = info.value.CONTACT_NUMBER;
        form.value.RAW_OPERATION_CERTIFICATE = info.value.OPERATING_CERTIFICATE;
        form.value.VEHICLE.RAW_DRIVINGLICENSE_IMG = addingPrefixToFile(
          resData.drivinglicensephoto
        );
      }
    }
  } else if (form.value.ASSIGNED_VEHICLE_MODEL === "货运挂车") {
    for (let i = 0; i < form.value.FREIGHTVEHICLELIST.length; i++) {
      if (
        form.value.FREIGHTVEHICLELIST[i].PLATE_NUMBER ===
        form.value.VEHICLE_PLATE_NUMBER
      ) {
        const FREIGHTTRAILER_ID =
          form.value.FREIGHTVEHICLELIST[i].FREIGHTTRAILER_ID;
        const resData = await getFreightTrailerView({ FREIGHTTRAILER_ID });
        console.log("选中的货运挂车信息", resData);
        info.value = resData.pd;
        form.value.VEHICLE.PLATE_NUMBER = info.value.PLATE_NUMBER;
        form.value.VEHICLE.RAW_OWNERS = info.value.CAR_OWNERS;
        form.value.VEHICLE.RAW_OWNERS_NUMBER = info.value.CAR_OWNERS_TEL;
        form.value.VEHICLE.RAW_VEHICLE_OPERATION_CERTIFICATE =
          info.value.OPER_CERTIFICATE_NUM;
        form.value.VEHICLE.FRAMES_NUMBER = info.value.VIN;
        form.value.VEHICLE.RAW_DRIVINGLICENSE_IMG =
          info.value.DRIVING_LICENSE_IMG;
        form.value.VEHICLE_BRAND = info.value.TRAILER_BRAND;
        form.value.VEHICLE_MODEL = info.value.TRAILER_MODEL;
        form.value.RAW_PLATE_NUMBER = info.value.PLATE_NUMBER;
        form.value.RAW_OWNERS = info.value.CAR_OWNERS;
        form.value.RAW_CONTACT_NUMBER = info.value.CAR_OWNERS_TEL;
        form.value.RAW_OPERATION_CERTIFICATE = info.value.OPER_CERTIFICATE_NUM;
        form.value.FRAMES_NUMBER = info.value.VIN;

        form.value.ENGINE_NUMBER = info.value.TRAILER_MODEL;
        form.value.POWER_TYPE = info.value.TRAILER_MODEL;
        form.value.VEHICLE.RAW_DRIVINGLICENSE_IMG = addingPrefixToFile(
          resData.drivingLicenseImgs
        );
      }
    }
  }
};
const fnEditAssignedWay = async () => {
  if (form.value.ASSIGNED_WAY === "协议过户") {
    form.value.NOW_PLATE_NUMBER = null;
    form.value.NOW_OPERATION_CERTIFICATE = null;
    form.value.NOW_RECORD_DATE = null;
  }
};
const fnGetData = async () => {
  if (!ASSIGNED_ID) return;
  const resData = await setAssignedManageEdit({ ASSIGNED_ID });
  form.value = resData.pd;
  form.value.NOW_VEHICLE_OPERATION_CERTIFICATE = addingPrefixToFile(
    resData.nowVehicleOperationCertificateImgs
  );
  form.value.NOW_DRIVINGLICENSE_IMG = addingPrefixToFile(
    resData.nowDrivinglicenseImg
  );
};
fnGetData();
const fnSubmit = debounce(
  1000,
  async () => {
    await useFormValidate(formRef);
    const resData = !ASSIGNED_ID
      ? await setAssignedManageAdd({ ...form.value })
      : await setAssignedManageEdit({
          ...form.value,
          ASSIGNED_ID,
        });
    const currentAssignedId = resData.pd.ASSIGNED_ID;
    for (
      let i = 0;
      i < form.value.NOW_VEHICLE_OPERATION_CERTIFICATE.length;
      i++
    ) {
      if (form.value.NOW_VEHICLE_OPERATION_CERTIFICATE[i].raw)
        await fnUploadImage(
          currentAssignedId,
          form.value.NOW_VEHICLE_OPERATION_CERTIFICATE[i].raw,
          120
        );
    }
    for (let i = 0; i < form.value.NOW_DRIVINGLICENSE_IMG.length; i++) {
      if (form.value.NOW_DRIVINGLICENSE_IMG[i].raw)
        await fnUploadImage(
          currentAssignedId,
          form.value.NOW_DRIVINGLICENSE_IMG[i].raw,
          121
        );
    }
    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>
