<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 #taskListener>
        <el-badge :value="taskListenerLength">
          <el-button size="small" @click="dialogName = 'taskListenerDialog'"
            >编辑</el-button
          >
        </el-badge>
      </template>
      <template #multiInstance>
        <el-badge :is-dot="hasMultiInstance">
          <el-button size="small" @click="dialogName = 'multiInstanceDialog'"
            >编辑</el-button
          >
        </el-badge>
      </template>
    </x-form>
    <executionListenerDialog
      v-if="dialogName === 'executionListenerDialog'"
      :element="element"
      :modeler="modeler"
      @close="finishExecutionListener"
    />
    <taskListenerDialog
      v-if="dialogName === 'taskListenerDialog'"
      :element="element"
      :modeler="modeler"
      @close="finishTaskListener"
    />
    <multiInstanceDialog
      v-if="dialogName === 'multiInstanceDialog'"
      :element="element"
      :modeler="modeler"
      @close="finishMultiInstance"
    />
  </div>
</template>

<script>
import mixinPanel from "../../common/mixinPanel";
import executionListenerDialog from "./property/executionListener";
import taskListenerDialog from "./property/taskListener";
import multiInstanceDialog from "./property/multiInstance";
import { commonParse, userTaskParse } from "../../common/parseElement";
export default {
  components: {
    executionListenerDialog,
    taskListenerDialog,
    multiInstanceDialog,
  },
  mixins: [mixinPanel],
  props: {
    users: {
      type: Array,
      required: true,
    },
    groups: {
      type: Array,
      required: true,
    },
  },
  data() {
    return {
      userTypeOption: [
        { label: "指定人员", value: "assignee" },
        { label: "候选人员", value: "candidateUsers" },
        { label: "候选组", value: "candidateGroups" },
      ],
      dataTypeOption: [
        { label: "固定", value: "fixed" },
        { label: "动态", value: "dynamic" },
      ],
      dialogName: "",
      executionListenerLength: 0,
      taskListenerLength: 0,
      hasMultiInstance: false,
      formData: {},
    };
  },
  computed: {
    formConfig() {
      const _this = this;
      return {
        inline: false,
        item: [
          {
            xType: "input",
            name: "id",
            label: "节点 id",
            rules: [{ required: true, message: "Id 不能为空" }],
          },
          {
            xType: "input",
            name: "name",
            label: "节点名称",
            rules: [{ required: true, message: "节点名称不能为空" }],
          },
          {
            xType: "input",
            name: "documentation",
            label: "节点描述",
          },
          {
            xType: "slot",
            name: "executionListener",
            label: "执行监听器",
          },
          {
            xType: "slot",
            name: "taskListener",
            label: "任务监听器",
            show: !!_this.showConfig.taskListener,
          },
          {
            xType: "select",
            name: "userType",
            label: "人员类型",
            dic: _this.userTypeOption,
            show: !!_this.showConfig.userType,
          },
          {
            xType: "radio",
            name: "dataType",
            label: "指定方式",
            dic: _this.dataTypeOption,
            show: !!_this.showConfig.dataType,
            rules: [{ required: true, message: "请指定方式" }],
          },
          {
            xType: "input",
            name: "assignee",
            label: "指定人(表达式)",
            show:
              _this.showConfig.assignee &&
              _this.formData.userType === "assignee" &&
              _this.formData.dataType === "fixed",
          },
          {
            xType: "input",
            name: "candidateUsers",
            label: "候选人(表达式)",
            show:
              _this.showConfig.candidateUsers &&
              _this.formData.userType === "candidateUsers" &&
              _this.formData.dataType === "fixed",
          },
          {
            xType: "input",
            name: "candidateGroups",
            label: "候选组(表达式)",
            show:
              !!_this.showConfig.candidateGroups &&
              _this.formData.userType === "candidateGroups" &&
              _this.formData.dataType === "fixed",
          },
          {
            xType: 'select',
            name: 'assignee',
            label: '指定人员',
            allowCreate: true,
            filterable: true,
            dic: { data: _this.users, label: 'realName', value: 'id' },
            show: !!_this.showConfig.assignee && _this.formData.userType === 'assignee'&&
              _this.formData.dataType === "dynamic"
          },
          {
            xType: 'select',
            name: 'candidateUsers',
            label: '候选人员',
            multiple: true,
            allowCreate: true,
            filterable: true,
            dic: { data: _this.users, label: 'realName', value: 'id' },
            show: !!_this.showConfig.candidateUsers && _this.formData.userType === 'candidateUsers'&&
              _this.formData.dataType === "dynamic"
          },
          {
            xType: 'select',
            name: 'candidateGroups',
            label: '候选组',
            multiple: true,
            allowCreate: true,
            filterable: true,
            dic: { data: _this.groups, label: 'roleName', value: 'roleId' },
            show: !!_this.showConfig.candidateGroups && _this.formData.userType === 'candidateGroups'&&
              _this.formData.dataType === "dynamic"
          },
          {
            xType: "slot",
            name: "multiInstance",
            label: "多实例",
          },
          {
            xType: "switch",
            name: "async",
            label: "异步",
            activeText: "是",
            inactiveText: "否",
            show: !!_this.showConfig.async,
          },
          {
            xType: "input",
            name: "priority",
            label: "优先级",
            show: !!_this.showConfig.priority,
          },
          {
            xType: "input",
            name: "formKey",
            label: "表单标识key",
            show: !!_this.showConfig.formKey,
          },
          {
            xType: "input",
            name: "skipExpression",
            label: "跳过表达式",
            show: !!_this.showConfig.skipExpression,
          },
          {
            xType: "switch",
            name: "isForCompensation",
            label: "是否为补偿",
            activeText: "是",
            inactiveText: "否",
            show: !!_this.showConfig.isForCompensation,
          },
          {
            xType: "switch",
            name: "triggerable",
            label: "服务任务可触发",
            activeText: "是",
            inactiveText: "否",
            show: !!_this.showConfig.triggerable,
          },
          {
            xType: "switch",
            name: "autoStoreVariables",
            label: "自动存储变量",
            activeText: "是",
            inactiveText: "否",
            show: !!_this.showConfig.autoStoreVariables,
          },
          {
            xType: "input",
            name: "ruleVariablesInput",
            label: "输入变量",
            show: !!_this.showConfig.ruleVariablesInput,
          },
          {
            xType: "input",
            name: "rules",
            label: "规则",
            show: !!_this.showConfig.rules,
          },
          {
            xType: "input",
            name: "resultVariable",
            label: "结果变量",
            show: !!_this.showConfig.resultVariable,
          },
          {
            xType: "switch",
            name: "exclude",
            label: "排除",
            activeText: "是",
            inactiveText: "否",
            show: !!_this.showConfig.exclude,
          },
          {
            xType: "input",
            name: "class",
            label: "类",
            show: !!_this.showConfig.class,
          },
          {
            xType: "datePicker",
            type: "datetime",
            name: "dueDate",
            label: "到期时间",
            show: !!_this.showConfig.dueDate,
          },
        ],
      };
    },
  },
  watch: {
    "formData.userType": function (val, oldVal) {
      if (oldVal) {
        const types = ["assignee", "candidateUsers", "candidateGroups"];
        types.forEach((type) => {
          delete this.element.businessObject.$attrs[`flowable:${type}`];
          delete this.formData[type];
        });
      }
    },
    // 动态选择流程执行人
    "formData.dataType": function (val) {
      const that = this;

      this.updateProperties({ "flowable:dataType": val });
      if (val === "dynamic") {
        this.updateProperties({ "flowable:userType": that.formData.userType });
      }else if(val==="fixed"){
         this.updateProperties({ "flowable:userType": that.formData.userType });
      }
      // 切换时 删除之前的值
      const types = ["assignee", "candidateUsers", "candidateGroups"];
      types.forEach((type) => {
        delete this.element.businessObject.$attrs[`flowable:${type}`];
        delete this.formData[type];
      });
      // 传值到父组件
      const params = {
        dataType: val,
        userType: this.formData.userType,
      };
      this.$emit("dataType", params);
    },
    "formData.assignee": function (val) {
      if (this.formData.userType !== "assignee") {
        delete this.element.businessObject.$attrs[`flowable:assignee`];
        return;
      }
      this.updateProperties({ "flowable:assignee": val });
    },
    "formData.candidateUsers": function (val) {
      if (this.formData.userType !== "candidateUsers") {
        delete this.element.businessObject.$attrs[`flowable:candidateUsers`];
        return;
      }
      console.log(val)
      this.updateProperties({ "flowable:candidateUsers": val});
    },
    "formData.candidateGroups": function (val) {
      if (this.formData.userType !== "candidateGroups") {
        delete this.element.businessObject.$attrs[`flowable:candidateGroups`];
        return;
      }
      this.updateProperties({ "flowable:candidateGroups": val });
    },
    "formData.async": function (val) {
      if (val === "") val = null;
      this.updateProperties({ "flowable:async": true });
    },
    "formData.dueDate": function (val) {
      if (val === "") val = null;
      this.updateProperties({ "flowable:dueDate": val });
    },
    "formData.formKey": function (val) {
      if (val === "") val = null;
      this.updateProperties({ "flowable:formKey": val });
    },
    "formData.priority": function (val) {
      if (val === "") val = null;
      this.updateProperties({ "flowable:priority": val });
    },
    "formData.skipExpression": function (val) {
      if (val === "") val = null;
      this.updateProperties({ "flowable:skipExpression": val });
    },
    "formData.isForCompensation": function (val) {
      if (val === "") val = null;
      this.updateProperties({ isForCompensation: val });
    },
    "formData.triggerable": function (val) {
      if (val === "") val = null;
      this.updateProperties({ "flowable:triggerable": val });
    },
    "formData.class": function (val) {
      if (val === "") val = null;
      this.updateProperties({ "flowable:class": val });
    },
    "formData.autoStoreVariables": function (val) {
      if (val === "") val = null;
      this.updateProperties({ "flowable:autoStoreVariables": val });
    },
    "formData.exclude": function (val) {
      if (val === "") val = null;
      this.updateProperties({ "flowable:exclude": val });
    },
    "formData.ruleVariablesInput": function (val) {
      if (val === "") val = null;
      this.updateProperties({ "flowable:ruleVariablesInput": val });
    },
    "formData.rules": function (val) {
      if (val === "") val = null;
      this.updateProperties({ "flowable:rules": val });
    },
    "formData.resultVariable": function (val) {
      if (val === "") val = null;
      this.updateProperties({ "flowable:resultVariable": val });
    },
  },
  created() {
    let cache = commonParse(this.element);
    cache = userTaskParse(cache);
    this.formData = cache;
    this.computedExecutionListenerLength();
    this.computedTaskListenerLength();
    this.computedHasMultiInstance();
  },
  methods: {
    computedExecutionListenerLength() {
      this.executionListenerLength =
        this.element.businessObject.extensionElements?.values?.filter(
          (item) => item.$type === "flowable:ExecutionListener"
        ).length ?? 0;
    },
    computedTaskListenerLength() {
      this.taskListenerLength =
        this.element.businessObject.extensionElements?.values?.filter(
          (item) => item.$type === "flowable:TaskListener"
        ).length ?? 0;
    },
    computedHasMultiInstance() {
      if (this.element.businessObject.loopCharacteristics) {
        this.hasMultiInstance = true;
      } else {
        this.hasMultiInstance = false;
      }
    },
    finishExecutionListener() {
      if (this.dialogName === "executionListenerDialog") {
        this.computedExecutionListenerLength();
      }
      this.dialogName = "";
    },
    finishTaskListener() {
      if (this.dialogName === "taskListenerDialog") {
        this.computedTaskListenerLength();
      }
      this.dialogName = "";
    },
    finishMultiInstance() {
      if (this.dialogName === "multiInstanceDialog") {
        this.computedHasMultiInstance();
      }
      this.dialogName = "";
    },
  },
};
</script>

<style></style>
