<template>
  <div class="app" style="height: 100vh">
    <vue-flow-editor
      ref="editor"
      modelWidth="30%"
      :data="state.data"
      :grid="showGrid"
      :miniMap="showMiniMap"
      :onRef="onRef"
      :multipleSelect="true"
      :loading="state.editorLoading"
      :beforeDelete="handleBeforeDelete"
      :afterDelete="handleAfterDelete"
      :beforeAdd="handleBeforeAdd"
      :afterAdd="handleAfterAdd"
      @dblclick-node="onDblclickNode"
      @dblclick-edge="onDblClickEdge"
      :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
          v-for="(group, groupIndex) in state.menuData"
          :label="group.label"
          :key="groupIndex"
          value
        >
          <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="form"
          :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">
                <el-form-item prop="label">
                  <div slot="label">
                    节点名称 <span style="color: red;">*</span>
                  </div>
                  <el-input v-model="state.detailModel.label" />
                </el-form-item>
                <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">
                    字段权限 <span style="color: red;">*</span>
                  </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 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 :span="12" style="">{{ field.name }}</el-col>
                    <el-col :span="6" style="padding-left: 5px;"
                      ><el-checkbox
                        v-model="field.visible.checked"
                        :disabled="field.visible.disabled"
                        label=""
                        size="large"
                    /></el-col>
                    <el-col :span="6" style="padding-left: 5px;"
                      ><el-checkbox
                        v-model="field.editable.checked"
                        :disabled="field.editable.disabled"
                        label=""
                        size="large"
                    /></el-col>
                  </el-row>
                </el-form-item>
              </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" @click="logData">
            <i class="el-icon-search" />
          </div>
        </el-tooltip>
      </template>

      <template v-slot:foot>
        <el-button type="primary" @click="save">保存</el-button>
        <el-button @click="cancel">取消</el-button>
      </template>
    </vue-flow-editor>
  </div>

  <el-dialog v-model="state.dialogUserFormVisible" title="成员列表">
    <div style="border: 1px dashed #DCDFE6; padding: 10px;">
      <el-tag
        v-for="tag in state.userTags"
        :key="tag.name"
        class=""
        style="margin-left: 0.25rem; margin-right: 0.25rem;"
        closable
        @close="handleTagClose(tag)"
      >
        {{ tag.name }}
      </el-tag>
    </div>
    <div style="border: 1px solid #DCDFE6; padding: 10px; margin-top: 10px;">
      <div style="height: 40px">
        <div style="padding: 0; position: relative; margin: 0 0 15px;">
          <div v-if="!state.is_active_search">
            <div class="flow-tabs__nav-wrap">
              <div class="flow-tabs__nav-scroll">
                <div class="flow-tabs__nav is-top">
                  <div
                    ref_key="barRef"
                    class="flow-tabs__active-bar"
                    :style="{
                      width: state.tabTextWidth,
                      transform: 'translateX' + '(' + state.tabOffset + ')'
                    }"
                  ></div>
                  <div
                    v-for="(item, index) in state.userTabs"
                    :key="index"
                    :class="[
                      'flow-tabs__item',
                      'is-top',
                      item.id === state.activeTabId ? 'is-active' : ''
                    ]"
                    :id="item.id"
                    @click="handleTabClick(item, $event, index)"
                  >
                    {{ item.label }}
                  </div>
                </div>
              </div>
            </div>
            <div class="flow-tab-search" @click="activeSearchBtn">
              <el-icon :size="15"><Search /></el-icon> &nbsp;搜索框
            </div>
          </div>
          <div v-else>
            <el-input
              v-model="state.search_input"
              class="search-btn-wrapper"
              placeholder="请输入关键字"
            >
              <template #prefix>
                <el-icon class="el-input__icon"><search /></el-icon>
              </template>
              <template #append>
                <div class="search-group">
                  <div class="confirm-btn" @click="onSearch">搜索</div>
                  <div class="cancel-btn" @click="onClearSearch">取消</div>
                </div>
              </template>
            </el-input>
          </div>
        </div>
      </div>
      <!-- 未激活搜索框 -->
      <div v-if="!state.is_active_search">
        <div v-for="(item, index) in state.userTabs" :key="index">
          <div v-if="item.id === state.activeTabId && item.type === 'tree'">
            <el-row>
              <el-col :span="8">
                <el-tree
                  :data="item.data"
                  :props="state.defaultProps"
                  empty-text="暂无数据"
                  @node-click="handleNodeClick"
                />
              </el-col>
              <el-col :span="16">
                <div
                  style="border-left: 2px solid #e4e7ed; width: 2px; height: 100%; padding-left: 10px;"
                >
                  <el-checkbox-group
                    class="flow-checkbox-group"
                    v-model="state.checkedUserList"
                  >
                    <el-checkbox
                      v-for="(user, idx) in state.userList"
                      :key="idx"
                      :label="user.id"
                      :disabled="user.disabled"
                      @change="handleCheckedUserListChange(user, $event)"
                      >{{ user.label }}</el-checkbox
                    >
                  </el-checkbox-group>
                </div>
              </el-col>
            </el-row>
          </div>
          <div v-if="item.id === state.activeTabId && item.type === 'list'">
            <el-tabs
              tab-position="left"
              style=""
              class="demo-tabs"
              v-model="activeTabContent"
              @tab-click="handleTabContentClick"
            >
              <el-tab-pane
                v-for="(role, idx) in item.data"
                :key="idx"
                :label="role.label"
              >
                <el-checkbox-group
                  class="flow-checkbox-group"
                  v-model="state.checkedUserList"
                >
                  <el-checkbox
                    v-for="(user, idx) in state.userList"
                    :key="idx"
                    :label="user.id"
                    :disabled="user.disabled"
                    @change="handleCheckedUserListChange(user, $event)"
                    >{{ user.label }}</el-checkbox
                  >
                </el-checkbox-group>
              </el-tab-pane>
            </el-tabs>
          </div>
        </div>
      </div>
      <!-- 激活搜索框 -->
      <div v-else>
        <el-checkbox-group
          class="flow-checkbox-group"
          style="padding-left: 10px;"
          v-model="state.checkedSearchUserList"
        >
          <el-checkbox
            v-for="(user, idx) in state.searchUserList"
            :key="idx"
            :label="user.id"
            :disabled="user.disabled"
            @change="handleCheckedUserListChange(user, $event)"
            >{{ user.label }}</el-checkbox
          >
        </el-checkbox-group>
      </div>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="closeUserForm">取消</el-button>
        <el-button type="primary" @click="confirmUserForm">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts">
import { reactive, onMounted, watch, nextTick } from "vue";
import { AppData } from "./data.js";
import { staticPath } from "./utils";
import { ElNotification } from "element-plus";
import axios from "./axios";
import $ from "jquery";
import { Calendar, Search } from "@element-plus/icons-vue";

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

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

export default {
  setup(props, context) {
    const state = reactive({
      data: AppData,
      detailModel: null,
      editorLoading: false,
      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"
        }
      },
      dialogUserFormVisible: false,
      activeName: "node",
      attr_radio: "基础属性",
      auth_all_checked: false,
      auth_all_edit: false,
      field_auths: [
        {
          name: "字段1",
          visible: {
            checked: true,
            disabled: false
          },
          editable: {
            checked: false,
            disabled: true
          }
        },
        {
          name: "字段2",
          visible: {
            checked: true,
            disabled: false
          },
          editable: {
            checked: false,
            disabled: false
          }
        },
        {
          name: "字段3",
          visible: {
            checked: true,
            disabled: false
          },
          editable: {
            checked: false,
            disabled: false
          }
        }
      ],
      userTags: [],
      activeTabId: "tab-1", // TODO: 需要获取默认第一个ID
      userTabs: [],
      tabSelectData: [],
      userTabType: "tree",
      tabOffset: "0px",
      tabTextWidth: "76px", // 文字宽度需要打开弹框时重新计算
      is_active_search: false,
      search_input: "",
      userList: [],
      checkedUserList: [],
      searchUserList: [], // 搜索框 选中 用户ID
      checkedSearchUserList: [],
      defaultProps: {
        children: "children",
        label: "label"
      }
    });

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

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

    const openUserForm = () => {
      state.dialogUserFormVisible = true;
      // TODO:查询到的用户列表数据
      state.userTabs = [
        {
          id: "tab-1",
          label: "组织架构",
          type: "tree",
          data: [
            {
              id: "dept-1",
              label: "上级部门 1",
              children: [
                {
                  id: "dept-1-1",
                  label: "部门名称 1-1",
                  children: [],
                  list: [
                    {
                      id: "user-1-1",
                      label: "用户1-1",
                      checked: true,
                      disabled: false
                    },
                    {
                      id: "user-1-2",
                      label: "用户1-2",
                      checked: false,
                      disabled: false
                    },
                    {
                      id: "user-1-3",
                      label: "用户1-3",
                      checked: false,
                      disabled: true
                    }
                  ]
                }
              ]
            },
            {
              id: "dept-2",
              label: "上级部门 2",
              children: [
                {
                  id: "dept-2-1",
                  label: "部门名称 2-1",
                  children: [],
                  list: [
                    {
                      id: "user-2-1",
                      label: "用户2-1",
                      checked: false,
                      disabled: false
                    },
                    {
                      id: "user-2-2",
                      label: "用户2-2",
                      checked: false,
                      disabled: false
                    },
                    {
                      id: "user-2-3",
                      label: "用户2-3",
                      checked: false,
                      disabled: true
                    }
                  ]
                }
              ]
            }
          ]
        },
        {
          id: "tab-2",
          label: "角色",
          type: "list",
          data: [
            {
              id: "role-1-1",
              label: "流程发起人",
              children: [],
              list: [
                {
                  id: "role-1-2",
                  label: "选项 A",
                  checked: false,
                  disabled: false
                },
                {
                  id: "role-1-3",
                  label: "选项 B",
                  checked: true,
                  disabled: false
                },
                {
                  id: "role-1-4",
                  label: "选项 C",
                  checked: false,
                  disabled: true
                }
              ]
            },
            {
              id: "role-1-2",
              label: "成员字段",
              children: [],
              list: []
            },
            {
              id: "role-1-3",
              label: "部门字段",
              children: [],
              list: []
            },
            {
              id: "role-1-4",
              label: "主管",
              children: [],
              list: []
            }
          ]
        }
      ]
    };

    const handleTabClick = (tab, event, idx) => {
      // 点击Tab切换回调
      state.tabSelectData = tab.data; // tab选中数据提供给list类型使用
      state.userList = []; // 清空用户列表
      state.checkedUserList = []; // 清空选中用户列表
      // console.log(tab, event);
      // 设置当前激活的tab
      state.userTabType = tab.type;
      state.activeTabId = tab.id;
      // 子容器相对于父容器的相对x轴位移, 第一项为0
      if (idx) {
        state.tabOffset = $("#" + tab.id).position().left + 20 + "px";
      } else {
        state.tabOffset = "0px";
      }
      // 文字宽度
      state.tabTextWidth = $("#" + tab.id).width() + "px";
      // 检查列表第一项是否有值
      if (tab?.data[0]?.list) {
        let list = tab.data[0].list;
        state.userList = list;
        state.checkedUserList = list
          .filter(ele => {
            return ele.checked;
          })
          .map(ele => {
            return ele.id;
          });
      }
    };

    const handleTabContentClick = (tab, event) => {
      // 侧边栏Tab点击回调
      // console.log(event);
      state.tabSelectData.forEach(ele => {
        if (ele.label === tab.props.label) {
          state.userList = ele.list;
          state.checkedUserList = ele.list
            .filter(ele => {
              return ele.checked;
            })
            .map(ele => {
              return ele.id;
            });
        }
      });
    };

    const handleNodeClick = data => {
      // console.log(data);
      if (data.list) {
        state.userList = data.list;
        state.checkedUserList = data.list
          .filter(ele => {
            return ele.checked;
          })
          .map(ele => {
            return ele.id;
          });
        // console.warn(state.checkedUserList);
      }
    };

    function modifyFieldValue(obj, fieldName, targetValue, newValue) {
      // 遍历相应ID修改选中值
      // 检查当前层级的字段值是否匹配目标值
      if (obj[fieldName] === targetValue) {
        obj["checked"] = newValue;
      }

      // 遍历当前层级的子项（如果有）
      for (var key in obj) {
        if (typeof obj[key] === "object" && obj[key] !== null) {
          modifyFieldValue(obj[key], fieldName, targetValue, newValue);
        }
      }
    }

    const handleCheckedUserListChange = (user, checked) => {
      // 勾选用户回调
      // 修改选中值状态
      modifyFieldValue(state.userTabs, "id", user.id, checked);
    };

    function getAllListItems(arr) {
      // 遍历递归获取list下面的数据
      var result = [];

      function recursiveGetListItems(subArr) {
        for (var i = 0; i < subArr.length; i++) {
          var item = subArr[i];
          if (item.list && Array.isArray(item.list)) {
            result = result.concat(item.list);
          }
          if (item.children && Array.isArray(item.children)) {
            recursiveGetListItems(item.children);
          }
        }
      }

      recursiveGetListItems(arr);
      return result;
    }

    const setTagsList = val => {
      let userList = [];
      val.forEach(ele => {
        let data = getAllListItems(ele.data);
        userList.push(data);
      });
      // 合并成一维数组列表
      userList = [...userList.flat()];
      // 勾选变化后同步到选中列表
      state.userTags = userList
        .filter(ele => {
          return ele.checked;
        })
        .map(ele => {
          return {
            id: ele.id,
            name: ele.label
          };
        });
    };

    // 监听数据结构选中值变化
    watch(
      () => state.userTabs,
      val => {
        if (val) {
          // 设置tag选中列表
          setTagsList(val);
        }
      },
      { deep: true }
    );

    const handleTagClose = tag => {
      // 移除成员标签回调
      state.userTags.splice(state.userTags.indexOf(tag), 1); // 删除标签列表中的项
      // 移除数据结构中的选中值
      modifyFieldValue(state.userTabs, "id", tag.id, false);
      //
      let tagsId = state.userTags.map(ele => {
        return ele.id;
      });
      // console.warn(tagsId);
      // 获取tags中已删除的, 勾选列表中还勾选的值
      let result = state.checkedUserList.filter(
        value => !tagsId.includes(value)
      );
      // 选中列表中不存在勾选列表中项时，需要删除勾选列表中的项
      if (result.length) {
        result.forEach(ele => {
          state.checkedUserList.splice(state.checkedUserList.indexOf(ele), 1);
        });
      }
      // console.log(result);
      // console.log(state.userTags);
      // console.log(state.checkedUserList);
    };

    const closeUserForm = () => {
      // 关闭用户列表表单回调
      state.dialogUserFormVisible = false;
    };
    const confirmUserForm = () => {
      // 确认用户列表表单回调
      state.dialogUserFormVisible = false;
      console.log(state.userTags);
    };

    const activeSearchBtn = () => {
      state.is_active_search = !state.is_active_search;
      state.searchUserList = [];
    };

    const checkSearchStatus = () => {
      // 在搜索框中同步显示tag框选中的用户
      state.userTags.forEach(ele => {
        state.searchUserList.forEach(item => {
          if (ele.id === item.id) {
            item.checked = true;
          }
        });
      });
      // 显示选中tags的用户
      state.checkedSearchUserList = state.searchUserList
        .filter(ele => ele.checked)
        .map(ele => ele.id);
    };

    const onClearSearch = () => {
      // 清空搜索回调
      state.is_active_search = !state.is_active_search;
    };
    const onSearch = () => {
      // TODO: 搜索回调
      state.searchUserList = [
        {
          id: "user-1-1",
          label: "用户1-1",
          checked: true,
          disabled: false
        },
        {
          id: "user-1-2",
          label: "用户1-2",
          checked: false,
          disabled: false
        },
        {
          id: "user-1-3",
          label: "用户1-3",
          checked: false,
          disabled: true
        },
        {
          id: "role-1-2",
          label: "选项 A",
          checked: false,
          disabled: false
        },
        {
          id: "role-1-3",
          label: "选项 B",
          checked: true,
          disabled: false
        },
        {
          id: "role-1-4",
          label: "选项 C",
          checked: false,
          disabled: true
        }
      ];
      // console.log(state.userTags);
      checkSearchStatus();
    };

    onMounted(() => {
      // // 显示提示框的标志位
      // var showConfirmation = true;
      // // 监听 beforeunload 事件
      // window.addEventListener('beforeunload', function (event) {
      //   if (showConfirmation) {
      //     // 取消事件的默认行为（弹出确认对话框）
      //     event.preventDefault();
      //     // Chrome 和 Firefox 需要返回一个值以显示确认对话框
      //     event.returnValue = '';
      //     // 显示自定义的提示信息
      //     var confirmationMessage = '确定要离开此页面吗？';
      //     (event || window.event).returnValue = confirmationMessage;  // 兼容旧版浏览器
      //     return confirmationMessage;
      //   }
      // });
      // // 监听 unload 事件
      // window.addEventListener('unload', function () {
      //   // 设置标志位为 false，避免在刷新页面时再次显示提示框
      //   showConfirmation = false;
      // });
      // axios.get('/srv/?a=query_form_all_field')
      // .then(res => {
      //   console.warn(res.data);
      // });
      // $('.el-tabs__nav')
      // 根据数据获取选中的tag标签
      setTagsList(state.userTabs);
    });

    watch(
      () => state.dialogUserFormVisible,
      val => {
        if (val) {
          nextTick(() => {
            state.tabTextWidth = $("#" + state.activeTabId).width() + "px";
          });
        }
      }
    );

    let editor;

    function onDblclickNode(e) {
      const model = G6.Util.clone(e.item.get("model"));
      model.style = model.style || {};
      model.labelCfg = model.labelCfg || { style: {} };

      state.detailModel = model;
      editor.openModel();
    }

    function onDblClickEdge(e) {
      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();
    }

    function cancel() {
      editor.closeModel();
    }

    function save() {
      editor.updateModel(state.detailModel);
      editor.closeModel();
    }

    async function handleBeforeDelete(model, type) {
      if (type === "node") {
        if (model.label === "开始") {
          state.editorLoading = true;
          await delay(1000);
          state.editorLoading = false;
          ElNotification.error("不可以删除【开始】节点");
          return Promise.reject("reject");
        }
      }
    }

    function handleAfterDelete(model, type) {
      if (type === "edge") {
        console.log("delete edge");
      } else {
        console.log("after delete", model.label, { ...model });
      }
    }

    function handleBeforeAdd(model, type) {
      if (type === "edge") {
        if (model.source === "end-node") {
          ElNotification.error("结束节点不能输出连线其他节点");
          return Promise.reject("reject");
        }
      }
      if (type === "node") {
        if (model.id === "start-node" || model.id === "end-node") {
          const data = editor.editorState.graph.save();
          for (let i = 0; i < data.nodes.length; i++) {
            const node = data.nodes[i];
            if (node.id === model.id) {
              ElNotification.error(
                `只能有一个${model.id === "start-node" ? "开始" : "结束"}节点`
              );
              return Promise.reject("reject");
            }
          }
        }
      }
    }

    function handleAfterAdd(model, type) {
      if (type === "edge") {
        console.log(`新增连接线`);
      }
    }

    function logData() {
      let { nodes, edges } = editor.editorState.graph.save();
      nodes = nodes.map(
        ({ data, id, label, shape, x, y, text, desc, img }) => ({
          data,
          id,
          label,
          shape,
          x,
          y,
          text,
          desc,
          img
        })
      );
      edges = edges.map(({ source, sourceAnchor, target, targetAnchor }) => ({
        source,
        sourceAnchor,
        target,
        targetAnchor
      }));
      console.log(JSON.stringify({ nodes, edges }, null, 2));
    }

    return {
      state,

      showGrid: true,
      showMiniMap: true,

      onDblclickNode,
      onDblClickEdge,
      cancel,
      save,
      handleBeforeDelete,
      handleAfterDelete,
      handleBeforeAdd,
      handleAfterAdd,
      handleActiveChange,
      onAuthAllChange,
      onAuthAllEditChange,
      handleTabClick,
      handleTabContentClick,
      handleNodeClick,
      handleTagClose,
      closeUserForm,
      confirmUserForm,
      handleCheckedUserListChange,
      onSearch,
      onClearSearch,
      activeSearchBtn,
      openUserForm,

      logData,

      onRef: e => (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-tabs__nav-wrap {
  overflow: hidden;
  margin-bottom: -1px;
  position: relative;
}
.flow-tabs__nav-wrap::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background-color: #e4e7ed;
  /* z-index: 1; */
}

.flow-tabs__nav-scroll {
  /* overflow: hidden; */
  overflow: scroll;
}

.flow-tabs__active-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  background-color: #409eff;
  z-index: 1;
  transition: width 0.3s cubic-bezier(0.645, 0.045, 0.355, 1),
    transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  list-style: none;
}

.flow-tabs__nav {
  display: flex;
  white-space: nowrap;
  position: relative;
  transition: transformX(0px);
  float: left;
  .flow-tabs__item {
    padding: 0 20px;
    height: 40px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    list-style: none;
    font-size: 14px;
    font-weight: 500;
    color: #303133;
    position: relative;
    &:hover {
      color: #409eff;
      cursor: pointer;
    }
    &.is-active {
      color: #409eff;
    }
    &.is-top:nth-child(2) {
      padding-left: 0;
    }
  }
}

.flow-tab-search {
  position: absolute;
  top: 0;
  right: 0;
  width: 100px;
  display: flex;
  align-items: center;
  background-color: #e4e7ed;
  padding: 5px 5px 5px 15px;
  border-radius: 15px;
  color: #b1b3b8;
  &:hover {
    cursor: pointer;
  }
}

.flow-checkbox-group {
  .el-checkbox {
    display: flex !important;
  }
}

.search-btn-wrapper {
  .el-input-group__append {
    width: 100px !important;
    padding: 0 !important;
  }
  .search-group {
    display: flex;
    text-align: center;
    .confirm-btn {
      width: 50px;
      color: #fff;
      background-color: #409eff;
      &:hover {
        cursor: pointer;
      }
    }
    .cancel-btn {
      width: 50px;
      &:hover {
        cursor: pointer;
      }
    }
  }
}
</style>