<script lang="ts" setup>
import { watch } from 'vue';

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

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

const { formConfig } = useFormDesignState();

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

const [Form, { setValues, resetForm }] = useVbenForm({
  showDefaultActions: false,
  commonConfig: {
    componentProps: {
      class: 'w-full',
    },
  },
  handleValuesChange: (values: Record<string, any>) => {
    handleUpdateConfig(values);
  },
  schema: [
    {
      component: 'Input',
      componentProps: {
        placeholder: '输入控件类型',
        disabled: true,
      },
      fieldName: 'component',
      label: '控件类型',
    },
    {
      component: 'Input',
      componentProps: {
        placeholder: '输入标题',
      },
      fieldName: 'label',
      label: '标题',
    },
    {
      component: 'Input',
      componentProps: {
        placeholder: '请输入占位提示',
      },
      fieldName: 'componentProps.placeholder',
      label: '占位提示',
      dependencies: {
        triggerFields: ['label'],
        trigger(values) {
          if (values?.componentProps?.placeholder) {
            values.componentProps.placeholder = `请输入${values?.label}`;
          }
        },
      },
    },
    {
      component: 'Input',
      componentProps: {
        placeholder: '请输入绑定字段',
      },
      fieldName: 'fieldName',
      label: '绑定字段',
    },
    {
      component: 'Input',
      componentProps: {
        placeholder: '请输入前置标签',
      },
      fieldName: 'componentProps.prefix',
      label: '前置标签',
      dependencies: {
        triggerFields: ['component'],
        show(values) {
          return ['Input'].includes(values.component);
        },
      },
    },
    {
      component: 'Input',
      componentProps: {
        placeholder: '请输入后置标签',
      },
      fieldName: 'componentProps.suffix',
      label: '后置标签',
      dependencies: {
        triggerFields: ['component'],
        show(values) {
          return ['Input'].includes(values.component);
        },
      },
    },
    {
      component: 'Switch',
      componentProps: {
        placeholder: '请输入显示字数',
        class: 'w-auto',
      },
      fieldName: 'componentProps.showCount',
      label: '显示字数',
      dependencies: {
        triggerFields: ['component'],
        show(values) {
          return ['Input', 'Textarea'].includes(values.component);
        },
      },
    },
    {
      component: 'InputNumber',
      componentProps: {
        placeholder: '请输入最大长度',
      },
      fieldName: 'componentProps.maxlength',
      label: '最大长度',
      dependencies: {
        triggerFields: ['component'],
        show(values) {
          return ['Input', 'Textarea'].includes(values.component);
        },
      },
    },
    {
      component: 'InputNumber',
      componentProps: {
        placeholder: '请输入最大值',
      },
      fieldName: 'componentProps.max',
      label: '最大值',
      dependencies: {
        triggerFields: ['component'],
        show(values) {
          return ['InputNumber'].includes(values.component);
        },
      },
    },
    {
      component: 'InputNumber',
      componentProps: {
        placeholder: '请输入最小值',
      },
      fieldName: 'componentProps.min',
      label: '最小值',
      dependencies: {
        triggerFields: ['component'],
        show(values) {
          return ['InputNumber'].includes(values.component);
        },
      },
    },
    {
      component: 'InputNumber',
      componentProps: {
        placeholder: '请输入步长',
      },
      fieldName: 'componentProps.step',
      label: '步长',
      dependencies: {
        triggerFields: ['component'],
        show(values) {
          return ['InputNumber'].includes(values.component);
        },
      },
    },
    {
      component: 'Switch',
      componentProps: {
        placeholder: '请输入隐藏标签',
        class: 'w-auto',
      },
      fieldName: 'hideLabel',
      label: '隐藏标签',
    },
    {
      component: 'InputCode',
      componentProps: {
        placeholder: '请输入验证规则',
      },
      fieldName: 'rules',
      label: '验证规则',
    },
  ],
  wrapperClass: 'grid-cols-1',
});

watch(
  () => formConfig.value,
  () => {
    if (formConfig.value.currentItem) {
      resetForm();
      setValues({ ...formConfig.value.currentItem });
      // formConfig.value.currentItem.itemProps =
      //   formConfig.value.currentItem.itemProps || {};
      // formConfig.value.currentItem.itemProps.labelCol =
      //   formConfig.value.currentItem.itemProps.labelCol || {};
      // formConfig.value.currentItem.itemProps.wrapperCol =
      //   formConfig.value.currentItem.itemProps.wrapperCol || {};
    }
  },
  { deep: true, immediate: true },
);
</script>
<template>
  <div>
    <div v-if="!formConfig.currentItem?.key" class="form-edit-empty">
      未选择控件
    </div>
    <Form v-else />
  </div>
</template>
