<template>
  <div style="display: flex; justify-content: start">
    <div>
      <a-divider style="height: 24px; width: 5px; background-color: #2a82e4" />
    </div>
    <span style="padding-left: 10px">消息监听配置</span>
  </div>

  <a-spin :spinning="formLoading">
    <a-form ref="formRef" :model="props.nodeListener" style="padding-top: 10px">
      <a-form-item style="display: flex" name="listenerType" label="消息监听方式">
        <div style="margin-top: 5px">
          <a-radio-group v-model:value="props.nodeListener.listenerType">
            <a-radio :value="10">通用接口</a-radio>
            <a-radio :value="20">自定义接口</a-radio>
          </a-radio-group>
        </div>
        <div style="padding-top: 10px; display: flex; flex-wrap: wrap; color: #b2b2b2">
          <span style="width: 100%">通用接口: 流程引擎内置接口，为固定的URL和传递参数</span>
          <span style="width: 100%">自定义接口: 编写自定义接口来接收特定的接口回调</span>
        </div>
      </a-form-item>

      <a-form-item
        has-feedback
        name="listenerUrl"
        label="接口URL"
        :rules="{ required: props.nodeListener.listenerType === 20, type: 'url', message: 'URL格式不正确' }"
      >
        <a-input v-model:value="props.nodeListener.listenerUrl" :disabled="props.nodeListener.listenerType === 10"></a-input>
      </a-form-item>

      <a-form-item name="listenerHttpMethod" label="HTTP方法">
        <a-radio-group v-model:value="props.nodeListener.listenerHttpMethod">
          <a-radio :value="'GET'">GET方法</a-radio>
          <a-radio :value="'POST'">POST方法</a-radio>
        </a-radio-group>
      </a-form-item>

      <a-form-item label="参数内容">
        <a-table :pagination="false" :dataSource="dataSource" :columns="columns">
          <template #bodyCell="{ column, index }">
            <template v-if="column.dataIndex === 'indexDraw'">
              {{ index + 1 }}
            </template>
          </template>
        </a-table>
      </a-form-item>
    </a-form>
  </a-spin>
</template>

<script setup name="MessageListeningForm">
import { ref } from 'vue';
const props = defineProps({
  nodeListener: {
    type: Object,
    default: {}
  }
});
// 表单加载状态
const formLoading = ref(false);

const columns = ref([
  {
    title: '序号',
    dataIndex: 'indexDraw',
    width: 80
  },
  {
    title: '字段名称',
    dataIndex: 'fieldName'
  },
  {
    title: '字段编码',
    dataIndex: 'fieldCode'
  },
  {
    title: '字段类型',
    dataIndex: 'fieldType'
  }
]);

const dataSource = ref([
  {
    fieldName: '流程id',
    fieldCode: 'processld',
    fieldType: '字符串'
  },
  {
    fieldName: '业务执行结果',
    fieldCode: 'businessResultFlag',
    fieldType: '布尔类型'
  },
  {
    fieldName: '业务其他参数',
    fieldCode: 'businessForm',
    fieldType: '对象'
  },
  {
    fieldName: '流程控制指令',
    fieldCode: 'processControlType',
    fieldType: '整型'
  }
]);
</script>

<style scoped></style>
