<template>
  <el-card shadow="never" :body-style="{ height: 'calc(100vh - 260px)' }">

    <PlusForm
      :key="formKey"
      v-model="state"
      class="w-[450px] m-auto"
      :columns="columns"
      :rules="rules"
      label-position="right"
      label-width="140px"
      @change="handleChange"
      @submit="handleSubmit"
    >
      <template #footer="{ handleSubmit }">
        <div style="margin: 0 auto">
          <el-button type="primary" @click="handleSubmit">修改</el-button>
        </div>
      </template>
    </PlusForm>
  </el-card>
  
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import "plus-pro-components/es/components/form/style/css";
import {
  type PlusColumn,
  type FieldValues,
  PlusForm
} from "plus-pro-components";
import { useColumns } from "./columns";
import { modifySysCfg } from "@/api/system";
import { ElMessage, ElMessageBox, ElNotification } from 'element-plus'

const vGlobal = window.vueGlobal;

const state = ref({});
const formKey = ref(0);

const rules = {
  name: [
    {
      required: true,
      message: "请输入名称"
    }
  ]
};

const { columns } = useColumns();

const handleChange = (values: FieldValues, prop: PlusColumn) => {
  // console.log('handleChange', values, prop);
  // console.log('handleChange 2', vGlobal.sysCfg.sysCfgView)
};

const handleSubmit = (values: FieldValues) => {
  const data = {
    cfgKey: 'sysCfgView',
    cfgVal: JSON.stringify(vGlobal.sysCfg.sysCfgView.toJson())
  }
   modifySysCfg(data).then((response) => {
     if (response.success) {
      ElNotification.success({
        message: '更新成功',
      })
      vGlobal.applySysCfg();
      formKey.value = formKey.value + 1;
     } else {
      ElNotification.error({
        message: '更新失败',
      })
     }
  })
};

onMounted(() => {
  const ci = setInterval(() => {
    if (vGlobal.isInited()) {
      clearInterval(ci);
      state.value = vGlobal.sysCfg ? vGlobal.sysCfg.sysCfgView : null;
      formKey.value = formKey.value + 1;
    }
  }, 100);
});

</script>


