<template>
    <el-form ref="form" :model="form" :rules="rules" label-width="213px">
        <div class="titlePanel">
            <div class="titlePanelBor">控制参数</div>
        </div>
        <div class="flexBox">
            <el-form-item label="最大速度(km/h):" prop="maxSpeed">
                <el-input
                    placeholder="请输入"
                    maxlength="12"
                    v-autoTrim="{ obj: form, key: 'maxSpeed' }"
                    v-model="form.maxSpeed"
                >
                </el-input>
            </el-form-item>
            <el-form-item label="发动机功率(kW):" prop="enginePower">
                <el-input
                    placeholder="请输入"
                    maxlength="12"
                    v-autoTrim="{ obj: form, key: 'enginePower' }"
                    v-model="form.enginePower"
                >
                </el-input>
            </el-form-item>
            <el-form-item label="最大减速度(m/s²):" prop="maxDeceleration">
                <el-input
                    placeholder="请输入"
                    maxlength="12"
                    v-autoTrim="{ obj: form, key: 'maxDeceleration' }"
                    v-model="form.maxDeceleration"
                >
                </el-input>
            </el-form-item>
            <el-form-item label="最大转向角度(rad):" prop="maxSteeringAngle">
                <el-input
                    placeholder="请输入"
                    maxlength="12"
                    v-autoTrim="{ obj: form, key: 'maxSteeringAngle' }"
                    v-model="form.maxSteeringAngle"
                >
                </el-input>
            </el-form-item>
            <el-form-item label="驱动方式:" prop="wheelDrive">
                <el-select v-model="form.wheelDrive">
                    <el-option
                        v-for="item in wheelDriveList"
                        :label="item.caption"
                        :value="item.code"
                        :key="item.code"
                    ></el-option>
                </el-select>
            </el-form-item>
        </div>

        <div class="titlePanel">
            <div class="titlePanelBor">效率参数</div>
        </div>
        <div class="flexBox">
            <el-form-item label="总效率:" prop="overallEfficiency">
                <el-input
                    placeholder="请输入"
                    maxlength="9"
                    v-autoTrim="{ obj: form, key: 'overallEfficiency' }"
                    v-model="form.overallEfficiency"
                >
                </el-input>
            </el-form-item>
            <el-form-item
                label="前表面有效面积(㎡):"
                prop="frontSurfaceEffective"
            >
                <el-input
                    placeholder="请输入"
                    maxlength="12"
                    v-autoTrim="{
                        obj: form,
                        key: 'frontSurfaceEffective',
                    }"
                    v-model="form.frontSurfaceEffective"
                >
                </el-input>
            </el-form-item>
            <el-form-item label="空气阻力系数:" prop="airDragCoefficient">
                <el-input
                    placeholder="请输入"
                    maxlength="9"
                    v-autoTrim="{
                        obj: form,
                        key: 'airDragCoefficient',
                    }"
                    v-model="form.airDragCoefficient"
                >
                </el-input>
            </el-form-item>
            <el-form-item
                label="滚动阻力系数:"
                prop="rollingResistanceCoefficient"
            >
                <el-input
                    placeholder="请输入"
                    maxlength="9"
                    v-autoTrim="{
                        obj: form,
                        key: 'rollingResistanceCoefficient',
                    }"
                    v-model="form.rollingResistanceCoefficient"
                >
                </el-input>
            </el-form-item>
        </div>

        <div class="titlePanel">
            <div class="titlePanelBor">几何参数</div>
        </div>
        <div class="flexBox">
            <el-form-item label="车轮直径(m):" prop="wheelDiameter">
                <el-input
                    placeholder="请输入"
                    maxlength="12"
                    v-autoTrim="{ obj: form, key: 'wheelDiameter' }"
                    v-model="form.wheelDiameter"
                >
                </el-input>
            </el-form-item>
            <el-form-item label="车前距(m):" prop="frontDistance">
                <el-input
                    placeholder="请输入"
                    maxlength="12"
                    v-autoTrim="{ obj: form, key: 'frontDistance' }"
                    v-model="form.frontDistance"
                >
                </el-input>
            </el-form-item>
            <el-form-item label="车后距(m):" prop="rearDistance">
                <el-input
                    placeholder="请输入"
                    maxlength="12"
                    v-autoTrim="{ obj: form, key: 'rearDistance' }"
                    v-model="form.rearDistance"
                >
                </el-input>
            </el-form-item>
            <el-form-item label="车左距(m):" prop="leftDistance">
                <el-input
                    placeholder="请输入"
                    maxlength="12"
                    v-autoTrim="{ obj: form, key: 'leftDistance' }"
                    v-model="form.leftDistance"
                >
                </el-input>
            </el-form-item>
            <el-form-item label="车右距(m):" prop="rightDistance">
                <el-input
                    placeholder="请输入"
                    maxlength="12"
                    v-autoTrim="{ obj: form, key: 'rightDistance' }"
                    v-model="form.rightDistance"
                >
                </el-input>
            </el-form-item>
            <el-form-item label="车高(m):" prop="heightDistance">
                <el-input
                    placeholder="请输入"
                    maxlength="12"
                    v-autoTrim="{ obj: form, key: 'heightDistance' }"
                    v-model="form.heightDistance"
                >
                </el-input>
            </el-form-item>
            <el-form-item label="轴距(m):" prop="wheelbase">
                <el-input
                    placeholder="请输入"
                    maxlength="12"
                    v-autoTrim="{ obj: form, key: 'wheelbase' }"
                    v-model="form.wheelbase"
                >
                </el-input>
            </el-form-item>
            <el-form-item label="质量(kg):" prop="mass">
                <el-input
                    placeholder="请输入"
                    maxlength="12"
                    v-autoTrim="{ obj: form, key: 'mass' }"
                    v-model="form.mass"
                >
                </el-input>
            </el-form-item>
        </div>
    </el-form>
</template>

<script>
//import  from '';

export default {
    name: "vehicleModelVTD", // 车辆模型-VTD
    components: {},
    data() {
        // 校验非负且最多4位小数
        let validateNum = (rule, value, callback) => {
            !/^(0|[1-9][0-9]*)(\.\d{1,4})?$/.test(value) &&
                callback(new Error(rule.message));
            callback();
        };
        // 校验不大于1
        let validateNoMore1 = (rule, value, callback) => {
            if (value > 1) {
                callback(new Error(rule.message));
                return;
            }
            callback();
        };
        return {
            form: {
                maxSpeed: "", // 最大速度
                enginePower: "", // 发动机功率
                maxDeceleration: "", // 最大减速度
                maxSteeringAngle: "", // 最大转角
                wheelDrive: "", // 驱动方式
                overallEfficiency: "", // 总效率
                frontSurfaceEffective: "", // 前表面有效面积
                airDragCoefficient: "", // 空气阻力系数
                rollingResistanceCoefficient: "", // 滚动阻力系数
                wheelDiameter: "", // 车轮直径
                frontDistance: "", // 车前距
                rearDistance: "", // 车后距
                leftDistance: "", // 车左距
                rightDistance: "", // 车右距
                heightDistance: "", // 车高
                wheelbase: "", // 轴距
                mass: "", // 质量
            },
            vehicleTypeList: [],
            vehicleModelList: [],
            vehicleColourList: [],
            rules: {
                maxSpeed: [
                    { required: true, message: "请输入", trigger: "blur" },
                    {
                        validator: validateNum,
                        message: "请输入最多带有4位小数的非负数",
                        trigger: ["blur"],
                    },
                ],
                enginePower: [
                    { required: true, message: "请输入", trigger: "blur" },
                    {
                        validator: validateNum,
                        message: "请输入最多带有4位小数的非负数",
                        trigger: ["blur"],
                    },
                ],
                maxDeceleration: [
                    { required: true, message: "请输入", trigger: "blur" },
                    {
                        validator: validateNum,
                        message: "请输入最多带有4位小数的非负数",
                        trigger: ["blur"],
                    },
                ],
                maxSteeringAngle: [
                    { required: true, message: "请输入", trigger: "blur" },
                    {
                        validator: validateNum,
                        message: "请输入最多带有4位小数的非负数",
                        trigger: ["blur"],
                    },
                ],
                overallEfficiency: [
                    { required: true, message: "请输入", trigger: "blur" },
                    {
                        validator: validateNoMore1,
                        message: "请输入不大于1的非负数",
                        trigger: ["blur"],
                    },
                    {
                        validator: validateNum,
                        message: "请输入最多带有4位小数的非负数",
                        trigger: ["blur"],
                    },
                ],
                frontSurfaceEffective: [
                    { required: true, message: "请输入", trigger: "blur" },
                    {
                        validator: validateNum,
                        message: "请输入最多带有4位小数的非负数",
                        trigger: ["blur"],
                    },
                ],
                airDragCoefficient: [
                    { required: true, message: "请输入", trigger: "blur" },
                    {
                        validator: validateNoMore1,
                        message: "请输入不大于1的非负数",
                        trigger: ["blur"],
                    },
                    {
                        validator: validateNum,
                        message: "请输入最多带有4位小数的非负数",
                        trigger: ["blur"],
                    },
                ],
                rollingResistanceCoefficient: [
                    { required: true, message: "请输入", trigger: "blur" },
                    {
                        validator: validateNoMore1,
                        message: "请输入不大于1的非负数",
                        trigger: ["blur"],
                    },
                    {
                        validator: validateNum,
                        message: "请输入最多带有4位小数的非负数",
                        trigger: ["blur"],
                    },
                ],
                wheelDiameter: [
                    { required: true, message: "请输入", trigger: "blur" },
                    {
                        validator: validateNum,
                        message: "请输入最多带有4位小数的非负数",
                        trigger: ["blur"],
                    },
                ],
                frontDistance: [
                    { required: true, message: "请输入", trigger: "blur" },
                    {
                        validator: validateNum,
                        message: "请输入最多带有4位小数的非负数",
                        trigger: ["blur"],
                    },
                ],
                rearDistance: [
                    { required: true, message: "请输入", trigger: "blur" },
                    {
                        validator: validateNum,
                        message: "请输入最多带有4位小数的非负数",
                        trigger: ["blur"],
                    },
                ],
                leftDistance: [
                    { required: true, message: "请输入", trigger: "blur" },
                    {
                        validator: validateNum,
                        message: "请输入最多带有4位小数的非负数",
                        trigger: ["blur"],
                    },
                ],
                rightDistance: [
                    { required: true, message: "请输入", trigger: "blur" },
                    {
                        validator: validateNum,
                        message: "请输入最多带有4位小数的非负数",
                        trigger: ["blur"],
                    },
                ],
                heightDistance: [
                    { required: true, message: "请输入", trigger: "blur" },
                    {
                        validator: validateNum,
                        message: "请输入最多带有4位小数的非负数",
                        trigger: ["blur"],
                    },
                ],
                wheelbase: [
                    { required: true, message: "请输入", trigger: "blur" },
                    {
                        validator: validateNum,
                        message: "请输入最多带有4位小数的非负数",
                        trigger: ["blur"],
                    },
                ],
                mass: [
                    { required: true, message: "请输入", trigger: "blur" },
                    {
                        validator: validateNum,
                        message: "请输入最多带有4位小数的非负数",
                        trigger: ["blur"],
                    },
                ],
                wheelDrive: [
                    { required: true, message: "请选择", trigger: "change" },
                ],
            },
        };
    },

    props: {
        wheelDriveList: {
            default: function () {
                return [];
            },
            type: Array,
        },
    },

    methods: {
        save() {
            let flag = null;

            this.$refs.form.validate((valid) => {
                if (valid) {
                    flag = true;
                } else {
                    flag = false;
                }
            });

            return flag;
        },
    },

    mounted() {},
};
</script>

<style lang='less' scoped>
.titlePanel {
    padding: 22px 0;
}
</style>