<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"
      @click-canvas="onClickCanvas"
      @dragend-node="onDragEndNode"
      @click-node="onClickNode"
      @dblclick-node="onDblClickNode"
      @dblclick-edge="onDblClickEdge"
      :controlConfig="state.controlConfig"
      :toolbarButtonHandler="toolbarButtonHandler"
    >
      <!-- :activityConfig="state.activityConfig" -->
      <!--  @click-node="onClickNode" -->
      <!-- 左侧菜单 -->
      <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"
          :rules="rules"
          :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.node_name" />
                </el-form-item>
                <div>
                  <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-left: 0.25rem; margin-right: 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">
                    字段权限 <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="saveForm">保存</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 { ref, 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'
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',
        },
        end: {
          id: 'end-node',
          text: '结束',
          desc: '结束',
          color: '#92dba8',
          img: 'https://cdn.ipadbiz.cn/oa/crowd-node.svg',
        },
      },
      dialogUserFormVisible: false,
      activeName: 'node',
      attr_radio: '基础属性',
      node_name: '', // 节点名称
      userTags: [ // 节点负责人
        { id: "user-1-1", name: "用户1-1" }
      ],
      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: {
          removeItem: any
          save: () => { nodes: any; edges: any }
        }
      }
    }

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

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

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

    }

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

      model.data = model.data ? model.data : {}
      state.detailModel = model

      // 判断是否是流程节点
      let model_id = model.id
      if (model_id !== 'start-node' && model_id!== 'end-node') {
        state.detailModel = model
        editor.openModel()
      } else {
        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()
    }

    /**
     * 保存表单信息
     *
     */
    async function saveForm() {
      // if (!formRef.value) return
      // await formRef.value.validate((valid) => {
      //   if (!valid) {
      //     return false
      //   }
      // })
      // editor.updateModel(state.detailModel)
      // editor.closeModel()
      console.log(state.node_name)
      console.log(state.userTags)
      console.log(state.field_auths)
    }

    /**
     * 删除前校验
     *
     * @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> {
      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 (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')
            }
          }
        }
      }
    }

    /**
     * 添加后动作
     *
     * @param {model} model - The model being handled.
     * @param {type} type - The type of the event.
     */
    function handleAfterAdd(model: myObj, type: string) {
      // console.log('handleAfterAdd', model);

      // TODO: 因为resize会重新绘制，所以可能需要保存操作
      if (type === 'node') {
        console.log(`新增节点`)
      }
      if (type === 'edge') {
        console.log(`新增连接线`)
      }

      state.data.nodes = editor.editorState.graph.save().nodes
      state.data.edges = editor.editorState.graph.save().edges
    }

    function onClickCanvas(e: myEvent) {
      console.log('单击画布');
      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)
    }

    /**
     * 打印流程图数据结构
     *
     * @return {void} No return value.
     */
    function logData(): 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));
      console.log(nodes)
      console.log(edges)
    }

    /**
     * 格式化工具栏按钮
     *
     * @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')
      return map
    }

    return {
      state,
      rules,
      formRef,

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

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

      handleActiveChange,
      onAuthAllChange,
      onAuthAllEditChange,

      openUserForm,
      onCloseUserView,
      onConfirmUserView,

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