<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="盲区距离(m):" prop="nearDistance">
                <el-input
                    placeholder="请输入"
                    maxlength="9"
                    v-autoTrim="{ obj: form, key: 'nearDistance' }"
                    v-model="form.nearDistance"
                >
                </el-input>
            </el-form-item>
            <el-form-item label="探测距离(m):" prop="farDistance">
                <el-input
                    placeholder="请输入"
                    maxlength="9"
                    v-autoTrim="{ obj: form, key: 'farDistance' }"
                    v-model="form.farDistance"
                    @input="inputChange"
                >
                </el-input>
            </el-form-item>
            <el-form-item label="水平视场角(deg):" prop="fovH">
                <el-input
                    placeholder="请输入"
                    maxlength="9"
                    v-autoTrim="{ obj: form, key: 'fovH' }"
                    v-model="form.fovH"
                    @input="inputChange"
                >
                </el-input>
            </el-form-item>
            <el-form-item label="垂直视场角(deg):" prop="fovV">
                <el-input
                    placeholder="请输入"
                    maxlength="9"
                    v-autoTrim="{ obj: form, key: 'fovV' }"
                    v-model="form.fovV"
                >
                </el-input>
            </el-form-item>
            <el-form-item label="分辨率:" prop="resolution">
                <el-radio v-model="form.resolution" label="1920*1080"
                    >1920x1080</el-radio
                >
                <el-radio v-model="form.resolution" label="800*600"
                    >800x600</el-radio
                >
            </el-form-item>
            <el-form-item label="帧率(HZ):" prop="frameRate">
                <el-select v-model="form.frameRate">
                    <el-option
                        v-for="item in frameRateList"
                        :label="item.caption"
                        :value="item.code"
                        :key="item.code"
                    ></el-option>
                </el-select>
            </el-form-item>

            <div class="titlePanel">
                <div class="titlePanelBor">其他</div>
            </div>
            <el-form-item label="显示本车:" prop="selfDisplay">
                <el-radio v-model="form.selfDisplay" label="1">是</el-radio>
                <el-radio v-model="form.selfDisplay" label="0">否</el-radio>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
//import  from '';

export default {
    name: "formCamera", // form-摄像头
    components: {},
    data() {
        // 校验非负且最多3位小数
        let validateNum = (rule, value, callback) => {
            !/^(0|[1-9][0-9]*)(\.\d{1,3})?$/.test(value) &&
                callback(new Error(rule.message));
            callback();
        };
        // 校验不大于1500
        let validateNoMore1500 = (rule, value, callback) => {
            if (value > 1500) {
                callback(new Error(rule.message));
                return;
            }
            callback();
        };
        // 校验不大于180
        let validateNoMore180 = (rule, value, callback) => {
            if (value > 180) {
                callback(new Error(rule.message));
                return;
            }
            callback();
        };

        return {
            frameRateList: [],
            form: {
                id: "", // id
                sensorCode: "", // 传感器编码
                sensorName: "", // 传感器名称
                description: "", // 传感器描述
                nearDistance: "", // 盲区距离
                farDistance: "", // 探测距离
                fovH: "", // 水平现场角
                fovV: "", // 垂直现场角
                resolution: "1920*1080", // 分辨率
                frameRate: "", // 帧率
                selfDisplay: "1", // 是否显示本车
                share: "", // 是否分享
            },
            rules: {
                sensorName: [
                    { required: true, message: "请输入", trigger: "blur" },
                ],
                description: [
                    { required: true, message: "请输入", trigger: "blur" },
                ],
                nearDistance: [
                    { required: true, message: "请输入", trigger: "blur" },
                    {
                        validator: validateNum,
                        message: "请输入最多带有3位小数的非负数",
                        trigger: ["blur"],
                    },
                ],
                farDistance: [
                    { required: true, message: "请输入", trigger: "blur" },
                    {
                        validator: validateNum,
                        message: "请输入最多带有3位小数的非负数",
                        trigger: ["blur"],
                    },
                    {
                        validator: validateNoMore1500,
                        message: "请输入不大于1500的非负数",
                        trigger: ["blur"],
                    },
                ],
                fovH: [
                    { required: true, message: "请输入", trigger: "blur" },
                    {
                        validator: validateNum,
                        message: "请输入最多带有3位小数的非负数",
                        trigger: ["blur"],
                    },
                    {
                        validator: validateNoMore180,
                        message: "请输入不大于180的非负数",
                        trigger: ["blur"],
                    },
                ],
                fovV: [
                    { required: true, message: "请输入", trigger: "blur" },
                    {
                        validator: validateNum,
                        message: "请输入最多带有3位小数的非负数",
                        trigger: ["blur"],
                    },
                    {
                        validator: validateNoMore180,
                        message: "请输入不大于180的非负数",
                        trigger: ["blur"],
                    },
                ],
                resolution: [
                    { required: true, message: "请选择", trigger: "change" },
                ],
                frameRate: [
                    { required: true, message: "请选择", trigger: "change" },
                ],
                selfDisplay: [
                    { required: true, message: "请选择", trigger: "change" },
                ],
            },
        };
    },

    methods: {
        // 展示详情
        showInfo(id) {
            this.$axios({
                method: "post",
                url: this.$api.modelLibrary.getCameraInfo,
                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);
                    // 数据加载完毕，可展示canvas
                    this.$emit("showDone");
                } 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.saveCamera,
                        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.$parent.$refs.modelList.getList();
                            this.$emit("changeShare", this.form.share);
                            this.$emit("getList");
                        } else {
                            this.$message.error(res.message || "保存失败");
                        }
                    });
                }
            });
        },
        share() {
            this.$axios({
                method: "post",
                url: this.$api.modelLibrary.shareCamera,
                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");
            }
        },
        inputChange() {
            if (this.form.farDistance === "" || this.form.fovH === "") return;
            this.$emit("inputChange", {
                r: this.form.farDistance,
                h: this.form.fovH,
            });
        },
    },

    async mounted() {
        await this.$dicsListsInit({
            frameRateList: "frameRate",
        });
    },
};
</script>

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