<script lang="ts" setup>
  import { Button } from 'ant-design-vue';
  import { computed, nextTick, onMounted } from 'vue';
  import { basicInfoForm, FieldsEnum } from './config';
  import { basicProps } from './props';
  import StepContainer from './StepContainer.vue';
  import { BasicForm, useForm } from '/@/components/Form';

  const props = defineProps({
    ...basicProps,
    value: {
      required: true,
    },
  });

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

  const canGoNext = computed(() => {
    const values = props.value as Recordable;
    return (
      Reflect.has(values, FieldsEnum.ORGANIZATION_ID) &&
      Reflect.has(values, FieldsEnum.TK_DEVICE_PROFILE_ID) &&
      Reflect.has(values, FieldsEnum.DEVICE_TYPE)
    );
  });
  const [register, { getFieldsValue, setFieldsValue }] = useForm({
    schemas: basicInfoForm,
    layout: 'vertical',
    showActionButtonGroup: false,
    submitFunc: async () => {
      await nextTick();
      const values = getFieldsValue() || {};
      emit('update:value', values);
    },
  });

  const handleGoNext = () => {
    emit('update:value', getFieldsValue());
    props.goNextStep?.();
  };

  onMounted(() => {
    setFieldsValue(props.value || {});
  });
</script>

<template>
  <StepContainer>
    <BasicForm @register="register" />
    <div class="flex justify-end gap-2">
      <Button type="primary" @click="handleGoNext" :disabled="!canGoNext">下一步</Button>
    </div>
  </StepContainer>
</template>
