<template>
    <div>
        <el-form ref="form" :model="form" :rules="rules" label-width="160px">
            <div class="inputBox flexBox">
                <span class="label">传感器ID</span>
                <div>{{ form.sensorCode }}</div>
            </div>
            <el-form-item label="传感器名称:" prop="sensorName">
                <el-input
                    placeholder="请输入"
                    maxlength="60"
                    v-autoTrim="{ obj: form, key: 'sensorName' }"
                    v-model="form.sensorName"
                >
                </el-input>
            </el-form-item>
            <el-form-item label="传感器描述:" prop="description">
                <el-input
                    v-autoTrim="{
                        obj: form,
                        key: 'description',
                    }"
                    v-model="form.description"
                    type="textarea"
                    placeholder="请输入传感器描述"
                    :autosize="{ minRows: 4, maxRows: 4 }"
                    maxlength="200"
                ></el-input>
            </el-form-item>

            <div class="titlePanel">
                <div class="titlePanelBor">内参</div>
            </div>
            <el-form-item label="经度偏移量(deg):" prop="longitudeOffset">
                <el-input
                    placeholder="请输入"
                    maxlength="10"
                    v-autoTrim="{ obj: form, key: 'longitudeOffset' }"
                    v-model="form.longitudeOffset"
                >
                </el-input>
            </el-form-item>
            <el-form-item label="纬度偏移量(deg):" prop="latitudeOffset">
                <el-input
                    placeholder="请输入"
                    maxlength="10"
                    v-autoTrim="{ obj: form, key: 'latitudeOffset' }"
                    v-model="form.latitudeOffset"
                >
                </el-input>
            </el-form-item>

            <div class="titlePanel">
                <div class="titlePanelBor">其他</div>
            </div>
            <el-form-item label="帧率(HZ):" prop="frameRate">
                <el-input
                    placeholder="请输入"
                    maxlength="10"
                    v-autoTrim="{ obj: form, key: 'frameRate' }"
                    v-model="form.frameRate"
                >
                </el-input>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
//import  from '';

export default {
    name: "formGps", // form-GPS
    components: {},
    data() {
        return {
            form: {
                id: "", // id
                sensorCode: "", // 传感器编码
                sensorName: "", // 传感器名称
                description: "", // 传感器描述
                longitudeOffset: "", // 经度偏移量
                latitudeOffset: "", // 纬度偏移量
                frameRate: "", // 帧率
                share: "", // 是否分享
            },
            rules: {
                sensorName: [
                    { required: true, message: "请输入", trigger: "blur" },
                ],
                description: [
                    { required: true, message: "请输入", trigger: "blur" },
                ],
                longitudeOffset: [
                    { required: true, message: "请输入", trigger: "blur" },
                ],
                latitudeOffset: [
                    { required: true, message: "请输入", trigger: "blur" },
                ],
                frameRate: [
                    { required: true, message: "请输入", trigger: "blur" },
                ],
            },
        };
    },

    computed: {},

    methods: {
        // 展示详情
        showInfo(id) {
            this.$axios({
                method: "post",
                url: this.$api.modelLibrary.getGpsInfo,
                data: {
                    id,
                },
            }).then((res) => {
                if (res.code == 200 && res.info) {
                    this.$refs.form.clearValidate();
                    this.form = res.info;
                    // 传回当前展示form的share，从而改变按钮的展示
                    this.$emit("changeShare", this.form.share);
                } else {
                    this.$message.error(res.message || "获取失败");
                }
            });
        },
        save(isAdd = false) {
            this.$refs.form.validate((valid) => {
                if (valid) {
                    // 判断是否新增
                    if (isAdd) {
                        this.form.id = "";
                    }

                    this.$axios({
                        method: "post",
                        url: this.$api.modelLibrary.saveGps,
                        data: {
                            ...this.form,
                        },
                    }).then((res) => {
                        if (res.code == 200 && res.info) {
                            this.form.id = res.info.id;
                            this.form.share = res.info.share;
                            this.$message.success("保存成功");
                            this.$emit("changeShare", this.form.share);
                            this.$emit("getList");
                        } else {
                            this.$message.error(res.message || "保存失败");
                        }
                    });
                }
            });
        },
        share() {
            this.$axios({
                method: "post",
                url: this.$api.modelLibrary.shareGps,
                data: {
                    ...this.form,
                },
            }).then((res) => {
                if (res.code == 200) {
                    this.$message.success("分享成功");
                    this.$emit("getList");
                } else {
                    this.$message.error(res.message || "分享失败");
                }
            });
        },
        cancel() {
            if (this.form.id) {
                // 取消时有id则重新请求表单
                this.showInfo(this.form.id);
            } else {
                // 清空
                this.$emit("clearForm");
            }
        },
    },

    // mounted: {},
};
</script>

<style lang='less' scoped>
@import "../common/util.less";
</style>