<script setup lang="ts">
// import { ContextMenu } from "@/types/components";
import { Subject } from "@/types/subject";
import { ref, PropType, toRaw, onMounted, watch } from "vue";
import { useRouter, useRoute } from 'vue-router'
import { isUndefined } from 'lodash'
import { SubjectStructure } from '@/constants/subject'
import useStructureRouter from "@/composables/useStructureRouter";

const props = defineProps({
  treeData: {
    type: Array as PropType<Subject.ISubjectTreeNode[]>,
    required: true,
  },
})

const router = useRouter()
const route = useRoute()

// 上下文菜单设置
const menuGroup: ContextMenu.MenuGroup[] = [
  [
    {
      text: '菜单项 1{%input[type=text][value=张三]%}行',
      icon: 'dsk-home-two-add',
      disable() {
        return false;
      },
      callback(inputVal: any) {
        console.log('回调', inputVal);
      },
    },
    {
      text: '菜单项 2',
      icon: 'dsk-file-addition-one',
      disable() {
        return Math.random() > 0.5;
      },
      callback() {
        return true;
      },
    },
    {
      text: '菜单项 3{%input[type=number][value=1][min=1][max=4]%}列',
      icon: 'dsk-edit',
      disable() {
        return false;
      },
      callback(inputVal: any) {
        console.log('回调', inputVal);
      },
    },
  ],
  [
    {
      text: '菜单项 4',
      hidden() {
        return Math.random() > 0.5;
      },
      disable() {
        return false;
      },
      callback() {
        console.log('callback');
      },
    },
    {
      text: '菜单项 5',
      disable() {
        return false;
      },
      submenu: [
        [
          {
            text: '菜单项 1',
            hidden() {
              return false;
            },
            disable() {
              return false;
            },
            callback() {
              console.log('callback');
            },
          },
          {
            text: '菜单项 2',
            icon: 'dsk-home-two-add',
            hidden() {
              return false;
            },
            disable() {
              return false;
            },
            callback() {
              console.log('callback');
            },
          },
        ],
        [
          {
            text: '菜单项 3',
            icon: 'dsk-home-two-add',
            hidden() {
              return false;
            },
            disable() {
              return true;
            },
            callback() {
              console.log('callback');
            },
          },
          {
            text: '菜单项 4',
            hidden() {
              return false;
            },
            disable() {
              return false;
            },
            submenu: [
              [
                {
                  text: '菜单项 1',
                  icon: 'dsk-home-two-add',
                  hidden() {
                    return false;
                  },
                  disable() {
                    return false;
                  },
                  submenu: [
                    [
                      {
                        text: '菜单项 1',
                        icon: 'dsk-home-two-add',
                        hidden() {
                          return false;
                        },
                        disable() {
                          return false;
                        }
                      },
                    ],
                  ],
                },
              ],
            ],
          },
        ],
      ],
    },
  ],
];

const loading = ref(false)

// el-tree 的最外层 dom
const $subjectTree = ref<HTMLElement | null>();
onMounted(() => {
  $subjectTree.value = document.getElementById('subject-tree');
});

// 当前选中的节点
const currentNodeKey = '1.1.1'

// 点击某个节点的事件
const handleNodeClick = (nodeData: Subject.ISubjectTreeNode) => {
  // 当出现上下文菜单时，单击其他节点，菜单消失
  if ($subjectTree.value) {
    $subjectTree.value.click();
  }

  console.log('当前节点的值：', toRaw(nodeData))
}

// 右键点击某个节点的事件
const handleNodeContextmenu = (event: MouseEvent, nodeData: Subject.ISubjectTreeNode) => {
  console.log('右键事件对象：', event)
  console.log('当前节点的值：', toRaw(nodeData))

  // 由于 el-tree 默认阻止 contextmenu 事件冒泡，所以此处重新派发一个事件
  const contextmenuEvent = new MouseEvent('contextmenu', {
    bubbles: true,
    clientX: event.clientX,
    clientY: event.clientY,
  });
  if ($subjectTree.value) {
    $subjectTree.value.dispatchEvent(contextmenuEvent);
  }
}

const structure = useStructureRouter()
// 监听 structure 改变
watch(structure, val => {
  console.log('subject tree 结构', val)
})

</script>

<template>
  <section class="subject-tree-wrap">
    <ul class="tabs">
      <li
        class="tab"
        :class="{ active: route.query.structure !== SubjectStructure.ARRANGE }"
        @click="router.push({ name: 'Summary' })"
      >原始结构</li>
      <li
        class="tab"
        :class="{ active: route.query.structure === SubjectStructure.ARRANGE }"
        @click="router.push({ name: 'Summary', query: { structure: 'arrange' } })"
      >整理结构</li>
    </ul>
    <div class="tree-wrap">
      <context-menu :item-groups="menuGroup" ref="contextMenuRef" auto-size>
        <el-tree
          class="subject-tree"
          id="subject-tree"
          v-loading="loading"
          icon-class="el-icon-arrow-right"
          :data="treeData"
          default-expand-all
          :expand-on-click-node="false"
          node-key="id"
          highlight-current
          :current-node-key="currentNodeKey"
          @node-click="handleNodeClick"
          @node-contextmenu="handleNodeContextmenu"
          ref="treeRef"
        >
          <template #default="{ data }">
            <span class="custom-tree-node">
              <iconfont class="subject-icon" :class="data.icon" />
              <span class="text-wrap">
                <i class="text" :title="data.label">{{ data.label }}</i>
              </span>
            </span>
          </template>
        </el-tree>
      </context-menu>
    </div>
  </section>
</template>

<style lang="scss" src="./style.scss" scoped></style>
