<template>
  <div>
    <x-form ref="xForm" v-model="formData" :config="formConfig">
      <template #executionListener>
        <el-badge :value="executionListenerLength">
          <el-button size="small" @click="dialogName = 'executionListenerDialog'"
            >编辑</el-button
          >
        </el-badge>
      </template>
      <template #signal>
        <el-badge :value="signalLength">
          <el-button size="small" @click="dialogName = 'signalDialog'">编辑</el-button>
        </el-badge>
      </template>
    </x-form>
    <executionListenerDialog
      v-if="dialogName === 'executionListenerDialog'"
      :element="element"
      :modeler="modeler"
      @close="finishExecutionListener"
    />
    <signalDialog
      v-if="dialogName === 'signalDialog'"
      :element="element"
      :modeler="modeler"
      @close="finishExecutionListener"
    />
  </div>
</template>

<script>
import mixinPanel from "../../common/mixinPanel";
import mixinExecutionListener from "../../common/mixinExecutionListener";
import signalDialog from "./property/signal";
import { commonParse } from "../../common/parseElement";
export default {
  components: {
    signalDialog,
  },
  mixins: [mixinPanel, mixinExecutionListener],
  data() {
    return {
      signalLength: 0,
      formData: {},
      xmlOption: [
        {
          xType: "input",
          name: "id",
          label: "流程标识key",
          rules: [{ required: true, message: "Id 不能为空" }],
        },
        {
          xType: "input",
          name: "name",
          label: "流程名称",
        },
        {
          xType: "input",
          name: "documentation",
          label: "节点描述",
        },
        {
          xType: "slot",
          name: "executionListener",
          label: "执行监听器",
        },
        {
          xType: "slot",
          name: "signal",
          label: "信号定义",
        },
      ],
    };
  },
  computed: {
    formConfig() {
      const _this = this;
      // 页面初始完成后执行...
      if (_this.categorys.length > 0) {
        let category = {
          xType: "select",
          name: "processCategory",
          label: "流程分类",
          rules: [{ required: true, message: "流程类型不能为空" }],
          dic: { data: _this.categorys, label: "dictLabel", value: "dictValue" },
        };
        _this.xmlOption.unshift(category);
        // 超管能为其它项目&&公司添加工作流程
        if (_this.$store.getters.userId == 1) {
          console.log("我是超管...{}");
          _this.xmlOption.unshift({
            xType: "input",
            name: "ownerDeptId",
            label: "所属项目主键",
          });
        }
      }
      return {
        inline: false,
        item: _this.xmlOption,
      };
    },
  },
  watch: {
    "formData.processCategory": function (val) {
      if (val === "") val = null;
      this.updateProperties({ "flowable:processCategory": val });
    },
  },
  created() {
    this.formData = commonParse(this.element);
  },
  methods: {
    computedSignalLength() {
      this.signalLength =
        this.element.businessObject.extensionElements?.values?.length ?? 0;
    },
    finishSignal() {
      if (this.dialogName === "signalDialog") {
        this.computedSignalLength();
      }
      this.dialogName = "";
    },
  },
};
</script>

<style>
.bjs-powered-by {
  display: none !important;
}
</style>
