<template>
    <el-dialog draggable v-model="dialogVisible" title="详情" width="1500">
        <el-tabs v-model="activeName" class="demo-tabs">
            <el-tab-pane label="表单信息" name="1">User</el-tab-pane>
            <el-tab-pane label="流转记录" name="2">
                <Recording ref="RecordingRef" />
            </el-tab-pane>
            <el-tab-pane label="流程图" name="3">
                <ProcessViewer
                    v-if="bpmnXMLShow"
                    :key="activeName"
                    ref="ProcessViewerRef"
                    v-model="bpmnXML"
                    :value="bpmnXML"
                />
            </el-tab-pane>
        </el-tabs>
    </el-dialog>
</template>
<script setup lang="ts">
import { ref, reactive, nextTick } from 'vue'
import { flowXmlAndNode } from '@/api/process-boot/bpm'
import Recording from './recording.vue'
import ProcessViewer from './ProcessViewer.vue'
const dialogVisible = ref(false)
const activeName = ref(1)
const RecordingRef = ref()
const ProcessViewerRef = ref()
const bpmnXMLShow = ref(false)
const bpmnXML: any = ref(null)
const open = async (row: any) => {
    dialogVisible.value = true
    await flowXmlAndNode({
        deployId: row.deployId,
        procInsId: row.procInsId
    }).then(res => {
        bpmnXML.value = res.data.xmlData

    })
    bpmnXMLShow.value = true

    await nextTick(() => {
        RecordingRef.value.open(row)
        // ProcessViewerRef.value.open(bpmnXML.value)
    })
}
defineExpose({ open })
</script>
<style lang="scss" scoped></style>
