<script lang="ts" setup>
import type { BasicOptionResult } from '#/api/model';

import { onMounted, reactive } from 'vue';

import { useVbenForm } from '@vben/common-ui';

import { useFormDesignState } from '../hooks/useFormDesignState';

const { formConfig } = useFormDesignState();

const state = reactive<{ gridCols: BasicOptionResult[] }>({
  gridCols: [],
});

const handleUpdateConfig = (record: any) => {
  formConfig.value.config = { ...formConfig.value.config, ...record };
};

const [Form, { setValues }] = useVbenForm({
  showDefaultActions: false,
  commonConfig: {
    componentProps: {
      class: 'w-full',
    },
  },
  handleValuesChange: (values: Record<string, any>) => {
    handleUpdateConfig(values);
  },
  schema: [
    {
      component: 'Select',
      componentProps: {
        placeholder: '请选择表单栅格',
        options: state.gridCols,
      },
      fieldName: 'wrapperClass',
      label: '表单栅格',
    },
    {
      component: 'InputNumber',
      componentProps: {
        placeholder: '请选输入标签宽度',
      },
      fieldName: 'commonConfig.labelWidth',
      label: '标签宽度',
    },
    {
      component: 'Switch',
      componentProps: {
        placeholder: '请输入显示操作按钮',
        class: 'w-auto',
      },
      fieldName: 'showDefaultActions',
      label: '显示操作按钮',
    },
  ],
  wrapperClass: 'grid-cols-1',
});

onMounted(() => {
  for (let i = 0; i < 12; i++) {
    state.gridCols.push({ label: `${i + 1}列`, value: `grid-cols-${i + 1}` });
  }

  setValues({ ...formConfig.value.config });
});
</script>
<template>
  <Form />
</template>
