<script lang="ts" setup>
  import { Button } from 'ant-design-vue';
  import { importConfigurationSchema } from './config';
  import { basicProps } from './props';
  import StepContainer from './StepContainer.vue';
  import { BasicForm, useForm } from '/@/components/Form';
  const props = defineProps({
    ...basicProps,
  });

  const [register] = useForm({
    schemas: importConfigurationSchema,
    showActionButtonGroup: false,
    labelWidth: 120,
    layout: 'vertical',
  });

  const handlePreviousStep = () => {
    props.goNextStep?.();
  };

  const handleNextStep = () => {
    props.goNextStep?.();
  };
</script>

<template>
  <StepContainer>
    <BasicForm class="import-configuration-form" @register="register" />
    <div class="flex justify-end gap-4 mt-4">
      <Button type="primary" @click="handlePreviousStep">上一步</Button>
      <Button type="primary" @click="handleNextStep">下一步</Button>
    </div>
  </StepContainer>
</template>

<style lang="less">
  .import-configuration-form {
    .ant-row {
      > .ant-col:nth-of-type(2),
      > .ant-col:nth-of-type(3) {
        > .ant-row {
          flex-direction: row;
          align-items: center;

          .ant-form-item-label {
            padding: 0 !important;
          }
        }
      }
    }
  }
</style>
