<script lang="ts" setup>
  import { BasicDrawer } from '/@/components/Drawer';
  import { Tabs, Spin, Empty } from 'ant-design-vue';
  import { TabsPanelEnum, TabsPanelNameEnum } from './config';
  import { useAwaitPopupWindowBindData } from '../../../hook/useAwaitPopupWindowBindData';
  import HelpMessage from './HelpMessage.vue';
  import { DataActionModeEnum } from '/@/enums/toolEnum';
  import { ElementsTypeEnum } from '../../../enum';
  import { useForm, BasicForm } from '/@/components/Form';
  import { BottomFormSchemas, TopFormSchemas } from '../CreateNodeModal/config';
  import { toRaw, unref } from 'vue';
  import { BasicEvents } from './BasicEvents';

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

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

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

  const handleTopFormMounted = () => {
    const data = unref(nodeData)?.data || {};
    topFormActionType.setFieldsValue(toRaw(unref(data)));
  };

  const handleBottomFormMounted = () => {
    const data = unref(nodeData)?.data || {};
    bottomFormActionType.setFieldsValue(toRaw(unref(data)));
  };

  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>
  <BasicDrawer
    v-model:visible="visible"
    width="40%"
    showFooter
    showCancelBtn
    showOkBtn
    @ok="handleModalOk"
    @close="handleCancel"
    wrapper-class-name="rule-node-update-drawer"
  >
    <template #title>
      <h2 class="font-bold text-2xl truncate">{{ nodeData?.data?.name }}</h2>
      <p class="mb-0 text-gray-700">
        <span> {{ nodeData?.categoryConfig?.title }}</span>
        <span class="mx-1">-</span>
        <span>{{ nodeData?.config?.name }}</span>
      </p>
    </template>
    <Tabs>
      <Tabs.TabPane :tab="TabsPanelNameEnum[TabsPanelEnum.DETAIL]" :key="TabsPanelEnum.DETAIL">
        <Spin :spinning="spinning">
          <section v-if="shadowComponent" class="w-full h-full overflow-y-auto pr-4">
            <BasicForm @register="topFormRegister" @vue:mounted="handleTopFormMounted" />
            <component
              class="rule-node-form"
              :is="shadowComponent"
              ref="createComponentEl"
              :config="nodeData"
              :key="getComponentKey"
              @vue:mounted="handleOnMounted"
            />
            <BasicForm @register="bottomFormRegister" @vue:mounted="handleBottomFormMounted" />
          </section>
          <Empty v-if="!shadowComponent" description="未找到链接组件" />
        </Spin>
      </Tabs.TabPane>
      <Tabs.TabPane
        v-if="nodeData?.created"
        :tab="TabsPanelNameEnum[TabsPanelEnum.EVENT]"
        :key="TabsPanelEnum.EVENT"
      >
        <BasicEvents :elementInfo="elementInfo" />
      </Tabs.TabPane>
      <Tabs.TabPane :tab="TabsPanelNameEnum[TabsPanelEnum.HELP]" :key="TabsPanelEnum.HELP">
        <HelpMessage :nodeData="nodeData" />
      </Tabs.TabPane>
    </Tabs>
  </BasicDrawer>
</template>

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

<style lang="less">
  .rule-node-update-drawer {
    .ant-drawer-wrapper-body {
      @apply flex flex-col;

      .ant-drawer-body {
        @apply flex flex-auto overflow-hidden;

        .ant-tabs-bar {
          box-shadow: 6px -1px 9px 3px #00000040;
        }

        .scroll-container {
          .scrollbar__wrap {
            .scrollbar__view {
              @apply h-full;

              .ant-tabs {
                @apply h-full flex flex-col;

                .ant-tabs-content {
                  height: calc(100% - 61px);
                }

                .ant-spin-nested-loading,
                .ant-spin-container {
                  @apply h-full;
                }
              }
            }
          }
        }
      }

      .vben-basic-drawer-footer {
        box-shadow: 6px -1px 9px 3px #00000040;
      }
    }
  }
</style>