<template>
	<div class="custom-design-process-style">
		<a-tabs v-model:activeKey="activeKey" @change="onTabChange">
			<a-tab-pane
				v-for="pane in tabPanesData"
				:key="pane.id"
				:tab="pane.flowName"
			>
				<!-- 操作记录列表 -->
				<process-comments-list
					v-if="pane.list && pane.list.length > 0"
					:currentTabKey="activeKey"
					:operation-history-records-list="pane.list"
				/>
				<!-- 流程设计图 -->
				<process-flowsheet
					:currentTabKey="activeKey"
					:process-design-flowsheet="pane.bpmn"
				/>
			</a-tab-pane>
		</a-tabs>
	</div>
</template>

<script lang="ts">
import style from './index.module.less'
import { useRoute } from 'vue-router'
import { message } from 'ant-design-vue'
import { defineComponent, onMounted, ref } from 'vue'

import { getI18n } from '@/utils/i18n'
import { RequestResult } from '@/utils/request/model'
import { getRandomString, validatenull } from '@/utils/tool/translateValue'

import { ProcessViewNodeModel } from '@/types/process'
import {
	getHistoryHighLineListApi,
	getHistoryRecordsListApi,
} from '@/api/processHistory'
import { getBpmnsProcessImageApi } from '@/api/process-deployments'
import { GetHistoryRecordsListParamsModel } from '@/api/processHistory/model'

import {
	ProcessCommentsList,
	ProcessFlowsheet,
} from '@/views/design/components'

export default defineComponent({
	components: {
		ProcessCommentsList,
		ProcessFlowsheet,
	},
	setup() {
		// tab数据
		const tabPanesData = ref<
			{
				id?: string
				flowName?: string
				list?: ProcessViewNodeModel[]
				bpmn?: any
			}[]
		>()
		const activeKey = ref<string>()
		const routers = useRoute()
		// 列表loading
		const tableLoading = ref<boolean>(false)
		// 列表数据
		const processsList = ref<ProcessViewNodeModel[]>([])

		// 操作历史列表
		const getHistoryRecordsList = async () => {
			let params: GetHistoryRecordsListParamsModel = {
				businessKey: routers.query.businessKey?.toString(),
			}
			tableLoading.value = true
			const res: RequestResult<ProcessViewNodeModel[]> =
				await getHistoryRecordsListApi(params).finally(() => {
					tableLoading.value = false
				})
			processsList.value = res.data
		}
		// tab切换
		const onTabChange = (val: string) => {
			activeKey.value = val
		}

		onMounted(async () => {
			// 未发起时的流程设计图 - 需要token
			if (routers.query.flowId && routers.query.token) {
				await getBpmnsProcessImageApi(
					routers.query.flowId?.toString() || '',
					routers.query.token?.toString() || '',
					routers.query.applicationId?.toString() || ''
				)
					.then(res => {
						if (!validatenull(res.data) && !res.data.code) {
							tabPanesData.value = [
								{
									id: getRandomString(),
									flowName: res.data.name,
									list: [],
									bpmn: {
										bpmStr: res.data.bpmStr,
									},
								},
							]
							activeKey.value = tabPanesData.value[0].id
						} else {
							message.error(
								res.data.msg || validatenull(res.data)
									? '暂无数据！'
									: '请求出现错误，请联系管理员'
							)
						}
					})
					.catch(err => {
						message.error(
							err.msg || validatenull(err.msg)
								? '暂无数据！'
								: '请求出现错误，请联系管理员'
						)
					})
			} else {
				// 流转中的流程设计图、操作历史列表
				await getHistoryRecordsList()
				await getHistoryHighLineListApi({
					businessKey: routers.query.businessKey?.toString() || '',
				})
					.then(res => {
						if (!validatenull(res.data)) {
							let bpmnNameArr = Object.keys(res.data)
							tabPanesData.value = bpmnNameArr.map(v => {
								return {
									id: v,
									flowName: res.data[v].flowName,
									list: processsList.value[v],
									bpmn: res.data[v],
								}
							})
							activeKey.value = bpmnNameArr[0]
						} else {
							message.error(
								res.data.msg || validatenull(res.data)
									? '暂无数据！'
									: '请求出现错误，请联系管理员'
							)
						}
					})
					.catch(err => {
						message.error(
							err.msg || validatenull(err.msg)
								? '暂无数据！'
								: '请求出现错误，请联系管理员'
						)
					})
			}
		})

		return {
			style,
			tableLoading,
			getI18n,
			activeKey,
			tabPanesData,
			onTabChange,
		}
	},
})
</script>
