<script setup lang="ts">
  import type { ComponentInstance } from 'vue'
  import type Viewer from 'bpmn-js/lib/Viewer'
  import type ElementRegistry from 'diagram-js/lib/core/ElementRegistry'
  import BpmnViewer from '@/components/Viewer/index.vue'
  import BpmnMocker from '@/components/Mocker/index.vue'
  import { is } from 'bpmn-js/lib/util/ModelUtil'
  import { getOneActivityVoByProcessInstanceIdAndActivityId } from '@/api/bpmn'
  import { Message } from '@arco-design/web-vue'

  const viewer = ref<ComponentInstance<typeof BpmnViewer>>()

  const viewerXmlLoading = ref(false)
  const shapeAndPops = ref<string[]>([])
  const nodeInfoDetails = ref<Record<string, any>>({})
  const processStateStyleMap = {
    processing: 'arcoblue',
    finish: 'green',
    pending: 'orangered'
  }

  const bpmnViewer = shallowRef<Viewer | undefined>()

  const processId = ref('78baf1d05bb742ec9bd17ff5f98b27a4')

  const reloadViewerXML = async () => {
    try {
      shapeAndPops.value = []
      nodeInfoDetails.value = {}

      viewerXmlLoading.value = true
      // @ts-expect-error
      const { data, success, msg } = await getHighLightedNodeVoByProcessInstanceId(processId.value)
      if (success) {
        const {
          activeActivityIds = [],
          hisActiveActivityIds = [],
          modelXml,
          highLightedFlows = []
        } = data || {}
        if (!modelXml) return

        await viewer.value?.createNewProcess(modelXml)

        viewer.value?.setPassedNodes([...highLightedFlows, ...hisActiveActivityIds])
        viewer.value?.setActiveNodes([...activeActivityIds])
        viewer.value?.setProcessingMarker([...activeActivityIds])

        initPopup()
      } else {
        Message.error(msg)
      }
      console.log(data)
    } finally {
      viewerXmlLoading.value = false
    }
  }

  const initPopup = () => {
    const registry = bpmnViewer.value?.get<ElementRegistry>('elementRegistry')
    if (!registry) return
    shapeAndPops.value = registry
      .filter((el: BpmnElement) => is(el, 'bpmn:Activity'))
      .map((e) => e.id)
  }

  const setBpmnViewer = (v) => (bpmnViewer.value = v)

  const getNodeDetails = (element: BpmnElement) => {
    if (is(element, 'bpmn:Activity')) {
      if (!nodeInfoDetails.value[element.id]) {
        nodeInfoDetails.value[element.id] = { loading: true }
        return mockNodeDetailGetter(element.id)
      }
    }
  }
</script>

<template>
  <ASpace align="center">
    <AButton type="primary" @click="reloadViewerXML">加载Viewer流程图</AButton>
  </ASpace>
  <ADivider />
  <BpmnViewer
    ref="viewer"
    :loading="viewerXmlLoading"
    @viewer-init="setBpmnViewer"
    @element-hover="getNodeDetails"
  />
  <tippy-popover
    v-for="shapeId in shapeAndPops"
    :key="shapeId"
    :target="`[data-element-id=${shapeId}]`"
  >
    <ASpin :loading="nodeInfoDetails[shapeId] && nodeInfoDetails[shapeId].loading">
      <div v-if="nodeInfoDetails[shapeId]" class="node-details-info">
        <div class="details_header">{{ nodeInfoDetails[shapeId].name }}</div>
        <div class="details_label">审批人员</div>
        <div class="details_value">
          <ATag color="arcoblue">{{ nodeInfoDetails[shapeId].approver }}</ATag>
        </div>
        <div class="details_label">节点状态</div>
        <div class="details_value">
          <ATag :color="processStateStyleMap[nodeInfoDetails[shapeId].status]">{{
            nodeInfoDetails[shapeId].statusName
          }}</ATag>
        </div>
        <div class="details_label">开始时间</div>
        <div class="details_value">{{ nodeInfoDetails[shapeId].startDate }}</div>
        <div class="details_label">结束时间</div>
        <div class="details_value">{{
          nodeInfoDetails[shapeId].status === 'processing' ? '-' : nodeInfoDetails[shapeId].endDate
        }}</div>
        <div class="details_label">审批耗时</div>
        <div class="details_value">{{
          nodeInfoDetails[shapeId].status === 'processing' ? '-' : nodeInfoDetails[shapeId].duration
        }}</div>
      </div>
    </ASpin>
  </tippy-popover>
</template>

<script setup lang="ts">
  import type { ComponentInstance } from 'vue'
  import type Viewer from 'bpmn-js/lib/Viewer'
  import BpmnMocker from '@/components/Mocker/index.vue'
  import {
    getCustomFlowSequenceFlows,
    getHighLightedNodeVoByProcessInstanceId
  } from '@/api/bpmn'
  import { Message } from '@arco-design/web-vue'

  const mocker = ref<ComponentInstance<typeof BpmnMocker>>()

  const mockerXmlLoading = ref(false)

  const reloadMockerXML = async () => {
    try {
      mockerXmlLoading.value = true
      // @ts-expect-error
      const { data, success, msg } = await getHighLightedNodeVoByProcessInstanceId(processId.value)
      if (success) {
        const { modelXml } = data || {}
        if (!modelXml) return

        await mocker.value?.createNewProcess(modelXml)

        await getDefaultFlows()
      } else {
        Message.error(msg)
      }
    } finally {
      mockerXmlLoading.value = false
    }
  }

  const getDefaultFlows = async () => {
    try {
      // @ts-expect-error
      const { data, success, msg } = await getCustomFlowSequenceFlows({
        dataJson: '{}',
        companyId: '0',
        deptId: '0',
        userCode: '12',
        procInstId: processId.value,
        modelKey: processId.value
      })
      if (success) {
        mocker.value?.setSequenceFlows(data as string[])
      } else {
        Message.error(msg)
      }
    } catch (e) {
      console.error(e)
    }
  }
</script>

<template>
  <ASpace align="center">
    <AButton type="primary" @click="reloadMockerXML">加载Mocker流程图</AButton>
  </ASpace>
  <ADivider />
  <BpmnMocker ref="mocker" :loading="mockerXmlLoading" />
</template>