<!-- 开始节点配置 -->
<template>
  <div class="user-task">
    <a-form
      ref="formRef"
      :model="node"
      labelAlign="left"
      :label-col="labelCol"
      :wrapper-col="wrapperCol"
      :disabled="data.componentDisabled"
    >
      <a-form-item label="节点标识">
        <a-input v-model:value="node.id" placeholder="请输入" readonly />
      </a-form-item>
      <a-alert
        message="并行网关说明"
        description="并行网关会等待所有分支汇入才往下执行，所有出口分支都会被执行"
        type="info"
        show-icon
      />
    </a-form>
  </div>
</template>

<script lang="ts" setup>
  import { reactive, ref, onMounted, watch, defineProps } from 'vue';
  import { flowStore } from '@/store/modules/flow';
  const flowWfDataStore = flowStore();
  const labelCol = { span: 7 };
  const wrapperCol = { span: 17 };
  const props = defineProps({
    element: {
      type: Object,
      default: () => {
        return {};
      },
    },
    schemeCode: String,
    pageType: String,
    pageView: String,
  });
  const node: any = ref({});
  watch(
    () => props.element,
    (newVal, oldVal) => {
      if (newVal.type == 'bpmn:ParallelGateway') {
        const currentNode = flowWfDataStore.getWfDataNode(newVal.id);
        if (currentNode) {
          node.value = currentNode;
        } else {
          node.value = newVal;
        }
      }
    },
  );

  const data = reactive({
    componentDisabled: props.pageType == 'detail' ? true : false,
  });

  onMounted(() => {});

  defineExpose({});
</script>

<style scoped>
  ::v-deep .ant-alert-info {
    margin-bottom: 20px;
  }

  ::v-deep .ant-table-wrapper {
    margin-top: 20px;
  }
</style>
