<template>
  <a-card class="mb-5">
    <eo-form ref="formRef" :fieldList="fieldList" :model="model" @submit="handleSubmit" @change="handleChange">
      <!-- <template #header> 基本表单header </template> -->
      <!-- <template #footer>基本表单footer</template> -->

      <!-- <template #buttons="{ model, formRef }">
        <a-button @click="handleSubmit(model, formRef)">提交</a-button>
      </template> -->

      <!-- <template #relationTable>
        <div>关系人slot</div>
      </template> -->
    </eo-form>
    <a-space>
      <a-button type="primary" @click="onSubmit">父组件提交</a-button>
      <a-button @click="onSwith">启用/禁用</a-button>
    </a-space>
  </a-card>
</template>
<script lang="ts" setup>
import EoForm from '@/components/wyg-form/index.vue';
import { formConfig } from './config';
import type { Form } from '@/components/wyg-form/interface';
import type { Ref } from 'vue';

const formRef = ref();

let fieldList: Form.FieldItem[] = formConfig;
const model = ref<Record<string, any>>({
  name: '张三',
  age: 18,
});
// 提交按钮在子组件
const handleSubmit = (model: Record<string, any>) => {
  console.log(model, 'model====');
};
// 提交按钮在父组件
const onSubmit = async () => {
  const res = await formRef?.value?.submit();
  console.log(formRef, 'formRef====');
  console.log(res, 'res====');
};
// 修改Form组件相关属性
const status = ref(false);
const onSwith = () => {
  status.value = !status.value;
  formRef?.value?.setForm({ disabled: !status.value });
};

const handleChange = (params: any) => {
  const { key, val } = params;
  if (key === 'sex') {
    const required = val === 'F';
    // 更新form配置
    const updateList: any = [
      {
        field: 'school',
        required: required,
        disabled: !required,
      },
    ];
    formRef?.value?.updateFieldsList(updateList);
    formRef?.value?.setModel({ age: 26 });
  }
};
</script>
