<template>
  <div class="process-panel__container" :style="{ width: `${this.width}px` }">
    <el-collapse v-model="activeTab">
      <el-collapse-item name="base">
        <div slot="title" class="panel-tab__title"><i class="el-icon-info"></i>常规</div>
        <element-base-info :id-edit-disabled="idEditDisabled" :business-object="elementBusinessObject"
          :type="elementType" />
      </el-collapse-item>
    </el-collapse>
  </div>
</template>
<script lang="ts" setup>
  import ElementBaseInfo from "./base/ElementBaseInfo.vue";
  import {reactive,onMounted,defineEmits ,defineProps,provide} from 'vue'

  /**
   * 侧边栏
   * @Author MiyueFE
   * @Home https://github.com/miyuesc
   * @Date 2021年3月31日18:57:51
   */
  const props = defineProps({
    bpmnModeler: Object,
    prefix: {
      type: String,
      default: "camunda"
    },
    width: {
      type: Number,
      default: 480
    },
    idEditDisabled: {
      type: Boolean,
      default: false
    }
  })
  provide('prefix', props.prefix)
  provide('width', props.width)
  const data = reactive({
    bpmnElement:'',
    activeTab: "base",
    elementId: "",
    elementType: "",
    elementBusinessObject: {}, // 元素 businessObject 镜像，提供给需要做判断的组件使用
    conditionFormVisible: false, // 流转条件设置
    formVisible: false // 表单配置
  })
  onMounted(() => {
    initModels()
  })
  function initModels() {
    window.bpmnInstances = {
      modeler: props.bpmnModeler,
      modeling: props.bpmnModeler.get("modeling"),
      moddle: props.bpmnModeler.get("moddle"),
      eventBus: props.bpmnModeler.get("eventBus"),
      bpmnFactory: props.bpmnModeler.get("bpmnFactory"),
      elementFactory: props.bpmnModeler.get("elementFactory"),
      elementRegistry: props.bpmnModeler.get("elementRegistry"),
      replace: props.bpmnModeler.get("replace"),
      selection: props.bpmnModeler.get("selection")
    };
    getActiveElement();
  }
  function getActiveElement() {
    // 初始第一个选中元素 bpmn:Process
    initFormOnChanged(null);
    props.bpmnModeler.on("import.done", e => {
      initFormOnChanged(null);
    });
    // 监听选择事件，修改当前激活的元素以及表单
    props.bpmnModeler.on("selection.changed", ({ newSelection }) => {
      initFormOnChanged(newSelection[0] || null);
    });
    props.bpmnModeler.on("element.changed", ({ element }) => {
      // 保证 修改 "默认流转路径" 类似需要修改多个元素的事件发生的时候，更新表单的元素与原选中元素不一致。
      if (element && element.id === data.elementId) {
        initFormOnChanged(element);
      }
    });
  }
  // 初始化数据
  function initFormOnChanged(element) {
    let activatedElement = element;
    if (!activatedElement) {
      activatedElement =
        window.bpmnInstances.elementRegistry.find(el => el.type === "bpmn:Process") ??
        window.bpmnInstances.elementRegistry.find(el => el.type === "bpmn:Collaboration");
    }
    if (!activatedElement) return;
    console.log(`
              ----------
      select element changed:
                id:  ${activatedElement.id}
              type:  ${activatedElement.businessObject.$type}
              ----------
              `);
    console.log("businessObject: ", activatedElement.businessObject);
    window.bpmnInstances.bpmnElement = activatedElement;
    data.bpmnElement = activatedElement;
    data.elementId = activatedElement.id;
    data.elementType = activatedElement.type.split(":")[1] || "";
    data.elementBusinessObject = JSON.parse(JSON.stringify(activatedElement.businessObject));
    data.conditionFormVisible = !!(
      this.elementType === "SequenceFlow" &&
      activatedElement.source &&
      activatedElement.source.type.indexOf("StartEvent") === -1
    );
    data.formVisible = data.elementType === "UserTask" || data.elementType === "StartEvent";
  }
</script>