<template>
  <div class="app" style="height: 100vh">
    <vue-flow-editor
      ref="editor"
      modelWidth="30%"
      :data="state.data"
      :grid="showGrid"
      :miniMap="showMiniMap"
      :onRef="onRef"
      :multipleSelect="showMultipleSelect"
      :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" style=" margin-top: 4px;" />
            <span style="font-size: 12px; transform: scale(0.8); margin-top: 2px;">log数据</span>
          </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>

  <select-user-view
    :visible="state.dialogUserFormVisible"
    @close="onCloseUserView"
    @confirm="onConfirmUserView"
  />
</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";
import SelectUserView from "./selectUserView.vue";
import { Function } from 'lodash';
import { extend } from '@vue/shared';

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

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

interface myObj {
  source: string;
  id: string;
  label: 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 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"
        }
      },
      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
          }
        }
      ],
    });

    onMounted(() => {
      document.title = '可视化流程设计器';
    // // 显示提示框的标志位
    // 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;
    // });
    });

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

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

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

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


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

    let editor: { openModel: () => void; closeModel: () => void; updateModel: (arg0: any) => void; editorState: { graph: { 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: {} };

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

    /**
     * 双击连接线回调
     *
     * @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();
    }

    /**
     * Saves the changes made in the editor.
     *
     */
    function save() {
      editor.updateModel(state.detailModel);
      editor.closeModel();
    }

    /**
     * 删除前校验
     *
     * @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> {
      if (type === "node") {
        if (model.label === "开始") {
          state.editorLoading = true;
          await delay(1000);
          state.editorLoading = false;
          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 === "edge") {
        console.log("delete edge");
      } else {
        console.log("after delete", model.label, { ...model });
      }
    }

    /**
     * 添加前校验
     *
     * @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> {
      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");
            }
          }
        }
      }
    }

    /**
     * 添加后动作
     *
     * @param {model} model - The model being handled.
     * @param {type} type - The type of the event.
     */
    function handleAfterAdd(model: myObj, type: string) {
      if (type === "edge") {
        console.log(`新增连接线`);
      }
    }

    /**
     * 打印流程图数据结构
     *
     * @return {void} No return value.
     */
    function logData(): void {
      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, // 是否开启缩略图
      showMultipleSelect: true, // 编辑器是否可以多选

      onDblclickNode,
      onDblClickEdge,
      cancel,
      save,
      handleBeforeDelete,
      handleAfterDelete,
      handleBeforeAdd,
      handleAfterAdd,

      handleActiveChange,
      onAuthAllChange,
      onAuthAllEditChange,

      openUserForm,
      onCloseUserView,
      onConfirmUserView,

      logData,

      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; */
}
</style>