<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"
      @drag-canvas="onDragCanvas"
      @dragend-node="onDragEndNode"
      @click-node="onClickNode"
      @click-node-mousedown="onClickNodeMousedown"
      @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
          v-if="state.current_enable_version !== state.select_flow_version"
          v-for="(value, key) in state.controlList"
          :key="key"
          :model="{ control: key, text: value.text, desc: value.desc }"
        >
          <template v-slot:content>
            <div v-if="key === 'flow'" style="border-left: 1px solid #e6e6e6; width: 2px; height: 35px; position: absolute; top: 10px;"></div>
            <el-tooltip :content="value.desc">
              <div :class="['vue-flow-editor-toolbar-item']">
                <img style="width: 15px; height: 15px; margin-bottom: 0; margin-top: 3px;" :src="value.img" />
                <span style="font-size: 12px; transform: scale(0.8); margin-top: 2px;">{{ value.text }}</span>
              </div>
            </el-tooltip>
          </template>
        </vue-flow-edit-menu>
        <!-- <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;"
        >
            <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" class="node-name">
                    <div slot="label">
                      <span class="name">节点名称</span>
                      <span class="node-index"> 节点索引：{{ state.node_idx }} </span>
                    </div>
                    <el-input v-model="state.node_name" @input="handleNodeNameChange" maxlength="9" style="margin-top: 5px;" />
                  </el-form-item>
                  <div v-if="state.user_attr_set" class="node-user">
                    <div class="name">节点负责人</div>
                    <div class="flow-tag__wrapper" @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="height: 13px; display: inline-block; vertical-align: middle; line-height: 10px;"><House /></el-icon>
                        <el-icon v-if="tag.type === 'user'" style="height: 12px; display: inline-block; vertical-align: middle; line-height: 10px;"><Female /></el-icon>
                        <el-icon v-if="tag.type === 'role'" style="height: 12px; display: inline-block; vertical-align: middle; line-height: 10px;"><User /></el-icon>
                        <span style="margin-left: 2px; height: 10px; display: inline-block; vertical-align: middle; line-height: 10px;">{{ tag.name }}</span>
                      </el-tag>
                      <div v-else class="text-empty">请选择成员</div>
                    </div>
                    <!--<div>
                      <el-checkbox v-model="state.has_next_step_user">选择下一步的执行人</el-checkbox>
                      <!~~ TODO: 需要给每个子分支选择下一步执行人，删除分支的时候需要删除保存的值 ~~>
                      <el-select v-model="state.next_step_node" placeholder="请选择节点" style="margin-bottom: 0.5rem;">
                        <el-option
                          v-for="node in state.next_step_node_opt"
                          :key="node.value"
                          :label="node.label"
                          :value="node.value">
                        </el-option>
                      </el-select>
                      <div class="flow-tag__wrapper" @click="openNextStepUserForm">
                        <el-tag
                          v-if="state.nextStepUserTags.length"
                          v-for="tag in state.nextStepUserTags"
                          :key="tag.name"
                          style="margin: 0 0.25rem 0.5rem 0.25rem;"
                        >
                          <el-icon v-if="tag.type === 'dept'" style="height: 13px; display: inline-block; vertical-align: middle; line-height: 10px;"><House /></el-icon>
                          <el-icon v-if="tag.type === 'user'" style="height: 12px; display: inline-block; vertical-align: middle; line-height: 10px;"><Female /></el-icon>
                          <el-icon v-if="tag.type === 'role'" style="height: 12px; display: inline-block; vertical-align: middle; line-height: 10px;"><User /></el-icon>
                          <span style="margin-left: 2px; height: 10px; display: inline-block; vertical-align: middle; line-height: 10px;">{{ tag.name }}</span>
                        </el-tag>
                        <div v-else class="text-empty">请选择成员</div>
                      </div>
                    </div>-->
                  </div>
                  <!-- <el-form-item v-if="state.select_attr_set" prop="attr" style="width: 100%;"> -->
                    <!-- <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-tabs v-if="state.select_attr_set" v-model="state.attr_radio"  @tab-click="handleAttrClick" stretch>
                    <el-tab-pane label="基础属性" name="基础属性"></el-tab-pane>
                    <el-tab-pane label="更多属性" name="更多属性"></el-tab-pane>
                  </el-tabs>
                  <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" style="display: flex; align-items: center;">
                        字段
                        <el-tooltip
                          :content="state.attr_node_desc"
                          placement="top"
                          offset="10"
                        >
                          <el-icon style="font-size: 1rem; margin-left: 5px;"><InfoFilled color="#b5b8be" /></el-icon>
                        </el-tooltip>
                      </el-col>
                      <el-col :span="6">可见</el-col>
                      <el-col v-if="state.detailModel.control !== 'cc'" :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 v-if="state.detailModel.control !== 'cc'" :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 && state.detailModel.control !== 'cc'" :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" @change="handleMoreAttr(state.more_attr_data)" /></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 v-if="state.more_attr_data.is_node">
                    <p style="font-size: 14px; font-weight: bold;">消息配置</p>
                    <!-- <div style="display: flex; justify-content: space-between; align-items: center;">
                      <div style="font-size: 0.9rem;">打开配置</div>
                      <div><el-switch v-model="state.more_attr_data.msg_open" /></div>
                    </div> -->
                    <div class="msg-config">

                      <div style="margin-top: 1rem; margin-left: 0.5rem;">
                        <div style="font-size: 14px;">接收类型</div>
  <!-- <el-checkbox-group v-model="state.more_attr_data.msg_type" style="display: flex; flex-direction: column;">
                          <el-checkbox label="站内信"></el-checkbox>123
                          <el-checkbox label="微信"></el-checkbox>
                        </el-checkbox-group> -->
                        <div style="display: flex; justify-content: space-between; align-items: center;">
                          <div style="font-size: 14px; margin-left: 5px;">站内信</div>
                          <div><el-switch v-model="state.more_attr_data.is_website_msg" :disabled="!state.more_attr_data.show" /></div>
                        </div>
                        <div v-if="state.more_attr_data.is_website_msg" style="color: red; font-size: 13px; margin-left: 5px;">{{ state.more_attr_data.website_msg_desc }}</div>
                        <div style="display: flex; justify-content: space-between; align-items: center;">
                          <div style="font-size: 14px; margin-left: 5px;">微信</div>
                          <div><el-switch v-model="state.more_attr_data.is_wechat_msg" :disabled="!state.more_attr_data.show" /></div>
                        </div>
                        <div v-if="state.more_attr_data.is_wechat_msg" style="color: red; font-size: 13px; margin-left: 5px;">{{ state.more_attr_data.wechat_msg_desc }}</div>
                      </div>
                      <!-- TAG：需求暂时屏蔽功能 -->
                      <!-- <div style="margin-left: 0.5rem;">
                        <div style="font-size: 14px; margin: 0.5rem 0;">接收对象</div>
                        <p style="font-size: 13px; color: #525967;">{{ state.more_attr_data.message_user_desc }}</p>
                        <div class="flow-tag__wrapper" @click="openNodeMsgUserForm">
                          <el-tag
                            v-if="state.more_attr_data.message_user_list?.length"
                            v-for="tag in state.more_attr_data.message_user_list"
                            :key="tag.name"
                            style="margin: 0 0.25rem 0.5rem 0.25rem;"
                          >
                            <el-icon v-if="tag.type === 'dept'" style="height: 13px; display: inline-block; vertical-align: middle; line-height: 10px;"><House /></el-icon>
                            <el-icon v-if="tag.type === 'user'" style="height: 12px; display: inline-block; vertical-align: middle; line-height: 10px;"><Female /></el-icon>
                            <el-icon v-if="tag.type === 'role'" style="height: 12px; display: inline-block; vertical-align: middle; line-height: 10px;"><User /></el-icon>
                            <span style="margin-left: 2px; height: 10px; display: inline-block; vertical-align: middle; line-height: 10px;">{{ tag.name }}</span>
                          </el-tag>
                          <div v-else class="text-empty">请选择成员</div>
                        </div>
                      </div> -->
                      <div style="margin-left: 0.5rem;">
                        <div style="display: flex; justify-content: space-between; align-items: center;">
                          <div style="font-size: 14px; margin-left: 5px;">发送填表人</div>
                          <div><el-switch v-model="state.more_attr_data.is_message_filler" :disabled="!state.more_attr_data.show" /></div>
                        </div>
                      </div>
                    </div>
                  </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 v-if="state.current_enable_version !== state.select_flow_version" 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 v-if="state.current_enable_version !== state.select_flow_version" content="节点排序">
          <div class="vue-flow-editor-toolbar-item" @click="sortData">
            <i class="el-icon-sort" 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="setMapCenter">
            <i class="el-icon-rank" 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 class="toolbar-buttons">
          <div class="save-wrapper">
            <div class="button-item" @click="saveData('manual')">保存</div>
          </div>
          <div class="preview-wrapper">
            <div class="button-item" @click="openPreview">预览测试</div>
          </div>
        </div>
        <div class="select-version-wrapper">
          <el-dropdown trigger="click">
            <div class="select-version-show">
              <div :class="[state.select_flow_version === state.current_enable_version ? 'version-icon-actived' : 'version-icon-selected']"></div>
              <span class="text">流程版本 (V{{ state.select_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.version_list" :key="index">
                  <i v-if="item.code === state.select_flow_version" class="el-icon-check" style="color: #009688; margin-right: 8px;"></i>
                  <div v-else style="width: 15px; height: 15px;display: inline-block; margin-right: 8px;"></div>
                  <span>流程版本 (V{{ item.code }})</span>
                  <span v-if="item.code === state.current_enable_version" style="background: #edf9f1; border-color: #46c26f; color: #46c26f; font-size: 10px; padding: 0 5px; border-radius: 3px; margin-left: 8px;">
                    启用中
                  </span>
                  <!-- <span @click="showEditFlowVersion(item.id, item.code, item.note)" style="margin-left: 10px;">
                    <i class="el-icon-edit-outline"></i>
                  -->
                </el-dropdown-item>
                <el-dropdown-item @click.native="addFlowVersion" style="justify-content: center;">
                  <i class="el-icon-circle-plus-outline"></i>新增流程
                </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
          <el-tooltip content="编辑版本信息" placement="bottom">
            <i class="el-icon-set-up" @click="editFlowVersion" style="font-size: 16px; margin-left: 8px; position: absolute; right: -25px; top: -1px;"></i>
          </el-tooltip>
          <el-dialog v-model="state.dialogVersionFormVisible" title="版本信息" width="50%">
            <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.current_enable_version !== state.versionForm.code"
                  title="是否确认启用该版本流程？"
                  width="220px"
                  confirm-button-text="确认"
                  cancel-button-text="取消"
                  @confirm="setFLowVersionEnable">
                  <template #reference>
                    <el-button type="success">启用流程</el-button>
                  </template>
                </el-popconfirm>
                <el-popconfirm
                  title="是否确认复制该版本流程？"
                  width="220px"
                  confirm-button-text="确认"
                  cancel-button-text="取消"
                  @confirm="copyFLowVersion">
                  <template #reference>
                    <el-button type="warning">复制流程</el-button>
                  </template>
                </el-popconfirm>
                <el-popconfirm
                  v-if="state.current_enable_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>
        <!-- TAG: 提示功能 -->
        <div v-if="state.current_enable_version === state.select_flow_version" class="add-tip">
          <i class="el-icon-warning icon"></i>&nbsp;<span style="font-size: 13px;">流程已启用，如需增删节点和连线，请 <span class="add" @click="addFlowVersion">添加新版本</span></span>
        </div>
        <div v-else class="help-tip" @click="showHelp">
          <i class="el-icon-warning"></i>&nbsp;<span style="font-size: 13px;">查看新手引导</span>
        </div>
        <!-- TODO：需要完善操作动图 -->
        <el-dialog v-model="state.dialogHelpVisible" title="新手引导" width="30%" center>
          <span>
            提供的流程新增引导
          </span>
          <template #footer>
            <span class="dialog-footer">
              <el-button @click="state.dialogHelpVisible = false">关闭</el-button>
              <el-button type="primary" @click="state.dialogHelpVisible = false">
                下一步
              </el-button>
            </span>
          </template>
        </el-dialog>
      </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
    v-if="state.urlQuery.type !== 'preview'"
    :visible="state.dialogUserFormVisible"
    :list="state.dialogUserTags"
    @close="onCloseUserView"
    @confirm="onConfirmUserView"
  />

  <el-dialog v-model="state.dialogSortVisible" title="节点排序" width="30%" center>
    <draggable
      v-model="state.sortNodes"
      v-bind="dragOptions"
      item-key="id"
      style="overflow: scroll;"
      :component-data="{name:'fade'}"
    >
      <template #item="{ element, index }">
        <div :class="['sort-item', state.sortNodes.length - 1 !== index ? 'sort-item-border' : '' ]">
          <div>
            <i class="el-icon-d-caret"></i>
            &nbsp;
            {{ element.name }}
            &nbsp;
            <span class="sort-item-index">索引：{{element.idx}}</span>&nbsp;
          </div>
        </div>
      </template>
    </draggable>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="state.dialogSortVisible = false">取消</el-button>
        <el-button color="#009688" @click="confirmSort">确认</el-button>
      </span>
    </template>
  </el-dialog>

  <!--<el-dialog class="preview-dialog" v-model="state.dialogPreviewVisible" title="预览节点流程" width="100%" center style="margin-top: 0; margin-bottom: 0;">
    <div class="preview-container" :style="{height: state.window_height}">
      <vue-flow-editor-form
        ref="editor1"
        :height="state.window_height"
        :data="flowData"
        :miniMap="showMiniMap"
        :onRef="onRef1"
        :multipleSelect="showMultipleSelect"
        :loading="state.editorLoading"
        @click-canvas="onClickCanvasPreview"
        @click-node="onClickNodePreview"
        :controlConfig="state.controlConfig"
        :toolbarButtonHandler="toolbarButtonHandler"
      ></vue-flow-editor-form>
    </div>
    <div class="preview-detail-container">
      <iframe :src="state.preview_form_url" width="100%" height="100%" style="border: 0;"></iframe>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button color="#009688" @click="state.dialogPreviewVisible = false">关闭</el-button>
      </span>
    </template>
  </el-dialog>-->

  <el-drawer
    v-model="state.dialogPreviewVisible"
    title="预览节点流程"
    direction="btt"
    size="90%"
    append-to-body
    @closed="handleDrawerClosed"
  >
    <div class="preview-container">
      <vue-flow-editor-form
        v-if="rawFlowData"
        ref="editor1"
        :height="state.window_height"
        :data="rawFlowData"
        :miniMap="showMiniMap"
        :onRef="onRef1"
        :multipleSelect="showMultipleSelect"
        :loading="state.editorLoading"
        @click-canvas="onClickCanvasPreview"
        @click-node="onClickNodePreview"
        :controlConfig="state.controlConfig"
        :toolbarButtonHandler="toolbarButtonHandler"
      ></vue-flow-editor-form>
    </div>
    <div class="preview-detail-container">
      <iframe :src="state.preview_form_url" width="100%" height="100%" style="border: 0;"></iframe>
    </div>
  </el-drawer>
</template>

<script lang="ts">
import { ref, reactive, onMounted, watch, nextTick, computed } from 'vue'
import { AppData } from './data.js'
import { staticPath } from './utils'
import { ElNotification, ElMessage, ElMessageBox, ElLoading } from 'element-plus'
import axios from './axios.js'
import $ from 'jquery'
import _ from 'lodash'
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';
import { flowVersionAPI, saveFlowAPI, flowNodesAPI, enableFlowVersionAPI, flowNodePropertyAPI, checkAllFlowNodePropertyAPI, saveAllFlowNodePropertyAPI, saveNodeSortAPI, duplicateFlowAPI } from "./api/index.js";
import draggable from 'vuedraggable';

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 {
  text: string
  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,
    draggable,
    // 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状态
      controlList: {
        flow: {
          text: '流程节点',
          desc: '拖拽新增流程',
          color: '#ed8383',
          img: 'https://cdn.ipadbiz.cn/oa/flow/icon-flow1.png',
          error: '',
        },
        cc: {
          text: '抄送节点',
          desc: '拖拽新增抄送',
          color: '#ed8383',
          img: 'https://cdn.ipadbiz.cn/oa/flow/icon-cc1.png',
          error: '',
        },
      },
      controlConfig: {
        start: {
          id: 'start-node',
          text: '开始',
          desc: '开始',
          color: '#9283ed',
          img: 'https://cdn.ipadbiz.cn/oa/flow/icon-start1.png',
          type: 'start'
        },
        flow: {
          text: '流程节点',
          desc: '流程节点',
          color: '#ed8383',
          img: 'https://cdn.ipadbiz.cn/oa/flow/icon-flow1.png',
          error: '',
        },
        cc: {
          text: '抄送节点',
          desc: '抄送节点',
          color: '#ed8383',
          img: 'https://cdn.ipadbiz.cn/oa/flow/icon-cc1.png',
          error: '',
        },
        end: {
          id: 'end-node',
          text: '结束',
          desc: '结束',
          color: '#92dba8',
          img: 'https://cdn.ipadbiz.cn/oa/flow/icon-end1.png',
        },
      },
      search_auth_value: '',
      dialogSortVisible: false,
      dialogPreviewVisible: false,
      dialogUserFormVisible: false,
      sortNodes: [],
      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: '',
        is_node: false,
        // msg_open: false,
        message_user_list: [],
        is_website_msg: false,
        is_wechat_msg: false,
        is_message_filler: false,
        website_msg_desc: '',
        wechat_msg_desc: '',
        message_user_desc: '',
      },
      node_name: '', // 节点名称
      node_idx: null, // 节点index
      userTags: [], // 节点负责人,
      nextStepUserTags: [], // 下一步节点负责人,
      nodeMsgUserTags: [], // 节点消息配置负责人,
      auth_all_checked: false,
      auth_all_edit: false,
      field_auths: [],
      field_extend: [],
      current_enable_version: 0,
      select_flow_version: 0,
      version_list: [],
      dialogVersionFormVisible: false,
      dialogHelpVisible: false,
      versionForm: {
        code: 0,
        id: 0,
        note: '',
        type: null, // 操作方式 0:仅保存流程说明 1:删除,2:启用
      },
      showConfirmation: true,
      node_attr: {},
      node_tree: {},
      show_preview: false,
      window_height: '500px',
      preview_form_url: '',
      drawer: false,
      has_next_step_user: true,
      is_user_tags_visible: false,
      is_next_step_user_visible: false,
      is_node_msg_user_visible: false,
      next_step_node: '',
      next_step_node_opt: [{
        value: '1',
        label: '节点1'
      }, {
        value: '2',
        label: '节点2'
      },],
      attr_node_desc: '',
      urlQuery: {
        type: ''
      }
    });

    const dragOptions = computed(() => {
      return {
          animation: 250,
          group: "people",
          disabled: false,
          ghostClass: "ghost"
      };
    })

    // TODO: 获取系统参数

    const setNodeTree = (id: string, data: object) => {
      state.node_tree[id] = data;
    }

    /**
     * 获取url参数
     * @param url
     */
    function getQueryParams(url: string) {
      const params = {
        flow_id: '',
        form_id: '',
        type: '',
        _path: '', // 预览流程表单时的参数
        todo_node_codes: '', // 预览流程表单时的参数
      };
      // 将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;
    }

    /**
     * 获取缓存里的 flow_id
     */
    const getFlowId = () => {
      let id = localStorage.getItem('flow_id') ? localStorage.getItem('flow_id') : '';
      return id;
    }

    /**
     * 更新缓存里的 flow_id
     * @param id
     */
    const updateFlowId = (id: any) => {
      localStorage.setItem('flow_id', id);
    }

    const urlQuery = getQueryParams(location.href);
    state.urlQuery = getQueryParams(location.href);
    let form_id = urlQuery.form_id? urlQuery.form_id : ''; // 表单id

    /**
     *  因为从外部页面到流程图页面，flow_id都需要从当前页面生成
     *  获取版本信息列表
     */
    const getVersionList = async () => {
      const { code, data } = await flowVersionAPI({ form_id });
      if (code) {
        state.reloadLoading = false;
        state.version_list = data;// 流程版本列表
        let flow_id = getFlowId(); // 流程id，如果是新的流程，则为空
        if (state.version_list.length) { // 从外部页面第一次跳到流程编辑页面时，flow_id不存在
          let index = _.findIndex(state.version_list, { status: '1' });
          if (index > -1) {
            state.current_enable_version = state.version_list[index].code; // 流程版本列表显示启用项
          }

          let find_index = _.findIndex(state.version_list, (v) => v.id == flow_id);
          if (flow_id && find_index > -1) { // 缓存里访问过并且在列表里
            state.select_flow_version = state.version_list[find_index].code; // 选中的版本号
          } else { // 如果列表里没有启用的版本获取 flow_id 不存在时，默认选中第一个
            state.select_flow_version = state.version_list[0].code; // 选中的版本号
            updateFlowId(state.version_list[0].id); // 更新 flow_id
            getFlowData(state.version_list[0].id);// 新的 flow_id，更新流程图
          }
        } else { // 没有默认版本列表，自动新增流程
          const { code } = await saveFlowAPI({ form_id: +form_id, flow_id: '', data: JSON.stringify(AppData) });
          if (code) {
            getVersionList(); // 刷新版本列表显示
          }
        }
      } else {
        state.reloadLoading = false;
      }
    }
    if (urlQuery.type !== 'preview') {
      getVersionList();
    }

    // TAG: 接口获取流程图数据
    const flowData = ref<any>(null);
    const rawFlowData = ref<any>(null); // 预览数据

    const getFlowData = async (flow_id: any) => {
      flowData.value = null;
      state.reloadLoading = true; // 打开loading
      const { code, data } = await flowNodesAPI({ flow_id });
      if (code) {
        state.reloadLoading = false;
        let { nodes, edges } = data;
        nodes = nodes.map((node: any) => {
          node.text = node.text.slice(0, 8);
          return node;
        });
        // 没有流程图数据
        if (!nodes.length && !edges.length) {
          flowData.value = AppData; // 设置默认的数据
        } else {
          flowData.value = { nodes, edges }; // 获取已存在的数据
          // 内部刷新graph数据
          nextTick(() => {
            editor.editorState.graph.read(flowData.value);
          });
        }
        state.reloadLoading = false;
      } else {
        state.reloadLoading = false;
      }
    }

    let flow_id = getFlowId(); // flow_id 流程ID

    /**
     * 自动预览
     */
    const autoPreview = async () => {
      if (urlQuery.type === 'preview') {
        flowData.value = null;
        let flow_id = urlQuery.flow_id? urlQuery.flow_id : ''; // 表单id
        let todo_node_codes = urlQuery.todo_node_codes ? urlQuery.todo_node_codes.split(',') : []; //
        const { code, data } = await flowNodesAPI({ flow_id });
        if (code) {
          state.reloadLoading = false;
          let { nodes, edges } = data;
          nodes = nodes.map((node: any) => {
            node.text = node.text.slice(0, 8);
            return node;
          });
          // 没有流程图数据
          if (!nodes.length && !edges.length) {
            flowData.value = AppData; // 设置默认的数据
          } else {
            flowData.value = { nodes, edges }; // 获取已存在的数据

            // 通过todo_node_codes 新增待办显示
            nodes.forEach((node: any) => {
              todo_node_codes.forEach((todo_node_code: any) => {
                if (node.id === todo_node_code) {
                  node.text = node.text + ' (待办)';
                }
              })
            });

            // 内部刷新graph数据
            nextTick(() => {
              editor.editorState.graph.read(flowData.value)
            });
          }
        }
        // 内部刷新graph数据
        nextTick(() => {
          editor.openPreview1();
        });
      }
    }

    if (urlQuery.type === 'preview') {
      autoPreview()
    } else {
      if (flow_id) {
        getFlowData(flow_id);
      }
    }


    /************************ 页面操作超时 ****************************/
    // TAG: 页面操作超时
    var timeoutId;
    var timeoutDuration = 60 * 60 * 1000; // 设置超时时间，单位为毫秒

    // 监听用户的操作
    function resetTimeout() {
      clearTimeout(timeoutId); // 清除之前的定时器
      timeoutId = setTimeout(handleTimeout, timeoutDuration); // 设置新的定时器
    }

    const parseQueryString = url => {
      var json = {
        form_id: ''
      };
      var arr = url.indexOf('?') >= 0 ? url.substr(url.indexOf('?') + 1).split('&') : [];
      arr.forEach(item => {
        var tmp = item.split('=');
        json[tmp[0]] = decodeURIComponent(tmp[1]);
      });
      return json;
    }

    // 处理超时操作
    function handleTimeout() {
      ElMessageBox.alert('操作超时！将跳转到登录页面。', '温馨提示', {
        confirmButtonText: '确定',
        showClose: false,
        callback: action => {
          if (action === 'confirm') {
            localStorage.setItem('showConfirmation', '0'); // 屏蔽显示点击刷新按钮时的提示
            // 清除cookie
            document.cookie = `PHPSESSID=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;`;
            // 拼接跳转地址，因为要返回到当前页面传入参数
            let url_params = parseQueryString(location.href);
            let str = `/admin/custom_flow/?form_id=${url_params.form_id}`;
            window.location.href = location.origin + '/admin/' + window.location.search + `&refer_url=${encodeURIComponent(str)}`;
          }
        }
      });
    }

    // 绑定事件处理程序到浏览器事件
    document.addEventListener("mousemove", resetTimeout);
    document.addEventListener("mousedown", resetTimeout);
    document.addEventListener("keypress", resetTimeout);
    document.addEventListener("touchstart", resetTimeout);

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

    // 显示提示框的标志位
    onMounted(async () => {
      document.title = '可视化流程设计器'
      // TAG：打开刷新提示框
      if (urlQuery.type !== 'preview') {
        localStorage.setItem('showConfirmation', '1');
      } else {  // 预览模式下不显示刷新提示框
        localStorage.setItem('showConfirmation', '0');
      }
      // 监听 unload 事件
      window.addEventListener('unload', function () {
        // 设置标志位为 false，避免在刷新页面时再次显示提示框
        // state.showConfirmation = false;
        localStorage.setItem('showConfirmation', '0');
      });
      // 监听 resize 事件
      window.addEventListener('resize', function () {
        setTimeout(() => {
          nextTick(() => {
            // 预览流程图的背景
            $('.preview-container').find('.g6-grid').parent().css('zIndex', '0');
            $('.preview-container').find('canvas').css('zIndex', '1').css('position', 'relative');
          })
        }, 500);
      });
      // 适口高度
      state.window_height = $(window).height() - 210 + 'px';
    });

    /**
     * 实时检查表单数据是否正确
     * @param node_name
     * @param node_name
     * @param userTags
     * @param field_auths
     */
    function checkFormDataError(node_name, userTags, field_auths) {
      let { nodes } = editor.editorState.graph.save();
      let avail_count = field_auths.filter((ele) => {
          if ((ele.visible.checked && !ele.visible.disabled )|| (ele.editable.checked && !ele.editable.disabled)) {
            return ele;
          }
        });
      if (!node_name) { // 节点名称为空，错误提示
        nodes.forEach((ele: any, idx: number) => {
          if (ele.id === state.detailModel.id) {
            ele.desc = 'https://cdn.ipadbiz.cn/oa/flow/icons-error1.png';
            editor.updateModel(ele); // 更新流程图信息
          }
        });
      } else if (!userTags.length && state.detailModel.id !== 'start-node') { // 负责人为空，错误提示
        nodes.forEach((ele: any, idx: number) => {
          if (ele.id === state.detailModel.id) {
            ele.desc = 'https://cdn.ipadbiz.cn/oa/flow/icons-error1.png';
            editor.updateModel(ele); // 更新流程图信息
          }
        });
      } else if (!avail_count.length) { // 字段权限为空，错误提示
        nodes.forEach((ele: any, idx: number) => {
          if (ele.id === state.detailModel.id) {
            ele.desc = 'https://cdn.ipadbiz.cn/oa/flow/icons-error1.png';
            editor.updateModel(ele); // 更新流程图信息
          }
        });
      } else {
        nodes.forEach((ele: any, idx: number) => {
          if (ele.id === state.detailModel.id) {
            ele.desc = '';
            editor.updateModel(ele); // 更新流程图信息
          }
        });
      }
    }

    /************* 监听表单数据变化 **************/
    watch(
      () => state.node_name,
      (newValue, oldValue) => {
        if (newValue !== oldValue) {
          if (state.node_tree[state.detailModel?.id]) {
            state.node_tree[state.detailModel.id].name = newValue;
          }
        }
        checkFormDataError(newValue, state.userTags, state.field_auths);
      },
      // { immediate: true }
    );
    watch(
      () => state.userTags,
      (newValue, oldValue) => {
        if (newValue !== oldValue) {
          if (state.node_tree[state.detailModel?.id]) {
            state.node_tree[state.detailModel.id].user = newValue;
          }
        }
        checkFormDataError(state.node_name, newValue, state.field_auths);
      },
      // { immediate: true }
    );
    // TODO：需要监听state.nextStepUserTags的变化赋值
    watch(
      () => state.field_auths,
      (newValue, oldValue) => {
        checkFormDataError(state.node_name, state.userTags, newValue);
      },
      { deep: true }
    );
    watch(
      () => state.more_attr,
      (newValue, oldValue) => {
        if (newValue !== oldValue) {
          if (state.node_tree[state.detailModel?.id]) {
            state.node_tree[state.detailModel.id].property = newValue;
          }
        }
      },
      { immediate: true }
    );
    /***************** END ******************/

    const showHelp = () => {
      state.dialogHelpVisible = true;
    }

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

    /**
     * 切换版本信息
     * @param id
     * @param code
     * @param note
     */
    const onSelectFlowVersion = (id: number, code: number, note: string) => {
      state.node_tree = {}; // 清空当前版本的节点树状态缓存
      state.reloadLoading = true; // 打开loading
      state.select_flow_version = code;
      updateFlowId(id); // 更新缓存flow_id
      getFlowData(id); // 更新流程图数据
    }

    /**
     * 显示编辑版本信息
     * @param id
     * @param code
     * @param note
     */
    const showEditFlowVersion = (id: number, code: number, note: string) => {
      state.dialogVersionFormVisible = true;
      state.versionForm = { // 当前版本信息
        code,
        id,
        note,
        type: null,
      }
    }

    /**
     * 新增版本
     */
    const addFlowVersion = async () => {
      const { code, data } = await saveFlowAPI({ form_id: +form_id, flow_id: '', data: JSON.stringify(AppData) });
      if (code) {
        state.reloadLoading = true; // 打开 loading
        ElMessage({
          type: 'success',
          message: '新增成功',
        });

        updateFlowId(data); // 更新缓存 flow_id
        getFlowData(data); // 更新流程图数据

        const flow_version = await flowVersionAPI({ form_id });
        if (flow_version.code) {
          state.version_list = flow_version.data; // 更新版本列表
          state.version_list.forEach((ele) => {
            if (ele.id === +data) {
              state.select_flow_version = ele.code; // 选中新增的版本
            }
          });
        }
      } else {
        state.reloadLoading = false; // 关闭 loading
      }
    }

    /**
     * 启用版本
     */
    const setFLowVersionEnable = async () => {
      // 启动前，自动保存操作
      let is_pass = await saveData('auto');
      if (is_pass !== false) { // 不通过后会返回false，不返回false就是通过了
        state.versionForm.type = 2;
        const { code, data } = await enableFlowVersionAPI(state.versionForm);
        if (code) {
          ElMessage({
            type: 'success',
            message: '启用成功',
          });
          state.current_enable_version = state.versionForm.code; // 当前选中的版本号
          state.dialogVersionFormVisible = false; // 关闭弹框
          state.reloadLoading = true; // 打开loading

          getVersionList(); // 刷新版本列表
          updateFlowId(data); // 更新缓存flow_id
          getFlowData(data); // 更新流程图数据
        } else {
          state.reloadLoading = false;
        }
      }
    }

    const copyFLowVersion = async () => { // 复制版本流程
      state.dialogVersionFormVisible = false; // 关闭弹框

      state.reloadLoading = true; // 打开 loading

      let flow_id = getFlowId(); // 获取当前的flow_id
      const { code, new_flow_id } = await duplicateFlowAPI({ flow_id });
      if (code) {
        state.reloadLoading = false;

        ElMessage({
          type: 'success',
          message: '复制成功',
        });

        updateFlowId(new_flow_id); // 更新缓存 flow_id
        getFlowData(new_flow_id); // 更新流程图数据

        const flow_version = await flowVersionAPI({ form_id });
        if (flow_version.code) {
          state.version_list = flow_version.data; // 更新版本列表
          state.version_list.forEach((ele) => {
            if (ele.id === +new_flow_id) {
              state.select_flow_version = ele.code; // 选中新增的版本
            }
          });
        }
      } else {
        state.reloadLoading = false;
      }
    }

    /**
     * 编辑版本
     */
    const editFlowVersion = () => {
      state.dialogVersionFormVisible = true;
      state.version_list.forEach((ele) => {
        if (ele.code === state.select_flow_version) {
          state.versionForm.id = ele.id;
          state.versionForm.code = ele.code;
          state.versionForm.note = ele.note;
        }
      });
    }

    /**
     * 删除版本
     */
    const deleteFlowVersion = async () => {
      state.versionForm.type = 1;
      const { code } = await enableFlowVersionAPI(state.versionForm);
      if (code) {
        ElMessage({
          type: 'success',
          message: '删除成功',
        });
        state.dialogVersionFormVisible = false;
        getVersionList();
      }
    }

    /**
     * 保存版本描述
     */
    const saveFlowVersionNote = async () => {
      state.versionForm.type = 0;
      const { code } = await enableFlowVersionAPI(state.versionForm);
      if (code) {
        ElMessage({
          type: 'success',
          message: '保存成功',
        });
        state.dialogVersionFormVisible = false;
        getVersionList(); // 刷新版本列表
      }
    }

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

    function handleActiveChange(name: any) {
      // console.warn(name)
    }
    const handleAttrClick = (tab, event) => {
      // console.warn(tab.props.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) => {
      state.field_auths[index].visible.checked = val.visible.checked; // 修改实际树变化
      // 可见不选中时，可编辑也取消选中
      if (!val.visible.checked) {
        val.editable.checked = false;
        state.field_auths[index].editable.checked = false; // 修改实际树变化
      }
      checkAuthAll('visible');
      checkAuthAll('editable');

      // 修改缓存树的字段权限
      if (state.node_tree[state.detailModel?.id]) {
        state.node_tree[state.detailModel.id].field_auths = _.cloneDeep(state.field_auths);
      }
    }

    /**
     * 点击可编辑按钮回调
     * @param val
     * @param index
     */
    const onAuthEditableChange = (val: any, index: number) => {
      state.field_auths[index].editable.checked = val.editable.checked; // 修改实际树变化
      // 可编辑选中时，勾选可见
      if (val.editable.checked) {
        val.visible.checked = true;
        state.field_auths[index].visible.checked = true; // 修改实际树变化
      }

      checkAuthAll('editable');
      checkAuthAll('visible');

      // 修改缓存树的字段权限
      if (state.node_tree[state.detailModel?.id]) {
        state.node_tree[state.detailModel.id].field_auths = _.cloneDeep(state.field_auths);
      }

    }

    /**
     * 点击全选按钮回调
     * @param val
     */
    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
        })
      }
      // 修改缓存树的字段权限
      if (state.node_tree[state.detailModel?.id]) {
        state.node_tree[state.detailModel.id].field_auths = _.cloneDeep(state.field_auths);
      }
    }

    /**
     * 点击全选可编辑按钮回调
     * @param val
     */
    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
        })
      }
      // 修改缓存树的字段权限
      if (state.node_tree[state.detailModel?.id]) {
        state.node_tree[state.detailModel.id].field_auths = _.cloneDeep(state.field_auths);
      }
    }

    /**
     * 输入框搜索回调
     * @param val
     */
    const onSearchAuthInput = (val: string) => {
      state.field_auths.forEach((ele) => {
        if (ele.name.indexOf(val) > -1) {
          ele.show = true;
        } else {
          ele.show = false;
        }
      })
    }
    /******************* END *******************/

    const handleNodeNameChange = (val) => {
      // 控制输入长度为9位
      if (val.length > 9) {
        val = val.slice(0, 9);
      }
      state.detailModel.text = val; // 更新节点名称显示
      editor.updateModel(state.detailModel);
    }

    /***************** 用户选择控件弹框 ****************/

    /**
     * 打开设置用户弹框
     */
    const openUserForm = () => {
      state.dialogUserFormVisible = true;
      state.is_user_tags_visible = true;
      state.dialogUserTags = state.node_tree[state.detailModel.id].user;
    }

    const openNextStepUserForm = () => { // 打开下一步用户弹框
      state.dialogUserFormVisible = true;
      state.is_next_step_user_visible = true;
      // TODO: 重新打开的时候需要把选中的数据还原显示
      // TODO： 监听变化会把下面的值改变之后更新到显示上面
      state.nextStepUserTags = state.node_tree[state.detailModel.id].user;
      state.dialogUserTags = [
        {
            "id": 137919,
            "type": "user",
            "name": "11组寝室长"
        },
        {
            "id": 137923,
            "type": "user",
            "name": "13组寝室长"
        }
      ];
    }

    const openNodeMsgUserForm = () => { // 打开节点操作的，消息配置用户弹框
      state.dialogUserFormVisible = true;
      state.is_node_msg_user_visible = true;
      state.dialogUserTags = state.more_attr_data.message_user_list;
    }

    const onCloseUserView = (status: boolean) => {
      state.dialogUserFormVisible = status;
    }

    const onConfirmUserView = async (data: any) => { // 负责人弹框确认回调
      if (state.is_user_tags_visible) { // 赋值给负责人框
        state.userTags = _.cloneDeep(data);
        // 关闭后更新标记数据
        state.is_user_tags_visible = false;
      }
      if (state.is_next_step_user_visible) { // 赋值给下一步负责人框
        state.nextStepUserTags = _.cloneDeep(data);
        // 关闭后更新标记数据
        state.is_next_step_user_visible = false;
      }
      if (state.is_node_msg_user_visible) { // 赋值给节点消息配置负责人框
        state.more_attr_data.message_user_list = _.cloneDeep(data);
        // 关闭后更新标记数据
        state.is_node_msg_user_visible = false;
      }

      // // 自动保存流程
      // let { nodes, edges } = editor.editorState.graph.save();
      // // 检查路径有效性
      // const paths = [];
      // findPathsToEndNode(edges, 'start-node', [], paths);

      // let flow_id = getFlowId(); // 流程id

      // if (paths.length) {
      //   const { code, data } = await saveFlowAPI({ form_id: +form_id, flow_id: +flow_id, data: JSON.stringify({ nodes, edges }) });
      //   if (code) {
      //     updateFlowId(data); // 更新缓存flow_id
      //     console.log('满足条件的路径', paths); // 输出满足条件的路径结果数组
      //   }
      // } else {
      //   ElNotification.error('缺少一条从开始节点到结束节点的完整流程！');
      // }
    }
    /******************* END *******************/

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

    let editor: {
      clearStates(arg0: any): () => void
      openModel: () => void
      closeModel: () => void
      openPreview1: () => void
      addNode: (arg0: any) => void
      updateModel: (arg0: any) => void
      editorState: {
        graph: {
          addItem: any
          removeItem: any
          save: () => { nodes: any; edges: any }
          read: any,
          get: any,
          getPointByCanvas: any,
          translate: any,
        }
      }
    }
    let editor1: {
      clearStates(arg0: any): () => void
      openModel: () => void
      closeModel: () => void
      openPreview1: () => void
      addNode: (arg0: any) => void
      updateModel: (arg0: any) => void
      editorState: {
        graph: {
          addItem: any
          removeItem: any
          save: () => { nodes: any; edges: any }
          read: 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()
      // }
    }
    const onClickNodeMousedown = (e) => {
    }
    /**
     * 单击节点回调
     * @param {Event} e - The event object representing the click event.
     */
    const onClickNode = async (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;

      state.search_auth_value = '';
      // 清空全选状态
      state.auth_all_checked = false;
      state.auth_all_edit = false;

      // 判断是否是流程节点
      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.main_attr_set = true; // 重置更多属性的显示

        let flow_id = getFlowId(); // 流程id

        state.statusLoading = true;

        flowData.value.nodes.forEach((ele: any, idx: number) => {
          if (ele.id === model.id) {
            state.node_idx = idx; // 详情里显示节点索引
          }
        });

        // 打开属性表单
        state.attr_radio = '基础属性'; // 还原tab默认值

        // 如果是缓存过的节点，则直接显示
        if (!_.isEmpty(state.node_tree[state.detailModel.id])) {
          state.statusLoading = false;
          state.node_name = state.node_tree[state.detailModel.id].name;
          state.userTags = state.node_tree[state.detailModel.id].user;
          // TODO：获取下一步操作人列表
          state.nextStepUserTags = state.node_tree[state.detailModel.id].user;
          state.dialogUserTags = state.node_tree[state.detailModel.id].user;
          state.field_auths = state.node_tree[state.detailModel.id].field_auths;
          state.more_attr = state.node_tree[state.detailModel.id].property;

          // 把表单数据同步到提交数据（后端需要的字段和表单不是一个）
          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;
              }
              auth.show = true;
            })
          });

          // 检查字段权限选中情况
          checkAuthAll('visible');
          checkAuthAll('editable');

          editor.openModel();
          return;
        }

        // 获取节点属性
        const { code, data } = await flowNodePropertyAPI({ node_code: model.id, flow_id });
        if (code) {
          state.statusLoading = false;
          state.node_name = data.name ? data.name : model.text; // 节点名称
          state.userTags = data.user; // 节点负责人
          // TODO：获取下一步操作人列表
          state.nextStepUserTags = data.user;
          state.dialogUserTags = state.userTags; // 同步给弹框数据
          state.field_extend = 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,
                  disabled: false,
                },
                show: true,
              })
            }
          });

          // 检查字段权限选中情况
          checkAuthAll('visible');
          checkAuthAll('editable');

          state.more_attr = data.property; // 更多属性

          // 开始节点不显示审批意见, 和节点操作的驳回
          if (model_id ==='start-node') {
            state.more_attr = state.more_attr.filter((ele: any) => {
              return ele.label !== '审批意见'
            });
            state.more_attr[0]['data'] = state.more_attr[0]['data'].filter((ele: any) => {
              return ele.id !== 'reject'
            });
          }


          // 抄送节点不显示
          if (state.detailModel.control === 'cc') {
            state.more_attr = [];
          }

          editor.openModel();

          // 临时保存树信息
          setNodeTree(model.id,
            {
              name: _.cloneDeep(state.node_name),
              user: model_id === 'start-node' ? '' : _.cloneDeep(state.userTags), // 开始节点没有负责人
              field_auths: _.cloneDeep(state.field_auths), // 页面显示结构
              field_extend: _.cloneDeep(state.field_extend), // 后端使用结构
              property: _.cloneDeep(state.more_attr),
              model
            }
          );
        } else {
          state.statusLoading = false;
        }
      } else {
        state.detailModel = null;
        editor.closeModel();
      }

      // 监听 beforeunload 事件
      window.addEventListener('beforeunload', function (event) {
        const confirmationMessage = "确定要离开此页面吗？您所做的更改可能不会被保存。";

        if (localStorage.getItem('showConfirmation') === '1') {
          // 取消事件的默认行为（弹出确认对话框）
          event.preventDefault();
          event.returnValue = confirmationMessage; 
          return confirmationMessage;
        }

      });
    }

    /**
     * 单击连接线回调
     * @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() {
      // if (!checkFormEdited()) {
      //   ElMessageBox.confirm(
      //   '您刚才修改过表单内容还未保存，是否离开？',
      //   '温馨提示',
      //   {
      //     confirmButtonText: '离开',
      //     cancelButtonText: '取消',
      //     type: 'warning',
      //   }
      // )
      //   .then(() => {
      //     editor.closeModel()
      //   })
      //   .catch(() => {
      //   })
      // } else {
      //   editor.closeModel()
      // }
      editor.closeModel()
    }

    /**
     * 打开更多属性细节回调
     *
     * @param {Object} attr - The attribute object
     * @param {Number} index - The index of the attribute
     */
    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;
        state.more_attr_data.is_node = false; // 节点属性标识
      } else { // 节点操作
        state.more_attr_data.showBtn = true;
        state.more_attr_data.is_node = true; // 节点属性标识
      }
    }

    /**
     * 确认更多属性细节回调
     *
     * @param {Object} item - The attribute object
     */
    const onConfirmMoreAttr = (item: any) => {
      state.main_attr_set = true;
    }

    const checkNodeTree = () => { // 检查点击过的节点是否有问题
      let { nodes } = editor.editorState.graph.save();

      let models = []; // 未通过的节点ID集合

      for (const key in state.node_tree) {
        const element = state.node_tree[key];
        let avail_visible_count = element.field_auths.filter((ele) => {
          if (ele.visible.checked && !ele.visible.disabled) {
            return ele;
          }
        });
        let avail_editable_count = element.field_auths.filter((ele) => {
          if (ele.editable.checked && !ele.editable.disabled) {
            return ele;
          }
        });

        if (
            (element.name === '') || // 节点名称为空
            (key !=='start-node' && !element.user.length) || // 开始节点不需要检查负责人
            (avail_visible_count.length === 0 && avail_editable_count.length === 0) // 可见和可编辑都为空
          )
        {
          models.push(element.model);
        }
      }

      if (models.length) {
        ElMessage({
          type: 'error',
          message: '流程配置不完善，请点击节点红点完善。',
        });
        // 批量新增节点提示
        nodes.forEach((ele: any, idx: number) => {
          models.forEach((model) => {
            if (ele.id === model.id) {
              ele.desc = 'https://cdn.ipadbiz.cn/oa/flow/icons-error1.png';
              editor.updateModel(ele); // 更新流程图信息
            }
          })
        });
      }

      return models;
    }

    const batchSaveForm = async (type) => { // 批量保存节点信息
      for (const key in state.node_tree) {
        const element = state.node_tree[key];
        // 把表单数据同步到提交数据（后端需要的字段和表单不是一个）
        element.field_extend.forEach(ele => {
          element.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;
            }
          })
        });
        // 没有错误，修改节点名称
        element.field = element.field_extend; // 字段权限保存需要的数据结构
        element.model.text = element.name.slice(0, 8); // 修改节点名称
        element.model.desc = ''; // 清空节点错误提示
        editor.updateModel(element.model); // 更新流程图信息
      }

      // let flow_id = getFlowId(); // 流程id

      // if (!_.isEmpty(state.node_tree)) {
      //   // TAG: 保存表单信息
      //   const { code, data } = await saveAllFlowNodePropertyAPI({ flow_id: +flow_id, data: JSON.stringify(state.node_tree) })
      //   if (code) {
      //     editor.closeModel();
      //     state.node_tree = {}; // 清空节点树缓存
      //     saveFlowData();
      //   }
      // } else {
      //   saveFlowData();
      // }
      saveFlowData(type);
    }

    const saveFlowData = async (type) => { // 保存流程图结构信息
      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(({ shape, source, sourceAnchor, target, targetAnchor }) => ({
        shape,
        source,
        sourceAnchor,
        target,
        targetAnchor,
      }));

      // 检查路径有效性
      const paths = [];
      findPathsToEndNode(edges, 'start-node', [], paths);

      let flow_id = getFlowId(); // 流程id

      if (paths.length) {
        const { code, data } = await saveFlowAPI({ form_id: +form_id, flow_id: +flow_id, data: JSON.stringify({ nodes, edges }) });
        if (code) {
          updateFlowId(data); // 更新缓存flow_id
          console.log(paths); // 输出满足条件的路径结果数组
          if (type === 'manual') {
            ElMessage({
              type: 'success',
              message: '保存流程图成功',
            });
          }
          rawFlowData.value = flowData.value;
          //
          if (!_.isEmpty(state.node_tree)) {
            // TAG: 保存表单信息
            const { code, data } = await saveAllFlowNodePropertyAPI({ flow_id: +flow_id, data: JSON.stringify(state.node_tree) })
            if (code) {
              editor.closeModel();
              state.node_tree = {}; // 清空节点树缓存
            }
          }
        }
      } else {
        ElNotification.error('缺少一条从开始节点到结束节点的完整流程！');
      }
    }

    /**
     * 删除前校验
     *
     * @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'); // 连接到结束节点连接线的数量

      // 流程启用中不允许节点操作
      if (state.current_enable_version === state.select_flow_version) {
        ElNotification.error('流程启用中，不可以删除')
        return Promise.reject('reject')
      }

      // 不可以删除开始与结束连接线
      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') {
          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();
        // TAG: 节点删除后，如果有缓存也要删除掉
        for (const key in state.node_tree) {
          if (key === model.id) {
            delete state.node_tree[model.id];
          }
        }
      }
      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.
     */
    const handleAfterAdd = async (model: myObj, type: string) => {
      if (type === 'node') {
        // console.log(`新增节点`)
        flowData.value.nodes = editor.editorState.graph.save().nodes

        // 新增节点后，把结构体新增到缓存里面去
        let flow_id = getFlowId(); // 流程id
        const { code, data } = await flowNodePropertyAPI({ node_code: model.id, flow_id });
        if (code) {
          // 转换数据结构使用
          let node_name = data.name ? data.name : model.text;
          let userTags = data.user; // 节点负责人
          let field_extend = data.field; // 字段权限临时储存，实际传给后端数据结构
          let field_auths = []; // 清空字段权限列表，本地使用数据结构
          let more_attr = data.property; // 更多属性

          // 转换数据结构使用
          field_extend.forEach(ele => {
            if (!ele.field_extend.disabled) { // 流程节点字段权限列表内是否显示
              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,
                  disabled: false,
                },
                show: true,
              })
            }
          });

          state.node_tree[model.id] = {
            name: node_name,
            user: userTags, // 开始节点没有负责人
            field_auths: field_auths, // 页面显示结构
            field_extend: field_extend, // 后端使用结构
            property: more_attr,
            model
          };
        }
      }
      if (type === 'edge') {
        // console.log(`新增连接线`)
        flowData.value.edges = editor.editorState.graph.save().edges
      }

    }

    function onClickCanvas(e: myEvent) {
      // if (!checkFormEdited() && state.detailModel) {
      //   ElMessageBox.confirm(
      //   '您刚才修改过表单内容还未保存，是否离开？',
      //   '温馨提示',
      //   {
      //     confirmButtonText: '离开',
      //     cancelButtonText: '取消',
      //     type: 'warning',
      //   }
      // )
      //   .then(() => {
      //     state.detailModel = null;
      //     editor.closeModel()
      //   })
      //   .catch(() => {
      //   })
      // } else {
      //   state.detailModel = null;
      //   editor.closeModel()
      // }
      state.detailModel = null;
      editor.closeModel()
    }

    const onDragCanvas = (evt) => {
      // 监听 beforeunload 事件
      window.addEventListener('beforeunload', function (event) {
        const confirmationMessage = "确定要离开此页面吗？您所做的更改可能不会被保存。";

        if (localStorage.getItem('showConfirmation') === '1') {
          // 取消事件的默认行为（弹出确认对话框）
          event.preventDefault();
          event.returnValue = confirmationMessage; 
          return confirmationMessage;
        }

      });
    }

    /**
     * 拖动节点结束回调
     *
     * @param {myEvent} e - The event object containing information about the drag and drop.
     */
    function onDragEndNode(e: myEvent) {
      const model = e.item.get('model')
    }

    /**
     * 排序节点
     *
     */
    const sortData = () => {
      state.sortNodes = [];
      let { nodes } = editor.editorState.graph.save();
      // console.warn(nodes);
      // let data = [
      //     '1f6b88b0-b864-47bc-8903-c72e5014ac75',
      //     '5e22f525-1d02-4456-8d3e-0d088f99f9d6',
      //     'end-node',
      //     'start-node',
      // ];
      // let node_data = _.map(data, (n) => { return { id: n } });

      // let node_arr = _.intersectionBy(node_data, nodes, 'id');
      // let new_node_arr = _.differenceBy(node_data, nodes, 'id');
      // console.warn(node_arr);
      // console.warn(new_node_arr);

      if (nodes.length > 0) {
        nodes.forEach((element, idx) => {
          state.sortNodes.push({
            idx,
            id: element.id,
            name: element.text,
          })
        });
      }
      state.dialogSortVisible = true;
    }

    /**
     * 图层居中
     */
    const setMapCenter = () => {
      // TAG: 自动位移中心点位置
      const point = {
        x: 700,
        y: 400
      };
      const width = editor.editorState.graph.get('width');
      const height = editor.editorState.graph.get('height');
      // 找到视口中心
      const viewCenter = {
        x: width / 2,
        y: height / 2
      };
      const modelCenter = editor.editorState.graph.getPointByCanvas(viewCenter.x, viewCenter.y);
      const viewportMatrix = editor.editorState.graph.get('group').getMatrix();
      // 画布平移的目标位置，最终目标是graph.translate(dx, dy);
      const dx = (modelCenter.x - point.x) * viewportMatrix[0];
      const dy = (modelCenter.y - point.y) * viewportMatrix[4];
      let lastX = 0;
      let lastY = 0;
      let newX = void 0;
      let newY = void 0;
      // 动画每次平移一点，直到目标位置
      editor.editorState.graph.get('canvas').animate({
        onFrame: function onFrame(ratio) {
          newX = dx * ratio;
          newY = dy * ratio;
          editor.editorState.graph.translate(newX - lastX, newY - lastY);
          lastX = newX;
          lastY = newY;
        }
      }, 100, 'easeCubic');
    }

    const confirmSort = async () => {
      state.dialogSortVisible = false;

      let arr = _.map(state.sortNodes, 'id');
      const { code, data } = await saveNodeSortAPI({ id: getFlowId(), data: JSON.stringify(arr) })
      if (code) {
        ElNotification.success('保存成功')
      }
    }

    const copyData = () => { // 复制节点回调
      if (state.detailModel.control !== 'start' && state.detailModel.control !== 'end') {
        let copy_node = _.cloneDeep(state.node_tree[state.detailModel.id]); // 复制节点的属性
        // delete copy_node.model;
        editor.clearStates(state.detailModel.id); // 清除选中节点的状态
        let id = uuidv4(); // ID需要重新生成
        // state.detailModel.y = state.detailModel.y + 50
        // 新节点的属性
        copy_node['model']['id'] = id;
        copy_node['model']['y'] = state.detailModel.y + 50;
        state.node_tree[id] = copy_node; // 新节点放到缓存中

        editor.addNode(copy_node['model']);
        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.
     */
    const noticeError = (checkResult) => {
      let { nodes } = editor.editorState.graph.save();
      let available_keys = _.map(nodes, 'id'); // 画布上存在的有效节点ID
      let raw_keys = _.intersection(checkResult.data, available_keys); // 取交集有效ID
      let node_keys =  Object.keys(state.node_tree); // 现在本地的ID都是有效的值
      let result = _.difference(raw_keys, node_keys);
      if (result.length) {
        ElMessage({
          type: 'error',
          message: '流程配置不完善，请点击节点红点完善。',
        });
        nodes.forEach((ele: any, idx: number) => {
          result.forEach((key: string) => {
            if (ele.id === key) {
              ele.desc = 'https://cdn.ipadbiz.cn/oa/flow/icons-error1.png';
              editor.updateModel(ele); // 更新流程图信息
            }
          })
        });
      }
      return result.length;
    }
    const saveData = async (type: string) => {
      // 清空错误提示
      let { nodes } = editor.editorState.graph.save();

      nodes.forEach((ele: any, idx: number) => {
        ele.desc = '';
        editor.updateModel(ele); // 更新流程图信息
      });

      let flow_id = getFlowId(); // flow_id 流程ID

      // 未点击任何节点时，提示促使用户点击节点
      if (_.isEmpty(state.node_tree)) {
        // TAG: 检查节点是否完整
        const checkResult = await checkAllFlowNodePropertyAPI({ flow_id: +flow_id })
        if (checkResult.code) {
          // TAG: 暂时不检查开始节点
          checkResult.data = checkResult.data.filter(item => item !== 'start-node');
          if (noticeError(checkResult)) {
            return false;
          }
        } else {
          // 保存流程图结构
          saveFlowData(type);
        }
      }

      // 节点点击后，使用本地数据检查
      if (checkNodeTree().length) {
        return false;
      }

      // TAG: 检查节点是否完整
      // 检查点击节点后通过了，但是还有未通过的节点没有点击时
      const checkResult = await checkAllFlowNodePropertyAPI({ flow_id: +flow_id })
      if (checkResult.code) {
        // TAG: 暂时不检查开始节点
        checkResult.data = checkResult.data.filter(item => item !== 'start-node');
        if (noticeError(checkResult)) {
          return false;
        }
      }

      if (type === 'manual') { // 手动触发保存按钮
        ElMessageBox.confirm(
          '是否确定保存流程?',
          '温馨提示',
          {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
          }
        )
        .then(async () => {
          batchSaveForm(type);
        })
        .catch(() => {
        });
      } else { // 自动执行保存操作
        batchSaveForm(type);
      }
    }

    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> {
      let disabledKeys = ['miniMapSwitcher', 'gridSwitcher'];
      // 如果在启用版本中，隐藏 节点操作功能 和 缩略图和网格
      if (state.current_enable_version === state.select_flow_version) {
        disabledKeys = ['delete', 'miniMapSwitcher', 'gridSwitcher', 'undo', 'redo'];
      }
      let map = buttons.filter((item) => !disabledKeys.includes(item.key));
      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();
      }
    }

    const getRowData = async (flow_id: any) => {
      rawFlowData.value = null;
      state.reloadLoading = true; // 打开loading
      const { code, data } = await flowNodesAPI({ flow_id });
      if (code) {
        state.reloadLoading = false;
        let { nodes, edges } = data;
        nodes = nodes.map((node: any) => {
          node.text = node.text.slice(0, 8);
          return node;
        });
        // 没有流程图数据
        if (!nodes.length && !edges.length) {
          rawFlowData.value = AppData; // 设置默认的数据
        } else {
          rawFlowData.value = { nodes, edges }; // 获取已存在的数据
          // 内部刷新graph数据
          nextTick(() => {
            editor1?.editorState.graph?.read(rawFlowData.value)
          });
        }
        state.reloadLoading = false;
      } else {
        state.reloadLoading = false;
      }
    }

    const openPreview = () => {
      editor.closeModel();
      // 打开弹框
      state.dialogPreviewVisible = true;
      // 获取最新数据
      let flow_id = getFlowId(); // flow_id 流程ID
      getRowData(flow_id);
      // 创建一个resize事件
      const resizeEvent = new Event('resize');

      // 触发resize事件
      window.dispatchEvent(resizeEvent);

      setTimeout(() => {
        nextTick(() => {
          // 预览流程图的背景
          $('.preview-container').find('.g6-grid').parent().css('zIndex', '0');
          $('.preview-container').find('canvas').css('zIndex', '1').css('position', 'relative');
        })
      }, 1000);
    }

    /**
     * 单击节点预览回调
     * @param {Event} e - The event object representing the click event.
     */
    const onClickNodePreview = async (e: myEvent) => {
      // TAG: 有一个预览状态可以看到节点相应的表单内容
      const model = G6.Util.clone(e.item.get('model')); // 节点的基本属性
      model.style = model.style || {}
      model.labelCfg = model.labelCfg || { style: {} }
      model.data = model.data ? model.data : {};

      if (model.id === 'end-node') {
        ElNotification.error('该节点无法预览');
        state.preview_form_url = null;
      } else {
        let flow_id = getFlowId();
        let _path = urlQuery._path? urlQuery._path : '';
        state.preview_form_url = `/admin/?a=flow&t=view&m=mod&p=${_path}&_flow=${flow_id}&_flow_node=${model.id}`;
      }
    }

    /**
     * 单击画布预览回调
     * @param {Event} e - The event object representing the click event.
     */
    const onClickCanvasPreview = () => {
      state.preview_form_url = null;
    }

    const handleDrawerClosed = () => {
      state.preview_form_url = null;
    }

    /**
     * 节点属性开关操作回调
     * 关闭后 同时关闭消息通知
     * @param data
     */
    const handleMoreAttr = (data) => {
      if (!data.show) {
        data.is_website_msg = false;
        data.is_wechat_msg = false;
      }
    }

    return {
      state,
      rules,
      formRef,
      flowData,
      rawFlowData,

      dragOptions,

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

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

      showHelp,

      onSelectFlowVersion,
      showEditFlowVersion,
      addFlowVersion,
      setFLowVersionEnable,
      copyFLowVersion,
      editFlowVersion,
      deleteFlowVersion,
      saveFlowVersionNote,
      handleActiveChange,
      handleAttrClick,
      onAuthVisibleChange,
      onAuthEditableChange,
      onAuthAllChange,
      onAuthAllEditChange,
      onSearchAuthInput,

      handleNodeNameChange,

      handleMoreAttr,

      openUserForm,
      openNextStepUserForm,
      openNodeMsgUserForm,
      onCloseUserView,
      onConfirmUserView,

      sortData,
      setMapCenter,
      confirmSort,
      copyData,
      saveData,
      startFlow,
      toolbarButtonHandler,

      openPreview,
      onClickNodePreview,
      onClickCanvasPreview,
      handleDrawerClosed,

      onRef: (e: any) => (editor = e),
      onRef1: (e: any) => (editor1 = 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;
  max-height: 100px;
  overflow: auto;
  &:hover {
    cursor: pointer;
  }
  .text-empty {
    font-size: 14px;
    text-align: center;
    color: #dcdfe6;
  }
  .icon {
    display: inline-block;
    vertical-align: middle;
    line-height: 10px;
  }
}

.main-attr-set {
  .node-name {
    .name {
      &::after {
        content: '*';
        color: red;
      }
    }
  }
  .node-index {
    position: absolute;
    right: 0;
    top: 0;
    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;
  }
  .node-user {
    .name {
      font-size: 14px;
      margin-bottom: 10px;
      &::after {
        content: '*';
        color: red;
      }
    }
  }
}

.select-version-wrapper {
  position: absolute;
  top: 20px;
  right: 35px;
  .select-version-show {
    margin-left: 15px;
    .version-icon-actived {
      width: 10px;
      height: 10px;
      background-color: #009688;
      border-radius: 50%;
      display: inline-block;
      margin-right: 8px;
    }
    .version-icon-selected {
      width: 10px;
      height: 10px;
      background-color: #f0a800;
      border-radius: 50%;
      display: inline-block;
      margin-right: 8px;
    }
    .text {
      font-size: 13px;
    }
  }
}

.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 {
        color: #bbb;
      }
      .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;
  }
}

.help-tip {
  position: absolute;
  z-index: 9;
  top: 70px;
  color: #009688 !important;
  &:hover {
    cursor: pointer;
  }
}
.add-tip {
  position: absolute;
  z-index: 9;
  top: 70px;
  .icon {
    color: #f0a800 !important;
  }
  .add {
    color: #009688 !important;
    &:hover {
      cursor: pointer;
    }
  }
}

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

.el-button.el-button--primary {
  background-color: #009688 !important;
  border-color: #009688 !important;
  color: white !important;
}

.el-radio-button__original-radio:checked + .el-radio-button__inner {
  border-color: #009688 !important;
  box-shadow: -1px 0 0 0 #009688 !important;
}

.el-tabs__item:hover {
  color: #009688 !important;
}

.el-switch__label.is-active {
  color: #009688 !important;
}

.sort-item {
  padding: 1rem; border: 1px solid #ebeef5; cursor: move;
  background-color: #fff;
  .sort-item-index {
    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;
  }
}
.sort-item-border {
  border-bottom: 0 !important;
}
.preview-dialog {
  .el-dialog__body {
    padding: 0;
    padding-bottom: 25px;
  }
  .el-dialog__footer {
    padding: 0;
  }
}
.preview-detail-container {
  position: fixed;
  z-index: 9;
  width: 30vw;
  height: 80vh;
  top: 18vh;
  right: 20px;
  border: 1px solid #c3c3c3;
  background: #fff;
  /* padding: 1rem; */
  /* border-radius: 5px; */
}

.el-drawer.btt {
  -webkit-animation: none !important;
  animation: none !important;
}
.el-drawer__header {
  margin-bottom: 0!important;
}

.toolbar-buttons {
  .save-wrapper {
    position: absolute;
    top: 15px;
    right: 160px;
    width: 80px;
  }
  .preview-wrapper {
    position: absolute;
    top: 15px;
    right: 260px;
    width: 80px;
  }
  .button-item {
    border: 1px solid #009688;
    width: 100%;
    height: 25px;
    border-radius: 5px;
    background-color: #009688;
    color: #fff;
    text-align: center;
    line-height: 25px;
    cursor: pointer;
  }
}
</style>