<template>
  <div class="l-from-body">
    <a-form
      ref="formRef"
      :rules="data.rules"
      :model="data.formData"
      labelAlign="left"
      :label-col="labelCol"
      :wrapper-col="wrapperCol"
    >
      <a-form-item label="节点" name="id">
        <a-select
          v-model:value="data.formData.id"
          placeholder="请选择节点"
          :options="data.options"
          :field-names="{ label: 'name', value: 'id' }"
          @change="handleChange"
        />
      </a-form-item>
    </a-form>
  </div>
</template>
<script lang="ts" setup>
  import { reactive, ref, defineProps, watch, onMounted } from 'vue';
  import { flowStore } from '@/store/modules/flow';

  const flowWfDataStore = flowStore();
  const labelCol = { span: 7 };
  const wrapperCol = { span: 17 };
  const props = defineProps({
    id: String,
  });
  watch(
    () => props.id,
    (newVal) => {
      getOptions(newVal);
    },
  );
  const formRef = ref<any>();
  const data = reactive({
    formData: {
      name: '',
      type: '5',
      id: '',
    },
    rules: {
      id: [{ required: true, message: '请选择节点' }],
    },
    options: [],
  });
  onMounted(() => {
    getOptions(props.id);
  });
  function getOptions(nodeId) {
    /**
           ExclusiveGateway:'排他网关',
           Task:'审核节点',
        */
    let wfdata = flowWfDataStore.getWfData;
    var arr: any = [];
    wfdata.forEach((element: { type: string; id: string }) => {
      if (element.type == 'bpmn:Task' && element.id != nodeId) {
        arr.push(element);
      }
    });
    data.options = arr;
  }
  function handleChange(val, option) {
    data.formData.name = option.name;
  }
  function validateForm() {
    formRef.value
      .validate()
      .then(async () => {
        return true;
      })
      .catch(async () => {
        return false;
      });
  }
  function getForm() {
    let rows = data.formData;
    return rows;
  }
  defineExpose({
    getForm,
    validateForm,
  });
</script>
<style scoped>
  .l-from-body {
    padding: 10px;
  }
</style>
