<template>
  <a-spin :spinning="formLoading">
    <a-form
      ref="formRef"
      :model="props.nodeActivity"
      style="padding-top: 10px"
      labelAlign="right"
      :label-col="{ span: 4 }"
      :wrapper-col="{ span: 16 }"
      autocomplete="off"
    >
      <!--调用方式-->
      <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-form-item style="display: flex" name="activityType" label="调用方式">
        <div style="margin-top: 5px">
          <a-radio-group v-model:value="props.nodeActivity.activityType">
            <a-radio :value="10">无活动</a-radio>
            <a-radio :value="20">RPC接口活动</a-radio>
            <a-radio :value="30">HTTP接口活动</a-radio>
          </a-radio-group>
        </div>
        <div style="padding-top: 10px; display: flex; flex-wrap: wrap; color: #b2b2b2">
          <span style="width: 100%">RPC接口活动: 调用业务微服务的接口，通过RPC协议</span>
          <span style="width: 100%">HTTP接口活动: 外部应用的HTTP接口</span>
        </div>
      </a-form-item>

      <!--RPC接口活动-->
      <template v-if="props.nodeActivity.activityType === 20">
        <a-form-item name="rpcServiceName" label="RPC活动的服务名" :rules="{ required: true, message: '服务不能为空' }">
          <a-input v-model:value="props.nodeActivity.rpcServiceName" placeholder="请输入RPC活动的服务名" />
        </a-form-item>

        <a-form-item name="rpcServiceInterface" label="RPC活动的接口" :rules="{ required: true, message: '接口不能为空' }">
          <a-input v-model:value="props.nodeActivity.rpcServiceInterface" placeholder="请输入RPC活动的接口" />
        </a-form-item>

        <a-form-item name="rpcServiceMethod" label="RPC活动的方法" :rules="{ required: true, message: '方法不能为空' }">
          <a-input v-model:value="props.nodeActivity.rpcServiceMethod" placeholder="请输入RPC活动的方法" />
        </a-form-item>
      </template>

      <!--HTTP接口活动-->
      <template v-if="props.nodeActivity.activityType === 30">
        <a-form-item name="httpUrl" label="远程接口URL" :rules="{ required: true, type: 'url', message: '远程接口URL格式不正确' }">
          <a-input v-model:value="props.nodeActivity.httpUrl" placeholder="请输入远程接口URL" />
        </a-form-item>

        <a-form-item name="httpMethod" label="HTTP方法" :rules="{ required: true, message: '请选择HTTP方法' }">
          <a-radio-group v-model:value="props.nodeActivity.httpMethod">
            <a-radio :value="'GET'">GET方法</a-radio>
            <a-radio :value="'POST'">POST方法</a-radio>
          </a-radio-group>
        </a-form-item>
      </template>

      <template v-if="props.nodeActivity.activityType === 20 || props.nodeActivity.activityType === 30">
        <a-form-item name="requestParams" label="参数内容">
          <json-editor-vue :mode-list="['code']" class="editor" v-model="props.nodeActivity.requestParams"></json-editor-vue>
        </a-form-item>
      </template>

      <template v-if="props.nodeActivity.activityType === 20 || props.nodeActivity.activityType === 30">
        <!--调用过程-->
        <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-form-item style="display: flex" name="syncType" label="是否异步" :rules="{ required: true, message: '请选择是否异步' }">
          <div style="margin-top: 5px">
            <a-radio-group v-model:value="props.nodeActivity.syncType">
              <a-radio :value="1">同步调用</a-radio>
              <a-radio :value="2">异步调用</a-radio>
            </a-radio-group>
          </div>
          <div style="padding-top: 10px; display: flex; flex-wrap: wrap; color: #b2b2b2">
            <span style="width: 100%">同步调用: 调用外部接口，直到外部接口返回成功或失败再继续流程。</span>
            <span style="width: 100%">异步调用: 调用外部接口，无需等待对方返回结果。</span>
          </div>
        </a-form-item>

        <a-form-item
          style="display: flex"
          name="requestAfterType"
          label="调用后执行策略"
          :rules="{ required: true, message: '请选择调用后执行策略' }"
        >
          <div style="margin-top: 5px">
            <a-radio-group v-model:value="props.nodeActivity.requestAfterType">
              <a-radio :value="1">继续流程</a-radio>
              <a-radio :value="2">等待信号</a-radio>
            </a-radio-group>
          </div>
          <div style="padding-top: 10px; display: flex; flex-wrap: wrap; color: #b2b2b2">
            <span style="width: 100%">继续流程: 调用完毕接口，直接继续进行流程。</span>
            <span style="width: 100%">等待信号: 等待业务执行完成后，回调流程引擎接口后继续流程执行。</span>
          </div>
        </a-form-item>
      </template>
    </a-form>
  </a-spin>
</template>

<script setup name="CustomActivityConfigForm">
import { ref } from 'vue';
import JsonEditorVue from 'json-editor-vue3';

const props = defineProps({
  // 活动配置
  nodeActivity: {
    type: Object,
    default: {}
  }
});

const formLoading = ref(false);
</script>

<style scoped>
.editor {
  height: 100%;
  overflow-y: auto;
}

:deep(.jsoneditor-menu) {
  display: none;
}
</style>
