<template>
  <div class="app" style="height: 100vh">
    <vue-flow-editor
      ref="editor"
      menuWidth="200px"
      modelWidth="300px"
      :data="state.data"
      :grid="showGrid"
      :miniMap="showMiniMap"
      :onRef="onRef"
      :multipleSelect="showMultipleSelect"
      :loading="state.editorLoading"
      :beforeDelete="handleBeforeDelete"
      :afterDelete="handleAfterDelete"
      :beforeAdd="handleBeforeAdd"
      :afterAdd="handleAfterAdd"
      @click-canvas="onClickCanvas"
      @dragend-node="onDragEndNode"
      @click-node="onClickNode"
      @click-edge="onClickEdge"
      @dblclick-node="onDblClickNode"
      @dblclick-edge="onDblClickEdge"
      :controlConfig="state.controlConfig"
      :toolbarButtonHandler="toolbarButtonHandler"
    >
      <!-- :activityConfig="state.activityConfig" -->
      <!-- 左侧菜单 -->
      <template v-slot:menu>
        <!-- <vue-flow-edit-menu-group label="活动节点" value>
          <vue-flow-edit-menu
            v-for="(value, key) in state.activityConfig"
            :key="key"
            :model="{ activity: key, text: value.text, desc: value.desc }"
          >
            <template v-slot:content>
              <div class="activity-menu">
                <img :src="value.img" />
                <span>{{ value.text }}</span>
              </div>
            </template>
          </vue-flow-edit-menu>
        </vue-flow-edit-menu-group> -->
        <vue-flow-edit-menu-group label="操作节点" value>
          <!-- 注意 key 值的绑定 -->
          <vue-flow-edit-menu
            v-for="(value, key) in state.controlConfig"
            :key="key"
            :model="{ control: key, text: value.text, desc: value.desc }"
          >
            <template v-slot:content>
              <div class="activity-menu">
                <img :src="value.img" />
                <span>{{ value.text }}</span>
              </div>
            </template>
          </vue-flow-edit-menu>
        </vue-flow-edit-menu-group>
        <!-- <vue-flow-edit-menu-group
          v-for="(group, groupIndex) in state.menuData"
          :label="group.label"
          :key="groupIndex"
          :value="true"
        >
          <vue-flow-edit-menu
            v-for="(menu, menuIndex) in group.menus"
            :key="menuIndex"
            :model="menu"
          />
        </vue-flow-edit-menu-group> -->
      </template>
      <!-- 右侧表单 -->
      <template v-slot:model>
        <el-form
          v-if="!!state.detailModel"
          ref="formRef"
          :model="state.detailModel"
          label-position="top"
          label-width="100px"
        >
          <!-- <template v-if="state.detailModel.activity === undefined"> -->
            <el-tabs
              v-model="state.activeName"
              class=""
              @tab-change="handleActiveChange"
              stretch
            >
              <el-tab-pane label="节点属性" name="node" style="padding: 0 1rem">
                <div v-if="state.main_attr_set" class="main-attr-set">
                  <el-form-item prop="label">
                    <div slot="label">
                      节点名称 <span style="color: red;">*</span>
                    </div>
                    <el-input v-model="state.node_name" />
                  </el-form-item>
                  <div class="node-user">
                    <div style="font-size: 14px; margin-bottom: 10px;">
                      节点负责人 <span style="color: red;">*</span>
                    </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;"
                      >
                        {{ tag.name }}
                      </el-tag>
                      <div v-else class="text-empty">请选择成员</div>
                    </div>
                  </div>
                  <el-form-item prop="attr">
                    <el-radio-group
                      v-model="state.attr_radio"
                      size="large"
                      class="attr-radio-group"
                    >
                      <el-radio-button label="基础属性" />
                      <el-radio-button label="更多属性" />
                    </el-radio-group>
                  </el-form-item>
                  <el-form-item v-if="state.attr_radio === '基础属性'" prop="">
                    <div slot="label">
                      <div style="display: flex; align-items: center; justify-content: space-between;width:266px; margin-bottom: 15px;">
                        <div>
                          字段权限 <span style="color: red;">*</span>
                        </div>
                        <div>
                          <el-input v-model="state.search_auth_value" @input="onSearchAuthInput" size="small" placeholder="搜索" />
                        </div>
                      </div>
                    </div>
                    <el-row
                      style="width: 100%; background-color: #f0f1f4; padding-left: 10px;"
                    >
                      <el-col :span="12">字段</el-col>
                      <el-col :span="6">可见</el-col>
                      <el-col :span="6">可编辑</el-col>
                    </el-row>
                    <el-row v-if="!state.search_auth_value" style="width: 100%; padding-left: 10px;">
                      <el-col :span="12" style="color: #409eff;">全选</el-col>
                      <el-col :span="6" style="padding-left: 5px;"
                        ><el-checkbox
                          @change="onAuthAllChange"
                          v-model="state.auth_all_checked"
                          label=""
                          size="large"
                      /></el-col>
                      <el-col :span="6" style="padding-left: 5px;"
                        ><el-checkbox
                          @change="onAuthAllEditChange"
                          v-model="state.auth_all_edit"
                          label=""
                          size="large"
                      /></el-col>
                    </el-row>
                    <el-row
                      v-for="(field, index) in state.field_auths"
                      :key="index"
                      style="width: 100%; padding-left: 10px;"
                      >
                      <el-col v-if="field.show" :span="12">{{ field.name }}</el-col>
                      <el-col v-if="field.show" :span="6" style="padding-left: 5px;"
                        ><el-checkbox
                          v-model="field.visible.checked"
                          :disabled="field.visible.disabled"
                          label=""
                          size="large"
                          @change="onAuthVisibleChange(field, index)"
                      /></el-col>
                      <el-col v-if="field.show" :span="6" style="padding-left: 5px;"
                        ><el-checkbox
                          v-model="field.editable.checked"
                          :disabled="field.editable.disabled"
                          label=""
                          size="large"
                          @change="onAuthEditableChange(field, index)"
                      /></el-col>
                    </el-row>
                  </el-form-item>
                  <div v-if="state.attr_radio === '更多属性'">
                    <div class="more-attr">
                      <div
                        v-for="(attr, index) in state.more_attr"
                        :key="index"
                        class="more-attr-item"
                      >
                        <div style="display: flex; align-items: center;">
                          <p class="title">{{ attr.label }}</p>&nbsp;
                          <el-tooltip
                            class="box-item"
                            :content="attr.desc"
                            placement="top"
                          >
                            <el-icon><InfoFilled color="#b5b8be" /></el-icon>
                          </el-tooltip>
                        </div>
                        <div
                          v-for="(item, idx) in attr.data"
                          :key="idx"
                          class="content"
                        >
                          <div v-if="item.btnText" class="left">
                            <span v-if="item.label === item.btnText">{{ item.label }}</span>
                            <span v-else>
                              {{ item.btnText }} <span style="color: #838892;">| 原名：{{ item.label }}</span>
                            </span>
                          </div>
                          <div v-else class="left">
                            <span>
                              {{ item.label }}
                            </span>
                          </div>
                          <div :class="['right', item.show ? 'active' : '']">{{ item.show? '已开启' : '未开启' }}</div>
                          <div class="btn-action" @click="setMoreAttr(attr, idx)">
                            <el-icon :size="14"><Edit /></el-icon>&nbsp;<span>编辑</span>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div v-else class="more-attr-set">
                  <el-button @click="onConfirmMoreAttr(state.more_attr_data)" type="primary" style="width: 100%;">完成</el-button>
                  <div class="more-attr-switch">
                    <div class="more-attr-title">{{ state.more_attr_data.label }}</div>
                    <div><el-switch v-model="state.more_attr_data.show" /></div>
                  </div>
                  <p class="more-attr-tip">{{ state.more_attr_data.desc }}</p>
                  <div v-if="state.more_attr_data.btnText">
                    <p style="font-size: 14px; font-weight: bold;">按钮文字</p>
                    <el-input v-model="state.more_attr_data.btnText" />
                  </div>
                </div>
              </el-tab-pane>
              <!-- <el-tab-pane label="流程属性" name="flow" style="padding: 0 1rem">
                <el-form-item prop="label">
                  <div slot="label">
                    测试属性 <span style="color: red;">*</span>
                  </div>
                  <el-input v-model="state.detailModel.data.test" />
                </el-form-item>
              </el-tab-pane> -->
            </el-tabs>
            <!-- <template v-if="state.detailModel.type !== 'edge'">
              <el-form-item label="节点背景色" prop="style.fill">
                <el-color-picker v-model="state.detailModel.style.fill" />
              </el-form-item>
              <el-form-item label="节点边框色" prop="style.stroke">
                <el-color-picker v-model="state.detailModel.style.stroke" />
              </el-form-item>
              <el-form-item label="节点文字色" prop="labelCfg.style.stroke">
                <el-color-picker
                  v-model="state.detailModel.labelCfg.style.fill"
                />
              </el-form-item>
            </template> -->
            <!-- <div style="margin-left: 20px;">
              <el-button type="primary" @click="openUserForm">
                设置人员配置
              </el-button>
            </div> -->
          <!-- </template> -->
          <!-- <template v-else> -->
            <!-- <el-form-item label="活动标题">
              <el-input v-model="state.detailModel.text" />
            </el-form-item>
            <el-form-item label="活动副标题">
              <el-input v-model="state.detailModel.desc" />
            </el-form-item> -->
            <!-- <el-form-item label="活动类型">
              <el-select v-model="state.detailModel.activity">
                <el-option
                  v-for="(value, key) in state.activityConfig"
                  :key="key"
                  :label="value.text"
                  :value="key"
                />
              </el-select>
            </el-form-item> -->
          <!-- </template> -->
        </el-form>
      </template>
      <!-- 工具栏 -->
      <template v-slot:toolbar>
        <el-tooltip content="复制节点">
          <div :class="['vue-flow-editor-toolbar-item', state.detailModel ? '' : 'vue-flow-editor-toolbar-item-disabled']" @click="copyData">
            <i class="el-icon-coin" style=" margin-top: 4px;" />
            <span style="font-size: 12px; transform: scale(0.8); margin-top: 2px;">复制</span>
          </div>
        </el-tooltip>
        <el-tooltip content="保存流程图数据">
          <div class="vue-flow-editor-toolbar-item" @click="saveData">
            <i class="el-icon-coin" style=" margin-top: 4px;" />
            <span style="font-size: 12px; transform: scale(0.8); margin-top: 2px;">保存流程</span>
          </div>
        </el-tooltip>
        <!-- <el-tooltip content="启用流程图数据">
          <div class="vue-flow-editor-toolbar-item" @click="startFlow">
            <i class="el-icon-check" style=" margin-top: 4px;" />
            <span style="font-size: 12px; transform: scale(0.8); margin-top: 2px;">启用</span>
          </div>
        </el-tooltip> -->
      </template>
      <!-- 表单底部按钮 -->
      <template v-slot:foot>
        <div v-if="state.main_attr_set" style="width: 100%; text-align: center;">
          <el-button type="primary" @click="saveForm" style="width: 40%;">保存</el-button>
          <el-button @click="cancel" style="width: 40%;">关闭</el-button>
        </div>
      </template>
    </vue-flow-editor>
  </div>

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

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

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

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

interface RuleForm {
  label: string
}

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

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

export default {
  components: {
    Calendar,
    Search,
    SelectUserView,
  },
  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状态
      selectOptions: [
        { label: '待确认', value: '0' },
        { label: '填写表单', value: '1' },
        { label: '部门负责人审批', value: '2' },
        { label: '总经理审批', value: '3' },
      ],
      menuData: [
        {
          label: '流程节点',
          menus: [
            { label: '开始', shape: 'ellipse', id: 'start-node' },
            { label: '结束', shape: 'ellipse', id: 'end-node' },
            { label: '审批节点', busType: '123' },
            { label: '判断节点', shape: 'diamond' },
          ],
        },
        {
          label: '其他形状节点',
          menus: [
            { label: '矩形节点', shape: 'rect' },
            { label: '圆形节点', shape: 'circle' },
            { label: '椭圆节点', shape: 'ellipse' },
            { label: '菱形节点', shape: 'diamond' },
            { label: '三角形节点', shape: 'triangle' },
            { label: '星形节点', shape: 'star' },
          ],
        },
      ],
      // activityConfig: {
      //   advertisement: {
      //     text: "广告宣传1",
      //     desc: "通过广告宣传新品",
      //     color: "#9283ed",
      //     img: "https://cdn.ipadbiz.cn/oa/advertisement-node.svg"
      //   },
      //   coupon: {
      //     text: "优惠券",
      //     desc: "发放奖励优惠券",
      //     color: "#ed8383",
      //     img: "https://cdn.ipadbiz.cn/oa/coupon-node.svg"
      //   },
      //   crowd: {
      //     text: "用户反馈",
      //     desc: "收集用户反馈信息",
      //     color: "#92dba8",
      //     img: "https://cdn.ipadbiz.cn/oa/crowd-node.svg"
      //   }
      // },
      controlConfig: {
        start: {
          id: 'start-node',
          text: '开始',
          desc: '开始',
          color: '#9283ed',
          img: 'https://cdn.ipadbiz.cn/oa/advertisement-node.svg',
        },
        flow: {
          text: '流程节点',
          desc: '流程节点',
          color: '#ed8383',
          img: 'https://cdn.ipadbiz.cn/oa/coupon-node.svg',
        },
        cc: {
          text: '抄送节点',
          desc: '抄送节点',
          color: '#ed8383',
          img: 'https://cdn.ipadbiz.cn/oa/coupon-node.svg',
        },
        end: {
          id: 'end-node',
          text: '结束',
          desc: '结束',
          color: '#92dba8',
          img: 'https://cdn.ipadbiz.cn/oa/crowd-node.svg',
        },
      },
      search_auth_value: '',
      dialogUserFormVisible: false,
      activeName: 'node',
      attr_radio: '基础属性',
      main_attr_set: true,
      more_attr_switch: false,
      more_attr: [], // 更多属性
      more_attr_data: {
        label: '',
        show: false,
        desc: '',
        btnText: '',
      },
      node_name: '', // 节点名称
      userTags: [ // 节点负责人
        { id: "user-1-1", name: "用户1-1" }
      ],
      auth_all_checked: false,
      auth_all_edit: false,
      field_auths: [ // 字段权限
        {
          name: '字段1',
          visible: {
            checked: false,
            disabled: true,
          },
          editable: {
            checked: false,
            disabled: true,
          },
          show: true,
        },
        {
          name: '字段2',
          visible: {
            checked: true,
            disabled: false,
          },
          editable: {
            checked: false,
            disabled: false,
          },
          show: true,
        },
        {
          name: '字段3',
          visible: {
            checked: true,
            disabled: false,
          },
          editable: {
            checked: false,
            disabled: false,
          },
          show: true,
        },
      ],
    })

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

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

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

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

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

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

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

    const onCloseUserView = (status: boolean) => {
      state.dialogUserFormVisible = status
    }
    const onConfirmUserView = (data: any) => {
      state.userTags = data;
      console.log(data)
    }
    /******************* END *******************/

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

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

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

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

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

    }

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

      model.data = model.data ? model.data : {};
      // 查询节点的属性
      // 节点名称 state.node_name，节点负责人 state.userTags，基础属性 state.field_auths，更多属性 state.more_attr
      console.warn('节点名称', state.node_name);
      console.warn('节点负责人', state.userTags);
      console.warn('基础属性', state.field_auths);
      console.warn('更多属性', state.more_attr); // 非结束节点才显示

      state.detailModel = model

      // 判断是否是流程节点
      let model_id = model.id
      if (model_id!== 'end-node') {
        state.detailModel = model;
        // 获取节点名称
        state.node_name = state.detailModel.text;
        // 检查字段权限选中情况
        checkAuthAll('visible');
        checkAuthAll('editable');
        // TODO: 需要处理更多属性数据，节点类型是抄送时不显示节点操作
        state.more_attr = [ // 更多属性
          {
            id: 'no-1',
            label: '审批意见',
            desc: '开启审批意见后，节点负责人处理流程时须按要求填写审批意见',
            data: [
              {
                id: 'text-1',
                label: '文本意见',
                show: true,
                desc: '用户在处理流程时，可通过输入框或快捷选项录入文本意见。',
                btnText: '',
              },
              {
                id: 'signature-1',
                label: '手写签名',
                show: false,
                desc: '用户在处理流程时，需要签名确认。',
                btnText: ''
              },
            ]
          },
          {
            id: 'no-2',
            label: '节点操作',
            desc: '定义流程负责人在处理流程时可以进行的操作',
            data: [
              {
                id: 'node-1',
                label: '提交',
                show: true,
                desc: '用户在处理流程时点击此按钮，将保存用户在此节点中对数据的更改，流程数据流转至后续节点。',
                btnText: '提交'
              },
              {
                id: 'node-2',
                label: '暂存',
                show: false,
                desc: '暂存后将保存在此节点中对数据的更改，流程不发生流转。',
                btnText: '暂存'
              },
              {
                id: 'node-3',
                label: '撤回',
                show: false,
                desc: '开启后，用户在处理流程时点击此按钮，将保存用户在此节点中对数据的更改，同时流程退回到指定的节点中。',
                btnText: '撤回'
              },
              {
                id: 'node-4',
                label: '回退',
                show: false,
                desc: '开启后，用户在处理流程时点击此按钮，将保存用户在此节点中对数据的更改，同时流程退回到指定的节点中。',
                btnText: '回退'
              },
            ],
          }
        ];
        if (state.detailModel.control === 'cc') {
          state.more_attr = state.more_attr.filter((ele: any) => {
            return ele.label !== '节点操作'
          });
        }
        // 打开属性表单
        state.attr_radio = '基础属性'; // 还原tab默认值
        editor.openModel();
      } else {
        editor.closeModel()
      }
    }

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

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

      state.detailModel = model
      editor.openModel()
    }

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

    const setMoreAttr = (attr: any, index: any) => { // 打开更多属性细节回调
      state.main_attr_set = false;
      state.more_attr_data = attr['data'][index]; // 同步数据
    }
    const onConfirmMoreAttr = (item: any) => { // 保存更多属性细节回调
      state.main_attr_set = true;
    }

    /**
     * 保存表单信息
     *
     */
    async function saveForm() {
      // if (!formRef.value) return
      // await formRef.value.validate((valid) => {
      //   if (!valid) {
      //     return false
      //   }
      // })
      state.detailModel.text = state.node_name
      // state.detailModel.label = state.node_name
      // 更新流程图信息
      editor.updateModel(state.detailModel)
      // editor.closeModel()
      console.log('节点名称', state.node_name)
      console.log('节点负责人', state.userTags)
      console.log('字段权限', state.field_auths)
      console.log('更多属性', state.more_attr)
    }

    /**
     * 删除前校验
     *
     * @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 => edge.source === 'start-node'); // 连接到开始节点连接线的数量
      let end_edge_count = edges.filter(edge => edge.target === 'end-node'); // 连接到结束节点连接线的数量
      // 不可以删除开始与结束连接线
      let node_id = model.id;
      for (let index = 0; index < edges.length; index++) {
        const element = edges[index]
        if(
          (element.target === node_id && element.source === 'start-node' && start_edge_count.length === 1) ||
          (element.source === node_id && element.target === 'end-node' && end_edge_count.length === 1)
          )
        {
          ElNotification.error('不可以删除【开始】与【结束】连接线')
          return Promise.reject('reject')
        }
      }
      if (type === 'node') {
        if (model.id === 'start-node') {
          // state.editorLoading = true
          // await delay(1000)
          // state.editorLoading = false
          ElNotification.error('不可以删除【开始】节点')
          return Promise.reject('reject')
        }
        if (model.id === 'end-node') {
          ElNotification.error('不可以删除【结束】节点')
          return Promise.reject('reject')
        }
        // 流程图中必须有一个流程节点
        let is_flow_node = nodes.filter(node => node.control === 'flow' || node.control === 'cc');
        if (is_flow_node.length === 1) {
          ElNotification.error('流程图中必须有一个流程节点')
          return Promise.reject('reject')
        }
      }
      if (type === 'edge') {
        if (model.source === 'start-node' && start_edge_count.length === 1) {
          ElNotification.error('不可以删除【开始】连接线')
          return Promise.reject('reject')
        }
        if (model.target === 'end-node' && end_edge_count.length === 1) {
          ElNotification.error('不可以删除【结束】连接线')
          return Promise.reject('reject')
        }
      }
    }

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

        // TODO: 测试更新ID, 需要在添加前更新ID，不然会导致添加连接线时ID不一致。
        model.id = String(new Date().getTime());
        editor.updateModel(model);
        state.data.nodes = editor.editorState.graph.save().nodes
      }
    }

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

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

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

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

    /**
     * 保存流程图数据
     *
     * @return {void} No return value.
     */
    function saveData(): void {
      let { nodes, edges } = editor.editorState.graph.save()
      // console.log("nodes", nodes);
      // console.log("edges", edges);
      // 使用时需要把自定义节点的类型带过去 activity/control
      nodes.forEach((node: { [x: string]: string; shape: string }) => {
        // if (node.shape === 'activity') {
        //   node['shape'] = 'activity_' + node['activity']
        // }
        if (node.shape === 'control') {
          // node['shape'] = 'control_' + node['control']
          node['control'] = node['control']
        }
      })

      nodes = nodes.map(
        ({ data, id, label, shape, x, y, text, desc, img, control }) => ({
          data,
          id,
          label,
          shape,
          x,
          y,
          text,
          desc,
          img,
          control,
        }),
      )
      edges = edges.map(({ source, sourceAnchor, target, targetAnchor }) => ({
        source,
        sourceAnchor,
        target,
        targetAnchor,
      }))
      // console.log(JSON.stringify({ nodes, edges }, null, 2));

      ElMessageBox.confirm(
        '是否确定保存流程图?',
        '温馨提示',
        {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning',
        }
      )
        .then(() => {
          // 检查路径有效性
          // let { edges } = editor.editorState.graph.save()
          const paths = [];
          findPathsToEndNode(edges, 'start-node', [], paths);
          console.log(paths); // 输出满足条件的路径结果数组
          if (paths.length) {
            ElMessage({
              type: 'success',
              message: '保存流程图成功',
            });
          } else {
            ElNotification.error('缺少一条从开始节点到结束节点的完整流程！');
          }
        })
        .catch(() => {
        });
    }

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

    }

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

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

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

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

    return {
      state,
      rules,
      formRef,

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

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

      handleActiveChange,
      onAuthVisibleChange,
      onAuthEditableChange,
      onAuthAllChange,
      onAuthAllEditChange,
      onSearchAuthInput,

      openUserForm,
      onCloseUserView,
      onConfirmUserView,

      copyData,
      saveData,
      startFlow,
      toolbarButtonHandler,

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

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

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

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

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

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

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

.more-attr {
  .more-attr-item {
    .title {
      font-size: 14px;
      color: #000;
      font-weight: bold;
    }
    .content {
      font-size: 14px;
      background: #f0f1f4;
      border: 1px solid #e6e8ed;
      border-radius: 2px;
      padding: 10px;
      position: relative;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 5px;
      /* .left {
      }
      .right {
      } */
      .active {
        color: #409eff;
      }
    }
    .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;
  }
}
</style>