<template>
  <el-drawer
      v-model="props.drawer"
      custom-class="custom-drawer-header"
      class="no-header-margin"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :show-close="false"
  >
    <template #header>
      <div class="drawer-header">
        <div>{{ props.data.properties?.name || '参数配置' }}</div>
        <div>
          <el-popconfirm
            width="220"
            confirm-button-text="确认删除"
            cancel-button-text="误点击，不删除"
            :icon="InfoFilled"
            icon-color="#626AEF"
            title="是否删除此节点？"
            @confirm="deleteNode"
          >
            <template #reference>
              <el-button type="primary" size="small">删除</el-button>
            </template>
          </el-popconfirm>
        </div>
      </div>
    </template>
    <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"
                    :disabled="property?.disabled || false"
                    @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)"
                    :disabled="property?.disabled || false"
                    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="httpNodeData.headers.length > index ? `headers.${index}.name` : undefined"
                    :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="httpNodeData.headers.length > index ? `headers.${index}.input` : undefined"
                  >
                    <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-button
                    :icon="Minus"
                    circle
                    size="small"
                    @click="handleHttpNodeDelete('headers', index)"
                    class="deleteBtn"
                  />
                </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="httpNodeData.params.length > index ? `params.${index}.name` : undefined"
                    :rules="[
                      { required: true, message: '请输入参数名123', trigger: 'blur' },
                    ]"
                  >
                    <el-input
                      class="param-name"
                      v-model="property.name"
                      placeholder="请输入"
                      clearable
                    />
                  </el-form-item>
                  <el-form-item
                    :label="index === 0 ? '参数值' : ''"
                    :prop="httpNodeData.params.length > index ? `params.${index}.input` : undefined"
                  >
                    <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="httpNodeData.params.length > index ? `params.${index}.input` : undefined"
                    >
                      <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-button
                    :icon="Minus"
                    circle
                    size="small"
                    @click="handleHttpNodeDelete('params', index)"
                    class="deleteBtn"
                  />
                </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"
                v-if="httpNodeData.body.type === 'form-data'"
              >
                <el-icon :size="14"><Plus /></el-icon>
              </el-button>
            </template>
            <div class="form__container">
              <el-select v-model="httpNodeData.body.type">
                <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-if="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="`body.formData.${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, 'httpBody')"
                      >
                        <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, 'httpBody')
                          "
                          @change="(value) => cascaderChange(value, index, 'httpBody')"
                        />
                      </el-form-item>
                    </el-form-item>
                    <el-button
                    :icon="Minus"
                    circle
                    size="small"
                    @click="handleHttpNodeDelete('body', index)"
                    class="deleteBtn"
                  />
                  </el-row>
                </div>
              </div>
            </div>
          </el-collapse-item>
        </el-collapse>
      </el-form>
    </div>

    <template #footer>
      <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 { ElMessage } from 'element-plus'
import { getInput, filterEmptyName, transformHttpNodeData } from "@/utils/flow";
import { emitter } from "@/utils/eventBus";
import * as monaco from 'monaco-editor';
import { nextTick, onUnmounted, watch } from "vue";

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

const emits = defineEmits(['close'])

const deleteNode = () => {
  lf.deleteNode(props.data.id);
  emits('close')
}

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

const rules = reactive({});

const codeRef = ref()
let editorInstance

const dynamicForm = ref()
const outputFormRef = ref()

const confirm = async () => {
  if (props.data.type === 'http') {
    if (dynamicForm.value) {
      await dynamicForm.value.validate((valid, fields) => {
        if (valid) {
          if (httpNodeData.value.body.type === 'json') {
            if (hasErrors()) {
              ElMessage.error('JSON中存在错误，请修正后再保存！');
              return;
            }
          }
          const nodeParams = []
          nodeParams.push({ name: "config", type: "input", input: "", children: httpNodeData.value.config, disabled: true, required: true })
          if (httpNodeData.value?.headers?.length > 0) {
            nodeParams.push({ name: "headers", type: "input", input: "", children: httpNodeData.value.headers, disabled: true, required: true })
          }
          if (httpNodeData.value?.params?.length > 0) {
            nodeParams.push({ name: "params", type: "input", input: "", children: httpNodeData.value.params, disabled: true, required: true })
          }
          
          const bodyObj = { 
            name: "body", type: "input", input: "", children: [
              { name: 'bodyType', type: "input", input: httpNodeData.value.body.type, disabled: true },
              { name: 'json', type: "input", input: httpNodeData.value.body.type === 'json' ? editorInstance.getValue() : '' },
              { name: 'formData', type: "input", input: "", children: httpNodeData.value.body.formData }
            ]
          }
          nodeParams.push(bodyObj)
          
          lf.setProperties(props.data.id, {
            ...props.data.properties,
            nodeParams
          });

          emitter.emit("setProperties", { id: props.data.id});
          emits('close')
        } else {
          console.log('error submit!', fields)
        }
      });
    }
  } else {
    if (props.data.type === 'code') {
      if (hasErrors()) {
        ElMessage.error('代码中存在错误，请修正后再保存！');
        return;
      }

      const targetObj = formData.nodeParams.find(item => item.name === 'code');
      if (targetObj) {
        // 存在：修改该对象的 input 属性
        targetObj.input = editorInstance.getValue();
      } else {
        formData.nodeParams.push(
          { name: "code", type: "input", input: editorInstance.getValue() }
        )
      }

    }
    let inputValidate = true
    let outputValidate = true
    if (dynamicForm.value) {
      await dynamicForm.value.validate((valid) => {
        if (!valid) {
          inputValidate = false
        }
      });
    }
    if (outputFormRef.value) {
      await outputFormRef.value.validate((valid) => {
        if (!valid) {
          outputValidate = false
        }
      })
    }

    // 验证通过
    if (inputValidate && outputValidate) {
      lf.setProperties(props.data.id, {
        ...props.data.properties,
        ...formData
      });

      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 = ''
  }
  if (!formData[type]) {
    formData[type] = [];
  }
  formData[type].push(obj);
};

const handleDelete = (index) => {
  formData.nodeParams.splice(index, 1);
};

const quoteOptions = ref([]);
const handleTypeChange = (index, type = 'default') => {
  if (type === 'default') {
    if (formData.nodeParams[index].type === "input") {
      formData.nodeParams[index].quote = "";
    } else {
      formData.nodeParams[index].input = "";
      const option = getInput(props.data.id);
      if (option) {
        quoteOptions.value = option;
      }
    }
  } else {
    const bodyItem = formData.nodeParams.find(item => item.name === 'body');
    if (bodyItem) {
      const formDataItem = bodyItem.children.find(child => child.name === 'formData');
      if (formDataItem) {
        if (formDataItem.children[index].type === "input") {
          formDataItem.children[index].quote = "";
        } else {
          formDataItem.children[index].input = "";
          const option = getInput(props.data.id);
          if (option) {
            quoteOptions.value = option;
          }
        }
      }
    }
  }
};

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

const visibleChange = (value, index, quote = '', type = 'default') => {
  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 > 0) {
            if (type === 'default') {
              formData.nodeParams[index].quote = [];
              // 确保响应式更新
              setTimeout(() => {
                formData.nodeParams[index].quote = currentValue;
              }, 0);
            } else {
              httpNodeData.value.body.formData[index].quote = [];
              // 确保响应式更新
              setTimeout(() => {
                httpNodeData.value.body.formData[index].quote = currentValue;
              }, 0);
            }
          }
        }, 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 httpNodeData = ref({});

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

const handleHttpNodeDelete = (type, index) => {
  if (type === 'body') {
    httpNodeData.value.body.formData.splice(index, 1);
  } else {
    httpNodeData.value[type].splice(index, 1);
  }
};

watch(
  () => props.data,
  () => {
    if (props.data.type === "start") {
      const inputParams = JSON.parse(JSON.stringify(props.data.properties.inputParams || []))
      formData.inputParams = inputParams;
    } else if (['currentLoop', 'serviceNode', 'sleep', 'loop'].includes(props.data.type)) {
      const nodeParams = JSON.parse(JSON.stringify(props.data.properties.nodeParams || []))
      const outputParams = JSON.parse(JSON.stringify(props.data.properties.outputParams || []))
      formData.nodeParams = nodeParams;
      formData.outputParams = outputParams;
    } else if (props.data.type === "code") {
      const nodeParams = JSON.parse(JSON.stringify(props.data.properties.nodeParams || []))
      const outputParams = JSON.parse(JSON.stringify(props.data.properties.outputParams || []))
      formData.nodeParams = nodeParams;
      formData.outputParams = 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') {
      const nodeParams = JSON.parse(JSON.stringify(props.data.properties.nodeParams || []))
      const transformedData = transformHttpNodeData(nodeParams);
      httpNodeData.value = transformedData;
      console.log('httpNodeData', httpNodeData.value);
      if (httpNodeData.value.body.type === 'json') {
        setTimeout(() => {
          if (editorInstance) {
            setValue(httpNodeData.value.body.json || '{}')
          }
        }, 100)
      }
    }
  },
  {
    immediate: true,
    deep: true,
  }
);

onUnmounted(() => {
  disposeEditor()
})
</script>
<style lang="scss" scoped>
.drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.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>