<script lang="ts" setup>
  import { BasicDrawer } from '/@/components/Drawer';
  import { Spin, Empty } from 'ant-design-vue';
  import { useAwaitPopupWindowBindData } from '../../../hook/useAwaitPopupWindowBindData';
  import { ElementsTypeEnum } from '../../../enum';
  import { DataActionModeEnum } from '/@/enums/toolEnum';

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

  defineExpose({
    open,
  });
</script>

<template>
  <BasicDrawer
    v-model:visible="visible"
    width="40%"
    showFooter
    showOkBtn
    showCancelBtn
    @ok="handleSubmit"
    @close="handleCancel"
  >
    <template #title>
      <h2 class="font-bold text-2xl truncate">{{ nodeData?.data?.name }}</h2>
      <p class="mb-0 text-gray-700">规则节点详情</p>
    </template>
    <Spin :spinning="spinning">
      <component
        :is="shadowComponent"
        v-if="shadowComponent"
        ref="createComponentEl"
        :config="nodeData"
        :key="getComponentKey"
        @vue:mounted="handleOnMounted"
      />
      <Empty v-if="!shadowComponent" description="未找到链接组件" />
    </Spin>
  </BasicDrawer>
</template>