<template>
  <div class="panel-tab__content">
    <el-form size="small" label-width="90px" @submit.native.prevent>
      <el-form-item label="ID">
        <el-input
          v-model="elementBaseInfo.id"
          :disabled="idEditDisabled || elementBaseInfo.$type === 'bpmn:Process'"
          clearable
          @change="updateBaseInfo('id')"
        />
      </el-form-item>
      <el-form-item label="名称">
        <el-input
          v-model="elementBaseInfo.name"
          clearable
          @change="updateBaseInfo('name')"
        />
      </el-form-item>
      <!--流程的基础属性-->
      <template v-if="elementBaseInfo.$type === 'bpmn:Process'">
        <el-form-item label="版本标签">
          <el-input
            v-model="elementBaseInfo.versionTag"
            clearable
            @change="updateBaseInfo('versionTag')"
          />
        </el-form-item>
        <el-form-item label="可执行">
          <el-switch
            v-model="elementBaseInfo.isExecutable"
            active-text="是"
            inactive-text="否"
            @change="updateBaseInfo('isExecutable')"
          />
        </el-form-item>
      </template>
    </el-form>
  </div>
</template>

<script setup name="ElementBaseInfo">
import { nextTick, onBeforeUnmount, toRefs } from "vue";
let bpmnElement;
const props = defineProps({
  businessObject: Object,
  type: String,
  idEditDisabled: {
    type: Boolean,
    default: true,
  },
});
const { businessObject, type, idEditDisabled } = toRefs(props);
const data = reactive({
  elementBaseInfo: {},
  bpmnElement: undefined,
});
const { elementBaseInfo } = toRefs(data);
watch(
  businessObject,
  (val) => {
    if (val) {
      nextTick(() => {
        resetBaseInfo();
      });
    }
  },
  { immediate: false }
);

function resetBaseInfo() {
  bpmnElement = window?.bpmnInstances?.bpmnElement;
  elementBaseInfo.value = JSON.parse(
    JSON.stringify(bpmnElement.businessObject)
  );
}
function updateBaseInfo(key) {
  const attrObj = Object.create(null);
  attrObj[key] = elementBaseInfo.value[key];
  if (key === "id") {
    window.bpmnInstances.modeling.updateProperties(bpmnElement, {
      id: elementBaseInfo.value[key],
      di: { id: `${elementBaseInfo.value[key]}_di` },
    });
  } else {
    window.bpmnInstances.modeling.updateProperties(bpmnElement, attrObj);
  }
}
onBeforeUnmount(() => {
  bpmnElement = null;
});
</script>
