<template>
    <div class="design-view">
        <div class="panel-view" ref="panel-view"></div>
        <set-panel ref="setPanel" :flow-able-viewer="FlowAbleViewer"></set-panel>
    </div>
</template>

<script lang="ts">
    import {Vue, Component} from 'vue-property-decorator';
    import BpmnModeler from "bpmn-js/lib/Modeler"; // BPMN Modeler
    import XmlData from "../config/XmlData"; // 初始XML的数据
    // 工作流设计器的样式
    import 'bpmn-js/dist/assets/diagram-js.css' // 左边工具栏以及编辑节点的样式
    import 'bpmn-js/dist/assets/bpmn-font/css/bpmn.css'
    import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css'
    import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css'
    // 自定义设置面板
    import SetPanel from "./SetPanel/index.vue";

    @Component({
        components: {SetPanel}
    })
    export default class BpmPanel extends Vue {
        private FlowAbleViewer: any = {};

        private mounted() {
            this.initFlowAble();
        }

        // 隐藏logo
        private hiddenLogo() {
            try {
                if ('bjs-powered-by' === (this.$refs['panel-view'] as HTMLElement).children[0].children[0].className) {
                    ((this.$refs['panel-view'] as HTMLElement).children[0].children[0] as HTMLElement).style.display = 'none';
                }
            } catch (e) {
                console.error('fail');
            }
        }

        // 创建工作流
        private initFlowAble() {
            // camunda支持库
            const camundaLib = require('camunda-bpmn-moddle/lib');
            // 构建Modeler对象
            this.FlowAbleViewer = new BpmnModeler({
                container: this.$refs['panel-view'],
                additionalModules: [camundaLib],
                moddleExtensions: {
                    camunda: require('camunda-bpmn-moddle/resources/camunda.json'),
                }
            });
            // console.log(this.FlowAbleViewer);
            // console.log(this.FlowAbleViewer.get('elementRegistry'));
            // console.log(this.FlowAbleViewer.get('bpmnUpdater'));
            // console.log(this.FlowAbleViewer.get('camundaModdleExtension'));
            // console.log(this.FlowAbleViewer.get('attachEventBehavior'));
            // 生成视图
            this.FlowAbleViewer.importXML(XmlData, (err: any) => {
                if (!err) {
                    console.log('workflow build success!');
                    this.getRootElement();
                    this.hiddenLogo();
                } else {
                    console.log('something went wrong:', err);
                }
            });
            // console.log((this.$refs['panel-view'] as HTMLElement).children[0].children[1].children[4].children);
            ((this.$refs['panel-view'] as HTMLElement).children[0].children[1].children[2] as HTMLElement).style.backgroundImage = 'url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHBhdHRlcm4gaWQ9ImdyaWQiIHdpZHRoPSI0MCIgaGVpZ2h0PSI0MCIgcGF0dGVyblVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PHBhdGggZD0iTSAwIDEwIEwgNDAgMTAgTSAxMCAwIEwgMTAgNDAgTSAwIDIwIEwgNDAgMjAgTSAyMCAwIEwgMjAgNDAgTSAwIDMwIEwgNDAgMzAgTSAzMCAwIEwgMzAgNDAiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2UwZTBlMCIgb3BhY2l0eT0iMC4yIiBzdHJva2Utd2lkdGg9IjEiLz48cGF0aCBkPSJNIDQwIDAgTCAwIDAgMCA0MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZTBlMGUwIiBzdHJva2Utd2lkdGg9IjEiLz48L3BhdHRlcm4+PC9kZWZzPjxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JpZCkiLz48L3N2Zz4=")';
        }

        // 导出XML
        private exportXML() {
            const _this: any = this;
            this.FlowAbleViewer.saveXML({ format: true }, (err: any, xml: string) => {
                if (err) {
                    _this.$message.warning('保存失败');
                    console.log(err);
                } else {
                    _this.$message.success('保存成功');
                    console.log(xml);
                    return xml;
                }
            })
        }

        // 寻找根结点
        private getRootElement() {
            if (this.FlowAbleViewer['_definitions'] && this.FlowAbleViewer['_definitions'].rootElements[0]) {
                (this.$refs['setPanel'] as any).nowCheckShape = this.FlowAbleViewer.get('elementRegistry').get(this.FlowAbleViewer['_definitions'].rootElements[0].id);
            } else {
                // 如果创建完没有找到根结点，则手动解析XML进行寻找
                // const xml = this.exportXML();
                // console.log(xml);
            }
        }
    }
</script>

<style scoped lang="scss">
    .design-view{
        position: relative;
        height: calc(100vh - 58px);
        width: 100%;

        .panel-view{
            height: 100%;
            width: 100%;
        }
    }
</style>
