<template>
  <FlexCol gap="gap.lg">
    <SelfAssessmentFormBlock
      ref="blockRef"
      :current-form="currentForm"
      :form-options="formOptions"
      :form-options-end="formOptionsEnd"
      :check-item-list="checkItemList"
      :current-form-check-items="currentFormCheckItems"
      :readonly="readonly"
    />
    <Divider />
    <SelfAssessmentResultBlock :current-form="currentForm" />
  </FlexCol>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue';
import type { CheckItemInfo, SelfAssessmentCheckItemAnswer, SelfAssessmentDetail } from '@/api/collect/AssessmentContent';
import type { IDynamicFormOptions } from '@/components/dynamic';
import SelfAssessmentFormBlock from './SelfAssessmentFormBlock.vue';
import SelfAssessmentResultBlock from './SelfAssessmentResultBlock.vue';
import FlexCol from '@/components/layout/FlexCol.vue';
import Divider from '@/components/display/Divider.vue';

const props = withDefaults(defineProps<{
  currentForm: SelfAssessmentDetail;
  formOptions: IDynamicFormOptions;
  formOptionsEnd: IDynamicFormOptions;
  checkItemList: CheckItemInfo[];
  currentFormCheckItems: SelfAssessmentCheckItemAnswer[];
  readonly?: boolean;
}>(), {
  readonly: false,
});

const blockRef = ref<InstanceType<typeof SelfAssessmentFormBlock> | null>(null);

defineExpose({
  validate: () => blockRef.value?.validate(),
});
</script>
