<template>
    <layout-card>
        <el-form ref="formRef" :rules="rules" :model="form" label-width="140px">
            <el-row :gutter="20">
                <el-col :span="24">
                    <el-divider content-position="left">基本信息</el-divider>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="自编号" prop="NUM">
                        <el-input v-model="form.NUM"  maxlength="50" show-word-limit/>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="车牌号" prop="PLATE_NUMBER">
                        <el-input v-model="form.PLATE_NUMBER"  maxlength="50" show-word-limit/>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="车架号" prop="VIN">
                        <el-input v-model="form.VIN" maxlength="50" show-word-limit/>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="车身编号" prop="VEHICLE_BODY_NUMBER">
                        <el-input v-model="form.VEHICLE_BODY_NUMBER" maxlength="50" show-word-limit/>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="挂车类型" prop="TRAILER_TYPE">
                        <el-input v-model="form.TRAILER_TYPE" maxlength="50" show-word-limit/>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="营运证号" prop="OPER_CERTIFICATE_NUM">
                        <el-input v-model="form.OPER_CERTIFICATE_NUM" maxlength="50" show-word-limit/>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="归属部门" prop="BELONGING_DEPT">
                        <layout-department v-model="form.BELONGING_DEPT"/>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="车主/业户" prop="CAR_OWNERS">
                        <el-input v-model="form.CAR_OWNERS" maxlength="50" show-word-limit/>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="车主电话" prop="CAR_OWNERS_TEL">
                        <el-input v-model="form.CAR_OWNERS_TEL" maxlength="11" show-word-limit/>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="联系人" prop="CONTACTS">
                        <el-input v-model="form.CONTACTS" maxlength="50" show-word-limit/>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="联系电话" prop="CONTACT_PHONE">
                        <el-input v-model="form.CONTACT_PHONE" maxlength="11" show-word-limit/>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="初登日期" prop="INITIAL_REGISTRATION_DATE">
                        <el-date-picker
                                v-model="form.INITIAL_REGISTRATION_DATE"
                                value-format="YYYY-MM-DD"
                                format="YYYY-MM-DD"
                                type="date"
                        />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <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"
                        />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="到期日期" prop="DUE_DATE">
                        <el-date-picker
                                v-model="form.DUE_DATE"
                                value-format="YYYY-MM-DD"
                                format="YYYY-MM-DD"
                                type="date"
                        />
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-divider content-position="left">详细信息</el-divider>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="挂车品牌" prop="TRAILER_BRAND">
                        <el-input v-model="form.TRAILER_BRAND" maxlength="50" show-word-limit/>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="挂车型号" prop="TRAILER_MODEL">
                        <el-input v-model="form.TRAILER_MODEL" maxlength="50" show-word-limit/>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="核定总质量" prop="APPROVED_TOTAL_MASS">
                        <el-input v-model="form.APPROVED_TOTAL_MASS" maxlength="50" show-word-limit/>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="核定载质量" prop="APPROVED_LOAD_CAPACITY">
                        <el-input v-model="form.APPROVED_LOAD_CAPACITY" maxlength="50" show-word-limit/>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="容积/体积" prop="VOLUME">
                        <el-input v-model="form.TEAM_NAME" maxlength="50" show-word-limit/>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="备注" prop="NOTES">
                        <el-input
                                v-model="form.NOTES"
                                type="textarea"
                                :autosize="{ minRows: 3 }"
                                maxlength="250" show-word-limit
                        />
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-divider content-position="left">相关照片</el-divider>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="挂车照片" prop="TRAILER_IMG">
                        <layout-upload
                                v-model:file-list="form.TRAILER_IMG"
                                list-type="picture-card"
                                accept=".jpg,.jpeg,.png"

                                delete-to-server
                        />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="行驶证照片" prop="DRIVING_LICENSE_IMG">
                        <layout-upload
                                v-model:file-list="form.DRIVING_LICENSE_IMG"
                                list-type="picture-card"
                                accept=".jpg,.jpeg,.png"

                                delete-to-server
                        />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="运营证照片" prop="OPER_CERTIFICATE_IMG">
                        <layout-upload
                                v-model:file-list="form.OPER_CERTIFICATE_IMG"
                                list-type="picture-card"
                                accept=".jpg,.jpeg,.png"

                                delete-to-server
                        />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="挂车资料" prop="TRAILER_INFO">
                        <layout-upload
                                v-model:file-list="form.TRAILER_INFO"
                                list-type="picture-card"
                                accept=".jpg,.jpeg,.png"

                                delete-to-server
                        />
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <div class="mt-10 tc">
            <el-button type="primary" @click="fnSubmit">保存</el-button>
        </div>
    </layout-card>
</template>

<script setup>
    import LayoutUpload from "@/components/upload/index.vue";
    import LayoutDepartment from "@/components/department/index.vue";
    import { ref } from "vue";
    import { debounce } from "throttle-debounce";
    import {getFreightTrailerView, setFreightTrailerAdd ,setFreightTrailerEdit,} from "@/request/enterprise_management.js";
    import { setUploadImg } from "@/request/api.js";
    import { ElMessage } from "element-plus";
    import { useRoute, useRouter, } from "vue-router";
    import useFormValidate from "@/assets/js/useFormValidate.js";
    import { addingPrefixToFile } from "@/assets/js/utils.js";
    const route = useRoute();
    const router = useRouter();
    const FREIGHTTRAILER_ID = route.query.FREIGHTTRAILER_ID
    const formRef = ref(null);
    const form = ref({
        NUM:'',
        PLATE_NUMBER:'',
        VIN:'',
        VEHICLE_BODY_NUMBER:'',
        TRAILER_TYPE:'',
        OPER_CERTIFICATE_NUM:'',
        BELONGING_DEPT:'',
        CAR_OWNERS:'',
        CAR_OWNERS_TEL:'',
        CONTACTS:'',
        CONTACT_PHONE:'',
        INITIAL_REGISTRATION_DATE:'',
        CERTIFICATE_DATE:'',
        DUE_DATE:'',
        TRAILER_BRAND:'',
        TRAILER_MODEL:'',
        APPROVED_TOTAL_MASS:'',
        APPROVED_LOAD_CAPACITY:'',
        VOLUME:'',
        NOTES:'',
        TRAILER_IMG:[],
        DRIVING_LICENSE_IMG:[],
        OPER_CERTIFICATE_IMG:[],
        TRAILER_INFO:[],
    });
    const isVehicleNumber = (rule, vehicleNumber, callback)=>{
        if(vehicleNumber){
            var xreg=/^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}(([0-9]{5}[DF]$)|([DF][A-HJ-NP-Z0-9][0-9]{4}$))/;
            var creg=/^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-HJ-NP-Z0-9]{4}[A-HJ-NP-Z0-9挂学警港澳]{1}$/;
            if(vehicleNumber.length === 7){
                 if(creg.test(vehicleNumber)===false){callback(new Error("格式错误"))}else callback();
            } else if(vehicleNumber.length === 8){
                if(xreg.test(vehicleNumber)===false){callback(new Error("格式错误"))}else callback();
            } else{
                callback(new Error("格式错误"))
            }
        }else callback();

    }
    const rules = {
        PLATE_NUMBER: [
            { required: true, message: "请输入", trigger: "blur" },
            { validator: isVehicleNumber, trigger: "blur" },
            ],
        VIN: [{ required: true, message: "请输入", trigger: "blur" }],
        TRAILER_TYPE: [{ required: true, message: "请输入", trigger: "blur" }],
        CAR_OWNERS: [{ required: true, message: "请输入", trigger: "blur" }],
        CAR_OWNERS_TEL: [
            { 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: "请输入正确的手机号码",
            },
            ],
        CONTACTS: [{ required: true, message: "请输入", trigger: "blur" }],
        CONTACT_PHONE: [
            { 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: "请输入正确的手机号码",
            },],
        INITIAL_REGISTRATION_DATE: [{ required: true, message: "请输入", trigger: "blur" }],
    }
    const fnGetData = async () => {
        if (!FREIGHTTRAILER_ID) return;
        const resData = await getFreightTrailerView({ FREIGHTTRAILER_ID });
        form.value = resData.pd;
        form.value.TRAILER_IMG = addingPrefixToFile(
            resData.trailerImgs
        );
        form.value.DRIVING_LICENSE_IMG = addingPrefixToFile(
            resData.drivingLicenseImgs
        );
        form.value.OPER_CERTIFICATE_IMG = addingPrefixToFile(
            resData.operCertificateImgs
        );
        form.value.TRAILER_INFO = addingPrefixToFile(
            resData.trailerInfoImgs
        );
    };
    fnGetData();

    const fnSubmit = debounce(
        1000,
        async () => {
            await useFormValidate(formRef);
            const resData = !FREIGHTTRAILER_ID
                ? await setFreightTrailerAdd({ ...form.value })
                : await setFreightTrailerEdit({ ...form.value ,FREIGHTTRAILER_ID:FREIGHTTRAILER_ID});
            const currentFreighttrailerId =resData.pd.FREIGHTTRAILER_ID
            for (let i = 0; i < form.value.TRAILER_IMG.length; i++) {
                if (form.value.TRAILER_IMG[i].raw)
                    await fnUploadImage(currentFreighttrailerId, form.value.TRAILER_IMG[i].raw, 120);
            }
            for (let i = 0; i < form.value.DRIVING_LICENSE_IMG.length; i++) {
                if (form.value.DRIVING_LICENSE_IMG[i].raw)
                    await fnUploadImage(currentFreighttrailerId, form.value.DRIVING_LICENSE_IMG[i].raw, 121);
            }
            for (let i = 0; i < form.value.OPER_CERTIFICATE_IMG.length; i++) {
                if (form.value.OPER_CERTIFICATE_IMG[i].raw)
                    await fnUploadImage(currentFreighttrailerId, form.value.OPER_CERTIFICATE_IMG[i].raw, 122);
            }
            for (let i = 0; i < form.value.TRAILER_INFO.length; i++) {
                if (form.value.TRAILER_INFO[i].raw)
                    await fnUploadImage(currentFreighttrailerId, form.value.TRAILER_INFO[i].raw, 123);
            }
            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>
