<template>
    <el-dialog v-model="visible" title="设定" width="25%" :before-close="closeDialog">
        <el-form :model="addForm" label-width="100px" :rules="rules" ref="ruleFormRef" size="large" label-position="top">
            <el-form-item label="历史记录最大数量:" prop="max">
                <el-input v-model="addForm.max" placeholder="请输入历史记录最大数量" clearable type="number" />
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button size="large" @click="closeDialog">取消</el-button>
                <el-button size="large" type="primary" @click="saveP"> 保存 </el-button>
            </span>
        </template>
    </el-dialog>
</template>
<script>
import { onMounted, reactive, ref, toRefs, computed, nextTick } from "vue";
import infoApi from "@/api/infoApi.js";
import { ElMessage, ElMessageBox } from "element-plus";
export default {
    props: ["formData", "dialogVisible"],
    emits: ["dialogClose", "dialogSuccess"],
    setup(props, ctx) {
        const checkMax = (rule, value, callback) => {
            let num = Number(value);
            if (value && (num >= 50 && num <= 250)) {
                callback();
            } else {
                callback(new Error("最大值50-250"));
            }
        };
        const ruleFormRef = ref(null);
        const state = reactive({
            addForm: {
            },

            rules: {
                max: [
                { required: true, message: "请输入历史记录最大数量(最大值50-250)", trigger: "blur" },
                { required: true, validator: checkMax, trigger: "blur" }
            ],
            },
        });
        const visible = computed(() => {
            return props.dialogVisible;
        });

        onMounted(() => {
        });

        const closeDialog = () => {
            ctx.emit("dialogClose");
        };

        const saveP = async () => {
            await ruleFormRef.value.validate(async (valid) => {
                if (valid) {
                    const parm = {
                        driver_name: props.formData.driver_name,
                        device_name: props.formData.device_name,
                        point_name: props.formData.point_name,
                        history: {
                            max: Number(state.addForm.max)
                        }
                    }
                    const res = await infoApi.setHis(parm);
                    if (res.code == 0) {
                        ElMessage.success(res.data || "请求成功");
                        ctx.emit("dialogSuccess");
                    }
                } else {
                }
            });


        };
        return {
            ...toRefs(state),
            visible,
            closeDialog,
            saveP,
            ruleFormRef,
        };
    },
};
</script>
<style lang="scss" scoped>
.top-title {
    width: 100%;

    ::v-deep .el-card__body {
        width: 100%;
        display: flex;
        justify-content: space-between;
        font-weight: 800;
        font-size: 16px;
    }
}

.btns {
    padding: 15px 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.flex-center {
    display: flex;
    justify-content: center;
    padding: 10px 0;
    cursor: pointer;
}
</style>
  