<template>
  <BasicModal
    v-bind="$attrs"
    width="1000px"
    :minHeight="600"
    :showCancelBtn="false"
    :showOkBtn="false"
    @register="registerModal"
    @visible-change="handleVisibleChange"
  >
    <div id="workflowChart"/>
  </BasicModal>
</template>
<script lang="ts" setup>
  import { reactive } from 'vue';
  import { loadMicroApp, MicroApp } from 'qiankun';
  import { getSubDefineProps } from '/@/qiankun/state';
  import { GlStateEnum, WORKFLOW_DESIGN_APP_COMPONENTS } from '/@/enums/microAppEnum';
  import { useMicroAppStore } from '/@/store/modules/microApp';
  import { apps } from '/@/qiankun/apps';
  import { getFlowChart as getProcessDefFlowChart } from '/@/api/platform/workflow/controller/process';
  import { getFlowChart as getProcessInsFlowChart } from '/@/api/platform/workflow/controller/task';
  import { BasicModal, ModalProps, useModalInner } from '/@/components/Modal';
  import { useMessage } from '/@/hooks/web/useMessage';

  interface WindowState {
    workflowDesignApp: MicroApp;
    bpmnData: Recordable;
  }

  const state = reactive<WindowState>({
    workflowDesignApp: undefined!,
    bpmnData: {},
  });

  const workflowDesignProps = {
    style: { 'min-height': '100vh' },
  };
  const emit = defineEmits(['register']);
  const microAppStore = useMicroAppStore();
  const { createMessage } = useMessage();
  const [registerModal, { setModalProps, closeModal, changeLoading }] = useModalInner(async (data: BoxPayload = { _tag: '' }) => {
    const props: Partial<ModalProps> = { title: '查看进度' };
    const { processInsId, processDefId } = data.record || {};
    if (processInsId || processDefId) {
      changeLoading();
      try {
        if (processInsId) {
          state.bpmnData = await getProcessInsFlowChart(processInsId);
        } else {
          const bpmnXml = await getProcessDefFlowChart(processDefId);
          state.bpmnData = { bpmnXml };
        }
        state.workflowDesignApp = loadMicroApp(Object.assign({} , apps.find(item => item.name == 'workflow-design'), {
          container: '#workflowChart',
          props: {
            ...getSubDefineProps(),
            mountApp: WORKFLOW_DESIGN_APP_COMPONENTS.CHART,
            [GlStateEnum.WORKFLOW_DESIGN_APP_PROPS_KEY]: workflowDesignProps
          }
        }), { sandbox: { experimentalStyleIsolation: true }});
        state.workflowDesignApp.mountPromise.then(() => {
          const workflowChartApp: Recordable = microAppStore.getWorkflowDesignApp(WORKFLOW_DESIGN_APP_COMPONENTS.CHART),
                workflowRef: Recordable = workflowChartApp.getRef().$refs['workflow-chart'];
          workflowRef.setHighlightImportDiagram(state.bpmnData);
          changeLoading(false);
        });
      } catch(e: any) {
        createMessage.error(e);
        changeLoading(false);
      }
    } else createMessage.error('无法打开流程图,没有关联流程图ID!');
    setModalProps(props);
  });

  function handleVisibleChange(visible: boolean) {
    !visible && state.workflowDesignApp?.unmount();
  }

</script>
<style lang="less">
  .ant-modal {
    .ant-modal-body > .scrollbar {
      padding: 0;
    }
  }
</style>

