<script lang="ts" setup>
  import { Button } from 'ant-design-vue';
  import { nextTick, ref, watch } from 'vue';
  import { BasicForm, useForm } from '/@/components/Form';
  import { BasicModal } from '/@/components/Modal';

  const show = ref(false);

  const props = withDefaults(
    defineProps<{
      value?: object;
      disabled?: boolean;
    }>(),
    {
      value: () => ({}),
    }
  );

  const emit = defineEmits(['update:value']);

  const [registerForm, { setFieldsValue, getFieldsValue, setProps }] = useForm({
    schemas: [
      {
        field: 'registerAddress',
        component: 'Input',
        label: '寄存器地址',
        componentProps: {
          placeholder: '请输入寄存器地址',
        },
      },
    ],
    showActionButtonGroup: false,
  });

  const handleClick = async () => {
    show.value = true;
    await nextTick();
    setProps({ disabled: props.disabled });
    setFieldsValue(props.value);
  };

  const handleSubmit = () => {
    const value = getFieldsValue();
    emit('update:value', value);
    show.value = false;
  };

  watch(
    () => props.value,
    (value) => {
      setFieldsValue(value);
    }
  );
</script>

<template>
  <section>
    <Button type="link" @click="handleClick">新增扩展描述</Button>
    <BasicModal title="扩展描述" v-model:visible="show" @ok="handleSubmit">
      <BasicForm @register="registerForm" />
    </BasicModal>
  </section>
</template>