
<template>
  <div class="super-flow-demo1">
    <div class="scale_block">
      <div class="scale_control">
        <div class="less">
          <i class="el-icon-minus" @click="changeScale(-10)"></i>
        </div>
        <div class="num">{{ scale_num }}%</div>
        <div class="add">
          <i class="el-icon-plus" @click="changeScale(10)"></i>
        </div>
      </div>
      <div class="node-container">
        <p class="label_head">节点类型</p>
        <p class="label_explanation">请拖拽添加到流程中</p>
        <div class="nodes_i" v-for="(item, index) in nodeItemList" :key="index">
          <div
            class="node-item"
            :class="{
              'node-item-begin': item.value.meta.type == 1,
              'node-item-end': item.value.meta.type == 2,
              'node-item-default': item.value.meta.type == 3,
              'node-item-judge': item.value.meta.type == 4,
            }"
            @mousedown="(evt) => nodeItemMouseDown(evt, item.value)"
          >
            <div>
              <svg-icon
                id="judge_svg"
                v-if="item.value.meta.type == 4"
                icon-class="bg_tiaojian_nor"
                class="judge_svg"
              ></svg-icon>
            </div>
            <div>{{ item.label }}</div>
          </div>
          <div>
            <el-popover placement="right" width="300" trigger="hover">
              <div>
                <p v-if="item.value.meta.type == 1">
                  每个流程必须有一个开始节点。
                </p>
                <p v-else-if="item.value.meta.type == 2">
                  每个流程必须有一个结束节点。
                </p>
                <p v-else-if="item.value.meta.type == 3">
                  在开始节点和结束节点中间可连接多个普通节点。
                </p>
                <p v-else-if="item.value.meta.type == 4">
                  使用条件节点可以触发分支流程。未配置条件节点的分支流程将默认触发，配置了条件节点的分支，可根据条件节点名称选择触发或不触发该分支。
                </p>
              </div>
              <i class="node_icon el-icon-question" slot="reference"></i>
            </el-popover>
          </div>
        </div>
      </div>
    </div>
    <div class="flow-container" ref="flowContainer">
      <super-flow
        id="superFlow"
        ref="superFlow"
        :node-list="nodeList"
        :link-list="linkList"
        :link-menu="linkMenu"
        line-color="#c4d8f8"
        onLineColor="#94a8c8"
        :origin="origins"
        @mousedown.native="superMove"
      >
        <template v-slot:node="node">
          <div
            :class="{
              'flow-node-begin': nodeParams(node.meta.id).type == 1,
              'flow-node-end': nodeParams(node.meta.id).type == 2,
              'flow-node-default':
                nodeParams(node.meta.id).type == 3 &&
                node.meta.id != nodeItem.id,
              'flow-node-default-active':
                nodeParams(node.meta.id).type == 3 &&
                node.meta.id == nodeItem.id,
              'flow-node-judge':
                nodeParams(node.meta.id).type == 4 &&
                node.meta.id != nodeItem.id,
              'flow-node-judge-active':
                nodeParams(node.meta.id).type == 4 &&
                node.meta.id == nodeItem.id,
            }"
            :id="node.meta.id"
          >
            <div
              v-if="nodeParams(node.meta.id).type == 4"
              :style="`width: ${other_width}px;height: ${other_height}px`"
              class="svg_in"
            >
              <svg-icon
                id="judge_svg"
                :style="`font-size: ${other_font_size}px;top: -${svg_top}px;`"
                icon-class="bg_tiaojian_nor"
                class="judge_svg"
              ></svg-icon>
            </div>
            <div
              class="node_span"
              :style="`line-height: ${line_hieght}px;font-size: ${font_size}px;`"
              @click="clickItem(node.meta.id)"
              @blur="blurItem"
              :title="nodeParams(node.meta.id).name"
            >
              {{ nodeParams(node.meta.id).name }}
            </div>
            <div class="node_del" @click="delNode(node.meta.id)"></div>
          </div>
        </template>
      </super-flow>
    </div>
    <div v-if="this.nodeItem.type == 3" class="flow_options">
      <p class="options_head">操作</p>
      <div class="options_item" @click="showGeneralSettings">
        <img
          :src="require('@/assets/imgs/lcsj_ic_set.png')"
          class="options_img"
        />
        <p class="options_text">常规设置</p>
      </div>
      <div class="options_item_1">
        <img
          :src="require('@/assets/imgs/lcsj_ic_chajian.png')"
          class="options_img"
        />
        <p class="options_text">插件设置</p>
        <div class="options_pop">
          <div class="options_pop_item" @click="showInterfacePlugin">
            <img
              :src="require('@/assets/imgs/lcsj_ic_jiekou.png')"
              class="options_item_img"
            />
            <p class="options_item_text">接口插件</p>
          </div>
          <div class="options_pop_item" @click="showProcessService">
            <img
              :src="require('@/assets/imgs/lcsj_ic_liucheng.png')"
              class="options_item_img"
            />
            <p class="options_item_text">流程服务</p>
          </div>
          <div class="options_pop_item" @click="showTimeoutManagement">
            <img
              :src="require('@/assets/imgs/lcsj_ic_chaoshi.png')"
              class="options_item_img"
            />
            <p class="options_item_text">超时管理</p>
          </div>
        </div>
      </div>
      <div
        v-if="
          nodeParams(nodeItem.id).plugins &&
          nodeParams(nodeItem.id).plugins.length > 0
        "
      >
        <div class="checked_line"></div>
        <p class="options_head_1">已选插件</p>
        <div
          class="checked_item"
          v-for="(item, index) in nodeParams(nodeItem.id).plugins"
          :key="'checked' + index"
        >
          <div v-if="item.plugin_type == 1">
            <img
              :src="require('@/assets/imgs/lcsj_ic_jiekou.png')"
              @click="showInterfacePlugin"
              class="checked_item_img"
            />
            <img
              :src="require('@/assets/imgs/lcsj_btn_delete.png')"
              @click="delItem(1)"
              class="checked_item_del"
            />
            <p class="checked_item_text">接口插件</p>
          </div>
          <div v-else-if="item.plugin_type == 2">
            <img
              :src="require('@/assets/imgs/lcsj_ic_liucheng.png')"
              @click="showProcessService"
              class="checked_item_img"
            />
            <img
              :src="require('@/assets/imgs/lcsj_btn_delete.png')"
              @click="delItem(2)"
              class="checked_item_del"
            />
            <p class="checked_item_text">流程服务</p>
          </div>
          <div v-else-if="item.plugin_type == 3">
            <img
              :src="require('@/assets/imgs/lcsj_ic_chaoshi.png')"
              @click="showTimeoutManagement"
              class="checked_item_img"
            />
            <img
              :src="require('@/assets/imgs/lcsj_btn_delete.png')"
              @click="delItem(3)"
              class="checked_item_del"
            />
            <p class="checked_item_text">超时管理</p>
          </div>
        </div>
      </div>
    </div>
    <div v-if="this.nodeItem.type == 4" class="flow_options">
      <p class="options_head">操作</p>
      <div class="options_item" @click="showJudgeGeneralSettings">
        <img
          :src="require('@/assets/imgs/lcsj_ic_set.png')"
          class="options_img"
        />
        <p class="options_text">常规设置</p>
      </div>
    </div>
    <el-dialog
      :visible.sync="dialog_general"
      top="25vh"
      width="420px"
      :modal-append-to-body="false"
      title="常规设置"
      :close-on-click-modal="false"
    >
      <div class="general_settings">
        <p class="general_title">节点编号：</p>
        <p class="general_val">
          {{
            nodeParams(nodeItem.id).node_code &&
            nodeParams(nodeItem.id).node_code != ""
              ? nodeParams(nodeItem.id).node_code
              : "暂无（保存后将自动生成节点编号）"
          }}
        </p>
        <p class="general_title">节点名称：</p>
        <p class="general_input">
          <el-input v-model="node_name" placeholder="请输入节点名称"></el-input>
        </p>
        <div class="dia_footer">
          <el-button class="cancel" @click="generalCancel">取消</el-button>
          <el-button class="submit" @click="generalSubmit">确定</el-button>
        </div>
      </div>
    </el-dialog>
    <el-dialog
      :visible.sync="dialog_interface"
      top="25vh"
      width="80vw"
      :modal-append-to-body="false"
      title="接口插件"
      :close-on-click-modal="false"
    >
      <div class="interface_plugin">
        <div class="interface_msg">
          <i class="el-icon-warning-outline"></i>
          <span
            >接口插件设置后，流程服务在节点完成时自动调取该接口，同步节点业务数据，保存到流程服务中。</span
          >
        </div>
        <div class="interface_plugin_item">
          <div class="fwcs_fwdz">服务地址：</div>
          <div class="fwcs_fwdz_inner">
            <el-input
              placeholder="请输入内容"
              @input="getUrl"
              v-model="serviceUrl"
              class="input-with-select"
            >
              <el-select v-model="select" slot="prepend" placeholder="请选择">
                <el-option
                  v-for="item in optionType"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-input>
            <el-button @click="clickFwcs()" class="fwcs_btn_fwcs"
              >连接测试</el-button
            >
          </div>
          <el-tabs v-model="activeName" class="fwcs_tabs" @tab-click="clickTab">
            <el-tab-pane label="请求参数" name="0">
              <CesTable
                ref="fwcs_sjfw_qq"
                size="mini"
                :border="true"
                :headers="sjfwQqcs"
                url
                :datas="datasSj"
                :searchShow="false"
                :addRowBtn="false"
                :autoAdd="true"
                :isDialog="false"
                :isSelection="false"
                :isIndex="true"
                :radius="true"
                :emptyText="emptyText"
                :stripe="false"
                :paginationShow="false"
                :pageSizeShow="false"
                headerCellClassName="th_pink"
                @changeTable="changeTable"
              ></CesTable>
            </el-tab-pane>
            <el-tab-pane label="请求体" name="1">
              <div class="sjfw_qqt">
                <el-radio-group v-model="sjfwQqt">
                  <el-radio label="JSON">JSON</el-radio>
                </el-radio-group>
              </div>
              <Codes ref="jsonCodes"></Codes>
            </el-tab-pane>
            <el-tab-pane label="授权信息" name="2">
              <el-row class="sqxx_row">
                <el-col :span="6">
                  <div class="sqxx_title">授权方式：</div>
                  <el-select
                    v-model="sqfsVal"
                    placeholder="请选择"
                    class="sqxx_select"
                  >
                    <el-option
                      v-for="item in optionsSq"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </el-col>
                <el-col :span="2" class="center_line_c">
                  <div class="center_line"></div>
                </el-col>
                <el-col :span="16">
                  <div class="sqxx_title">Token：</div>
                  <el-input
                    v-model="tokenVal"
                    placeholder="请输入内容"
                  ></el-input>
                </el-col>
              </el-row>
            </el-tab-pane>
          </el-tabs>
          <div v-show="resultShow && resSuccess" class="add_params">
            <div class="split_line"></div>
            <div class="sjfw_qqcstx">请求参数信息填写：</div>
            <CesTable
              ref="fwcs_sjfw_qqcs"
              size="mini"
              :border="true"
              :headers="sjfwQqcstx"
              url
              :datas="datasQqcs"
              :searchShow="false"
              :addRowBtn="false"
              :autoAdd="false"
              :isDialog="false"
              :isSelection="false"
              :isIndex="true"
              :radius="true"
              :emptyText="emptyText"
              :stripe="false"
              :paginationShow="false"
              :pageSizeShow="false"
              headerCellClassName="th_pink"
            ></CesTable>
            <div class="sjfw_fhcstx">返回参数信息填写：</div>
            <CesTable
              ref="fwcs_sjfw_fhcs"
              size="mini"
              :border="true"
              :headers="sjfwFhcstx"
              url
              :datas="datasFhcs"
              :searchShow="false"
              :addRowBtn="false"
              :autoAdd="false"
              :isDialog="false"
              :isSelection="false"
              :isIndex="true"
              :radius="true"
              :emptyText="emptyText"
              :stripe="false"
              :paginationShow="false"
              :pageSizeShow="false"
              headerCellClassName="th_pink"
            ></CesTable>
          </div>
          <div v-show="resultShow && !resSuccess">
            <div class="skfw_csfwxx">测试服务信息：</div>
            <div class="test_succ">
              <div class="skcs_jg">
                <img
                  src="@/assets/imgs/test_icon_error.png"
                  class="skcs_jg_img"
                />&nbsp;测试失败
              </div>
            </div>
          </div>
        </div>
        <div class="dia_footer">
          <el-button class="cancel" @click="interfaceCancel">取消</el-button>
          <el-button class="submit" @click="interfaceSubmit">确定</el-button>
        </div>
      </div>
    </el-dialog>
    <el-dialog
      :visible.sync="dialog_process"
      top="25vh"
      width="600px"
      :modal-append-to-body="false"
      title="流程服务"
      :close-on-click-modal="false"
    >
      <div class="process_service">
        <div class="process_msg">
          <i class="el-icon-warning-outline"></i>
          <span
            >配置流程服务插件后，该节点可调用流程服务，并在此节点触发该流程。</span
          >
        </div>
        <p class="process_title">我的服务：</p>
        <p class="process_input">
          <el-select v-model="service" placeholder="请选择服务">
            <el-option
              v-for="item in my_service_list"
              :label="item.name"
              :value="item.workflows_id"
              :key="item.workflows_id"
            ></el-option>
          </el-select>
        </p>
        <div class="dia_footer">
          <el-button class="cancel" @click="processCancel">取消</el-button>
          <el-button class="submit" @click="processSubmit">添加</el-button>
        </div>
      </div>
    </el-dialog>
    <el-dialog
      :visible.sync="dialog_timeout"
      top="25vh"
      width="600px"
      :modal-append-to-body="false"
      title="超时管理"
      :close-on-click-modal="false"
    >
      <div class="timeout_service">
        <div class="timeout_msg">
          <i class="el-icon-warning-outline"></i>
          <span
            >添加超时管理插件后，根据配置该节点超时后会发送消息给请求方。</span
          >
        </div>
        <p class="timeout_title">超时设置：</p>
        <div class="timeout_input">
          <div class="timeout_row">
            <div class="timeout_input_group">
              <div class="input_left">最大时长</div>
              <el-input-number
                v-model="max_time_0"
                controls-position="right"
                :min="0"
              ></el-input-number>
              <el-select
                v-model="max_time_type_0"
                class="input_right_select"
                placeholder="请输入"
              >
                <el-option
                  v-for="item in durationOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </div>
            <div class="timeout_check">
              <el-checkbox v-model="max_time_check_0">超时提醒</el-checkbox>
            </div>
          </div>
        </div>
        <div class="timeout_input margin_high">
          <div class="timeout_row">
            <div class="timeout_input_group">
              <div class="input_left">最大时长</div>
              <el-input-number
                v-model="max_time_1"
                controls-position="right"
                :min="0"
              ></el-input-number>
              <el-select
                v-model="max_time_type_1"
                class="input_right_select"
                placeholder="请输入"
              >
                <el-option
                  v-for="item in durationOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </div>
            <div class="timeout_check">
              <el-checkbox v-model="max_time_check_1">超时终止流程</el-checkbox>
            </div>
          </div>
        </div>
        <div class="dia_footer">
          <el-button class="cancel" @click="timeoutCancel">取消</el-button>
          <el-button class="submit" @click="timeoutSubmit">确定</el-button>
        </div>
      </div>
    </el-dialog>
    <el-dialog
      :visible.sync="dialog_general_judge"
      top="25vh"
      width="420px"
      :modal-append-to-body="false"
      title="常规设置"
      :close-on-click-modal="false"
    >
      <div class="general_settings">
        <p class="general_title">节点编号：</p>
        <p class="general_val">
          {{
            nodeParams(nodeItem.id).node_code &&
            nodeParams(nodeItem.id).node_code != ""
              ? nodeParams(nodeItem.id).node_code
              : "暂无（保存后将自动生成节点编号）"
          }}
        </p>
        <p class="general_title">节点名称：</p>
        <p class="general_input">
          <el-input v-model="node_name" placeholder="请输入节点名称"></el-input>
        </p>
        <p class="general_title">条件描述：</p>
        <p class="general_input">
          <el-input
            v-model="node_content"
            placeholder="请输入条件描述"
          ></el-input>
        </p>
        <div class="dia_footer">
          <el-button class="cancel" @click="generalJudgeCancel">取消</el-button>
          <el-button class="submit" @click="generalJudgeSubmit">确定</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import CesTable from "@/components/table/table-um";
import Codes from "@/components/general/codes";
const drawerType = {
  node: 0,
  link: 1,
};
export default {
  components: {
    CesTable,
    Codes,
  },
  props: {
    node_list: {
      type: Array,
      default: () => [],
    },
    link_list: {
      type: Array,
      default: () => [],
    },
    node_params_list: {
      type: Array,
      default: () => [],
    },
    origin: {
      type: Array,
      default: () => [0, 0],
    },
  },
  watch: {
    node_list: {
      handler(val) {
        this.setVal();
      },
      deep: true,
    },
    origin: {
      handler() {
        this.origins = this.origin;
      },
    },
  },
  data() {
    return {
      origins: [0, 0],
      scale_num: 100,
      nodeList: [],
      linkList: [],
      drawerType,
      drawerConf: {
        title: "",
        visible: false,
        type: null,
        info: null,
        open: (type, info) => {
          const conf = this.drawerConf;
          conf.visible = true;
          conf.type = type;
          conf.info = info;
          if (conf.type === drawerType.node) {
            conf.title = "节点";
            if (this.$refs.nodeSetting) this.$refs.nodeSetting.resetFields();
            this.$set(this.nodeSetting, "name", info.meta.name);
            this.$set(this.nodeSetting, "desc", info.meta.desc);
          } else {
            conf.title = "连线";
            if (this.$refs.linkSetting) this.$refs.linkSetting.resetFields();
            this.$set(
              this.linkSetting,
              "desc",
              info.meta ? info.meta.desc : ""
            );
          }
        },
        cancel: () => {
          this.drawerConf.visible = false;
          if (this.drawerConf.type === drawerType.node) {
            this.$refs.nodeSetting.clearValidate();
          } else {
            this.$refs.linkSetting.clearValidate();
          }
        },
      },
      linkSetting: {
        desc: "",
      },
      nodeSetting: {
        name: "",
        desc: "",
      },
      dragConf: {
        isDown: false,
        isMove: false,
        offsetTop: 0,
        offsetLeft: 0,
        clientX: 0,
        clientY: 0,
        ele: null,
        info: null,
      },
      nodeItemList: [
        {
          label: "开始",
          value: {
            width: 120,
            height: 48,
            meta: {
              label: "开始",
              name: "开始",
              type: 1,
            },
          },
        },
        {
          label: "普通节点",
          value: {
            width: 120,
            height: 48,
            meta: {
              label: "普通节点",
              name: "普通节点",
              type: 3,
            },
          },
        },
        {
          label: "条件节点",
          value: {
            width: 120,
            height: 48,
            meta: {
              label: "条件节点",
              name: "条件节点",
              type: 4,
            },
          },
        },
        {
          label: "结束",
          value: {
            width: 120,
            height: 48,
            meta: {
              label: "结束",
              name: "结束",
              type: 2,
            },
          },
        },
      ],
      nodeParamsList: [],
      linkMenu: [
        [
          {
            label: "删除",
            selected: (link) => {
              // console.log(link);
              link.remove();
            },
          },
        ],
      ],
      dialog_general: false,
      dialog_general_judge: false,
      nodeItem: {
        id: "",
        name: "",
      },
      node_name: "",
      node_content: "",
      show_options_pop: false,
      dialog_interface: false,
      optionType: [
        { label: "GET", value: 1 },
        { label: "POST", value: 2 },
        { label: "PUT", value: 3 },
        { label: "DELETE", value: 4 },
      ],
      select: 1,
      serviceUrl: "",
      activeName: "0",
      sjfwQqt: "JSON",
      emptyText: "暂无数据",
      sqfsVal: "",
      sjfwQqcs: [
        {
          label: "请求字段编码",
          prop: "requestEncoding",
          type: "input",
          align: "left",
        },
        { label: "请求值", prop: "requestValue", type: "input", align: "left" },
      ],
      datasSj: [],
      optionsSq: [{ label: "Bearer Token", value: "Bearer" }],
      tokenVal: "",
      noSearchUrl: "",
      sjfwQqcstx: [
        { label: "字段编码", prop: "name", type: "", align: "left" },
        { label: "示例值", prop: "example", type: "input", align: "left" },
        {
          label: "字段类型",
          prop: "show_type",
          type: "",
          align: "left",
          width: "140",
        },
        {
          label: "字段名称*",
          prop: "label",
          type: "input",
          align: "left",
        },
        {
          label: "是否必须*",
          prop: "is_must",
          type: "select",
          align: "left",
          width: 100,
          selectArr: [
            { label: "是", value: 1 },
            { label: "否", value: 0 },
          ],
          hasDefault: true,
        },
        { label: "字段说明", prop: "descript", type: "input", align: "left" },
      ],
      sjfwFhcstx: [
        { label: "字段编码", prop: "name", type: "", align: "left" },
        { label: "示例值", prop: "example", type: "input", align: "left" },
        { label: "字段类型", prop: "show_type", type: "", align: "left" },
        {
          label: "字段名称*",
          prop: "label",
          type: "input",
          align: "left",
        },
        { label: "字段说明", prop: "descript", type: "input", align: "left" },
      ],
      datasQqcs: [],
      datasFhcs: [],
      resSuccess: false,
      resultShow: false,
      dataType: "",
      body_fields: [],
      param_fields: [],
      request_fields: [],
      response_fields: [],
      dialog_process: false,
      my_service_list: [],
      service: "",
      dialog_timeout: false,
      durationOptions: [
        { value: 1, label: "分钟" },
        { value: 2, label: "小时" },
        { value: 3, label: "天" },
      ],
      max_time_0: undefined,
      max_time_1: undefined,
      max_time_type_0: 1,
      max_time_type_1: 1,
      max_time_check_0: false,
      max_time_check_1: false,
      line_hieght: 41,
      font_size: 16,
      other_width: 120,
      other_height: 48,
      other_font_size: 116,
      svg_top:34
    };
  },
  mounted() {
    this.setVal();
    this.getProcessServiceList();
    document.addEventListener("mousemove", this.docMousemove);
    document.addEventListener("mouseup", this.docMouseup);
    this.$once("hook:beforeDestroy", () => {
      document.removeEventListener("mousemove", this.docMousemove);
      document.removeEventListener("mouseup", this.docMouseup);
    });
  },
  methods: {
    linkStyle(link) {
      return {};
    },
    docMousemove({ clientX, clientY }) {
      const conf = this.dragConf;
      if (conf.isMove) {
        conf.ele.style.top = clientY - conf.offsetTop + "px";
        conf.ele.style.left = clientX - conf.offsetLeft + "px";
      } else if (conf.isDown) {
        // 鼠标移动量大于 5 时 移动状态生效
        conf.isMove =
          Math.abs(clientX - conf.clientX) > 5 ||
          Math.abs(clientY - conf.clientY) > 5;
      }
    },
    docMouseup({ clientX, clientY }) {
      const conf = this.dragConf;
      conf.isDown = false;
      if (conf.isMove) {
        const {
          top,
          right,
          bottom,
          left,
        } = this.$refs.flowContainer.getBoundingClientRect();
        // 判断鼠标是否进入 flow container
        if (
          clientX > left &&
          clientX < right &&
          clientY > top &&
          clientY < bottom
        ) {
        } else if (clientX <= left) {
          clientX = left;
        } else if (clientX >= right) {
          clientX = right;
        } else if (clientY <= top) {
          clientY = top;
        } else if (clientY >= bottom) {
          clientY = bottom;
        }
        // 获取拖动元素左上角相对 super flow 区域原点坐标
        const coordinate = this.$refs.superFlow.getMouseCoordinate(
          clientX - conf.offsetLeft,
          clientY - conf.offsetTop
        );
        // console.log(clientX, conf.offsetLeft, coordinate);
        // 添加节点
        let scale = this.scale_num / 100;
        let query = { width: 120 * scale, height: 48 * scale, meta: {} };
        query.meta.type = conf.info.meta.type;
        if (!conf.info.meta.id) {
          query.meta.id =
            parseInt(Math.random() * 1000 * 1000) +
            "a" +
            parseInt(Math.random() * 1000 * 1000);
        }
        this.$refs.superFlow.addNode({
          coordinate,
          ...query,
        });
        if (
          this.nodeParamsList.findIndex((item) => {
            return item.id == query.meta.id;
          }) == -1
        ) {
          let obj = {};
          if (conf.info.meta.type == 1) {
            obj = {
              label: "开始",
              name: "开始",
              type: 1,
              id: query.meta.id,
            };
          } else if (conf.info.meta.type == 2) {
            obj = {
              label: "结束",
              name: "结束",
              type: 2,
              id: query.meta.id,
            };
          } else if (conf.info.meta.type == 3) {
            obj = {
              label: "普通节点",
              name: "普通节点",
              type: 3,
              id: query.meta.id,
              plugins: [],
            };
          } else if (conf.info.meta.type == 4) {
            obj = {
              label: "条件节点",
              name: "条件节点",
              type: 4,
              id: query.meta.id,
              plugins: [],
            };
          }
          this.nodeParamsList.push(obj);
        }
        conf.isMove = false;
      }
      if (conf.ele) {
        conf.ele.remove();
        conf.ele = null;
      }
    },
    nodeItemMouseDown(evt, info) {
      const { clientX, clientY, currentTarget } = evt;
      const { top, left } = evt.currentTarget.getBoundingClientRect();
      const conf = this.dragConf;
      const ele = currentTarget.cloneNode(true);
      Object.assign(this.dragConf, {
        offsetLeft: clientX - left,
        offsetTop: clientY - top,
        clientX: clientX,
        clientY: clientY,
        info,
        ele,
        isDown: true,
      });
      ele.style.position = "fixed";
      ele.style.margin = "0";
      ele.style.top = clientY - conf.offsetTop + "px";
      ele.style.left = clientX - conf.offsetLeft + "px";
      this.$el.appendChild(this.dragConf.ele);
    },
    clickItem(index) {
      let item = this.nodeParams(index);
      this.nodeItem = item;
      console.log(this.nodeItem);
    },
    blurItem() {
      this.nodeItem = {
        id: "",
      };
      // console.log(this.nodeItem);
    },
    getData() {
      let objs = this.$refs.superFlow.toJSON();
      let scale = this.scale_num / 100;
      objs.nodeList.forEach((item) => {
        item.width = parseInt(item.width / scale);
        item.height = parseInt(item.height / scale);
        item.coordinate[0] = parseInt(item.coordinate[0] / scale);
        item.coordinate[1] = parseInt(item.coordinate[1] / scale);
      });
      return {
        obj: objs,
        params: this.nodeParamsList,
      };
    },
    handleChange() {},
    checkNodeCouldEdit() {
      let self = this;
      if (self.nodeItem.id && self.nodeItem.id != "") {
        if (self.nodeItem.type == 3 || self.nodeItem.type == 4) {
          return true;
        } else if (self.nodeItem.type == 1 || self.nodeItem.type == 2) {
          self.$message({
            message: "开始和结束节点不可被编辑",
            type: "warning",
          });
          return false;
        }
      } else {
        self.$message({
          message: "请选择节点",
          type: "warning",
        });
        return false;
      }
    },
    showGeneralSettings() {
      if (this.checkNodeCouldEdit()) {
        let self = this;
        self.node_name = self.nodeParamsList.find((item) => {
          return item.id == self.nodeItem.id;
        }).name;
        self.dialog_general = true;
      }
    },
    showJudgeGeneralSettings() {
      if (this.checkNodeCouldEdit()) {
        let self = this;
        self.node_name = self.nodeParamsList.find((item) => {
          return item.id == self.nodeItem.id;
        }).name;
        self.dialog_general_judge = true;
      }
    },
    showInterfacePlugin() {
      let self = this;
      if (self.checkNodeCouldEdit()) {
        let meta = self.nodeParamsList.find((item) => {
          return item.id == self.nodeItem.id;
        });
        if (meta) {
          let index = -1;
          if (meta.plugins && meta.plugins.length != 0) {
            index = meta.plugins.findIndex((item) => {
              return item.plugin_type === 1;
            });
          } else {
            meta.plugins = [];
          }
          if (index !== -1) {
            let data = meta.plugins[index];
            let arr0 = JSON.parse(data.body_fields);
            let arr1 = JSON.parse(data.query_fields);
            let arr_res = JSON.parse(data.response_fields);
            self.serviceUrl = data.url;
            self.activeName = "0";
            self.sqfsVal = data.auth_method;
            self.tokenVal = data.auth_token;
            self.noSearchUrl = "";
            self.datasQqcs = arr0.length != 0 ? arr0 : arr1;
            self.datasFhcs = arr_res;
            self.resSuccess = true;
            self.resultShow = true;
            self.dataType = arr0.length != 0 ? "body" : "param";
            self.body_fields = arr0;
            self.param_fields = arr1;
            self.select = data.req_type;
            self.getUrl(self.serviceUrl);
          } else {
            self.refleshItem();
          }
        } else {
          self.refleshItem();
        }
        self.dialog_interface = true;
      }
    },
    nodeParams(id) {
      let index = this.nodeParamsList.findIndex((item) => {
        return item.id == id;
      });
      if (index != -1) {
        return this.nodeParamsList[index];
      } else {
        return {};
      }
    },
    generalCancel() {
      this.dialog_general = false;
    },
    generalSubmit() {
      let self = this;
      if (self.nodeItem.type == 3) {
        let index = self.nodeParamsList.findIndex((item) => {
          return item.id == self.nodeItem.id;
        });
        if (index != -1) {
          self.nodeParamsList[index].name = self.node_name;
        } else {
          self.$message({
            message: "修改失败",
            type: "error",
          });
        }
      }
      self.dialog_general = false;
    },
    generalJudgeCancel() {
      this.dialog_general_judge = false;
    },
    generalJudgeSubmit() {
      let self = this;
      if (self.nodeItem.type == 4) {
        let index = self.nodeParamsList.findIndex((item) => {
          return item.id == self.nodeItem.id;
        });
        if (index != -1) {
          self.nodeParamsList[index].name = self.node_name;
          self.nodeParamsList[index].content = self.node_content;
        } else {
          self.$message({
            message: "修改失败",
            type: "error",
          });
        }
      }
      self.dialog_general_judge = false;
    },
    clickTab() {},
    getUrl(enUrl) {
      let url = decodeURI(enUrl);
      let arr = [];
      if (url.indexOf("?") != -1) {
        this.noSearchUrl = url.substring(0, url.indexOf("?"));
        let search = url.substring(url.indexOf("?") + 1);
        let vars = search.split("&");
        for (let i = 0; i < vars.length; i++) {
          if (vars[i] != "") {
            let pair = vars[i].split("=");
            arr[i] = {};
            arr[i].requestEncoding = pair[0] ? pair[0] : "";
            arr[i].requestValue = pair[1] ? pair[1] : "";
          }
        }
      } else {
        this.noSearchUrl = enUrl;
      }
      this.serviceUrl = url;
      this.datasSj = arr;
    },
    changeTable() {},
    clickFwcs() {
      let headers = {};
      let requestData = {};
      if (this.sqfsVal != "") {
        headers.Authorization = [];
        headers.Authorization[0] = this.sqfsVal + " " + this.tokenVal;
      }
      let request = this.$refs.fwcs_sjfw_qq.getTableData();
      for (let i = 0; i < request.length; i++) {
        if (
          request[i] &&
          request[i].requestEncoding &&
          request[i].requestValue &&
          request[i].requestEncoding != "" &&
          request[i].requestValue != ""
        ) {
          if (
            Object.keys(requestData).indexOf(request[i].requestEncoding) == -1
          ) {
            requestData[request[i].requestEncoding] = [];
            requestData[request[i].requestEncoding][0] =
              request[i].requestValue;
          } else {
            requestData[request[i].requestEncoding].push(
              request[i].requestValue
            );
          }
        }
      }
      let bodys = this.$refs.jsonCodes
        ? this.$refs.jsonCodes.getCodesVal()
        : "";
      let contentType = this.sjfwQqt;
      let method = "";
      switch (this.select) {
        case 1:
          method = "GET";
          break;
        case 2:
          method = "POST";
          break;
        case 3:
          method = "PUT";
          break;
        case 4:
          method = "DELETE";
          break;
        default:
          break;
      }
      let query = {
        method: method,
        url: this.serviceUrl,
        headers: headers,
        params: requestData,
        body: bodys,
        content_type: contentType,
        data_service_type1: 5,
        data_service_type2: 12,
      };
      this.$api.workbench.fwzcFwcs(query).then((response) => {
        if (response.data.success == 1) {
          let data = response.data.data;
          this.body_fields = data.body_fields || [];
          this.param_fields = data.param_fields || [];
          if (data.body_fields && data.body_fields.length != 0) {
            this.datasQqcs = data.body_fields;
            this.dataType = "body";
          } else {
            this.datasQqcs = data.param_fields;
            this.dataType = "param";
          }
          this.datasFhcs = data.response_fields;
          this.resSuccess = true;
          this.resultShow = true;
        } else {
          this.resSuccess = false;
          this.resultShow = true;
          console.log(response.data.errMsg);
        }
      });
    },
    refleshItem() {
      this.serviceUrl = "";
      this.activeName = "0";
      this.sqfsVal = "";
      this.datasSj = [];
      this.tokenVal = "";
      this.noSearchUrl = "";
      this.datasQqcs = [];
      this.datasFhcs = [];
      this.resSuccess = false;
      this.resultShow = false;
      this.dataType = "";
      this.body_fields = [];
      this.param_fields = [];
      this.request_fields = [];
      this.response_fields = [];
      this.select = 1;
    },
    refleshTimeout() {
      this.max_time_0 = undefined;
      this.max_time_1 = undefined;
      this.max_time_type_0 = 1;
      this.max_time_type_1 = 1;
      this.max_time_check_0 = false;
      this.max_time_check_1 = false;
    },
    interfaceCancel() {
      this.refleshItem();
      this.dialog_interface = false;
    },
    interfaceSubmit() {
      if (this.resSuccess) {
        let requestData = this.$refs.fwcs_sjfw_qqcs.getTableData();
        let responseData = this.$refs.fwcs_sjfw_fhcs.getTableData();
        this.requestRules = 0;
        this.responseRules = 0;
        this.checkTable(requestData, 0);
        this.checkTable(responseData, 1);
        if (this.requestRules == 0 && this.responseRules == 0) {
          let self = this;
          self.request_fields = requestData;
          self.response_fields = responseData;
          let index = self.nodeParamsList.findIndex((item) => {
            return item.id == self.nodeItem.id;
          });
          // console.log(self.nodeParamsList[index]);
          let plugin_index = self.nodeParamsList[index].plugins.findIndex(
            (item) => {
              return item.plugin_type == 1;
            }
          );
          if (plugin_index == -1) {
            self.nodeParamsList[index].plugins.push({
              plugin_type: 1,
              url: self.serviceUrl,
              req_type: Number(self.select),
              auth_method: self.sqfsVal,
              auth_token: self.tokenVal,
              query_fields: JSON.stringify(
                self.dataType == "body" ? self.request_fields : self.body_fields
              ),
              body_fields: JSON.stringify(
                self.dataType == "param"
                  ? self.request_fields
                  : self.param_fields
              ),
              response_fields: JSON.stringify(self.response_fields),
            });
          } else {
            self.nodeParamsList[index].plugins[plugin_index] = {
              plugin_type: 1,
              url: self.serviceUrl,
              req_type: Number(self.select),
              auth_method: self.sqfsVal,
              auth_token: self.tokenVal,
              query_fields: JSON.stringify(
                self.dataType == "body" ? self.request_fields : self.body_fields
              ),
              body_fields: JSON.stringify(
                self.dataType == "param"
                  ? self.request_fields
                  : self.param_fields
              ),
              response_fields: JSON.stringify(self.response_fields),
            };
          }
          self.interfaceCancel();
        } else if (this.requestRules != 0) {
          this.$message.error("请完善请求参数信息中的字段名称");
        } else if (this.responseRules != 0) {
          this.$message.error("请完善返回参数信息中的字段名称");
        }
      } else {
        this.$message.error("请保证接口有效");
      }
    },
    checkTable(arr, rule) {
      let self = this;
      for (let i = 0; i < arr.length; i++) {
        if (arr[i].name && arr[i].name != "") {
          if (!arr[i].label || arr[i].label == "") {
            if (rule == 0) {
              this.requestRules = 1;
            } else if (rule == 1) {
              this.responseRules = 1;
            }
            return false;
          }
        }
        if (arr[i].children && arr[i].children.length != 0) {
          self.checkTable(arr[i].children, rule);
        }
      }
    },
    showProcessService() {
      let self = this;
      if (self.checkNodeCouldEdit()) {
        let meta = self.nodeParamsList.find((item) => {
          return item.id == self.nodeItem.id;
        });
        if (meta) {
          let index = -1;
          if (meta.plugins && meta.plugins.length != 0) {
            index = meta.plugins.findIndex((item) => {
              return item.plugin_type === 2;
            });
          } else {
            meta.plugins = [];
          }
          if (index !== -1) {
            let data = meta.plugins[index];
            self.service = data.ref_workflows_id;
          } else {
            self.refleshTimeout();
          }
        } else {
          self.refleshTimeout();
        }
        self.dialog_process = true;
      }
    },
    processCancel() {
      this.service = "";
      this.dialog_process = false;
    },
    processSubmit() {
      let self = this;
      if (self.service != "") {
        let index = self.nodeParamsList.findIndex((item) => {
          return item.id == self.nodeItem.id;
        });
        self.nodeParamsList[index].plugins.push({
          plugin_type: 2,
          ref_workflows_id: self.service,
        });
        this.processCancel();
      } else {
        this.$message.error("请选择流程服务");
      }
    },
    showTimeoutManagement() {
      let self = this;
      if (self.checkNodeCouldEdit()) {
        let meta = self.nodeParamsList.find((item) => {
          return item.id == self.nodeItem.id;
        });
        if (meta) {
          let index = -1;
          if (meta.plugins && meta.plugins.length != 0) {
            index = meta.plugins.findIndex((item) => {
              return item.plugin_type === 3;
            });
          } else {
            meta.plugins = [];
          }
          if (index !== -1) {
            let data = meta.plugins[index];
            self.max_time_check_0 = data.timeout_notify;
            self.max_time_check_1 = data.timeout_stop;
            self.max_time_0 = data.notice_max_time;
            self.max_time_type_0 = data.notice_time_unit;
            self.max_time_1 = data.stop_max_time;
            self.max_time_type_1 = data.stop_time_unit;
          } else {
            self.refleshTimeout();
          }
        } else {
          self.refleshTimeout();
        }
        self.dialog_timeout = true;
      }
    },
    timeoutCancel() {
      this.max_time_0 = undefined;
      this.max_time_1 = undefined;
      this.max_time_type_0 = 1;
      this.max_time_type_1 = 1;
      this.max_time_check_0 = false;
      this.max_time_check_1 = false;
      this.dialog_timeout = false;
    },
    timeoutSubmit() {
      let self = this;
      let index = self.nodeParamsList.findIndex((item) => {
        return item.id == self.nodeItem.id;
      });
      self.nodeParamsList[index].plugins.push({
        plugin_type: 3,
        timeout_notify: self.max_time_check_0, //超时提醒
        timeout_stop: self.max_time_check_1, //超时终止
        notice_max_time: self.max_time_0, // 超时最大时间
        notice_time_unit: self.max_time_type_0, // 超时最大时间
        stop_max_time: self.max_time_1, //停止最大时间单位，1:分钟，2：小时，3：天
        stop_time_unit: self.max_time_type_1,
      });
      this.timeoutCancel();
    },
    setVal() {
      this.nodeList = [...this.node_list];
      this.linkList = [...this.link_list];
      this.nodeParamsList = [...this.node_params_list];
    },
    getProcessServiceList() {
      this.$api.workbench.getProcessServiceList().then((response) => {
        if (response.data.success == 1) {
          this.my_service_list = response.data.data;
        }
      });
    },
    delItem(type) {
      let arr = this.nodeParams(this.nodeItem.id).plugins;
      let plugin_index = arr.findIndex((item) => {
        return item.plugin_type == type;
      });
      let index = this.nodeParamsList.findIndex((item) => {
        return item.id == this.nodeItem.id;
      });
      this.nodeParamsList[index].plugins.splice(plugin_index, 1);
    },
    delNode(item) {
      console.log(item);
      let obj = this.$refs.superFlow.toJSON();
      let nodes = obj.nodeList;
      let links = obj.linkList;
      let node_id = "";
      for (let i = 0; i < nodes.length; i++) {
        if (nodes[i].meta.id == item) {
          node_id = nodes[i].id;
          nodes.splice(i, 1);
        }
      }
      for (let i = 0; i < links.length; i++) {
        // console.log(links[i]);
        if (links[i].startId == node_id || links[i].endId == node_id) {
          links.splice(i, 1);
          i--;
        }
      }
      let index = this.nodeParamsList.findIndex((ele) => {
        return ele.id == item;
      });
      this.nodeParamsList.splice(index, 1);
      this.nodeList = nodes;
      this.linkList = links;
      this.nodeItem = {
        id: "",
        name: "",
      };
      // console.log(this.nodeList, this.linkList, this.nodeParamsList);
    },
    changeScale(size) {
      let old_scale = this.scale_num / 100;
      if (this.scale_num > 50 && this.scale_num < 150) {
        this.scale_num += size;
      } else if (this.scale_num == 50) {
        if (size > 0) {
          this.scale_num += size;
        }
      } else if (this.scale_num == 150) {
        if (size < 0) {
          this.scale_num += size;
        }
      }
      let scale = this.scale_num / 100;
      // console.log(scale);
      let obj = this.$refs.superFlow.toJSON();
      // console.log(obj);
      obj.nodeList.forEach((item) => {
        item.width /= old_scale;
        item.width *= scale;
        item.height /= old_scale;
        item.height *= scale;
        item.coordinate[0] /= old_scale;
        item.coordinate[0] *= scale;
        item.coordinate[1] /= old_scale;
        item.coordinate[1] *= scale;
      });
      this.line_hieght = 41 * scale;
      this.font_size = 16 * scale;
      this.other_width = 120 * scale;
      this.other_height = 48 * scale;
      this.other_font_size = 116 * scale;
      this.svg_top = 34 * scale;
      this.nodeList = obj.nodeList;
      this.linkList = obj.linkList;
    },
    superMove(e) {
      if (e.srcElement.id == "superFlow") {
        this.$refs.superFlow.$el.style.cursor = "move";
        let old_X = e.clientX;
        let old_Y = e.clientY;
        let origin_left = this.origins[0];
        let origin_top = this.origins[1];
        document.onmousemove = (e) => {
          let left = origin_left + e.clientX - old_X;
          let top = origin_top + e.clientY - old_Y;
          this.origins = [left, top];
        };
        document.onmouseup = (e) => {
          this.$refs.superFlow.$el.style.cursor = "auto";
          document.onmousemove = null;
          document.onmouseup = null;
        };
      } else {
      }
    },
  },
};
</script>

<style lang="less" scoped>
.link-base-style-form {
  .el-form-item {
    margin-bottom: 12px;
  }
  padding-bottom: 20px;
  border-bottom: 1px solid #dcdcdc;
}
.super-flow-demo1 {
  margin-top: 20px;
  width: 100%;
  height: 100%;
  background-color: #fff;
  @list-width: 160px;
  position: relative;
  > .flow-container {
    width: 100%;
    float: left;
    height: 100%;
    overflow: hidden;
  }
  .flow_options {
    width: 84px;
    padding-bottom: 30px;
    background-color: #f8f9fd;
    border-radius: 42px;
    position: absolute;
    top: 10px;
    right: 0;
    text-align: center;
    .options_head {
      color: #242c43;
      font-size: 14px;
      font-weight: bold;
      margin-top: 30px;
    }
    .options_item {
      margin-top: 20px;
      cursor: pointer;
      color: #242c43;
      &:hover {
        color: #515fe7;
      }
      .options_img {
        width: 40px;
        height: 40px;
      }
    }
    .options_item_1 {
      margin-top: 20px;
      cursor: pointer;
      color: #242c43;
      position: relative;
      .options_img {
        width: 40px;
        height: 40px;
      }
      .options_pop {
        display: none;
      }
      &:hover .options_pop {
        position: absolute;
        width: 250px;
        height: 82px;
        background-color: #0d1847;
        border-radius: 10px;
        z-index: 2;
        top: 0;
        right: 0;
        animation: myfirst 0.5s;
        display: flex;
        overflow: hidden;
        justify-content: space-around;
        color: #ffffff;
        font-size: 12px;
        .options_pop_item {
          padding-top: 10px;
          .options_item_img {
            width: 40px;
            height: 40px;
          }
          .options_item_text {
            white-space: nowrap;
          }
        }
      }
      @keyframes myfirst {
        from {
          width: 0;
        }
        to {
          width: 250px;
        }
      }
    }
    .checked_line {
      width: 64px;
      height: 1px;
      background-color: #e5e8f5;
      margin: 20px auto;
    }
    .options_head_1 {
      color: #242c43;
      font-size: 14px;
      font-weight: bold;
      margin-top: 20px;
    }
    .checked_item {
      margin-top: 20px;
      cursor: default;
      position: relative;
      &:hover {
        color: #515fe7;
      }
      .checked_item_img {
        width: 40px;
        height: 40px;
      }
      .checked_item_del {
        position: absolute;
        cursor: pointer;
        width: 12px;
        height: 12px;
        top: -4px;
        right: 16px;
      }
      .checked_item_text {
        white-space: nowrap;
      }
    }
  }
}
.node-item {
  @node-item-height: 42px;
  font-size: 16px;
  display: inline-block;
  height: @node-item-height + 6;
  width: 120px;
  margin-top: 18px;
  background-color: #ffffff;
  border-radius: 10px;
  line-height: @node-item-height;
  // box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  user-select: none;
  text-align: center;
  z-index: 6;
  &.node-item-begin {
    border: solid 3px #25bdb1;
    // &:hover {
    //   box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.4);
    // }
  }
  &.node-item-end {
    border: solid 3px #f78181;
    // &:hover {
    //   box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.4);
    // }
  }
  &.node-item-default {
    border: solid 3px #b4c6f5;
    // &:hover {
    //   box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.4);
    // }
  }
  &.node-item-judge {
    border: none;
    box-shadow: none;
    position: relative;
    background: transparent;
    overflow: hidden;
    line-height: 48px;
    .judge_svg {
      font-size: 116px;
      position: absolute;
      z-index: -1;
      top: -34px;
      left: 0px;
    }
  }
}
.scale_block {
  position: absolute;
  left: 0;
  z-index: 2;
  top: 5px;
  width: 160px;
  .scale_control {
    width: 130px;
    display: flex;
    justify-content: space-around;
    border-radius: 8px;
    border: solid 2px #e3e5ef;
    background-color: #fff;
    height: 40px;
    font-size: 16px;
    line-height: 36px;
    margin: 0 auto;
    color: #8390ee;
    .less {
      padding: 0 10px;
      border-right: solid 2px #e3e5ef;
      cursor: pointer;
    }
    .add {
      padding: 0 10px;
      border-left: solid 2px #e3e5ef;
      cursor: pointer;
    }
    .num {
      color: #58617a;
    }
  }
  .node-container {
    width: 180px;
    height: 360px;
    text-align: center;
    background-color: #f8f9fd;
    border-radius: 8px;
    margin-top: 20px;
    .label_head {
      font-weight: bold;
      font-size: 14px;
      text-align: center;
      padding: 20px 0 15px;
      color: #242c43;
    }
    .label_explanation {
      font-size: 14px;
      text-align: center;
      color: #8890a7;
    }
  }
}
.general_settings {
  font-size: 14px;
  text-align: left;
  .general_title {
    margin-bottom: 20px;
    padding-left: 10px;
  }
  .general_val {
    margin-bottom: 30px;
    padding-left: 10px;
  }
  .general_input {
    margin-bottom: 50px;
  }
}
.interface_plugin {
  .interface_msg {
    font-size: 12px;
    color: #58617a;
    width: 570px;
    margin: 0 auto;
    padding: 10px 0;
    background-color: #f4f7fc;
    border-radius: 8px;
  }
  .interface_plugin_item {
    text-align: left;
    .fwcs_fwdz {
      color: #58617a;
      margin: 20px 15px 15px;
      font-size: 14px;
    }
    .fwcs_fwdz_inner {
      margin-bottom: 20px;
    }
    .input-with-select {
      width: 70%;
    }
    .fwcs_btn_fwcs {
      background-color: #0f2683;
      color: #ffffff;
      margin-left: 10px;
    }
    .fwcs_tabs {
      .sqxx_row {
        padding: 0 20px;
        .sqxx_title {
          color: #58617a;
          font-size: 14px;
          margin: 10px 15px;
        }
        .sqxx_select {
          width: 100%;
        }
        .center_line_c {
          margin: 0 auto;
          .center_line {
            background-color: #f4f7fc;
            width: 2px;
            height: 400px;
            position: relative;
            left: 50%;
          }
        }
      }
    }
    .split_line {
      width: 100%;
      height: 1px;
      background-color: #f4f7fc;
      margin: 30px 0;
    }
    .sjfw_qqcstx {
      color: #58617a;
      margin: 10px 15px;
      font-size: 14px;
    }
    .sjfw_fhcstx {
      color: #58617a;
      margin: 30px 15px 10px;
      font-size: 14px;
    }
    .skcs_jg {
      height: 100px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #0f2683;
      font-size: 20px;
      .skcs_jg_img {
        position: relative;
        top: 3px;
      }
    }
  }
}
.process_service {
  font-size: 14px;
  text-align: left;
  .process_msg {
    font-size: 12px;
    color: #58617a;
    width: 430px;
    margin: 0 auto;
    padding: 10px 0;
    background-color: #f4f7fc;
    border-radius: 8px;
    text-align: center;
  }
  .process_title {
    margin: 20px 0 10px;
    padding-left: 10px;
  }
  .process_val {
    margin-bottom: 30px;
    padding-left: 10px;
  }
  .process_input {
    margin-bottom: 50px;
  }
}
.timeout_service {
  font-size: 14px;
  text-align: left;
  .timeout_msg {
    font-size: 12px;
    color: #58617a;
    width: 430px;
    margin: 0 auto;
    padding: 10px 0;
    background-color: #f4f7fc;
    border-radius: 8px;
    text-align: center;
  }
  .timeout_title {
    margin: 20px 0 10px;
    padding-left: 10px;
  }
  .timeout_val {
    margin-bottom: 30px;
    padding-left: 10px;
  }
  .timeout_input {
    margin-bottom: 20px;
  }
  .margin_high {
    margin-bottom: 50px;
  }
}
.dia_footer {
  font-size: 14px;
  text-align: center;
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
  .cancel {
    background-color: #c3caf8;
    color: #0f2683;
    width: 90px;
    height: 34px;
    padding: 0 20px;
  }
  .submit {
    background-color: #0f2683;
    color: #f8f9fd;
    width: 90px;
    height: 34px;
    padding: 0 20px;
  }
}
.node_del {
  width: 18px;
  height: 18px;
  background: url("~@/assets/imgs/lcsj_btn_node_delete.png") no-repeat center
    center;
  cursor: pointer;
  display: none;
  position: absolute;
  top: -12px;
  right: -12px;
  z-index: 1999;
}
.super-flow__node:hover .node_del {
  display: block;
}
</style>
<style lang="less">
.super-flow {
  .super-flow__node {
    border: none;
    background-color: transparent;
    border-radius: 8px;
    /deep/ .node_span {
      text-align: center;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    .flow-node-begin {
      width: 100%;
      height: 100%;
      padding: 0 6px;
      border-radius: 8px;
      border: solid 3px #109e93;
      background-color: #25bdb1;
      color: #ffffff;
      position: relative;
      box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.3);
    }
    .flow-node-end {
      width: 100%;
      height: 100%;
      padding: 0 6px;
      border-radius: 8px;
      background-color: #f78181;
      border: solid 3px #e86262;
      color: #ffffff;
      position: relative;
      box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.3);
    }
    .flow-node-default {
      width: 100%;
      height: 100%;
      padding: 0 6px;
      border-radius: 8px;
      background-color: #fff;
      border: solid 3px #b4c6f5;
      position: relative;
      box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.3);
    }
    .flow-node-default-active {
      width: 100%;
      height: 100%;
      padding: 0 6px;
      border-radius: 8px;
      border: solid 3px #b4c6f5;
      box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.8);
      background-color: #515fe7;
      color: #fff;
      position: relative;
    }
    .flow-node-judge {
      width: 100%;
      height: 100%;
      padding: 2px 6px;
      border-radius: 8px;
      background-color: transparent;
      border: none;
      position: relative;
      .svg_in {
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
        overflow: hidden;
        .judge_svg {
          position: relative;
        }
      }
    }
    .flow-node-judge-active {
      width: 100%;
      height: 100%;
      padding: 2px 6px;
      border-radius: 8px;
      background-color: transparent;
      border: none;
      position: relative;
      .svg_in {
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
        overflow: hidden;
        .judge_svg {
          position: relative;
        }
      }
    }
  }
}
.super-flow__menu-container .super-flow__menu {
  width: 120px;
}
.super-flow-demo1 .el-dialog__wrapper {
  padding-left: 180px;
}
.super-flow-demo1 .el-dialog__body {
  padding: 20px;
}
.super-flow-demo1 >  .v-modal {
  position: absolute;
  border-radius: 8px;
  width: calc(100% + 40px);
  height: calc(100% + 230px);
  top: -160px;
  left: -20px;
}
.fwcs_fwdz_inner .el-select .el-input {
  width: 130px;
  background-color: #0f2683;
  color: #ffffff;
  border-radius: 8px 0px 0px 8px;
}
.interface_plugin .el-tabs__header .el-tabs__item:hover {
  color: #e56600;
}
.timeout_input {
  .timeout_row {
    display: flex;
    .timeout_input_group {
      width: 400px;
      display: flex;
      .input_left {
        display: inline-block;
        width: 90px;
        height: 40px;
        padding: 0 0 0 15px;
        background-color: #edeef4;
        border: 1px #e3e5ef solid;
        color: #8890a7;
        border-radius: 8px 0 0 8px;
        line-height: 40px;
        font-size: 14px;
      }
      .el-input-number {
        flex: 1;
        .el-input__inner {
          border-radius: 0;
          color: #242c43;
        }
        .el-input-number__decrease {
          display: none;
        }
        .el-input-number__increase {
          display: none;
        }
        &.is-controls-right {
          .el-input__inner {
            padding-left: 15px;
            padding-right: 15px;
            text-align: left;
          }
        }
      }
      .input_right_select.el-select {
        width: 80px;
      }
      .input_right_select.el-select .el-input {
        width: 80px;
        background-color: #0f2683;
        color: #ffffff;
        border-radius: 0 8px 8px 0;
      }
      .input_right_select .el-input .el-input__inner {
        background-color: #0f2683;
        color: #ffffff;
        border: none;
      }
    }
    .timeout_check {
      margin-left: 20px;
      line-height: 40px;
      font-size: 16px;
      color: #242c43;
      .el-checkbox__input.is-checked + .el-checkbox__label {
        color: #242c43;
      }
      .el-checkbox__input.is-checked .el-checkbox__inner,
      .el-checkbox__input.is-indeterminate .el-checkbox__inner {
        background-color: #626de9;
        border-color: #515fe7;
      }
      .el-checkbox__input.is-focus .el-checkbox__inner {
        border-color: #515fe7;
      }
    }
  }
}
.super-flow-demo1 {
  .super-flow__node {
    box-shadow: none;
  }
}
.nodes_i {
  position: relative;
  display: flex;
  justify-content: space-around;
}
.node_icon {
  position: relative;
  top: 30px;
  right: 4px;
}
</style>