<script lang="ts" setup>
  import { Empty, Spin } from 'ant-design-vue';
  import { BasicModal } from '/@/components/Modal';
  import { useAwaitPopupWindowBindData } from '../../../hook/useAwaitPopupWindowBindData';
  import { ElementsTypeEnum } from '../../../enum';
  import { DataActionModeEnum } from '/@/enums/toolEnum';
  import { useForm, BasicForm } from '/@/components/Form';
  import { BottomFormSchemas, TopFormSchemas } from './config';

  defineProps<{
    getContainer: () => any;
  }>();

  const [topFormRegister, topFormActionType] = useForm({
    schemas: TopFormSchemas,
    showActionButtonGroup: false,
  });

  const [bottomFormRegister, bottomFormActionType] = useForm({
    schemas: BottomFormSchemas,
    showActionButtonGroup: false,
  });

  const {
    visible,
    spinning,
    nodeData,
    shadowComponent,
    getComponentKey,
    createComponentEl,
    open,
    handleSubmit,
    handleCancel,
    handleOnMounted,
  } = useAwaitPopupWindowBindData({ type: ElementsTypeEnum.NODE, mode: DataActionModeEnum.CREATE });

  const validate = async () => {
    await topFormActionType.validate();
    await bottomFormActionType.validate();
  };

  const getFieldsValue = () => {
    const topValue = topFormActionType.getFieldsValue() || {};
    const bottomValue = bottomFormActionType.getFieldsValue() || {};
    return {
      ...topValue,
      ...bottomValue,
    };
  };

  const resetFieldsValue = () => {
    topFormActionType.resetFields();
    bottomFormActionType.resetFields();
  };

  const handleModalOk = async () => {
    await validate();
    const data = getFieldsValue();
    await handleSubmit(data);
    resetFieldsValue();
  };

  defineExpose({ open });
</script>

<template>
  <BasicModal
    v-model:visible="visible"
    :title="`添加规则节点: ${nodeData?.config?.name}`"
    width="50%"
    :get-container="getContainer"
    @ok="handleModalOk"
    @cancel="handleCancel"
  >
    <Spin :spinning="spinning">
      <section v-if="shadowComponent" class="w-full h-full">
        <BasicForm @register="topFormRegister" />
        <component
          class="rule-node-form"
          :is="shadowComponent"
          ref="createComponentEl"
          :key="getComponentKey"
          :config="nodeData"
          @vue:mounted="handleOnMounted"
        />
        <BasicForm @register="bottomFormRegister" />
      </section>
      <Empty v-if="!shadowComponent" description="未找到创建组件" />
    </Spin>
  </BasicModal>
</template>

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