<template>
    <!-- 表单区域 -->
    <el-form ref="ruleFormRef" :rules="rules" :model="connectParamForm" :disabled="isDisabled" label-position="left"
        label-width="95px" class="demo-ruleForm" style="margin-top: 50px">
        <el-row>
            <el-col :span="24">
                <el-form-item label="金蝶地址：" prop="mallAddress">
                    <el-input v-model="connectParamForm.mallAddress" placeholder="请输入金蝶地址：" clearable />
                </el-form-item>
            </el-col>
            <el-col :span="24">
                <el-form-item label="账号：" prop="account">
                    <el-input v-model="connectParamForm.account" placeholder="请输入账号：" clearable />
                </el-form-item>
            </el-col>
            <el-col :span="24">
                <el-form-item label="密码：" prop="password">
                    <el-input v-model="connectParamForm.password" type="password" placeholder="请输入密码：" clearable
                        show-password />
                </el-form-item>
            </el-col>
            <el-col :span="24">
                <el-form-item label="时间：" prop="duration">
                    <el-input type="number" v-model="connectParamForm.duration" placeholder="间隔时间：" clearable
                        @input="(val: any) => { if (val <= 0 || val >= 60) connectParamForm.duration = '' }" />
                </el-form-item>
            </el-col>
        </el-row>
    </el-form>
</template>

<script lang="ts" setup>
import {
    getConnectParam,
    putConnectParam,
} from "@/services/api/systemApi/synchronization/synchronizationAPI";
import { ref } from "vue";
import { ElMessage } from "element-plus";
import type { FormInstance, FormRules } from "element-plus";

const connectParamForm = ref({
    mallAddress: "",
    account: '',
    password: "",
    duration: ""
});
// 校验规则
const rules = ref<FormRules>({
    mallAddress: [{ required: true, message: "金蝶地址不为空", trigger: "blur" }],
    account: [{ required: true, message: "账号不为空", trigger: "blur" }],
    password: [{ required: true, message: "密码不为空", trigger: "blur" }],
    duration: [{ required: true, message: "间隔时间不为空, 且大于0 小于60", trigger: "blur" },]
});

const ruleFormRef = ref<FormInstance>();
const isDisabled = ref(true);


// 保存配置
const handleSave = (formEl: FormInstance | undefined) => {
    if (!formEl) return;
    formEl.validate(async (valid, fields) => {
        if (valid) {
            const res: any = await putConnectParam(connectParamForm.value);
            if (res.code === 200) {
                ElMessage({ message: "保存参数成功！", type: "success" });
            }
        } else {
            console.log("校验失败", fields);
            return false;
        }
    });
};


</script>

<style lang="scss" scoped>
.el-form-item {
    margin-bottom: 40px;
}
</style>
