CMVR-IOT-UI/src/views/flow/components/ParamsDrawer.vue

<template>
  <el-drawer
      v-model="props.drawer"
      custom-class="custom-drawer-header"
      class="no-header-margin"
      :title="props.data.properties?.name || '参数配置'"
      :before-close="handleClose"
  >
    <div class="input__container" v-if="props.data.type === 'start'">
      <el-collapse v-model="activeNames">
        <el-collapse-item name="1" icon-position="left">
          <template #title>
            输入参数
            <el-button
              :circle="true"
              size="small"
              @click="(e) => addFormItem(e, 'nodeParams')"
              class="addFormItem"
            >
              <el-icon :size="14"><Plus /></el-icon>
            </el-button>
          </template>
          <el-form
            :inline="true"
            :model="formData"
            :rules="rules"
            ref="dynamicForm"
            label-position="top"
            label-width="auto"
          >
            <FormItemRecursive
              formType="input"
              :current-list="formData.inputParams"
              prop-path="inputParams"
              :depth="0"
              :is-first-level="true"
              :endDepth="2"
              :parent-path="[]"
              @delete-item="(path) => deleteTopLevelItem(path, 'inputParams')"
            />
          </el-form>
        </el-collapse-item>
      </el-collapse>
    </div>

    <div v-if="['currentLoop', 'serviceNode', 'sleep', 'loop'].includes(props.data.type)">
      <el-collapse v-model="activeNames">
        <el-collapse-item name="1" icon-position="left">
          <template #title>
            输入参数
            <el-button
              :circle="true"
              size="small"
              @click="(e) => addFormItem(e, 'nodeParams')"
              class="addFormItem"
            >
              <el-icon :size="14"><Plus /></el-icon>
            </el-button>
          </template>
          <div class="form__container">
            <el-form
              :inline="true"
              :model="formData"
              :rules="rules"
              ref="dynamicForm"
              label-position="top"
              label-width="auto"
            >
              <div v-for="(property, index) in formData.nodeParams" :key="index">
                <el-row>
                  <el-form-item
                    :label="index === 0 ? '参数名' : ''"
                    :prop="`nodeParams.${index}.name`"
                    :rules="[
                      { required: true, message: '请输入参数名', trigger: 'blur' },
                    ]"
                  >
                    <el-input
                      :disabled="property?.disabled || false"
                      class="param-name"
                      v-model="property.name"
                      placeholder="请输入"
                      clearable
                    />
                  </el-form-item>
                  <el-form-item
                    :label="index === 0 ? '参数值' : ''"
                    :prop="`nodeParams.${index}.type`"
                  >
                    <el-select
                      v-model="property.type"
                      class="param-type"
                      @change="handleTypeChange(index)"
                    >
                      <el-option label="引用" value="quote" />
                      <el-option label="输入" value="input" />
                    </el-select>
                    <el-form-item
                      v-if="property.type === 'input'"
                      :rules="[
                        {
                          required: property?.required ?? true,
                          message: '请输入参数值',
                          trigger: 'blur',
                        },
                      ]"
                      :prop="`nodeParams.${index}.input`"
                    >
                      <el-input-number
                        class="param-value"
                        v-if="property.componentType === 'number'"
                        v-model="property.input"
                        :min="0"
                        :max="property.max || Infinity"
                        :controls="false"
                        :step-strictly="true"
                        placeholder="请输入"
                        clearable
                      />
                      <el-select
                        v-model="property.input"
                        class="param-value"
                        v-else-if="property.componentType === 'select'"
                      >
                        <el-option
                          v-for="item in property.selectOptions"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                        />
                      </el-select>
                      <el-input
                        class="param-value"
                        v-else
                        v-model="property.input"
                        placeholder="请输入"
                        clearable
                      />
                    </el-form-item>
                    <el-form-item
                      v-if="property.type === 'quote'"
                      :rules="[
                        {
                          required: true,
                          message: '请选择参数值',
                          trigger: 'blur',
                        },
                      ]"
                      :prop="`nodeParams.${index}.quote`"
                    >
                      <el-cascader
                        :ref="
                          (el) => {
                            if (el) cascaderRefs[index] = el;
                          }
                        "
                        v-model="property.quote"
                        :checkStrictly="true"
                        :options="quoteOptions"
                        placeholder="请选择"
                        @visible-change="
                          (visible) => visibleChange(visible, index, property.quote)
                        "
                        @change="(value) => cascaderChange(value, index)"
                      />
                    </el-form-item>
                  </el-form-item>
                  <el-button
                    :icon="Minus"
                    circle
                    size="small"
                    @click="handleDelete(index)"
                    class="deleteBtn"
                  />
                </el-row>
              </div>
            </el-form>
          </div>
        </el-collapse-item>
        <el-collapse-item name="2" icon-position="left">
          <template #title>
            输出参数
            <el-button
              :circle="true"
              size="small"
              @click="(e) => addFormItem(e, 'outputParams')"
              class="addFormItem"
            >
              <el-icon :size="14"><Plus /></el-icon>
            </el-button>
          </template>
          <div class="form__container">
            <el-form
              :inline="true"
              :model="formData"
              label-position="top"
              label-width="auto"
              :rules="outputRules"
              ref="outputFormRef"
            >
              <FormItemRecursive
                formType="output"
                :current-list="formData.outputParams"
                prop-path="outputParams"
                :depth="0"
                :is-first-level="true"
                :endDepth="2"
                :parent-path="[]"
                @delete-item="(path) => deleteTopLevelItem(path, 'outputParams')"
              />
            </el-form>
          </div>
        </el-collapse-item>
      </el-collapse>
    </div>
    
    <div v-if="props.data.type === 'code'">
      <el-collapse v-model="activeNames">
        <el-collapse-item name="1" icon-position="left">
          <template #title>
            输入参数
            <el-tooltip
              class="box-item"
              effect="dark"
              content="这里输入的变量可以被下方的代码引用。"
              placement="top"
            >
              <el-icon class="header-icon" style="margin-left: 6px">
                <info-filled />
              </el-icon>
            </el-tooltip>
          </template>
          <div class="form__container">
            <el-form
              :inline="true"
              :model="formData"
              :rules="rules"
              ref="dynamicForm"
              label-position="top"
              label-width="auto"
            >
              <div v-for="(property, index) in formData.nodeParams" :key="index">
                <el-row v-if="property.name !== 'code'">
                  <el-form-item
                    :label="index === 0 ? '参数名' : ''"
                    :prop="`nodeParams.${index}.name`"
                    :rules="[
                      { required: true, message: '请输入参数名', trigger: 'blur' },
                    ]"
                  >
                    <el-input
                      :disabled="property?.disabled || false"
                      class="param-name"
                      v-model="property.name"
                      placeholder="请输入"
                      clearable
                    />
                  </el-form-item>
                  <el-form-item
                    :label="index === 0 ? '参数值' : ''"
                    :prop="`nodeParams.${index}.type`"
                  >
                    <el-select
                      v-model="property.type"
                      class="param-type"
                      @change="handleTypeChange(index)"
                    >
                      <el-option label="引用" value="quote" />
                      <el-option label="输入" value="input" />
                    </el-select>
                    <el-form-item
                      v-if="property.type === 'input'"
                      :rules="[
                        {
                          required: property?.required ?? true,
                          message: '请输入参数值',
                          trigger: 'blur',
                        },
                      ]"
                      :prop="`nodeParams.${index}.input`"
                    >
                      <el-input-number
                        class="param-value"
                        v-if="property.componentType === 'number'"
                        v-model="property.input"
                        :min="0"
                        :max="property.max || Infinity"
                        :controls="false"
                        :step-strictly="true"
                        placeholder="请输入"
                        clearable
                      />
                      <el-select
                        v-model="property.input"
                        class="param-value"
                        v-else-if="property.componentType === 'select'"
                      >
                        <el-option
                          v-for="item in property.selectOptions"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                        />
                      </el-select>
                      <el-input
                        class="param-value"
                        v-else
                        v-model="property.input"
                        placeholder="请输入"
                        clearable
                      />
                    </el-form-item>
                    <el-form-item
                      v-if="property.type === 'quote'"
                      :rules="[
                        {
                          required: true,
                          message: '请选择参数值',
                          trigger: 'blur',
                        },
                      ]"
                      :prop="`nodeParams.${index}.quote`"
                    >
                      <el-cascader
                        :ref="
                          (el) => {
                            if (el) cascaderRefs[index] = el;
                          }
                        "
                        v-model="property.quote"
                        :checkStrictly="true"
                        :options="quoteOptions"
                        placeholder="请选择"
                        @visible-change="
                          (visible) => visibleChange(visible, index, property.quote)
                        "
                        @change="(value) => cascaderChange(value, index)"
                      />
                    </el-form-item>
                  </el-form-item>
                  <el-button
                    :icon="Minus"
                    circle
                    size="small"
                    @click="handleDelete(index)"
                    class="deleteBtn"
                  />
                </el-row>
              </div>
            </el-form>
          </div>
        </el-collapse-item>
        <el-collapse-item title="代码" name="2" icon-position="left">
          <div class="code__container">
            <div ref="codeRef" style="width: 100%; height: 100%"></div>
          </div>
        </el-collapse-item>
        <el-collapse-item name="3" icon-position="left">
          <template #title>
            输出参数
            <el-tooltip
              class="box-item"
              effect="dark"
              content="这里定义的输出变量可以被后续节点引用。"
              placement="top"
            >
              <el-icon class="header-icon" style="margin-left: 6px">
                <info-filled />
              </el-icon>
            </el-tooltip>
          </template>
          <div class="form__container">
            <el-form
              :inline="true"
              :model="formData"
              label-position="top"
              label-width="auto"
              :rules="outputRules"
              ref="outputFormRef"
            >
              <FormItemRecursive
                formType="output"
                :current-list="formData.outputParams"
                prop-path="outputParams"
                :depth="0"
                :is-first-level="true"
                :endDepth="2"
                :parent-path="[]"
                @delete-item="(path) => deleteTopLevelItem(path, 'outputParams')"
              />
            </el-form>
          </div>
        </el-collapse-item>
      </el-collapse>

    </div>

    <div v-if="props.data.type === 'http'">
      <el-form
        :inline="true"
        :model="httpNodeData"
        :rules="rules"
        class="http-form"
        ref="dynamicForm"
        label-position="top"
        label-width="auto"
      >
        <el-collapse v-model="activeNames">
          <el-collapse-item name="1" icon-position="left">
            <template #title>
              请求配置
              <el-tooltip
                class="box-item"
                effect="dark"
                content="支持HTTP/HTTPS协议"
                placement="top"
              >
                <el-icon class="header-icon" style="margin-left: 6px">
                  <info-filled />
                </el-icon>
              </el-tooltip>
            </template>
            <div class="form__container">
              <div v-for="(property, index) in httpNodeData.config" :key="index">
                <el-row>
                  <el-form-item
                    :label="index === 0 ? '参数名' : ''"
                    :prop="`config.${index}.name`"
                    :rules="[
                      { required: true, message: '请输入参数名', trigger: 'blur' },
                    ]"
                  >
                    <el-input
                      :disabled="true"
                      class="param-name"
                      v-model="property.name"
                      placeholder="请输入"
                      clearable
                    />
                  </el-form-item>
                  <el-form-item
                    :label="index === 0 ? '参数值' : ''"
                    :prop="`config.${index}.input`"
                  >
                    <el-select
                      v-model="property.type"
                      class="param-type"
                      @change="handleTypeChange(index)"
                    >
                      <el-option label="引用" value="quote" />
                      <el-option label="输入" value="input" />
                    </el-select>
                    <el-form-item
                      v-if="property.type === 'input'"
                      :rules="[
                        {
                          required: property?.required ?? true,
                          message: '请输入参数值',
                          trigger: 'blur',
                        },
                      ]"
                      :prop="`config.${index}.input`"
                    >
                      <el-input-number
                        class="param-value"
                        v-if="property.componentType === 'number'"
                        v-model="property.input"
                        :min="0"
                        :max="property.max || Infinity"
                        :controls="false"
                        :step-strictly="true"
                        placeholder="请输入"
                        clearable
                      />
                      <el-select
                        v-model="property.input"
                        class="param-value"
                        v-else-if="property.componentType === 'select'"
                      >
                        <el-option
                          v-for="item in property.selectOptions"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                        />
                      </el-select>
                      <el-input
                        class="param-value"
                        v-else
                        v-model="property.input"
                        placeholder="请输入"
                        clearable
                      />
                    </el-form-item>
                    <el-form-item
                      v-if="property.type === 'quote'"
                      :rules="[
                        {
                          required: true,
                          message: '请选择参数值',
                          trigger: 'blur',
                        },
                      ]"
                      :prop="`config.${index}.quote`"
                    >
                      <el-cascader
                        :ref="
                          (el) => {
                            if (el) cascaderRefs[index] = el;
                          }
                        "
                        v-model="property.quote"
                        :checkStrictly="true"
                        :options="quoteOptions"
                        placeholder="请选择"
                        @visible-change="
                          (visible) => visibleChange(visible, index, property.quote)
                        "
                        @change="(value) => cascaderChange(value, index)"
                      />
                    </el-form-item>
                  </el-form-item>
                </el-row>
              </div>
            </div>
          </el-collapse-item>
          <el-collapse-item name="2" icon-position="left">
            <template #title>
              Header配置
              <el-button
                :circle="true"
                size="small"
                @click="(e) => addHttpNodeFormItem(e, 'headers')"
                class="addFormItem"
              >
                <el-icon :size="14"><Plus /></el-icon>
              </el-button>
            </template>
            <div class="form__container">
              <div v-for="(property, index) in httpNodeData.headers" :key="index">
                <el-row>
                  <el-form-item
                    :label="index === 0 ? '参数名' : ''"
                    :prop="`headers.${index}.name`"
                    :rules="[
                      { required: true, message: '请输入参数名', trigger: 'blur' },
                    ]"
                  >
                    <el-input
                      class="param-name"
                      v-model="property.name"
                      placeholder="请输入"
                      clearable
                    />
                  </el-form-item>
                  <el-form-item
                    :label="index === 0 ? '参数值' : ''"
                    :prop="`headers.${index}.input`"
                  >
                    <el-select
                      v-model="property.type"
                      class="param-type"
                      @change="handleTypeChange(index)"
                    >
                      <el-option label="引用" value="quote" />
                      <el-option label="输入" value="input" />
                    </el-select>
                    <el-form-item
                      v-if="property.type === 'input'"
                      :rules="[
                        {
                          required: property?.required ?? true,
                          message: '请输入参数值',
                          trigger: 'blur',
                        },
                      ]"
                      :prop="`headers.${index}.input`"
                    >
                      <el-input-number
                        class="param-value"
                        v-if="property.componentType === 'number'"
                        v-model="property.input"
                        :min="0"
                        :max="property.max || Infinity"
                        :controls="false"
                        :step-strictly="true"
                        placeholder="请输入"
                        clearable
                      />
                      <el-select
                        v-model="property.input"
                        class="param-value"
                        v-else-if="property.componentType === 'select'"
                      >
                        <el-option
                          v-for="item in property.selectOptions"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                        />
                      </el-select>
                      <el-input
                        class="param-value"
                        v-else
                        v-model="property.input"
                        placeholder="请输入"
                        clearable
                      />
                    </el-form-item>
                    <el-form-item
                      v-if="property.type === 'quote'"
                      :rules="[
                        {
                          required: true,
                          message: '请选择参数值',
                          trigger: 'blur',
                        },
                      ]"
                      :prop="`headers.${index}.quote`"
                    >
                      <el-cascader
                        :ref="
                          (el) => {
                            if (el) cascaderRefs[index] = el;
                          }
                        "
                        v-model="property.quote"
                        :checkStrictly="true"
                        :options="quoteOptions"
                        placeholder="请选择"
                        @visible-change="
                          (visible) => visibleChange(visible, index, property.quote)
                        "
                        @change="(value) => cascaderChange(value, index)"
                      />
                    </el-form-item>
                  </el-form-item>
                </el-row>
              </div>
            </div>
          </el-collapse-item>
          <el-collapse-item name="3" icon-position="left">
            <template #title>
              Param配置
              <el-button
                :circle="true"
                size="small"
                @click="(e) => addHttpNodeFormItem(e, 'params')"
                class="addFormItem"
              >
                <el-icon :size="14"><Plus /></el-icon>
              </el-button>
            </template>
            <div class="form__container">
              <div v-for="(property, index) in httpNodeData.params" :key="index">
                <el-row>
                  <el-form-item
                    :label="index === 0 ? '参数名' : ''"
                    :prop="`params.${index}.name`"
                    :rules="[
                      { required: true, message: '请输入参数名', trigger: 'blur' },
                    ]"
                  >
                    <el-input
                      class="param-name"
                      v-model="property.name"
                      placeholder="请输入"
                      clearable
                    />
                  </el-form-item>
                  <el-form-item
                    :label="index === 0 ? '参数值' : ''"
                    :prop="`params.${index}.input`"
                  >
                    <el-select
                      v-model="property.type"
                      class="param-type"
                      @change="handleTypeChange(index)"
                    >
                      <el-option label="引用" value="quote" />
                      <el-option label="输入" value="input" />
                    </el-select>
                    <el-form-item
                      v-if="property.type === 'input'"
                      :rules="[
                        {
                          required: property?.required ?? true,
                          message: '请输入参数值',
                          trigger: 'blur',
                        },
                      ]"
                      :prop="`params.${index}.input`"
                    >
                      <el-input-number
                        class="param-value"
                        v-if="property.componentType === 'number'"
                        v-model="property.input"
                        :min="0"
                        :max="property.max || Infinity"
                        :controls="false"
                        :step-strictly="true"
                        placeholder="请输入"
                        clearable
                      />
                      <el-select
                        v-model="property.input"
                        class="param-value"
                        v-else-if="property.componentType === 'select'"
                      >
                        <el-option
                          v-for="item in property.selectOptions"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                        />
                      </el-select>
                      <el-input
                        class="param-value"
                        v-else
                        v-model="property.input"
                        placeholder="请输入"
                        clearable
                      />
                    </el-form-item>
                    <el-form-item
                      v-if="property.type === 'quote'"
                      :rules="[
                        {
                          required: true,
                          message: '请选择参数值',
                          trigger: 'blur',
                        },
                      ]"
                      :prop="`params.${index}.quote`"
                    >
                      <el-cascader
                        :ref="
                          (el) => {
                            if (el) cascaderRefs[index] = el;
                          }
                        "
                        v-model="property.quote"
                        :checkStrictly="true"
                        :options="quoteOptions"
                        placeholder="请选择"
                        @visible-change="
                          (visible) => visibleChange(visible, index, property.quote)
                        "
                        @change="(value) => cascaderChange(value, index)"
                      />
                    </el-form-item>
                  </el-form-item>
                </el-row>
              </div>
            </div>
          </el-collapse-item>
          <el-collapse-item name="4" title="Body配置" icon-position="left">
            <template #title>
              Body配置
              <el-button
                :circle="true"
                size="small"
                @click="(e) => addHttpNodeFormItem(e, 'body')"
                class="addFormItem"
              >
                <el-icon :size="14"><Plus /></el-icon>
              </el-button>
            </template>
            <div class="form__container">
              <el-select v-model="httpNodeData.body.type">
                <el-option label="None" value="none" />
                <el-option label="JSON" value="json" />
                <el-option label="form-data" value="form-data" />
              </el-select>
              <div class="code__container" v-show="httpNodeData.body.type === 'json'">
                <div ref="codeRef" style="width: 100%; height: 100%"></div>
              </div>
              <div class="test" v-show="httpNodeData.body.type === 'form-data'">
                <div v-for="(property, index) in httpNodeData.body.formData" :key="index">
                  <el-row>
                    <el-form-item
                      :label="index === 0 ? '参数名' : ''"
                      :prop="`params.${index}.name`"
                      :rules="[
                        { required: true, message: '请输入参数名', trigger: 'blur' },
                      ]"
                    >
                      <el-input
                        class="param-name"
                        v-model="property.name"
                        placeholder="请输入"
                        clearable
                      />
                    </el-form-item>
                    <el-form-item
                      :label="index === 0 ? '参数值' : ''"
                      :prop="`body.formData.${index}.input`"
                    >
                      <el-select
                        v-model="property.type"
                        class="param-type"
                        @change="handleTypeChange(index)"
                      >
                        <el-option label="引用" value="quote" />
                        <el-option label="输入" value="input" />
                      </el-select>
                      <el-form-item
                        v-if="property.type === 'input'"
                        :rules="[
                          {
                            required: property?.required ?? true,
                            message: '请输入参数值',
                            trigger: 'blur',
                          },
                        ]"
                        :prop="`body.formData.${index}.input`"
                      >
                        <el-input-number
                          class="param-value"
                          v-if="property.componentType === 'number'"
                          v-model="property.input"
                          :min="0"
                          :max="property.max || Infinity"
                          :controls="false"
                          :step-strictly="true"
                          placeholder="请输入"
                          clearable
                        />
                        <el-select
                          v-model="property.input"
                          class="param-value"
                          v-else-if="property.componentType === 'select'"
                        >
                          <el-option
                            v-for="item in property.selectOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                          />
                        </el-select>
                        <el-input
                          class="param-value"
                          v-else
                          v-model="property.input"
                          placeholder="请输入"
                          clearable
                        />
                      </el-form-item>
                      <el-form-item
                        v-if="property.type === 'quote'"
                        :rules="[
                          {
                            required: true,
                            message: '请选择参数值',
                            trigger: 'blur',
                          },
                        ]"
                        :prop="`body.formData.${index}.quote`"
                      >
                        <el-cascader
                          :ref="
                            (el) => {
                              if (el) cascaderRefs[index] = el;
                            }
                          "
                          v-model="property.quote"
                          :checkStrictly="true"
                          :options="quoteOptions"
                          placeholder="请选择"
                          @visible-change="
                            (visible) => visibleChange(visible, index, property.quote)
                          "
                          @change="(value) => cascaderChange(value, index)"
                        />
                      </el-form-item>
                    </el-form-item>
                  </el-row>
                </div>
              </div>
            </div>
          </el-collapse-item>
        </el-collapse>
      </el-form>
    </div>

    <template #footer>
      <el-button @click="handleClose">关闭</el-button>
      <el-button type="primary" @click="confirm">确定</el-button>
    </template>
  </el-drawer>
</template>

<script setup>
import FormItemRecursive from "./FormItemRecursive.vue";
import { Plus, Minus } from "@element-plus/icons-vue";
import { getInput, filterEmptyName } from "@/utils/flow";
import { emitter } from "@/utils/eventBus";
import "vue3-json-viewer/dist/index.css";
import * as monaco from 'monaco-editor';
import { nextTick, onUnmounted, watch } from "vue";

const props = defineProps({
    drawer: Boolean,
    data: Object
})

const emits = defineEmits(['close'])

const formData = reactive({
  inputParams: [],
  nodeParams: [],
  outputParams: [],
});

const rules = reactive({});

const codeRef = ref()
let editorInstance

const handleClose = (done) => {
  if (props.data.type === 'http') {
    const nodeParams = []
    nodeParams.push({ name: "config", type: "input", input: "", children: httpNodeData.value.config, disabled: true, required: true })
    if (httpNodeData.value.headers.length) {
      nodeParams.push({ name: "headers", type: "input", input: "", children: httpNodeData.value.headers, disabled: true, required: true })
    }
    if (httpNodeData.value.params.length) {
      nodeParams.push({ name: "params", type: "input", input: "", children: httpNodeData.value.params, disabled: true, required: true })
    }
    if (httpNodeData.value.body.type !== 'none') {
      const bodyObj = { 
        name: "body", type: "input", input: "", children: [
          { name: 'bodyType', type: "input", input: "json", disabled: true },
          { name: 'json', type: "input", input: editorInstance.getValue() || '' },
          { name: 'formData', type: "input", input: "", children: httpNodeData.value.body.formData }
        ]
      }
      nodeParams.push(bodyObj)
    }
    lf.setProperties(props.data.id, {
      ...props.data.properties,
      nodeParams
    });
  } else {
    const filteredObj = {
      inputParams: filterEmptyName(formData.inputParams),
      nodeParams: filterEmptyName(formData.nodeParams),
      outputParams: filterEmptyName(formData.outputParams),
    };
    
    lf.setProperties(props.data.id, {
      ...props.data.properties,
      ...filteredObj
    });
  }

  emitter.emit("setProperties", { id: props.data.id});

  emits('close')
}

// 删除顶层表单项
const deleteTopLevelItem = (fullPath, propPath) => {
// 从顶层数据开始查找
  let currentLevel = formData[propPath];
  
  // 遍历路径（除最后一个索引，因为最后一个是要删除的项）
  for (let i = 0; i < fullPath.length - 1; i++) {
    const index = fullPath[i];
    // 进入下一层级
    currentLevel = currentLevel[index].children;
  }
  
  // 最后一个索引是当前层级要删除的项
  const lastIndex = fullPath[fullPath.length - 1];
  currentLevel.splice(lastIndex, 1);
}

const addFormItem = (e, type) => {
  e.stopPropagation();
  const obj ={
    name: "",
    type: type === 'nodeParams' ? 'input' : 'string',
    required: false,
    children: [],
  }
  if (type === 'inputParams') {
    obj.desc = ''
  } else if (type === 'nodeParams' || type === 'outputParams') {
    obj.input = ''
  }
  formData[type].push(obj);
};

const quoteOptions = ref([]);
const handleTypeChange = (index) => {
  if (formData.nodeParams[index].type === "input") {
    formData.nodeParams[index].quote = "";
  } else {
    formData.nodeParams[index].input = "";
    const option = getInput(props.model.id);
    if (option) {
      quoteOptions.value = option;
    }
  }
};

const cascaderRefs = ref([]);
const cascaderChange = (value, index) => {
  const selectedOptions = cascaderRefs.value[index].getCheckedNodes(true);
  formData.nodeParams[index].quote = value;
  formData.nodeParams[index].quoteType = selectedOptions[0].data.type;
};

const visibleChange = (value, index, quote) => {
  if (value) {
    const option = getInput(props.data.id);
    if (option) {
      quoteOptions.value = option;
      const currentValue = [...quote];
      // 强制级联选择器重新处理选中值与选项的匹配
      if (cascaderRefs.value[index]) {
        // 等待DOM更新后再设置值，确保新options已生效
        setTimeout(() => {
          // 如果当前有选中值，重新设置一次以触发重新匹配
          if (currentValue.length) {
            formData.nodeParams[index].quote = [];
            // 确保响应式更新
            setTimeout(() => {
              formData.nodeParams[index].quote = currentValue;
            }, 0);
          }
          // 手动触发级联选择器的重新渲染
          // cascaderRefs.value[index].updatePopper();
        }, 0);
      }
    }
  }
};

const activeNames = ref(['1', '2', '3', '4'])

function hasErrors() {
  const model = editorInstance.getModel();
  if (!model) return false;
  
  // 获取当前模型的所有标记
  const markers = monaco.editor.getModelMarkers({ resource: model.uri });
  // 检查是否存在错误级别标记
  return markers.some(marker => marker.severity === monaco.MarkerSeverity.Error);
}

const initEditor = (type) => {
  monaco.languages.typescript.javascriptDefaults.setCompilerOptions({
    target: monaco.languages.typescript.ScriptTarget.ES2020,
    allowNonTsExtensions: true,          // 允许非 ts 扩展名（.js）
    checkJs: true,                       // 对 .js 文件进行类型检查
    strict: true,                        // 启用所有严格检查
    noImplicitAny: false,                  // 禁止隐式 any
    noUnusedLocals: true,                 // 未使用的局部变量报错（可选）
    noUnusedParameters: true,              // 未使用的参数报错（可选）
  });

  // 确保语义验证开启（默认就是开启的，但可以显式设置）
  monaco.languages.typescript.javascriptDefaults.setDiagnosticsOptions({
      noSemanticValidation: false,          // 开启语义检查
      noSyntaxValidation: false,             // 开启语法检查
  });

  editorInstance = monaco.editor.create(codeRef.value, {
    value: ['{}'].join('\n'),
    language: type === 'code' ? 'javascript' : 'json',
    fontSize: 14,
    lineNumbers: 'on',
    roundedSelection: true,
    scrollBeyondLastLine: false,
    formatOnPaste: true,
    formatOnType: true,
    quickSuggestions: true,
        suggestOnTriggerCharacters: true,
        // 自动完成
        suggest: {
            showWords: true,
            showFunctions: true,
            showVariables: true,
            showClasses: true,
            showModules: true,
        },
  });
}

// 设置代码值
const setValue = (value) => {
  if (editorInstance) {
    editorInstance.setValue(value)
  }
}

// 销毁编辑器
const disposeEditor = () => {
  if (editorInstance) {
    editorInstance.dispose()
    editorInstance = null
  }
}

watch(
  () => props.drawer,
  (newVal) => {
    if (newVal && ['code', 'http'].includes(props.data.type)) {
      nextTick(() => {
        initEditor(props.data.type);
      });
    } else {
      disposeEditor();
    }
  }
);

const httpMethodOptions = () => {
  return [{
    value: 'POST',
    label: 'POST'
  }, {
    value: 'GET',
    label: 'GET'
  }, {
    value: 'PUT',
    label: 'PUT'
  }, {
    value: 'DELETE',
    label: 'DELETE'
  }, {
    value: 'PATCH',
    label: 'PATCH'
  }]
}

const httpNodeData = ref({
  config: [
    { name: "url", type: "input", input: "",  disabled: true, required: true },
    { name: "method", type: "input", input: "POST", componentType: 'select', selectOptions: httpMethodOptions(), disabled: true },
    { name: "timeout", type: "input", input: "10000", componentType: 'number', disabled: true }
  ],
  headers: [
    { name: "", type: "input", input: ""}
  ],
  params: [
    { name: "", type: "input", input: ""}
  ],
  body: {
    type: 'json',
    json: '{}',
    formData: [
      { name: "", type: "input", input: ""}
    ]
  },
  timeout: 10000
});

const addHttpNodeFormItem = (e, type) => {
  e.stopPropagation();
  if (type === 'body') {
    httpNodeData.value.body.formData.push({ name: "", type: "input", input: ""});
  } else {
    httpNodeData.value[type].push({ name: "", type: "input", input: ""});
  }
};

watch(
  () => props.data,
  () => {
    if (props.data.type === "start") {
      formData.inputParams = props.data.properties?.inputParams || [];
    } else if (['currentLoop', 'serviceNode', 'sleep', 'loop'].includes(props.data.type)) {
      formData.nodeParams = props.data.properties.nodeParams;
      formData.outputParams = props.data.properties.outputParams;
    } else if (props.data.type === "code") {
      formData.nodeParams = props.data.properties.nodeParams;
      formData.outputParams = props.data.properties.outputParams;
      const codeParams = props.data.properties.nodeParams.find(item => item.name === 'code')
      if (codeParams) {
        setTimeout(() => {
          if (editorInstance) {
            setValue(codeParams.input)
          }
        }, 100)
      }
    } else if (props.data.type === 'http') {
      
    }
  },
  {
    immediate: true,
    deep: true,
  }
);

onUnmounted(() => {
  disposeEditor()
})
</script>
<style lang="scss" scoped>
.addFormItem {
  margin-left: 12px;
}

.http-form {
  width: 100%;

  .el-collapse {
    width: 100%;
  }
}

.form__container {
  margin: 12px 0;

  :deep(.el-row) {
    align-items: end;

    .el-form-item {
      margin-right: 12px;
    }
    
    .param-name {
      width: 160px;
    }

    .param-type {
      width: 80px;
    }

    .param-value {
      width: 160px;
    }

  }



  .sub-properties {
    margin-left: 10px;
    .zw {
      margin-left: 15px;
      &::before {
        content: "";
        position: absolute;
        left: 0;
        top: -4px;
        width: 10px;
        border-left: 1px solid gray;
        border-bottom: 1px solid gray;
        border-bottom-left-radius: 4px;
        background-color: transparent;
        height: 24px;
      }
    }
  }

  .gSon-properties {
    margin-left: 10px;
    .zw {
      margin-left: 15px;
      &::before {
        content: "";
        position: absolute;
        left: 0;
        top: -4px;
        width: 10px;
        border-left: 1px solid gray;
        border-bottom: 1px solid gray;
        border-bottom-left-radius: 4px;
        background-color: transparent;
        height: 24px;
      }
    }
  }

  .deleteBtn {
    margin-bottom: 22px;
    cursor: pointer;
  }
}

.code__container {
  display: flex;
  position: relative;
  text-align: initial;
  width: 100%;
  height: 300px;
  margin: 12px 0;
}
</style>

<style lang="scss">
/* 不加 scoped，全局生效 */
.no-header-margin .el-drawer__header {
  margin-bottom: 0 !important;
}
</style>