<template>
    <!-- 表单区域 -->
    <el-form ref="ruleFormRef" :rules="rules" :model="sybchronizationForm" :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="k3CloudUrl">
                    <el-input v-model="sybchronizationForm.k3CloudUrl" placeholder="请输入金蝶地址：" clearable />
                </el-form-item>
            </el-col>
            <el-col :span="24">
                <el-form-item label="账套ID：" prop="dbid">
                    <el-input v-model="sybchronizationForm.dbid" placeholder="请输入账套ID：" clearable />
                </el-form-item>
            </el-col>
            <el-col :span="24">
                <el-form-item label="端口：" prop="lang">
                    <el-input v-model="sybchronizationForm.lang" placeholder="请输入端口：" clearable />
                </el-form-item>
            </el-col>
            <el-col :span="24">
                <el-form-item label="账号：" prop="uid">
                    <el-input v-model="sybchronizationForm.uid" placeholder="请输入账号：" clearable />
                </el-form-item>
            </el-col>
            <el-col :span="24">
                <el-form-item label="密码：" prop="pwd">
                    <el-input v-model="sybchronizationForm.pwd" 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="sybchronizationForm.duration" placeholder="间隔时间：" clearable
                        @input="(val: any) => { if (val <= 0 || val >= 60) sybchronizationForm.duration = '' }" />
                </el-form-item>
            </el-col>
        </el-row>
    </el-form>
</template>

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

const sybchronizationForm = ref({
    k3CloudUrl: "",
    thirdPartyUrl: '',
    dbid: "",
    lang: "",
    uid: "",
    pwd: "",
    duration: '',
});
// 校验规则
const rules = ref<FormRules>({
    k3CloudUrl: [{ required: true, message: "金蝶地址不为空", trigger: "blur" }],
    dbid: [{ required: true, message: "数据库ID不为空", trigger: "blur" }],
    lang: [{ required: true, message: "端口不为空", trigger: "blur" }],
    uid: [{ required: true, message: "账号不为空", trigger: "blur" }],
    pwd: [{ 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 putSynchronization(sybchronizationForm.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>
