<template>
    <div>
        <el-tabs v-model="nowCheckTab" class="set-panel" type="border-card">
            <el-tab-pane label="属性设置" name="property">
                <property-set :node="nowCheckShape" :flow-able-viewer="FlowAbleViewer" />
            </el-tab-pane>
            <el-tab-pane v-if="panelConfig[nowCheckShape.type] && panelConfig[nowCheckShape.type].listener" label="事件监听" name="listen">
                <listener-set :node="nowCheckShape" :flow-able-viewer="FlowAbleViewer" />
            </el-tab-pane>
            <el-tab-pane label="拓展字段" name="extension">
                <extension-properties :node="nowCheckShape" :flow-able-viewer="FlowAbleViewer" />
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script lang="ts">
    import {Vue, Component, Prop, Watch} from 'vue-property-decorator';
    import {
        camundaCreatedResult,
        CamundaClickedResult,
        ConnectionChangedResult,
        BPMNElementType,
        ElementMovedEnd
    } from "./types/camundaType";
    import PropertySet from './components/PropertySetPanel/PropertySet.vue'
    import ExtensionProperties from './components/ExtensionPropertiesSetPanel/index.vue'
    import ListenerSet from './components/ListenerSetPanel/index.vue'
    import panelConfig from "./components/PropertySetPanel/panelConfig";

    @Component({
        components: {PropertySet, ExtensionProperties, ListenerSet}
    })
    export default class SetPanelIndex extends Vue {
        @Prop({ type: Object, required: true}) private FlowAbleViewer: any;

        private nowCheckShape: BPMNElementType | object = {};
        private stopListen: any = false; // 停止监听事件, 防抖
        private nowCheckTab: string | null = 'property'; // 当前选中的Tab
        private panelConfig: any = panelConfig;

        // 监测 Viewer的变化, 视图创建完毕开始监听变化
        @Watch('FlowAbleViewer', {immediate: true})
        private FlowAbleViewerChanged(newViewer: any) {
           if (Object.keys(newViewer).length !== 0) {
               this.startEventListen();
           }
        }

        // 开始监听节点变化
        private startEventListen() {
            // 节点创建完毕激活该事件
            this.FlowAbleViewer.on('commandStack.shape.create.executed', (element: camundaCreatedResult) => {
                if (element.context && 'bpmn:Participant' === element.context.shape.type) {
                    this.stopListen = true; // 在创建 Participant 时, 因为父级的变化，会激活move事件
                    setTimeout(() => this.stopListen = false, 100);
                }
                this.nowCheckShape = element.context.shape;
                // console.log(element);
            })
            // 点击触发
            this.FlowAbleViewer.on('element.click', (element: CamundaClickedResult) => {
                this.nowCheckShape = element.element;
                // console.log(this.FlowAbleViewer.get(element.element));
                // console.log('click', element);
            })
            // 监听连线的变化
            this.FlowAbleViewer.on('connection.changed', (element: ConnectionChangedResult) => {
                // 判断连线的属性变化
                if ((this.nowCheckShape as BPMNElementType).id === element.element.id) {
                    this.nowCheckShape = element.element;
                    // console.log(element);
                }
            })
            // 监听拖动，拖动完毕选中结点
            this.FlowAbleViewer.on('commandStack.shape.move.executed', (element: ElementMovedEnd) => {
                if (element.context && 'bpmn:Participant' === element.context.shape.type) {
                    this.stopListen = true; // 在创建 Participant 拖动时, 因为父级的变化，会激活move事件
                    setTimeout(() => this.stopListen = false, 100);
                }
                if (!this.stopListen) {
                    this.nowCheckShape = element.context.shape;
                }
                // console.log(element);
            })
        }
    }
</script>

<style scoped lang="scss">
    .set-panel{
        z-index: 5;
        position: absolute;
        right: 0;
        top: 0;
        width: 540px;
        height: calc(100vh - 58px);
        background-color: #ffffff;
        border-left: 1px solid #eeeeee;
        overflow-y: auto;
        .tabs-panel{
            width: 96%;
            margin: 4px 2%;
            border: 1px solid #eeeeee;
        }

        /*.set-panel-tabs{*/
        /*    padding: 22px 24px 0;*/
        /*    display: flex;*/
        /*    align-items:flex-end;*/
        /*    .sp-tabs-item{*/
        /*        font-size: 1.1em;*/
        /*        color: #9d9d9d;*/
        /*        font-weight: bold;*/
        /*        cursor: pointer;*/
        /*        &.active {*/
        /*            font-size: 1.32em;*/
        /*            color: #333333;*/
        /*            text-shadow: 0 0 1px #b8b8b8;*/
        /*        }*/
        /*        &:not(:last-child) {*/
        /*            padding-right: 12px;*/
        /*        }*/
        /*    }*/
        /*}*/
    }
</style>
