<!--节点配置面板-->
<template>
  <div>
    <!-- 事件抽屉 -->
    <div v-for="item in componentsList" :key="item.id">
      <component v-if="nodeData.type === item.type" :is="item.ref" @close="closed"></component>
    </div>
  </div>
</template>

<script>
import { defineComponent, inject, provide, ref, nextTick, reactive } from 'vue';
import SubWorkFlowEventPanel from './panel/sub_workflow_event_panel.vue';
import ConditionGatewayEventPanel from './panel/condition-gateway-event-panel.vue';
import MessageListeningPanel from './panel/message_listening_panel.vue';
import CustomActivityPanel from './panel/custom_activity_panel.vue';
import ApproveEventPanel from './panel/approve-event-panel.vue';
import SendEventPanel from './panel/send-event-panel.vue';
import PromoterEventPanel from './panel/promoter-event-panel.vue';

export default defineComponent({
  name: 'WorkflowNodeConfigPanel',
  components: {
    ApproveEventPanel,
    SubWorkFlowEventPanel,
    ConditionGatewayEventPanel,
    CustomActivityPanel,
    MessageListeningPanel,
    PromoterEventPanel,
    SendEventPanel
  },
  props: {
    // 节点id
    nodeId: {
      type: String
    }
  },
  emits: ['closed'],
  setup(props, { emit }) {
    const drawerOpening = ref(false);

    const getGraph = inject('getGraph');
    const node = ref(getGraph.value.getNodes().find(({ id }) => props.nodeId === id));
    const nodeData = ref(JSON.parse(node.value.getData()));
    // 组件列表
    const componentsList = reactive([
      {
        id: '12',
        name: '子流程',
        type: 12,
        ref: 'SubWorkFlowEventPanel'
      },
      {
        id: '60',
        name: '条件',
        type: 60,
        ref: 'ConditionGatewayEventPanel'
      },
      {
        id: '20',
        name: '消息监听',
        type: 20,
        ref: 'MessageListeningPanel'
      },
      {
        id: '40',
        name: '自定义活动',
        type: 40,
        ref: 'CustomActivityPanel'
      },
      {
        id: '30',
        name: '审批',
        type: 30,
        ref: 'ApproveEventPanel'
      },
      {
        id: '32',
        name: '办理',
        type: 32,
        ref: 'ApproveEventPanel'
      },
      {
        id: '13',
        name: '发起人',
        type: 13,
        ref: 'PromoterEventPanel'
      },
      {
        id: '31',
        name: '抄送',
        type: 31,
        ref: 'SendEventPanel'
      },
      {
        id: '248',
        name: '条件',
        type: 248,
        ref: 'ConditionGatewayEventPanel'
      },
    ]);

    provide('getNode', node);
    nextTick(() => (drawerOpening.value = true));

    /**
     * 关闭弹窗
     */
    const closed = () => {
      emit('closed', false);
    };

    return { drawerOpening, closed, nodeData, node, componentsList };
  }
});
</script>

<style scoped lang="less"></style>
