<template>
  <div class="app" style="height: 100vh">
    <vue-flow-editor
      v-if="flowData"
      ref="editor"
      menuWidth="200px"
      modelWidth="300px"
      :data="flowData"
      :grid="showGrid"
      :miniMap="showMiniMap"
      :onRef="onRef"
      :multipleSelect="showMultipleSelect"
      :loading="state.editorLoading"
      :beforeDelete="handleBeforeDelete"
      :afterDelete="handleAfterDelete"
      :beforeAdd="handleBeforeAdd"
      :afterAdd="handleAfterAdd"
      @click-canvas="onClickCanvas"
      @dragend-node="onDragEndNode"
      @click-node="onClickNode"
      @click-edge="onClickEdge"
      @dblclick-node="onDblClickNode"
      @dblclick-edge="onDblClickEdge"
      :controlConfig="state.controlConfig"
      :toolbarButtonHandler="toolbarButtonHandler"
    >
      <!-- :activityConfig="state.activityConfig" -->
      <!-- 左侧菜单 -->
      <template v-slot:menu>
        <!-- <vue-flow-edit-menu-group label="活动节点" value>
          <vue-flow-edit-menu
            v-for="(value, key) in state.activityConfig"
            :key="key"
            :model="{ activity: key, text: value.text, desc: value.desc }"
          >
            <template v-slot:content>
              <div class="activity-menu">
                <img :src="value.img" />
                <span>{{ value.text }}</span>
              </div>
            </template>
          </vue-flow-edit-menu>
        </vue-flow-edit-menu-group> -->
        <vue-flow-edit-menu-group label="操作节点" value>
          <!-- 注意 key 值的绑定 -->
          <vue-flow-edit-menu
            v-for="(value, key) in state.controlList"
            :key="key"
            :model="{ control: key, text: value.text, desc: value.desc }"
          >
            <template v-slot:content>
              <div class="activity-menu">
                <img :src="value.img" />
                <span>{{ value.text }}</span>
              </div>
            </template>
          </vue-flow-edit-menu>
        </vue-flow-edit-menu-group>
        <!-- <vue-flow-edit-menu-group
          v-for="(group, groupIndex) in state.menuData"
          :label="group.label"
          :key="groupIndex"
          :value="true"
        >
          <vue-flow-edit-menu
            v-for="(menu, menuIndex) in group.menus"
            :key="menuIndex"
            :model="menu"
          />
        </vue-flow-edit-menu-group> -->
      </template>
      <!-- 右侧表单 -->
      <template v-slot:model>
        <el-form
          v-if="!!state.detailModel"
          ref="formRef"
          :model="state.detailModel"
          label-position="top"
          label-width="100px"
          style="position: relative;"
        >
          <!-- <template v-if="state.detailModel.activity === undefined"> -->
            <el-tabs
              v-model="state.activeName"
              class=""
              @tab-change="handleActiveChange"
              stretch
            >
              <el-tab-pane label="节点属性" name="node" style="padding: 0 1rem">
                <div v-if="state.main_attr_set" class="main-attr-set">
                  <el-form-item prop="label">
                    <div slot="label">
                      节点名称 <span style="color: red;">*</span>
                      <span style="position: absolute; right: 0; top: 0;">
                        <span style="background-color: #f5f6f8; padding: 2px 5px; border: 1px solid #d7d9dc; border-radius: 3px; color: #141e31; font-size: 12px; font-weight: 400; line-height: 22px; text-align: center; width: 100px;">
                          节点索引：{{ state.node_idx }}
                        </span>
                      </span>
                    </div>
                    <el-input v-model="state.node_name" style="margin-top: 5px;" />
                  </el-form-item>
                  <div v-if="state.user_attr_set" class="node-user">
                    <div style="font-size: 14px; margin-bottom: 10px;">
                      节点负责人 <span style="color: red;">*</span>
                    </div>
                    <div class="flow-tag__wrapper" style="max-height: 100px; overflow: auto;" @click="openUserForm">
                      <el-tag
                        v-if="state.userTags.length"
                        v-for="tag in state.userTags"
                        :key="tag.name"
                        style="margin: 0 0.25rem 0.5rem 0.25rem;"
                      >
                        <el-icon v-if="tag.type === 'dept'" style="display: inline-block; vertical-align: middle; line-height: 10px;height: 13px;"><House /></el-icon>
                        <el-icon v-if="tag.type === 'user'" style="display: inline-block; vertical-align: middle; line-height: 10px;height: 12px;"><Female /></el-icon>
                        <el-icon v-if="tag.type === 'role'" style="display: inline-block; vertical-align: middle; line-height: 10px;height: 12px;"><User /></el-icon>
                        <span style="margin-left: 2px;display: inline-block; vertical-align: middle; line-height: 10px; height: 10px;">{{ tag.name }}</span>
                      </el-tag>
                      <div v-else class="text-empty">请选择成员</div>
                    </div>
                  </div>
                  <el-form-item v-if="state.select_attr_set" prop="attr">
                    <el-radio-group
                      v-model="state.attr_radio"
                      size="large"
                      class="attr-radio-group"
                    >
                      <el-radio-button label="基础属性" />
                      <el-radio-button label="更多属性" />
                    </el-radio-group>
                  </el-form-item>
                  <el-form-item v-if="state.attr_radio === '基础属性'" prop="">
                    <div slot="label">
                      <div style="display: flex; align-items: center; justify-content: space-between;width:266px; margin-bottom: 15px;">
                        <div>
                          字段权限 <span style="color: red;">*</span>
                        </div>
                        <div>
                          <el-input v-model="state.search_auth_value" @input="onSearchAuthInput" size="small" placeholder="搜索" />
                        </div>
                      </div>
                    </div>
                    <el-row
                      style="width: 100%; background-color: #f0f1f4; padding-left: 10px;"
                    >
                      <el-col :span="12">字段</el-col>
                      <el-col :span="6">可见</el-col>
                      <el-col :span="6">可编辑</el-col>
                    </el-row>
                    <el-row v-if="!state.search_auth_value" style="width: 100%; padding-left: 10px;">
                      <el-col :span="12" style="color: #009688">全选</el-col>
                      <el-col :span="6" style="padding-left: 5px;"
                        ><el-checkbox
                          @change="onAuthAllChange"
                          v-model="state.auth_all_checked"
                          label=""
                          size="large"
                      /></el-col>
                      <el-col :span="6" style="padding-left: 5px;"
                        ><el-checkbox
                          @change="onAuthAllEditChange"
                          v-model="state.auth_all_edit"
                          label=""
                          size="large"
                      /></el-col>
                    </el-row>
                    <el-row
                      v-for="(field, index) in state.field_auths"
                      :key="index"
                      style="width: 100%; padding-left: 10px;"
                      >
                      <el-col v-if="field.show" :span="12">{{ field.name }}</el-col>
                      <el-col v-if="field.show" :span="6" style="padding-left: 5px;"
                        ><el-checkbox
                          v-model="field.visible.checked"
                          :disabled="field.visible.disabled"
                          label=""
                          size="large"
                          @change="onAuthVisibleChange(field, index)"
                      /></el-col>
                      <el-col v-if="field.show" :span="6" style="padding-left: 5px;"
                        ><el-checkbox
                          v-model="field.editable.checked"
                          :disabled="field.editable.disabled"
                          label=""
                          size="large"
                          @change="onAuthEditableChange(field, index)"
                      /></el-col>
                    </el-row>
                  </el-form-item>
                  <div v-if="state.attr_radio === '更多属性'">
                    <div class="more-attr">
                      <div
                        v-for="(attr, index) in state.more_attr"
                        :key="index"
                        class="more-attr-item"
                      >
                        <div style="display: flex; align-items: center;">
                          <p class="title">{{ attr.label }}</p>&nbsp;
                          <el-tooltip
                            class="box-item"
                            :content="attr.desc"
                            placement="top"
                          >
                            <el-icon><InfoFilled color="#b5b8be" /></el-icon>
                          </el-tooltip>
                        </div>
                        <div
                          v-for="(item, idx) in attr.data"
                          :key="idx"
                          class="content"
                        >
                          <div v-if="item.btnText" class="left">
                            <span v-if="item.label === item.btnText">{{ item.label }}</span>
                            <span v-else>
                              {{ item.btnText }} <span style="color: #838892;">| 原名：{{ item.label }}</span>
                            </span>
                          </div>
                          <div v-else class="left">
                            <span>
                              {{ item.label }}
                            </span>
                          </div>
                          <div :class="['right', item.show ? 'active' : '']">{{ item.show? '已开启' : '未开启' }}</div>
                          <div class="btn-action" @click="setMoreAttr(attr, idx)">
                            <el-icon :size="14"><Edit /></el-icon>&nbsp;<span>编辑</span>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div v-else class="more-attr-set">
                  <el-button @click="onConfirmMoreAttr(state.more_attr_data)" type="primary" color="#009688" style="width: 100%;">完成</el-button>
                  <div class="more-attr-switch">
                    <div class="more-attr-title">{{ state.more_attr_data.label }}</div>
                    <div><el-switch v-model="state.more_attr_data.show" /></div>
                  </div>
                  <p class="more-attr-tip">{{ state.more_attr_data.desc }}</p>
                  <div v-if="state.more_attr_data.showBtn">
                    <p style="font-size: 14px; font-weight: bold;">按钮文字</p>
                    <el-input v-model="state.more_attr_data.btnText" />
                  </div>
                </div>
              </el-tab-pane>
              <!-- <el-tab-pane label="流程属性" name="flow" style="padding: 0 1rem">
                <el-form-item prop="label">
                  <div slot="label">
                    测试属性 <span style="color: red;">*</span>
                  </div>
                  <el-input v-model="state.detailModel.data.test" />
                </el-form-item>
              </el-tab-pane> -->
            </el-tabs>
            <!-- <template v-if="state.detailModel.type !== 'edge'">
              <el-form-item label="节点背景色" prop="style.fill">
                <el-color-picker v-model="state.detailModel.style.fill" />
              </el-form-item>
              <el-form-item label="节点边框色" prop="style.stroke">
                <el-color-picker v-model="state.detailModel.style.stroke" />
              </el-form-item>
              <el-form-item label="节点文字色" prop="labelCfg.style.stroke">
                <el-color-picker
                  v-model="state.detailModel.labelCfg.style.fill"
                />
              </el-form-item>
            </template> -->
            <!-- <div style="margin-left: 20px;">
              <el-button type="primary" @click="openUserForm">
                设置人员配置
              </el-button>
            </div> -->
          <!-- </template> -->
          <!-- <template v-else> -->
            <!-- <el-form-item label="活动标题">
              <el-input v-model="state.detailModel.text" />
            </el-form-item>
            <el-form-item label="活动副标题">
              <el-input v-model="state.detailModel.desc" />
            </el-form-item> -->
            <!-- <el-form-item label="活动类型">
              <el-select v-model="state.detailModel.activity">
                <el-option
                  v-for="(value, key) in state.activityConfig"
                  :key="key"
                  :label="value.text"
                  :value="key"
                />
              </el-select>
            </el-form-item> -->
          <!-- </template> -->
          <div v-if="state.statusLoading" style="position: absolute; top: 0; right: 0;background-color: rgba(255, 255, 255, 0.5);width: 100%; height: 100%; z-index: 2006;">
            <div class="el-loading-spinner">
            <svg class="circular" viewBox="0 0 50 50"><circle class="path" cx="25" cy="25" r="20" fill="none"></circle></svg>
              <p class="el-loading-text">加载中</p>
            </div>
          </div>
        </el-form>
      </template>
      <!-- 工具栏 -->
      <template v-slot:toolbar>
        <el-tooltip content="复制节点">
          <div :class="['vue-flow-editor-toolbar-item', state.detailModel ? '' : 'vue-flow-editor-toolbar-item-disabled']" @click="copyData">
            <i class="el-icon-coin" style=" margin-top: 4px;" />
            <span style="font-size: 12px; transform: scale(0.8); margin-top: 2px;">复制</span>
          </div>
        </el-tooltip>
        <el-tooltip content="保存流程图数据">
          <div class="vue-flow-editor-toolbar-item" @click="saveData">
            <i class="el-icon-coin" style=" margin-top: 4px;" />
            <span style="font-size: 12px; transform: scale(0.8); margin-top: 2px;">保存流程</span>
          </div>
        </el-tooltip>
        <!-- <el-tooltip content="启用流程图数据">
          <div class="vue-flow-editor-toolbar-item" @click="startFlow">
            <i class="el-icon-check" style=" margin-top: 4px;" />
            <span style="font-size: 12px; transform: scale(0.8); margin-top: 2px;">启用</span>
          </div>
        </el-tooltip> -->
        <div style="position: absolute; top:20px; right: 15px;">
          <el-dropdown trigger="click">
            <div style="margin-left: 15px;">
              <div style="width: 10px; height: 10px; background-color: #009688; border-radius: 50%; display: inline-block;"></div> <span style="font-size: 13px;">流程版本 (V{{ state.flow_version }})</span>
            </div>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click.native="onSelectFlowVersion(item.id, item.code, item.note)" v-for="(item, index) in state.flow_version_list" :key="index">流程版本 (V{{ item.code }})</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
          <el-tooltip content="编辑版本信息" placement="bottom">
            <i class="el-icon-chat-line-square" @click="editFlowVersion" style="font-size: 18px; margin-left: 8px;"></i>
          </el-tooltip>
          <el-dialog v-model="state.dialogVersionFormVisible" title="版本信息">
            <el-form :model="state.versionForm" label-width="80px">
              <el-form-item label="版本号">
                流程版本(V{{ state.versionForm.code }})
              </el-form-item>
              <el-form-item label="版本描述">
                <el-input
                  v-model="state.versionForm.note"
                  :autosize="{ minRows: 2, maxRows: 4 }"
                  type="textarea"
                  placeholder="请输入版本描述"
                />
              </el-form-item>
            </el-form>
            <template #footer>
              <span class="dialog-footer">
                <el-popconfirm
                  v-if="state.flow_version !== state.versionForm.code"
                  placement="top"
                  icon="el-icon-warning"
                  title="是否确认启用该版本流程？"
                  width="220px"
                  confirm-button-text="确认"
                  cancel-button-text="取消"
                  @confirm="setFLowVersionEnable">
                  <template #reference>
                    <el-button type="success">启用流程</el-button>
                  </template>
                </el-popconfirm>
                <el-popconfirm
                  v-if="state.flow_version !== state.versionForm.code"
                  title="是否确认删除该版本流程？"
                  width="220px"
                  confirm-button-text="确认"
                  cancel-button-text="取消"
                  @confirm="deleteFlowVersion">
                  <template #reference>
                    <el-button type="danger">删除流程</el-button>
                  </template>
                </el-popconfirm>
                <el-button type="primary" color="#009688" @click="saveFlowVersionNote">保存描述</el-button>
                <el-button @click="state.dialogVersionFormVisible = false">关闭</el-button>
              </span>
            </template>
          </el-dialog>
        </div>
      </template>
      <!-- 表单底部按钮 -->
      <template v-slot:foot>
        <div v-if="state.main_attr_set" style="width: 100%; text-align: center;">
          <el-button type="primary" color="#009688" @click="saveForm" style="width: 40%;">保存</el-button>
          <el-button @click="cancel" style="width: 40%;">关闭</el-button>
        </div>
      </template>
    </vue-flow-editor>
    <div v-if="state.reloadLoading" style="position: absolute; top: 0; right: 0; left: 0; bottom: 0; background-color: rgba(255, 255, 255, 0.5);width: 100%; height: 100%; z-index: 2006;">
      <div class="el-loading-spinner">
      <svg class="circular" viewBox="0 0 50 50"><circle class="path" cx="25" cy="25" r="20" fill="none"></circle></svg>
        <p class="el-loading-text">加载流程图中...</p>
      </div>
    </div>
  </div>

  <select-user-view
    :visible="state.dialogUserFormVisible"
    :list="state.dialogUserTags"
    @close="onCloseUserView"
    @confirm="onConfirmUserView"
  />
</template>

<script lang="ts">
import { ref, reactive, onMounted, watch, nextTick } from 'vue'
import { AppData } from './data.js'
import { staticPath } from './utils'
import { ElNotification, ElMessage, ElMessageBox, ElLoading } from 'element-plus'
import axios from './axios'
import $ from 'jquery'
import { Calendar, Search } from '@element-plus/icons-vue'
import SelectUserView from './selectUserView.vue'
import { Function } from 'lodash'
import { extend } from '@vue/shared'
import { v4 as uuidv4 } from 'uuid';
import type { FormInstance, FormRules } from 'element-plus'
import qs from 'qs'
import { after } from 'lodash-es';
// import { VueSpinner } from 'vue3-spinners';

const G6 = (window as any).G6.default as any

function delay(time: number) {
  return new Promise((resolve) => setTimeout(resolve, time))
}

interface RuleForm {
  label: string
}

interface myObj {
  source: string
  id: string
  label: string
  control: string
  target: string
}

interface myEvent {
  item: {
    get(
      T: string,
    ): {
      source: any
      target: any
      style: any
      labelCfg: any
      label: any
    }
  }
}

export default {
  components: {
    Calendar,
    Search,
    SelectUserView,
    // VueSpinner,
  },
  setup(props, context) {

    const formRef = ref<any>(null);

    const rules = reactive<FormRules<RuleForm>>({
      label: [
          { required: true, message: '请输入名称', trigger: 'blur' },
          { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' },
        ],
    })

    const state = reactive({
      data: AppData, // 渲染的数据，数据格式参考G6文档
      detailModel: null,
      editorLoading: false, // 开始编辑器的loading状态
      statusLoading: false, // loading状态
      reloadLoading: false, // loading状态
      // menuData: [
      //   {
      //     label: '流程节点',
      //     menus: [
      //       { label: '开始', shape: 'ellipse', id: 'start-node' },
      //       { label: '结束', shape: 'ellipse', id: 'end-node' },
      //       { label: '审批节点', busType: '123' },
      //       { label: '判断节点', shape: 'diamond' },
      //     ],
      //   },
      //   {
      //     label: '其他形状节点',
      //     menus: [
      //       { label: '矩形节点', shape: 'rect' },
      //       { label: '圆形节点', shape: 'circle' },
      //       { label: '椭圆节点', shape: 'ellipse' },
      //       { label: '菱形节点', shape: 'diamond' },
      //       { label: '三角形节点', shape: 'triangle' },
      //       { label: '星形节点', shape: 'star' },
      //     ],
      //   },
      // ],
      controlList: {
        flow: {
          text: '流程节点',
          desc: '流程节点',
          color: '#ed8383',
          img: 'https://cdn.ipadbiz.cn/oa/flow/icons-flow.png',
        },
        cc: {
          text: '抄送节点',
          desc: '抄送节点',
          color: '#ed8383',
          img: 'https://cdn.ipadbiz.cn/oa/flow/icon-cc.png',
        },
      },
      controlConfig: {
        start: {
          id: 'start-node',
          text: '开始',
          desc: '开始',
          color: '#9283ed',
          img: 'https://cdn.ipadbiz.cn/oa/flow/icon-start.png',
        },
        flow: {
          text: '流程节点',
          desc: '流程节点',
          color: '#ed8383',
          img: 'https://cdn.ipadbiz.cn/oa/flow/icons-flow.png',
        },
        cc: {
          text: '抄送节点',
          desc: '抄送节点',
          color: '#ed8383',
          img: 'https://cdn.ipadbiz.cn/oa/flow/icon-cc.png',
        },
        end: {
          id: 'end-node',
          text: '结束',
          desc: '结束',
          color: '#92dba8',
          img: 'https://cdn.ipadbiz.cn/oa/flow/icon-end.png',
        },
      },
      search_auth_value: '',
      dialogUserFormVisible: false,
      dialogUserTags: [], // 同步到用户列表的数据
      activeName: 'node',
      attr_radio: '基础属性',
      main_attr_set: true,
      user_attr_set: true,
      select_attr_set: true,
      more_attr_switch: false,
      more_attr: [], // 更多属性
      more_attr_data: {
        label: '',
        show: false,
        showBtn: true,
        desc: '',
        btnText: '',
      },
      node_name: '', // 节点名称
      node_idx: null, // 节点index
      userTags: [], // 节点负责人,
      auth_all_checked: false,
      auth_all_edit: false,
      field_auths: [],
      field_extend: [],
      flow_version: 0,
      flow_version_list: [],
      version_list: [],
      dialogVersionFormVisible: false,
      versionForm: {
        code: 0,
        id: 0,
        note: '',
        type: null, // 操作方式 0:仅保存流程说明 1:删除,2:启用
      }
    });

    /**
     * 更新URL
     * @param flowId
     */
    const updateUrl = (flowId: string) => {
      // 获取当前 URL
      const url = new URL(window.location.href);

      // 获取 flow_id 的值（可以是一个变量）
      // const flowId = 'some_value';

      // 获取 URL 中的查询参数对象
      const searchParams = url.searchParams;

      // 检查是否存在 form_id 参数
      if (!searchParams.has('form_id')) {
        // 如果不存在 form_id 参数，则添加 form_id 和 flow_id 参数
        searchParams.append('flow_id', flowId);
      } else {
        // 如果存在 form_id 参数，则更新 flow_id 参数的值
        searchParams.set('flow_id', flowId);
      }

      // 将更新后的查询参数设置回 URL 对象
      url.search = searchParams.toString();

      // 修改完 URL 后，更新浏览器地址栏显示的 URL
      window.history.replaceState(null, '', url.toString());
      // TODO: 到时候测试iframe的时候，看看有没有影响
      // window.parent.location.href = window.parent.location.href + '&mod_id=' + item.id + '&width=' + item.width + '&height=' + item.height + '&bg_img=' + encodeURIComponent(item.background) + '&type=edit';
    }

    /**
     * 获取url参数
     * @param url
     */
    function getQueryParams(url: string) {
      const params = {
        flow_id: '',
        form_id: '',
      };
      // 将url以问号为分隔符拆分为两部分
      const parts = url.split("?");
      // 如果只有url没有参数，则直接返回空对象
      if (parts.length <= 1) {
        return params;
      }
      // 将参数部分以ampersand为分隔符拆分为多个参数
      const queries = parts[1].split("&");
      // 遍历每个参数
      for (let i = 0; i < queries.length; i++) {
        // 将参数以等号为分隔符拆分为键值对
        const query = queries[i].split("=");
        // 设置参数的键值对到params对象
        params[query[0]] = query[1];
      }
      return params;
    }

    const urlQuery = getQueryParams(location.href);
    let flow_id = urlQuery.flow_id ? urlQuery.flow_id : ''; // 流程id，如果是新创建的流程，则为空
    let form_id = urlQuery.form_id? urlQuery.form_id : ''; // 表单id

    // TAG: 接口获取流程图数据
    const flowData = ref<any>(null);
    const getFlowData = (flow_id) => {
      flowData.value = null;
      axios.get('/admin/?a=flow_nodes&flow_id=' + flow_id)
      .then(res => {
        if (res.data.code) {
          let nodes = res.data.data.nodes;
          let edges = res.data.data.edges;
          // 没有流程图数据
          if (!nodes.length && !edges.length) {
            flowData.value = AppData; // 设置默认的数据
            // 马上保存一次
            axios.post('/admin/?a=save_flow', qs.stringify({
                form_id: +form_id,
                flow_id: '',
                data: JSON.stringify(AppData)
              }))
              .then(res => {
                if (res.data.code) {
                  flow_id = res.data.data; // 更新flow_id
                  updateUrl(flow_id); // 更新url
                }
              })
              .catch(err => {
                console.log(err);
              });
          } else {
            flowData.value = res.data.data; // 获取已存在的数据
          }
          state.reloadLoading = false;
        } else {
          ElMessage({
            type: 'error',
            message: res.data.msg,
          });
          state.reloadLoading = false;
        }
      })
      .catch(err => {
        console.error(err);
        state.reloadLoading = false;
      });
    }
    getFlowData(flow_id);

    // 显示提示框的标志位
    onMounted(async () => {
      var showConfirmation = true;
      document.title = '可视化流程设计器'
      // 监听 beforeunload 事件
      window.addEventListener('beforeunload', function (event) {
        if (showConfirmation) {
          // 取消事件的默认行为（弹出确认对话框）
          event.preventDefault();
        }
      });
      // 监听 unload 事件
      window.addEventListener('unload', function () {
        // 设置标志位为 false，避免在刷新页面时再次显示提示框
        showConfirmation = false;
      });
      // 监听 resize 事件
      // window.addEventListener('resize', function () {
      //   state.detailModel = null;
      //   editor.closeModel();
      // });
      getVersionList();
    });

    /***************** 版本操作 ***************/

    /**
     *  获取版本信息列表
     */
    const getVersionList = () => {
      axios.get('/admin/?a=flow_version&form_id=' + form_id)
      .then(res => {
        if (res.data.code) {
          // 启用的版本号
          res.data.data.forEach((ele) => {
            if (ele.status === '1') {
              state.flow_version = ele.code;
              state.versionForm = { // 当前版本信息
                code: ele.code,
                id: ele.id,
                note: ele.note,
                type: null,
              }
            }
          });
          // 版本列表
          state.version_list = res.data.data;
          // 版本列表不含有启用的版本
          state.flow_version_list = res.data.data.filter((ele) => {
            return ele.status !== '1';
          });
        } else {
          ElMessage({
            type: 'error',
            message: res.data.msg,
          });
        }
      })
      .catch(err => {
        console.error(err);
      });
    }

    const onSelectFlowVersion = (id: number, code: number, note: string) => {
      // 切换版本信息
      state.dialogVersionFormVisible = true;
      state.versionForm = { // 当前版本信息
        code,
        id,
        note,
        type: null,
      }
    }

    const setFLowVersionEnable = () => { // 启用版本
      state.versionForm.type = 2;
      axios.post('/admin/?a=enable_flow_version', qs.stringify(state.versionForm))
      .then(res => {
        if (res.data.code) {
          state.dialogVersionFormVisible = false;
          ElMessage({
            type: 'success',
            message: '启用成功',
          });
          getVersionList(); // 刷新版本列表
          updateUrl(res.data.data); // 更新URL
          state.reloadLoading = true; // 打开loading
          getFlowData(res.data.data); // 更新流程图数据
        }
      })
    .catch(err => {
        console.error(err);
      });
    }

    const editFlowVersion = () => { // 编辑版本
      console.warn('编辑版本');
      state.dialogVersionFormVisible = true;
      state.version_list.forEach((ele) => {
        if (ele.status === '1') {
          state.versionForm.id = ele.id;
          state.versionForm.code = ele.code;
          state.versionForm.note = ele.note;
        }
      });
    }

    const deleteFlowVersion = () => { // 删除版本
      state.versionForm.type = 1;
      axios.post('/admin/?a=enable_flow_version', qs.stringify(state.versionForm))
      .then(res => {
        if (res.data.code) {
          state.dialogVersionFormVisible = false;
          ElMessage({
            type: 'success',
            message: '删除成功',
          });
          getVersionList();
        } else {
          ElMessage({
            type: 'error',
            message: res.data.msg,
          });
        }
      })
      .catch(err => {
        console.error(err);
      });
    }

    const saveFlowVersionNote = () => { // 保存版本描述
      state.versionForm.type = 0;
      axios.post('/admin/?a=enable_flow_version', qs.stringify(state.versionForm))
      .then(res => {
        if (res.data.code) {
          state.dialogVersionFormVisible = false;
          ElMessage({
            type: 'success',
            message: '保存成功',
          });
        } else {
          ElMessage({
            type: 'error',
            message: res.data.msg,
          });
        }
      })
      .catch(err => {
        console.error(err);
      });
    }

    /***************** END *******************/

    function handleActiveChange(name: any) {
      console.warn(name)
    }

    /************** 字段权限操作 ***************/
    /**
     * 检查权限全选状态
     * @param type
     */
    const checkAuthAll = (type: string) => {
      if (type === 'visible') { // 可见列
        let total_count = state.field_auths.filter((ele) => {
          if (!ele.visible.disabled) {
            return ele;
          }
        }).length;
        let avail_count = state.field_auths.filter((ele) => {
          if (ele.visible.checked && !ele.visible.disabled) {
            return ele;
          }
        });
        if (avail_count.length === total_count) {
          state.auth_all_checked = true;
        } else {
          state.auth_all_checked = false;
        }
      }
      if (type === 'editable') { // 可编辑列
        let total_count = state.field_auths.filter((ele) => {
          if (!ele.editable.disabled) {
            return ele;
          }
        }).length;
        let avail_count = state.field_auths.filter((ele) => {
          if (ele.editable.checked && !ele.editable.disabled) {
            return ele;
          }
        });
        if (avail_count.length === total_count) {
          state.auth_all_edit = true;
        } else {
          state.auth_all_edit = false;
        }
      }
    }
    /**
     * 点击可见按钮回调
     * @param val
     * @param index
     */
    const onAuthVisibleChange = (val: any, index: number) => {
      checkAuthAll('visible')
    }

    /**
     * 点击可编辑按钮回调
     * @param val
     * @param index
     */
    const onAuthEditableChange = (val: any, index: number) => {
      checkAuthAll('editable')
    }

    const onAuthAllChange = (val: any) => {
      // 全选可见按钮回调
      if (val) {
        // 全部选中
        state.field_auths.forEach((ele) => {
          if (ele.visible.disabled) {
            return;
          }
          ele.visible.checked = true
        })
      } else {
        // 全部取消选中
        state.field_auths.forEach((ele) => {
          if (ele.visible.disabled) {
            return;
          }
          ele.visible.checked = false
        })
      }
    }
    const onAuthAllEditChange = (val: any) => {
      // 全选可编辑按钮回调
      if (val) {
        // 全部选中
        state.field_auths.forEach((ele) => {
          if (ele.editable.disabled) {
            return;
          }
          ele.editable.checked = true
        })
      } else {
        // 全部取消选中
        state.field_auths.forEach((ele) => {
          if (ele.editable.disabled) {
            return;
          }
          ele.editable.checked = false
        })
      }
    }

    const onSearchAuthInput = (val: string) => {
      state.field_auths.forEach((ele) => {
        if (ele.name.indexOf(val) > -1) {
          ele.show = true;
        } else {
          ele.show = false;
        }
      })
    }
    /******************* END *******************/

    /****** 用户选择控件弹框 ******/
    const openUserForm = () => {
      // 打开设置用户弹框
      state.dialogUserFormVisible = true;
    }

    const onCloseUserView = (status: boolean) => {
      state.dialogUserFormVisible = status
    }
    const onConfirmUserView = (data: any) => {
      state.userTags = data;
      // 自动保存流程
      let { nodes, edges } = editor.editorState.graph.save();
      // 检查路径有效性
      const paths = [];
      findPathsToEndNode(edges, 'start-node', [], paths);
      if (paths.length) {
        axios.post('/admin/?a=save_flow', qs.stringify({
          form_id: +form_id,
          flow_id: +flow_id,
          data: JSON.stringify({ nodes, edges })
        }))
        .then(res => {
          if (res.data.code) {
            ElMessage({
              type: 'success',
              message: '保存流程图成功',
            });
            flow_id = res.data.data; // 更新flow_id
            console.log(paths); // 输出满足条件的路径结果数组
          } else {
            ElMessage({
              type: 'error',
              message: res.data.msg,
            });
          }
        })
        .catch(err => {
          console.log(err);
        });
      } else {
        ElNotification.error('缺少一条从开始节点到结束节点的完整流程！');
      }
    }
    /******************* END *******************/

    /********** 流程图功能函数 **********/

    let editor: {
      clearStates(arg0: any): () => void
      openModel: () => void
      closeModel: () => void
      addNode: (arg0: any) => void
      updateModel: (arg0: any) => void
      editorState: {
        graph: {
          removeItem: any
          save: () => { nodes: any; edges: any }
        }
      }
    }

    /**
     * 双击节点回调
     *
     * @param {Object} e - The event object
     */
    function onDblClickNode(e: myEvent) {
      // const model = G6.Util.clone(e.item.get('model'))
      // model.style = model.style || {}
      // model.labelCfg = model.labelCfg || { style: {} }

      // model.data = model.data ? model.data : {}

      // // 判断是否是流程节点
      // let model_id = model.id
      // if (model_id !== 'start-node' && model_id!== 'end-node') {
      //   state.detailModel = model
      //   editor.openModel()
      // }
    }

    /**
     * 单击节点回调
     *
     * @param {Event} e - The event object representing the click event.
     */
    function onClickNode(e: myEvent) {
      const model = G6.Util.clone(e.item.get('model')); // 节点的基本属性
      model.style = model.style || {}
      model.labelCfg = model.labelCfg || { style: {} }

      model.data = model.data ? model.data : {};

      state.detailModel = model

      // 判断是否是流程节点
      let model_id = model.id;
      if (model_id !== 'end-node') {
        // 判断是否是开始节点, 不设置负责人
        if (model_id ==='start-node') {
          state.user_attr_set = false;
        } else {
          state.user_attr_set = true;
        }
        // 判断是否是抄送节点
        if (model.control === 'cc') {
          state.select_attr_set = false;
        } else {
          state.select_attr_set = true;
        }
        state.statusLoading = true;
        state.main_attr_set = true; // 重置更多属性的显示
        //
        axios.get('/admin/?a=flow_node_property&node_code=' + model.id + '&flow_id=' + flow_id)
        .then((res: any) => {
          if (res.data.code) {
            state.statusLoading = false;
            //
            flowData.value.nodes.forEach((ele: any, idx: number) => {
              if (ele.id === model.id) {
                state.node_idx = idx;
              }
            });
            state.node_name = res.data.data.name ? res.data.data.name : model.text; // 节点名称
            state.userTags = res.data.data.user; // 节点负责人
            state.dialogUserTags = state.userTags; // 同步给弹框数据
            state.field_extend = res.data.data.field; // 字段权限临时储存，实际传给后端数据结构
            state.field_auths = []; // 清空字段权限列表，本地使用数据结构
            // 转换数据结构使用
            state.field_extend.forEach(ele => {
              if (!ele.field_extend.disabled) { // 流程节点字段权限列表内是否显示
                state.field_auths.push({
                  field_id: ele.field_extend.field_id,
                  name: ele.field_extend.label,
                  visible: {
                    checked: ele.field_extend.visibled,
                    disabled: false,
                  },
                  editable: {
                    checked: ele.field_extend.editabled,
                    disabled: ele.field_extend.readonly,
                  },
                  show: true,
                })
              }
            });
            // 检查字段权限选中情况
            checkAuthAll('visible');
            checkAuthAll('editable');
            //
            state.more_attr = res.data.data.property; // 更多属性
            // state.more_attr = [ // 更多属性
            //   {
            //     id: 'no-1',
            //     label: '审批意见',
            //     desc: '开启审批意见后，节点负责人处理流程时须按要求填写审批意见',
            //     data: [
            //       {
            //         id: 'text-1',
            //         label: '文本意见',
            //         show: true,
            //         desc: '用户在处理流程时，可通过输入框或快捷选项录入文本意见。',
            //         btnText: '',
            //       },
            //       {
            //         id: 'signature-1',
            //         label: '手写签名',
            //         show: false,
            //         desc: '用户在处理流程时，需要签名确认。',
            //         btnText: ''
            //       },
            //     ]
            //   },
            //   {
            //     id: 'no-2',
            //     label: '节点操作',
            //     desc: '定义流程负责人在处理流程时可以进行的操作',
            //     data: [
            //       {
            //         id: 'node-1',
            //         label: '提交',
            //         show: true,
            //         desc: '用户在处理流程时点击此按钮，将保存用户在此节点中对数据的更改，流程数据流转至后续节点。',
            //         btnText: '提交'
            //       },
            //       {
            //         id: 'node-2',
            //         label: '暂存',
            //         show: false,
            //         desc: '暂存后将保存在此节点中对数据的更改，流程不发生流转。',
            //         btnText: '暂存'
            //       },
            //       {
            //         id: 'node-3',
            //         label: '撤回',
            //         show: false,
            //         desc: '开启后，用户在处理流程时点击此按钮，将保存用户在此节点中对数据的更改，同时流程退回到指定的节点中。',
            //         btnText: '撤回'
            //       },
            //       {
            //         id: 'node-4',
            //         label: '回退',
            //         show: false,
            //         desc: '开启后，用户在处理流程时点击此按钮，将保存用户在此节点中对数据的更改，同时流程退回到指定的节点中。',
            //         btnText: '回退'
            //       },
            //     ],
            //   }
            // ];
            // 开始节点不显示审批意见
            if (model_id ==='start-node') {
              // TODO：等待后台结构
              state.more_attr = state.more_attr.filter((ele: any) => {
                return ele.label !== '审批意见'
              });
            }
            // 抄送节点不显示
            if (state.detailModel.control === 'cc') {
              state.more_attr = [];
            }
            // 打开属性表单
            state.attr_radio = '基础属性'; // 还原tab默认值
            editor.openModel();
          } else {
            ElMessage({
              type: 'error',
              message: res.data.msg,
            });
            state.statusLoading = false;
          }
        })
        .catch((err: any) => {
          console.log(err);
          state.statusLoading = false;
        });
      } else {
        editor.closeModel()
      }
    }

    /**
     * 单击连接线回调
     * @param e
     */
    const onClickEdge = (e: myEvent) => {
      editor.closeModel()
    }

    /**
     * 双击连接线回调
     *
     * @param {Event} e - The event object representing the double click event.
     */
    function onDblClickEdge(e: myEvent) {
      const { source, target, style, labelCfg, label } = e.item.get('model')
      const model = {
        label,
        source,
        target,
        style: style || {},
        labelCfg: labelCfg || { style: {} },
        type: null,
        id: null,
      }
      model.type = e.item.get('type')
      model.id = e.item.get('id')

      state.detailModel = model
      editor.openModel()
    }

    /**
     * Cancels the operation and closes the editor model.
     *
     */
    function cancel() {
      editor.closeModel()
    }

    const setMoreAttr = (attr: any, index: any) => { // 打开更多属性细节回调
      state.main_attr_set = false;
      state.more_attr_data = attr['data'][index]; // 同步数据
      if (attr.id === 'no-1') { // 如果是审批意见，按钮文字不可以修改
        state.more_attr_data.showBtn = false;
      } else {
        state.more_attr_data.showBtn = true;
      }
    }
    const onConfirmMoreAttr = (item: any) => { // 保存更多属性细节回调
      state.main_attr_set = true;
    }

    /**
     * 保存表单信息
     *
     */
    async function saveForm() {
      if (state.node_name === '') {
        ElMessage({
          type: 'error',
          message: '节点名称不能为空',
        });
        return;
      }
      if (state.detailModel.id !== 'start-node' && state.userTags.length === 0) {
        ElMessage({
          type: 'error',
          message: '节点负责人不能为空',
        });
        return;
      }
      let avail_visible_count = state.field_auths.filter((ele) => {
        if (ele.visible.checked && !ele.visible.disabled) {
          return ele;
        }
      });
      let avail_editable_count = state.field_auths.filter((ele) => {
        if (ele.editable.checked && !ele.editable.disabled) {
          return ele;
        }
      });
      if (avail_visible_count.length === 0 && avail_editable_count.length === 0) {
        ElMessage({
          type: 'error',
          message: '请至少选择一个字段权限',
        });
        return;
      }
      // 调整数据结构
      state.field_extend.forEach(ele => {
        state.field_auths.forEach(auth => {
          if (ele.field_id === auth.field_id) {
            ele.field_extend.visibled = auth.visible.checked;
            ele.field_extend.editabled = auth.editable.checked;
            ele.field_extend.readonly = auth.editable.disabled;
          }
        })
      })
      // TAG: 保存表单信息
      axios.post('/admin/?a=save_node_property', qs.stringify({
        flow_id: +flow_id,
        node_code: state.detailModel.id,
        data: JSON.stringify({ name: state.node_name, user: state.userTags, field: state.field_extend, property: state.more_attr })
      }))
      .then(res => {
        if (res.data.code) {
          state.detailModel.text = state.node_name;
          // 更新流程图信息
          editor.updateModel(state.detailModel);
          editor.closeModel();
          ElMessage({
            type:'success',
            message: '保存成功',
          });
        } else {
          ElMessage({
            type: 'error',
            message: res.data.msg,
          });
        }
      })
      .catch(err => {
        console.error(err);
      });
    }

    /**
     * 删除前校验
     *
     * @param {Object} model - The model object.
     * @param {string} type - The type of the model.
     * @return {Promise} A promise that resolves when the event is handled.
     */
    async function handleBeforeDelete(
      model: myObj,
      type: string,
    ): Promise<any> {
      let { nodes, edges } = editor.editorState.graph.save();
      let start_edge_count = edges.filter((edge: { source: string }) => edge.source === 'start-node'); // 连接到开始节点连接线的数量
      let end_edge_count = edges.filter((edge: { target: string }) => edge.target === 'end-node'); // 连接到结束节点连接线的数量
      // 不可以删除开始与结束连接线
      let node_id = model.id;
      for (let index = 0; index < edges.length; index++) {
        const element = edges[index]
        if(
          (element.target === node_id && element.source === 'start-node' && start_edge_count.length === 1) ||
          (element.source === node_id && element.target === 'end-node' && end_edge_count.length === 1)
          )
        {
          ElNotification.error('不可以删除【开始】与【结束】连接线')
          return Promise.reject('reject')
        }
      }
      if (type === 'node') {
        if (model.id === 'start-node') {
          // state.editorLoading = true
          // await delay(1000)
          // state.editorLoading = false
          ElNotification.error('不可以删除【开始】节点')
          return Promise.reject('reject')
        }
        if (model.id === 'end-node') {
          ElNotification.error('不可以删除【结束】节点')
          return Promise.reject('reject')
        }
        // 流程图中必须有一个流程节点
        let is_flow_node = nodes.filter((node: { control: string }) => node.control === 'flow' || node.control === 'cc');
        if (is_flow_node.length === 1) {
          ElNotification.error('流程图中必须有一个流程节点')
          return Promise.reject('reject')
        }
      }
      if (type === 'edge') {
        if (model.source === 'start-node' && start_edge_count.length === 1) {
          ElNotification.error('不可以删除【开始】连接线')
          return Promise.reject('reject')
        }
        if (model.target === 'end-node' && end_edge_count.length === 1) {
          ElNotification.error('不可以删除【结束】连接线')
          return Promise.reject('reject')
        }
      }
    }

    /**
     * 删除后动作
     *
     * @param {Object} model - The model being deleted.
     * @param {string} type - The type of the model being deleted.
     */
    function handleAfterDelete(model: myObj, type: string) {
      if (type === 'node') {
        // 关闭编辑器
        editor.closeModel();
      }
      if (type === 'edge') {
        console.log('delete edge')
      }
      flowData.value.nodes = editor.editorState.graph.save().nodes
      flowData.value.edges = editor.editorState.graph.save().edges
    }

    /**
     * 添加前校验
     *
     * @param {object} model - The model object.
     * @param {string} type - The type of the model.
     * @return {Promise} A promise that resolves to a result or rejects with an error.
     */
    function handleBeforeAdd(model: myObj, type: string): Promise<any> {
      const source = model.source;
      const target = model.target;
      let { nodes, edges } = editor.editorState.graph.save();

      if (type === 'edge') {
        if (model.source === 'end-node') {
          ElNotification.error('结束节点不能输出连线其他节点')
          return Promise.reject('reject')
        }
        for (let index = 0; index < edges.length; index++) {
          const element = edges[index]
          if (element.source === source && element.target === target) {
            ElNotification.error('不可以重复添加连线')
            return Promise.reject('reject')
          }
        }
        if (model.target === 'start-node') {
          ElNotification.error('流程不能连线到开始节点')
          return Promise.reject('reject')
        }
        for (let index = 0; index < nodes.length; index++) {
          const element = nodes[index]
          if (element.id === source && element.control === 'cc') {
            ElNotification.error('抄送节点不可以连接线')
            return Promise.reject('reject')
          }
        }
      }
      if (type === 'node') {
        if (model.control === 'start' || model.control === 'end') {
          const data = editor.editorState.graph.save()
          for (let i = 0; i < data.nodes.length; i++) {
            const node = data.nodes[i]
            if (node.control === model.control) {
              ElNotification.error(
                `只能有一个${model.control === 'start' ? '开始' : '结束'}节点`,
              )
              return Promise.reject('reject')
            }
          }
        }

        model.id = uuidv4();
        editor.updateModel(model);
        flowData.value.nodes = editor.editorState.graph.save().nodes
      }
    }

    /**
     * 添加后动作
     *
     * @param {model} model - The model being handled.
     * @param {type} type - The type of the event.
     */
    function handleAfterAdd(model: myObj, type: string) {
      if (type === 'node') {
        console.log(`新增节点`)
        flowData.value.nodes = editor.editorState.graph.save().nodes
      }
      if (type === 'edge') {
        console.log(`新增连接线`)
        flowData.value.edges = editor.editorState.graph.save().edges
      }
    }

    function onClickCanvas(e: myEvent) {
      console.log('单击画布');
      state.detailModel = null;
      editor.closeModel()
    }

    /**
     * 拖动节点结束回调
     *
     * @param {myEvent} e - The event object containing information about the drag and drop.
     */
    function onDragEndNode(e: myEvent) {
      // TODO：可能需要接口保存相应位置，避免拖动窗口时数据丢失
      const model = e.item.get('model')
      console.log('onDragEndNode', model)
    }

    const copyData = () => { // 复制节点回调
      if (state.detailModel.control !== 'start' && state.detailModel.control !== 'end') {
        editor.clearStates(state.detailModel.id); // 清除选中节点的状态
        state.detailModel.id = uuidv4(); // ID需要重新生成
        state.detailModel.y = state.detailModel.y + 50
        editor.addNode(state.detailModel);
        editor.closeModel();
        // 保存流程图数据
        flowData.value.nodes = editor.editorState.graph.save().nodes
        flowData.value.edges = editor.editorState.graph.save().edges
      } else {
        ElNotification.error('开始或者结束节点不可以复制')
      }
    }

    /**
     * 保存流程图数据
     *
     * @return {void} No return value.
     */
    function saveData(type): void {
      let { nodes, edges } = editor.editorState.graph.save();

      // 使用时需要把自定义节点的类型带过去 activity/control
      nodes.forEach((node: { [x: string]: string; shape: string }) => {
        if (node.shape === 'control') {
          node['control'] = node['control']
        }
      });

      nodes = nodes.map(
        ({ data, id, label, shape, x, y, text, desc, img, control }) => ({
          data,
          id,
          label,
          shape,
          x,
          y,
          text,
          desc,
          img,
          control,
        }),
      );
      edges = edges.map(({ source, sourceAnchor, target, targetAnchor }) => ({
        source,
        sourceAnchor,
        target,
        targetAnchor,
      }));

      ElMessageBox.confirm(
        '是否确定保存流程图?',
        '温馨提示',
        {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning',
        }
      )
        .then(() => {
          // 检查路径有效性
          const paths = [];
          findPathsToEndNode(edges, 'start-node', [], paths);
          if (paths.length) {
            axios.post('/admin/?a=save_flow', qs.stringify({
              form_id: +form_id,
              flow_id: +flow_id,
              data: JSON.stringify({ nodes, edges })
            }))
            .then(res => {
              if (res.data.code) {
                ElMessage({
                  type: 'success',
                  message: '保存流程图成功',
                });
                flow_id = res.data.data; // 更新flow_id
                console.log(paths); // 输出满足条件的路径结果数组
              } else {
                ElMessage({
                  type: 'error',
                  message: res.data.msg,
                });
              }
            })
            .catch(err => {
              console.log(err);
            });
          } else {
            ElNotification.error('缺少一条从开始节点到结束节点的完整流程！');
          }
        })
        .catch(() => {
        });
    }

    const startFlow = () => { // 启用流程图

    }

    /**
     * 格式化工具栏按钮
     *
     * @param {Array} buttons - The array of buttons to be filtered
     * @return {Array} - The filtered array of buttons
     */
    function toolbarButtonHandler(buttons: any[]): Array<any> {
      // TAG：测试隐藏缩略图和网格
      let map = buttons.filter((item) => item.key !== 'miniMapSwitcher' && item.key !=='gridSwitcher')
      return map
    }

    /**
     * 查找从开始节点到结束节点的完整路径
     * 1. 如果当前节点为 'end-node'，表示找到了一条完整的路径，将当前路径 currentPath 添加到结果数组 paths 中。
     * 2. 使用 filter 方法找到源属性为当前节点的子对象，并将它们存储在 nextObjs 数组中。
     * 3. 如果 nextObjs 数组为空，表示没有符合条件的子对象，直接返回。
     * 4. 遍历 nextObjs 数组，依次将每个子对象添加到 currentPath 中，然后递归调用 findPathsToEndNode 函数，继续查找下一个节点。
     * 5. 在递归调用结束后，将最后添加的子对象从 currentPath 中移除，以便尝试其他可能的路径。
     * 最终，将空的结果数组 paths 传递给递归函数，并在递归结束后打印结果数组 paths，即可得到满足条件的所有路径的数组。
     * 函数将返回一个包含两个子数组的结果数组，每个子数组代表一条满足条件的路径。如果没有找到满足条件的路径，结果数组将为空 []。
     * @param data 数据数组
     * @param currentNode 当前节点
     * @param currentPath 当前路径
     * @param paths 结果数组
     */
    function findPathsToEndNode(data: any[], currentNode: string, currentPath: any[], paths: any[]) {
      if (currentNode === 'end-node') {
        paths.push(currentPath.slice()); // 将当前路径添加到结果数组中
        return;
      }

      const nextObjs = data.filter((obj: { source: any }) => obj.source === currentNode);
      if (nextObjs.length === 0) {
        return;
      }

      for (const nextObj of nextObjs) {
        currentPath.push(nextObj);
        findPathsToEndNode(data, nextObj.target, currentPath, paths);
        currentPath.pop();
      }
    }

    return {
      state,
      rules,
      formRef,
      flowData,

      showGrid: true, // 是否开启网格
      showMiniMap: false, // 是否开启缩略图
      showMultipleSelect: true, // 编辑器是否可以多选

      onClickCanvas,
      onClickNode,
      onClickEdge,
      onDblClickNode,
      onDragEndNode,
      onDblClickEdge,
      cancel,
      setMoreAttr,
      onConfirmMoreAttr,
      saveForm,
      handleBeforeDelete,
      handleAfterDelete,
      handleBeforeAdd,
      handleAfterAdd,

      onSelectFlowVersion,
      setFLowVersionEnable,
      editFlowVersion,
      deleteFlowVersion,
      saveFlowVersionNote,
      handleActiveChange,
      onAuthVisibleChange,
      onAuthEditableChange,
      onAuthAllChange,
      onAuthAllEditChange,
      onSearchAuthInput,

      openUserForm,
      onCloseUserView,
      onConfirmUserView,

      copyData,
      saveData,
      startFlow,
      toolbarButtonHandler,

      onRef: (e: any) => (editor = e),
      staticPath,
    }
  },
}
</script>

<style lang="scss">
html,
body {
  padding: 0;
  margin: 0;

  .activity-menu {
    display: flex;
    align-items: center;

    img {
      margin-right: 1em;
      width: 30px;
      height: 30px;
    }
  }
}

.attr-radio-group {
  width: 100% !important;
  .el-radio-button.el-radio-button--large {
    width: 50% !important;
    span {
      width: 100% !important;
    }
  }
}

/* .demo-tabs > .el-tabs__content { */
/* padding: 32px; */
/* } */

.flow-tag__wrapper {
  border: 1px dashed #dcdfe6;
  padding: 10px;
  margin-bottom: 10px;
  &:hover {
    cursor: pointer;
  }
  .text-empty {
    font-size: 14px;
    text-align: center;
    color: #dcdfe6;
  }
}

.more-attr {
  .more-attr-item {
    .title {
      font-size: 14px;
      color: #000;
      font-weight: bold;
    }
    .content {
      font-size: 14px;
      background: #f0f1f4;
      border: 1px solid #e6e8ed;
      border-radius: 2px;
      padding: 10px;
      position: relative;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 5px;
      /* .left {
      }
      .right {
      } */
      .active {
        color: #009688;
      }
    }
    .content:hover .btn-action {
      display: flex;
    }
    .btn-action {
      background: hsla(0, 0%, 94%, 0.8);
      display: none;
      font-size: 14px;
      height: 100%;
      left: 0;
      position: absolute;
      text-align: center;
      top: 0;
      width: 100%;
      cursor: pointer;
      align-items: center;
      justify-content: center;
    }
  }
}
.more-attr-set {
  .more-attr-switch {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    align-items: center;
    .more-attr-title {
      font-size: 14px;
      font-weight: bold;
    }
  }
  .more-attr-tip {
    color: #525967;
    margin-top: 10px;
    font-size: 14px;
  }
}

.el-tabs__item.is-active,
.el-radio-button__inner:hover {
  color: #009688 !important;
}
.el-tabs__active-bar,
.el-radio-button__original-radio:checked + .el-radio-button__inner {
  background-color: #009688 !important;
}
.el-tag {
  background-color: #009688 !important;
  color: white !important;
}
.el-tag .el-tag__close,
.el-radio-button__original-radio:checked + .el-radio-button__inner:hover {
  color: white !important;
}
.el-checkbox__input.is-checked .el-checkbox__inner,
.el-switch.is-checked .el-switch__core {
  background-color: #009688 !important;
  border-color: #009688 !important;
}
.el-button:focus,
.el-button:hover {
  color: #009688 !important;
  border-color: #009688 !important;
  background-color: white !important;
  outline: 0;
}

.el-loading-spinner .path {
  stroke: #009688 !important;
}
.el-loading-spinner .el-loading-text {
  color: #009688 !important;
}

:focus-visible {
  outline: none;
}

.el-dropdown-menu__item:not(.is-disabled):focus {
  background-color: white;
  color: #009688 !important;
}
</style>