<template>
  <div class="flex mt-6">
    <div class="w-1/2 -enter-x">
      <BasicForm @register="register" @submit="handleSubmit" />
    </div>
    <div class="w-1/2 -enter-x">
      <Textarea
        v-model:value="textSchemas"
        :rows="10"
        placeholder="请输入 schemas"
        @change="onChange"
        wrap="soft"
      />
      <CodeEditor v-model:value="codeValue" :mode="modeValue" @change="handleChange" />
      {{ data111 }}
    </div>
  </div>
</template>

<script setup lang="ts">
  import { BasicForm, useForm } from '/@/components/Form';
  import { Textarea } from 'ant-design-vue';
  import { useDebounceFn } from '@vueuse/core';
  import { ref, onMounted, watch, computed } from 'vue';
  import { CodeEditor } from '/@/components/CodeEditor';
  import { listDictModel } from '/@/api/common';

  const codeValue = ref(null);
  const modeValue = ref('application/json');

  onMounted(() => {
    console.log('1231231');
  });

  const schemas = ref([
    {
      field: 'field1',
      component: 'Input',
      label: '字段1',
      colProps: {
        span: 8,
      },
      componentProps: {
        placeholder: '自定义placeholder',
        onChange: (e: any) => {
          console.log(e);
        },
      },
    },
    {
      field: 'field2',
      component: 'Input',
      label: '字段2',
      colProps: {
        span: 8,
      },
      componentProps: {
        placeholder: '自定义placeholder222222222',
        onChange: (e: any) => {
          console.log(e);
        },
      },
    },
  ]) as any;

  watch(
    () => schemas.value,
    (newVal, oldVal) => {
      console.log('🚀 ~ file: index.vue:67 ~ oldVal:', oldVal);
      console.log('🚀 ~ file: index.vue:67 ~ newVal:', newVal);
    },
  );
  const count = ref(1);
  const data111 = computed(() => {
    return count.value + 1;
  });

  const [register, { resetSchema }] = useForm({
    labelWidth: 120,
    schemas,
    actionColOptions: {
      span: 24,
    },
    showActionButtonGroup: false,
  });
  const textSchemas = ref(null);

  const debounceFn = useDebounceFn(data => {
    const span = Math.round(Math.random() * 20 + 5);
    schemas.value = [
      {
        field: 'field1',
        component: 'Input',
        label: '字段' + span,
        colProps: {
          span,
        },
        componentProps: {
          placeholder: '自定义placeholder',
          onChange: e => {
            console.log(e);
          },
        },
      },
    ];
    resetSchema(data);
    console.log('🚀 ~ file: index.vue:107 ~ debounceFn ~ data:', data);
    console.log('🚀 ~ file: index.vue:89 ~ debounceFn ~ schemas.value:', schemas.value);
    // console.log('🚀 ~ file: index.vue:91 ~ debounceFn ~ data:', data);
    // resetSchema([data]);
  }, 1000 * 3);

  function onChange(e) {
    // const str = "[{field: 'field1',component: 'Input',label: '字段1',colProps: {span: 24,},}]";
    // const val = JSON.parse(str);
    // const val = JSON.stringify(e.target.value, null, 4).replace(/\n/g, '');
    // console.log(val);
    // console.log('🚀 ~ file: index.vue:71 ~ onChange ~ val:', val);
    // debounceFn();
    count.value = Math.round(Math.random() * 100);
  }
  function handleChange(val) {
    console.log('🚀 ~ file: index.vue:100 ~ handleChange ~ val:', val);
    if (Array.isArray(val)) {
      const arr = val.map(ele => {
        if (ele?.componentProps) {
          if (ele.componentProps?.api) {
            ele.componentProps.api = listDictModel;
          }
          if (ele.componentProps?.onChange) {
            ele.componentProps.onChange = new Function('e', ele.componentProps.onChange);
          }
        }
        return ele;
      });
      console.log('🚀 ~ file: index.vue:126 ~ arr ~ arr:', arr);
      debounceFn(arr);
    }
    textSchemas.value = JSON.stringify(val);
  }
  function handleSubmit() {}
</script>

<style scoped></style>
