<template>
    <div class="vehicleConfigurationDetailPanel">
        <el-form ref="form" :model="form" :rules="rules" label-width="108px">
            <el-row class="rowBox">
                <el-col :span="6">
                    <el-form-item label="配置名称:" prop="configName">
                        <el-input
                            placeholder="请输入"
                            maxlength="60"
                            v-autoTrim="{ obj: form, key: 'configName' }"
                            v-model="form.configName"
                        >
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="配置描述:" prop="configDescription">
                        <el-input
                            placeholder="请输入"
                            maxlength="200"
                            v-autoTrim="{
                                obj: form,
                                key: 'configDescription',
                            }"
                            v-model="form.configDescription"
                        >
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="车辆名称:" prop="vehicleId">
                        <el-select
                            v-model="form.vehicleId"
                            @change="vehicleChange"
                        >
                            <el-option
                                v-for="item in vehicleNameList"
                                :label="item.vehicleName"
                                :value="item.id"
                                :key="item.id"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="车辆描述:" prop="vehicleDescription">
                        <el-input
                            placeholder="请输入"
                            maxlength="200"
                            v-autoTrim="{
                                obj: form,
                                key: 'vehicleDescription',
                            }"
                            v-model="form.vehicleDescription"
                            disabled
                        >
                        </el-input>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>

        <div class="panelContent">
            <!-- <div class="infoLeft"> -->
            <div class="infoLeft contentBox">
                <div
                    class="handleList"
                    v-bind:class="{
                        handleListA: form.share === '0' || form.share === '1',
                    }"
                >
                    <el-scrollbar
                        id="elScrollBarA"
                        ref="scrollbarA"
                        view-class="scroll"
                    >
                        <handle-config-list
                            ref="handleConfigList"
                            @curItem="curItem"
                            @addOne="addOne"
                            @delOne="delOne"
                            :configList="configList"
                            :curOne="curOne"
                        ></handle-config-list>
                    </el-scrollbar>
                </div>

                <!-- <div class="btns">
                    <el-button
                        v-if="form.share === '0' || form.share === ''"
                        type="primary"
                        @click="save(false)"
                        >保存</el-button
                    >
                    <el-button
                        v-if="form.share === '1'"
                        type="primary"
                        @click="save(true)"
                        >另存为</el-button
                    >
                    <el-button type="primary" plain @click="cancel"
                        >取消</el-button
                    >
                </div>

                <div class="btnsA" v-if="form.share === '0'">
                    <el-button
                        v-if="form.share === '0'"
                        type="primary"
                        @click="save(true)"
                        >另存为</el-button
                    >
                </div> -->

                <div class="btns">
                    <el-button
                        v-if="form.share === '0' || form.share === ''"
                        type="primary"
                        @click="save(false)"
                        >保存</el-button
                    >
                    <el-button
                        v-if="form.share === '0' || form.share === '1'"
                        type="primary"
                        @click="save(true)"
                        >另存为</el-button
                    >
                    <el-button type="primary" plain @click="cancel"
                        >取消</el-button
                    >
                </div>

                <!-- <canvas-sensor
                    ref="canvasSensor"
                    :coordinate="coordinate"
                    :modelImgSrc="modelImgSrc"
                    :curOneName="curOne.name"
                ></canvas-sensor> -->
                <!-- </div> -->
                <!-- </div> -->
            </div>
            <div class="threeRight">
                <div class="viewBox">
                    <span
                        class="view el-icon-view"
                        @click="showAll"
                        title="显示全部"
                    ></span>
                </div>

                <div class="axesHelperBox">
                    <div class="axesHelperPic"></div>
                </div>

                <three-sensor
                    ref="threeSensor"
                    :xValue="coordinate.y"
                    :yValue="coordinate.z"
                    :zValue="coordinate.x"
                    :hValue="coordinate.p"
                    :pValue="coordinate.r"
                    :rValue="coordinate.h"
                    :carModel="carModel"
                    :isAdd="!!$route.query.id"
                    :configList="configList"
                    @posChange="posChange"
                ></three-sensor>

                <div v-show="configBox" class="conditions">
                    <el-form
                        ref="formA"
                        :model="formA"
                        :rules="rulesA"
                        label-width="99px"
                    >
                        <div class="forms">
                            <el-form-item label="X(mm):" prop="sensorX">
                                <el-input
                                    placeholder="请输入"
                                    maxlength="12"
                                    v-autoTrim="{
                                        obj: formA,
                                        key: 'sensorX',
                                    }"
                                    v-model="formA.sensorX"
                                    @input="inputChange"
                                    type="number"
                                    step="1"
                                >
                                </el-input>
                            </el-form-item>
                            <el-form-item label="Y(mm):" prop="sensorY">
                                <el-input
                                    placeholder="请输入"
                                    maxlength="12"
                                    v-autoTrim="{
                                        obj: formA,
                                        key: 'sensorY',
                                    }"
                                    v-model="formA.sensorY"
                                    @input="inputChange"
                                    type="number"
                                    step="1"
                                >
                                </el-input>
                            </el-form-item>
                            <el-form-item label="Z(mm):" prop="sensorZ">
                                <el-input
                                    placeholder="请输入"
                                    maxlength="12"
                                    v-autoTrim="{
                                        obj: formA,
                                        key: 'sensorZ',
                                    }"
                                    v-model="formA.sensorZ"
                                    @input="inputChange"
                                    type="number"
                                    step="1"
                                >
                                </el-input>
                            </el-form-item>
                            <el-form-item label="横摆角(deg):" prop="sensorH">
                                <el-input
                                    placeholder="请输入"
                                    maxlength="12"
                                    v-autoTrim="{
                                        obj: formA,
                                        key: 'sensorH',
                                    }"
                                    v-model="formA.sensorH"
                                    @input="inputChange"
                                    type="number"
                                    step="1"
                                >
                                </el-input>
                            </el-form-item>
                            <el-form-item label="俯仰角(deg):" prop="sensorP">
                                <el-input
                                    placeholder="请输入"
                                    maxlength="12"
                                    v-autoTrim="{
                                        obj: formA,
                                        key: 'sensorP',
                                    }"
                                    v-model="formA.sensorP"
                                    @input="inputChange"
                                    type="number"
                                    step="1"
                                >
                                </el-input>
                            </el-form-item>
                            <el-form-item label="翻滚角(deg):" prop="sensorR">
                                <el-input
                                    placeholder="请输入"
                                    maxlength="12"
                                    v-autoTrim="{
                                        obj: formA,
                                        key: 'sensorR',
                                    }"
                                    v-model="formA.sensorR"
                                    @input="inputChange"
                                    type="number"
                                    step="1"
                                >
                                </el-input>
                            </el-form-item>
                            <el-form-item
                                label="端口"
                                prop="sensorPort"
                                v-show="curOne.name === 'ogt'"
                            >
                                <el-input
                                    placeholder="请输入"
                                    maxlength="9"
                                    v-autoTrim="{
                                        obj: formA,
                                        key: 'sensorPort',
                                    }"
                                    v-model="formA.sensorPort"
                                >
                                </el-input>
                            </el-form-item>
                        </div>
                    </el-form>

                    <div class="btnBox">
                        <el-button
                            type="primary"
                            @click="saveConfig"
                            size="small"
                            >保存设置</el-button
                        >
                        <el-button
                            type="primary"
                            @click="closeConfig"
                            plain
                            size="small"
                            >关闭</el-button
                        >
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import handleConfigList from "./components/handleConfigList.vue";
import canvasSensor from "./components/canvasVehicleConfiguration.vue";
import threeSensor from "./components/threeVehicleConfiguration.vue";
import { mapState } from "vuex";

export default {
    name: "vehicleConfigurationDetail", // 车辆配置详情
    components: { handleConfigList, canvasSensor, threeSensor },
    data() {
        // 校验最多4位小数
        let validateNum = (rule, value, callback) => {
            !/^(-?(0|[1-9][0-9]*))(\.\d{1,4})?$/.test(value) &&
                callback(new Error(rule.message));
            callback();
        };
        // 校验不大于180且不小于-180
        let validateNumC = (rule, value, callback) => {
            if (value < -180 || value > 180) {
                callback(new Error(rule.message));
                return;
            }
            callback();
        };

        return {
            vehicleNameList: [],
            form: {
                id: "",
                configCode: "", // 配置ID
                configName: "", // 配置名称
                configDescription: "", // 配置描述
                vehicleName: "", // 车辆名称
                vehicleId: "", // 车辆名称
                vehicleDescription: "", // 车辆描述
                share: "",
            },
            formA: {
                sensorX: "", // 传感器横向偏移量（x轴）
                sensorY: "", // 传感器横向偏移量（y轴）
                sensorZ: "", // 传感器横向偏移量（z轴）
                sensorH: "", // 横摆角
                sensorP: "", // 俯仰角
                sensorR: "", // 横滚角
                sensorPort: "", // 端口
            },
            rules: {
                configName: [
                    { required: true, message: "请输入", trigger: "blur" },
                ],
                configDescription: [
                    { required: true, message: "请输入", trigger: "blur" },
                ],
                vehicleId: [
                    {
                        required: true,
                        message: "请选择",
                        trigger: "change",
                    },
                ],
                vehicleDescription: [
                    { required: true, message: "请输入", trigger: "blur" },
                ],
            },
            rulesA: {
                sensorX: [
                    {
                        required: true,
                        message: "请输入",
                        trigger: "blur",
                    },
                    {
                        validator: validateNum,
                        message: "最多带有4位小数",
                        trigger: ["blur"],
                    },
                ],
                sensorY: [
                    {
                        required: true,
                        message: "请输入",
                        trigger: "blur",
                    },
                    {
                        validator: validateNum,
                        message: "最多带有4位小数",
                        trigger: ["blur"],
                    },
                ],
                sensorZ: [
                    {
                        required: true,
                        message: "请输入",
                        trigger: "blur",
                    },
                    {
                        validator: validateNum,
                        message: "最多带有4位小数",
                        trigger: ["blur"],
                    },
                ],
                sensorH: [
                    { required: true, message: "请输入", trigger: "blur" },
                    {
                        validator: validateNum,
                        message: "最多带有4位小数",
                        trigger: ["blur"],
                    },
                    {
                        validator: validateNumC,
                        message: "-180至180",
                        trigger: ["blur"],
                    },
                ],
                sensorP: [
                    { required: true, message: "请输入", trigger: "blur" },
                    {
                        validator: validateNum,
                        message: "最多带有4位小数",
                        trigger: ["blur"],
                    },
                    {
                        validator: validateNumC,
                        message: "-180至180",
                        trigger: ["blur"],
                    },
                ],
                sensorR: [
                    { required: true, message: "请输入", trigger: "blur" },
                    {
                        validator: validateNum,
                        message: "最多带有4位小数",
                        trigger: ["blur"],
                    },
                    {
                        validator: validateNumC,
                        message: "-180至180",
                        trigger: ["blur"],
                    },
                ],
                sensorPort: [
                    { required: false, message: "请输入", trigger: "blur" },
                ],
            },
            // 传感器对象集合
            configList: {
                camera: [],
                ogt: [],
                lidar: [],
                gps: [],
            },
            // 用于当前选中项的展示
            curOne: {
                name: "",
                index: -1,
            },
            modelImgSrc: require("@/assets/common/image/others/carTopView.png"), // 车辆图片地址
            width: 300,
            // 若都是0，第一个input改变时，如果值为0，会出现值变了，
            // 但传感器没有变化的问题，输入其他值和后续输入均无问题
            // 每切换一次也有此问题，故不能给0
            coordinate: { x: 0.1, y: 0.1, z: 0.1, h: 0.1, p: 0.1, r: 0.1 }, // 存放传递给展示的值
            // coordinate: { x: 0, y: 0, z: 0, h: 0, p: 0, r: 0 }, // 存放传递给展示的值
            // coordinate: { x: 20, y: 20, z: 20, h: 20, p: 20, r: 20 }, // 存放传递给展示的值
            configBox: false, // 配置项box
            carModel: "", // 车模型
            // rate: 20, // 坐标换算倍数
        };
    },

    watch: {
        curOne(val) {
            if (val.name === "ogt") {
                // 校验端口号
                let validatePort = (rule, value, callback) => {
                    !/^(\d{5})$/.test(value) &&
                        callback(new Error(rule.message));

                    if (value > 65535 || value < 62000) {
                        callback(new Error(rule.message));
                        return;
                    }
                    callback();
                };

                let validatePortNoRepeat = (rule, value, callback) => {
                    let ports = this.configList.ogt.map(
                        (i) => i.sensorPort + ""
                    );
                    ports.splice(this.curOne.index, 1);

                    if (ports.includes(value)) {
                        callback(new Error(rule.message));
                        return;
                    } else {
                        callback();
                    }
                };

                this.rulesA.sensorPort[0].required = true;
                this.rulesA.sensorPort[1] = {
                    validator: validatePort,
                    message: "请输入62000至65535之间的5位数字",
                    trigger: ["blur"],
                };
                this.rulesA.sensorPort[2] = {
                    validator: validatePortNoRepeat,
                    message: "端口号重复",
                    trigger: ["blur"],
                };
            } else {
                this.rulesA.sensorPort[0].required = false;
                this.rulesA.sensorPort.length = 1;
            }
        },
    },

    computed: {
        ...mapState(["fileHost", "fileUrl", "scale"]),
        // 坐标换算倍数
        rate() {
            return 40 / this.scale;
        },
    },

    methods: {
        // 获取车辆名称私有下拉列表
        async getMyVehicleList() {
            await this.$axios({
                method: "post",
                url: this.$api.modelLibrary.getMyVehicleList,
                data: {},
            }).then((res) => {
                if (res.code == 200 && res.info) {
                    this.vehicleNameList = res.info;
                } else {
                    this.$message.error(res.message || "获取信息失败");
                }
            });
        },
        getImgUrl(addr) {
            if (!addr) return "";

            let url = "";
            if (process.env.VUE_APP_IS_DEV == "true") {
                url = this.fileHost + this.fileUrl;
            } else {
                url = this.fileUrl;
            }

            let token = localStorage.getItem("Authorization").split(" ")[1];
            let src = `${url}?objectName=${addr}&access_token=${token}`;
            return src;
        },
        vehicleChange(id) {
            let item = this.vehicleNameList.find((i) => i.id == id);
            this.form.vehicleDescription = item.description;
            // console.log(item);

            // if (this.form.vehicleType[1]) {
            //     this.carModel = this.form.vehicleType[1];
            // }
            // this.modelImgSrc = this.getImgUrl(item.vehicleTopView);
            this.carModel = this.getImgUrl(item.vehicleFrontView);
            // this.$refs.canvasSensor.drawBg();
        },
        // 验证各传感器数组的每一项表单数据是否齐全
        validateSensorsList() {
            // console.log(Object.keys(this.configList));
            // console.log(Object.values(this.configList));
            // console.log(Object.entries(this.configList));

            let lists = Object.entries(this.configList);

            for (let index = 0; index < lists.length; index++) {
                const element = lists[index];
                let oneIndex = element[1].findIndex(
                    (i) => i.sensorX == null && i.sensorY == null
                );

                if (oneIndex > -1) {
                    this.$refs.handleConfigList.configHandle(
                        element[0],
                        oneIndex
                    );

                    // 如果对应项未展开 让其展开
                    if (
                        element[0] === "camera" &&
                        !this.$refs.handleConfigList.isActiveA
                    ) {
                        this.$refs.handleConfigList.isActiveA = true;
                    } else if (
                        element[0] === "ogt" &&
                        !this.$refs.handleConfigList.isActiveB
                    ) {
                        this.$refs.handleConfigList.isActiveB = true;
                    } else if (
                        element[0] === "lidar" &&
                        !this.$refs.handleConfigList.isActiveC
                    ) {
                        this.$refs.handleConfigList.isActiveC = true;
                    } else if (
                        element[0] === "gps" &&
                        !this.$refs.handleConfigList.isActiveE
                    ) {
                        this.$refs.handleConfigList.isActiveE = true;
                    }

                    this.$message.error("请先设置数据并保存");
                    return false;
                }
            }
            return true;
        },
        save(isAdd) {
            this.$refs.form.validate((valid) => {
                if (valid) {
                    if (isAdd) {
                        this.form.id = "";
                    }

                    if (!this.validateSensorsList()) return;

                    let data = Object.assign({}, this.form, {
                        configSensors: this.configList,
                    });
                    this.$axios({
                        method: "post",
                        url: this.$api.modelLibrary.saveConfig,
                        data,
                    }).then((res) => {
                        if (res.code == 200) {
                            this.$message.success("保存成功");
                            this.cancel();
                        } else {
                            this.$message.error(res.message || "保存失败");
                        }
                    });
                }
            });
        },
        /**
         * info 新增传感器信息
         * type 传感器类型
         */
        addOne(info, type) {
            // 如果列表里没有对应类型的数组则需手动添加
            if (!this.configList[type]) {
                this.configList[type] = [];
            }
            //若直接传info即this.form，可能是由于传入了响应式，造成数据会变动
            this.configList[type].unshift({ ...info });
            this.configBox = true;
        },
        delOne(type, index) {
            this.configList[type].splice(index, 1);
        },
        curItem(item, isAdd) {
            this.$refs.formA.resetFields();
            this.curOne = item;
            if (isAdd) {
                this.formA.sensorX = "0";
                this.formA.sensorY = "0";
                this.formA.sensorZ = "0";
                this.formA.sensorH = "0";
                this.formA.sensorP = "0";
                this.formA.sensorR = "0";
                if (this.curOne.name === "ogt") {
                    this.formA.sensorPort = "62000";
                }
            } else {
                // 此写法因formA包含太多信息，直接覆盖式的传后续会有问题
                /* Object.assign(
                    this.formA,
                    this.configList[item.name][item.index]
                ); */
                this.coordinate = {
                    x: 0.1,
                    y: 0.1,
                    z: 0.1,
                    h: 0.1,
                    p: 0.1,
                    r: 0.1,
                };
                let formA = this.configList[item.name][item.index];

                this.formA.sensorX = formA.sensorX;
                this.formA.sensorY = formA.sensorY;
                this.formA.sensorZ = formA.sensorZ;
                this.formA.sensorH = formA.sensorH;
                this.formA.sensorP = formA.sensorP;
                this.formA.sensorR = formA.sensorR;
                if (this.curOne.name === "ogt") {
                    this.formA.sensorPort = formA.sensorPort;
                }
            }
            // this.$refs.canvasSensor.clear();
            // this.$refs.threeSensor.reset();
            setTimeout(() => {
                this.$refs.threeSensor.reset(this.curOne.name);
            }, 0);
            this.configBox = true;
            // this.inputChange();
        },
        saveConfig() {
            if (this.curOne.index < 0) {
                this.$message.info("请先选择传感器");
                return;
            }

            this.$refs.formA.validate((valid) => {
                if (valid) {
                    Object.assign(
                        this.configList[this.curOne.name][this.curOne.index],
                        this.formA
                    );
                    this.$message.success("保存设置成功");
                }
            });
        },
        cancel() {
            this.$router.replace({ path: "/vehicleConfigurationList" });
        },
        // 给canvas的外层容器赋值
        domHandle() {
            $(document).ready(() => {
                this.width = $(
                    ".vehicleConfigurationDetailPanel .model"
                ).outerWidth();
            });
        },
        inputChange() {
            if (this.curOne.index < 0) return;
            if (
                this.formA.sensorX === "" ||
                this.formA.sensorY === "" ||
                this.formA.sensorZ === "" ||
                this.formA.sensorH === "" ||
                this.formA.sensorP === "" ||
                this.formA.sensorR === ""
            )
                return;
            this.coordinate = {
                x: Math.floor(this.formA.sensorX / this.rate),
                y: Math.floor(this.formA.sensorY / this.rate),
                z: Math.floor(this.formA.sensorZ / this.rate),
                h: +this.formA.sensorH,
                p: +this.formA.sensorP,
                r: +this.formA.sensorR,
            };
        },
        posChange(val, type) {
            switch (type) {
                case "z":
                    this.coordinate.x = +val;
                    this.formA.sensorX = Math.floor(val * this.rate);
                    break;
                case "x":
                    this.coordinate.y = +val;
                    this.formA.sensorY = Math.floor(val * this.rate);
                    break;
                case "y":
                    this.coordinate.z = +val;
                    this.formA.sensorZ = Math.floor(val * this.rate);
                    break;
                default:
                    break;
            }
        },
        closeConfig() {
            this.configBox = false;
        },
        // 显示全部传感器
        showAll() {
            this.$refs.threeSensor.showAll();
            this.closeConfig();
        },
    },

    mounted() {
        // setTimeout(() => {
        //     this.domHandle();
        // }, 0);

        this.getMyVehicleList();

        if (this.$route.query.id) {
            let id = "";
            this.form.id = id = this.$route.query.id;
            this.form.share = this.$route.query.share;

            // if (id) {
            this.$axios({
                method: "post",
                url: this.$api.modelLibrary.getConfigInfo,
                data: {
                    id,
                },
            }).then((res) => {
                if (res.code == 200 && res.info) {
                    this.form = res.info;
                    this.configList = res.info.configSensors;
                    // this.modelImgSrc = this.getImgUrl(res.info.vehicleTopView);
                    this.carModel = this.getImgUrl(res.info.vehicleFrontView);
                    // console.log(this.carModel);
                    // this.$refs.threeSensor.initCar(
                    //     this.getImgUrl(res.info.vehicleFrontView)
                    // );
                    // this.carModel = "1";
                    // this.validateSensorsList();
                } else {
                    this.$message.error(res.message || "获取信息失败");
                }
            });
            // }
        }
    },
};
</script>

<style lang='less' scoped>
.vehicleConfigurationDetailPanel {
    margin: 20px 0 -60px 20px;
}

.rowBox {
    padding-right: 20px;

    .el-input,
    .el-select {
        width: 100%;
    }

    .el-select /deep/ .el-input {
        width: 100%;
    }
}

.headBox {
    .el-form-item {
        margin-right: 20px;
    }
}

.inputBox.flexBox {
    margin-bottom: 22px;

    .label {
        width: 88px;
    }

    div {
        line-height: 32px;
    }
}

#elScrollBarA {
    width: 100%;
    height: 100%;
}

/deep/ .el-scrollbar__wrap {
    overflow: auto;
}

/deep/ .el-scrollbar__bar {
    opacity: 0.3 !important;
}
/deep/ .el-scrollbar__bar:hover {
    opacity: 0.6 !important;
}

.panelContent {
    display: flex;
    // height: calc(100vh - 260px);

    .infoLeft {
        width: 220px;
        padding-right: 10px;

        // .contentBox {
        // display: flex;
        // justify-content: space-between;
        margin-top: 30px;

        .handleList {
            width: 210px;
            height: calc(100vh - 240px);
            overflow-y: auto;

            &.handleListA {
                height: calc(100vh - 270px);
            }
        }

        .model {
            // width: 400px;
            // flex: 1;
            margin: 0 10%;
        }
        // }

        .btns {
            padding-top: 30px;
            text-align: center;

            .el-button {
                min-width: 60px;
                padding: 8px 10px;
                margin-bottom: 10px;
            }
        }

        .btnsA {
            padding-top: 10px;
            text-align: center;
        }
    }

    .threeRight {
        position: relative;
        flex: 1;
        // height: calc(100vh - 360px);

        .viewBox {
            position: absolute;
            left: 2px;
            top: 2px;
            width: 40px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            background-color: #ffffff;
            opacity: 0.75;

            .view {
                font-size: 18px;
                cursor: pointer;
                color: @themeColor;
            }
        }

        .axesHelperBox {
            position: absolute;
            left: 2px;
            top: 60px;
            width: 143px;
            height: 135px;
            // background-color: #ffffff;
            // opacity: 0.75;

            .axesHelperPic {
                width: 100%;
                height: 100%;
                background: url("../../assets/common/image/axesHelper.png")
                    center no-repeat;
                background-size: contain;
            }
        }

        .conditions {
            position: absolute;
            right: 2px;
            top: 2px;
            width: 219px;
            height: 372px;
            padding: 10px;
            background-color: #ffffff;

            .btnBox {
                padding: 0 0 10px;
                text-align: center;
            }

            .forms /deep/ .el-form-item__label {
                // width: 120px !important;
                padding-right: 10px;
                line-height: 22px;
                font-size: 12px;
            }

            .forms /deep/ .el-form-item__content {
                // margin-left: 120px !important;
                line-height: 22px;
                font-size: 12px;
            }

            .el-input {
                width: 100px;
                font-size: 12px;
            }

            .forms /deep/ .el-input__inner {
                height: 22px;
            }
        }
    }
}
</style>