<template>
  <div class="ui--content-wrapper">
    <sdl-breadcrumb></sdl-breadcrumb>
    <div>title:{{ }}<div id="tree"></div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'formula/fmTree', // keep-alive를 위해 필수!
}
</script>
<script setup>
import { ref, onMounted } from 'vue';
//import StoreParams from '@/mixin/StoreParams';
onMounted(() => {
  //console.log('this.$route',this.$route.meta.menuId);
  $('#tree').fancytree({
    extensions: ["dnd5"],
    checkbox: true,
    selectMode: 3,
    source: [
      // Typically we would load using ajax instead...
      { title: 'Node 1' },
      { title: 'Node 2' },
      {
        title: 'Folder 3',
        folder: true,
        expanded: true,
        children: [
          { title: 'Node 3.1', key: 'id3.1' },
          { title: 'Node 3.2', selected: true },
        ],
      },
      {
        title: 'Folder 4',
        folder: true,
        children: [{ title: 'Node 4.1' }, { title: 'Node 4.2' }],
      },
    ],
    activate: function (event, data) {
      $('#statusLine').text(event.type + ': ' + data.node);
    },
    select: function (event, data) {
      $('#statusLine').text(
        event.type + ': ' + data.node.isSelected() + ' ' + data.node
      );
    },
  });
});
</script>

<style>
.fancytree-container {
  outline: none;
}

span.drag-source {
  border: 1px solid grey;
  border-radius: 3px;
  padding: 2px;
  background-color: silver;
}

ul.fancytree-container {
  max-height: 200px;
  overflow-y: scroll;
  width: 48%;
  display: inline-block;
}

#tree ul.fancytree-container {
  float: left;
}

span.fancytree-node.fancytree-drag-source {
  outline: 1px dotted grey;
}

span.fancytree-node.fancytree-drop-accept {
  outline: 1px dotted green;
}

span.fancytree-node.fancytree-drop-reject {
  outline: 1px dotted red;
}

span.trashcan {
  border: 1px solid #f5c6cb;
  background-color: #f8d7da;
  color: #721c24;
  padding: 1px 3px;
}
</style>