<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';
  import { PlusCircleOutlined } from '@ant-design/icons-vue';
  import { getFormSchemas } from './config';
  import { ExtensionDesc } from '/@/api/device/model/modelOfMatterModel';

  const show = ref(false);

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

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

  const [registerForm, { setFieldsValue, getFieldsValue, setProps, validate, resetFields }] =
    useForm({
      schemas: getFormSchemas(),
      showActionButtonGroup: false,
    });

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

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

  watch(show, async (value) => {
    if (value) {
      await nextTick();
      setFieldsValue({ ...props.value });
    }
  });
</script>

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

<style lang="less" scoped>
  .extension-form {
    :deep(.ant-input-number) {
      width: 100%;
    }
  }
</style>