// 流程 - 流程图
<template>
	<a-card style="height: 100%; min-height: 800px">
		<a-spin :spinning="flowsheetLoading">
			<div
				style="
					display: flex;
					justify-content: space-between;
					position: relative;
					z-index: 10000;
				"
			>
				<span class="subtitle">{{
					getI18n('system', 'SYSTEM_Process_Picture')
				}}</span>
				<a-tooltip placement="left" :color="'white'">
					<template #title>
						<div :class="style['black']">
							{{ getI18n('system', 'SYSTEM_Process_Zoom') }}
						</div>
						<div :class="style['orange']">
							{{ getI18n('system', 'SYSTEM_Process_Orange') }}
						</div>
						<div :class="style['green']">
							{{ getI18n('system', 'SYSTEM_Process_Green') }}
						</div>
						<div :class="style['blue']">
							{{ getI18n('system', 'SYSTEM_Process_Blue') }}
						</div>
						<div :class="style['black']">
							{{ getI18n('system', 'SYSTEM_Process_Black') }}
						</div>
					</template>
					<info-circle-two-tone :style="{ fontSize: '20px' }" />
				</a-tooltip>
			</div>

			<div
				:id="wrapperId"
				class="custom-design-container"
				:style="{
					margin: '0 auto',
					width: 80 + '%',
					height: '500px',
				}"
			></div>
		</a-spin>
	</a-card>
</template>

<script lang="ts">
import style from './index.module.less'
import { decode } from 'js-base64'
import { getI18n } from '@/utils/i18n'
import { validatenull } from '@/utils/tool/translateValue'
import { InfoCircleTwoTone } from '@ant-design/icons-vue'
import { defineComponent, ref, watch, PropType, onMounted } from 'vue'

// import BpmnViewer from 'bpmn-js/lib/Viewer'
import CustomViewerModeler from '../CustomViewerModelers'
import MoveCanvasModule from 'diagram-js/lib/navigation/movecanvas'
import ZoomScrollModule from '../CustomZoomScrollModule'
// import CustomRenderer from '../CustomRenderer'
import { ProcessHistoryHighLineModel } from '@/types/process'

export default defineComponent({
	components: {
		InfoCircleTwoTone,
	},
	props: {
		// 流程图高亮显示的节点
		processDesignFlowsheet: {
			type: Object as PropType<ProcessHistoryHighLineModel>,
			required: false,
			default: () => {},
		},
	},
	setup(props) {
		const wrapperId = ref<string>('')
		const waitingToDoList = ref<string[]>() // 待办节点
		const highPointList = ref<string[]>() // 高亮节点
		const iDoList = ref<string[]>() // 已办节点
		const highLineList = ref<string[]>() // 高亮连线
		const flowsheetLoading = ref<boolean>(true)

		let containerEl
		let bpmnModeler
		let currentCanvasXml
		const scale = ref<number>(1)
		// 给节点添加样式类名
		const setNodeColor = (nodeCodes, colorClass, canvas) => {
			for (let i = 0; i < nodeCodes.length; i++) {
				if (nodeCodes[i]) {
					canvas.addMarker(nodeCodes[i], colorClass)
				}
			}
		}
		const previewTemp = async () => {
			containerEl = document.getElementById(wrapperId.value)

			if (!containerEl) return
			// 避免缓存，每次清一下
			containerEl.innerHTML = ''
			if (bpmnModeler) {
				bpmnModeler.destroy()
			}
			scale.value = 1
			bpmnModeler = new CustomViewerModeler({
				container: containerEl,
				additionalModules: [
					MoveCanvasModule,
					ZoomScrollModule,
					// CustomRenderer,
				],
			})
			const viewer = bpmnModeler

			try {
				await bpmnModeler.importXML(currentCanvasXml)

				// 只实现预览，核心代码以下两句足够
				const canvas = viewer.get('canvas')
				canvas.zoom('fit-viewport')
				// 待办节点 全局主色 蓝
				let waitingToDoNodeCodes = waitingToDoList.value
				setNodeColor(waitingToDoNodeCodes, 'to-do', canvas)
				// 高亮节点 成功色 绿
				let highPointNodeCodes = highPointList.value
				setNodeColor(highPointNodeCodes, 'doing', canvas)
				// 已办节点 警告色 橘
				let iDoNodeCodes = iDoList.value
				setNodeColor(iDoNodeCodes, 'done', canvas)
				// 线
				let highLineNodeCodes = highLineList.value
				setNodeColor(highLineNodeCodes, 'nodeSuccess', canvas)

				viewer.get('canvas').zoom('fit-viewport', 'auto')
			} catch (err) {}
		}

		watch(
			() => props.processDesignFlowsheet,
			newVal => {
				if (!validatenull(newVal)) {
					wrapperId.value = `container${newVal.businessKey}`
					currentCanvasXml = decode(newVal.bpmStr || '')
					waitingToDoList.value = newVal.waitingToDo
					highPointList.value = newVal.highPoint
					iDoList.value = newVal.iDo
					highLineList.value = newVal.highLine
				}
				flowsheetLoading.value = false
			},
			{ deep: true, immediate: true }
		)

		onMounted(() => {
			previewTemp()
		})

		return {
			style,
			scale,
			getI18n,
			wrapperId,
			flowsheetLoading,
		}
	},
})
</script>