<template>
  <div class="exam-tree">
    <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
    <div>
      <div style="width:840px; margin: 0 auto;">
        <div style="width:49%; display:inline-block; vertical-align: top;">
          <p style="text-align:left">Search Text <input type="text" @keyup="inputKeyUp" v-model="searchText" /></p>
          <sdl-tree
            :data="data"
            :showCheckbox="false"
            :item-events="itemEvents"
            show-checkbox
            :multiple="false"
            allow-batch
            whole-row
            draggable
            @item-click="itemClick"
            @item-drag-start="itemDragStart"
            @item-drag-end="itemDragEnd"
            @item-drop-before="itemDropBefore"
            @item-drop="itemDrop"
            ref="tree"
          >
          </sdl-tree>
          <br />
          <span id="drag-me" style="float: left; background-color: red; color: #fff; padding: 6px" draggable="true">
            drag me to add new child !
          </span>
        </div>
        <div style="width:50%; display:inline-block;">
          <textarea style="height:300px; width:100%;" v-model="data"> </textarea>
        </div>
      </div>
    </div>
    <h2>Edit Tree</h2>
    <h3 style="color: red;">click the tree node</h3>
    <div>
      <div style="width:840px; height:300px; margin: 0 auto;">
        <table>
          <tr>
            <td>
              text
            </td>
            <td>
              <input v-model="editingItem.text" />
            </td>
          </tr>
          <tr>
            <td>
              value
            </td>
            <td>
              <input v-model="editingItem.value" />
            </td>
          </tr>
          <tr>
            <td>
              icon
            </td>
            <td>
              <input v-model="editingItem.icon" />
            </td>
          </tr>
          <tr>
            <td>
              opened
            </td>
            <td>
              <input type="checkbox" v-model="editingItem.opened" />
            </td>
          </tr>
          <tr>
            <td>
              selected
            </td>
            <td>
              <input type="checkbox" v-model="editingItem.selected" />
            </td>
          </tr>
          <tr>
            <td>
              disabled
            </td>
            <td>
              <input type="checkbox" v-model="editingItem.disabled" />
            </td>
          </tr>
          <tr>
            <td colspan="2">
              <button @click="addChildNode">add child node</button>
              <button @click="removeNode">remove this node</button>
              <button @click="addBeforeNode">add child before node</button>
              <button @click="addAfterNode">add child after node</button>
              <button @click="openChildren">open child node</button>
              <button @click="closeChildren">close child node</button>
            </td>
          </tr>
        </table>
      </div>
    </div>
    <h2>Async Loading</h2>
    <div>
      <div style="width:840px; margin: 0 auto;">
        <div style="width:49%; display:inline-block; vertical-align: top;">
          <tree
            :data="asyncData"
            :async="loadData"
            show-checkbox
            multiple
            allow-batch
            whole-row
            @item-click="itemClick"
            ref="tree2"
          ></tree>
        </div>
        <div style="width:50%; display:inline-block; vertical-align: top;">
          <textarea style="height:300px; width:100%;" v-model="asyncData"> </textarea>
        </div>
      </div>
    </div>
    <h2>Async Operation</h2>
    <div>
      <div style="width:840px; margin: 0 auto; height: 300px;">
        <button @click="refreshNode">
          refreshAsyncNode
        </button>
      </div>
    </div>
    <h2>Custom Tree Item</h2>
    <div>
      <div style="width:840px; margin: 0 auto;">
        <div style="width:49%; display:inline-block; vertical-align: top;">
          <tree
            :data="data"
            :item-events="itemEvents"
            show-checkbox
            multiple
            allow-batch
            whole-row
            draggable
            @item-click="itemClick"
            @item-drag-start="itemDragStart"
            @item-drag-end="itemDragEnd"
            @item-drop-before="itemDropBefore"
            @item-drop="itemDrop"
          >
            <template v-slot="_">
              <div style="display: inherit; width: 200px" @click.ctrl="customItemClickWithCtrl">
                <i :class="_.vm.themeIconClasses" role="presentation" v-if="!_.model.loading"></i>
                {{ _.model.text }}
                <button
                  style="border: 0px; background-color: transparent; cursor: pointer;"
                  @click="customItemClick(_.vm, _.model, $event)"
                >
                  <i class="fa fa-remove"></i>
                </button>
              </div>
            </template>
          </tree>
        </div>
        <div style="width:50%; display:inline-block;">
          <textarea style="height:300px; width:100%;" v-model="data"> </textarea>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Tree from '@/components/common/control/tree';
import SDLUtil from '@/utils/SDLUtil';

export default {
  data() {
    return {
      msg: 'A Tree Plugin For Vue2',
      searchText: '',
      editingItem: {},
      editingNode: null,
      itemEvents: {
        mouseover() {
          console.log('mouseover');
        },
        contextmenu() {
          // console.log(arguments[2]);
          // eslint-disable-next-line prefer-rest-params
          arguments[2].preventDefault();
          console.log('contextmenu');
        },
      },
      data: [
        {
          text: 'Same but with checkboxes1',
          children: [
            {
              text: 'initially selected',
              selected: false,
            },
            {
              text: 'custom icon',
              icon: 'fa fa-warning icon-state-danger',
            },
            {
              text: 'initially open',
              icon: 'fa fa-folder icon-state-default',
              opened: false,
              children: [
                {
                  text: 'Another node',
                },
              ],
            },
            {
              text: 'custom icon',
              icon: 'fa fa-warning icon-state-warning',
            },
            {
              text: 'disabled node',
              icon: 'fa fa-check icon-state-success',
              disabled: true,
            },
          ],
        },
        {
          text: 'Same but with checkboxes2',
          opened: false,
          children: [
            {
              text: 'initially selected',
              selected: false,
            },
            {
              text: 'custom icon',
              icon: 'fa fa-warning icon-state-danger',
            },
            {
              text: 'initially open',
              icon: 'fa fa-folder icon-state-default',
              opened: true,
              children: [
                {
                  text: 'Another node',
                },
              ],
            },
            {
              text: 'custom icon',
              icon: 'fa fa-warning icon-state-warning',
            },
            {
              text: 'disabled node',
              icon: 'fa fa-check icon-state-success',
              disabled: true,
            },
          ],
        },
        {
          text: 'Same but with checkboxes3',
          opened: false,
          children: [
            {
              text: 'initially selected',
              selected: false,
            },
            {
              text: 'custom icon',
              icon: 'fa fa-warning icon-state-danger',
            },
            {
              text: 'initially open',
              icon: 'fa fa-folder icon-state-default',
              opened: true,
              children: [
                {
                  text: 'Another node',
                },
              ],
            },
            {
              text: 'custom icon',
              icon: 'fa fa-warning icon-state-warning',
            },
            {
              text: 'disabled node',
              icon: 'fa fa-check icon-state-success',
              disabled: true,
            },
          ],
        },
        {
          text: 'And wholerow selection',
        },
        {
          text: 'drag disabled',
          icon: 'fa fa-warning icon-state-danger',
          dragDisabled: true,
        },
        {
          text: 'drop disabled',
          icon: 'fa fa-warning icon-state-danger',
          dropDisabled: true,
        },
        {
          text: 'Same but with checkboxes4',
          children: [
            {
              text: 'initially selected',
              selected: false,
            },
            {
              text: 'custom icon',
              icon: 'fa fa-warning icon-state-danger',
            },
            {
              text: 'initially open',
              icon: 'fa fa-folder icon-state-default',
              opened: false,
              children: [
                {
                  text: 'Another node',
                },
              ],
            },
            {
              text: 'custom icon',
              icon: 'fa fa-warning icon-state-warning',
            },
            {
              text: 'disabled node',
              icon: 'fa fa-check icon-state-success',
              disabled: true,
            },
          ],
        },
      ],
      data2: [
        {
          text2: 'Same but with checkboxes',
          children2: [
            {
              text2: 'initially selected',
              selected: true,
            },
            {
              text2: 'custom icon',
              icon: 'fa fa-warning icon-state-danger',
            },
            {
              text2: 'initially open',
              icon: 'fa fa-folder icon-state-default',
              opened: true,
              children2: [
                {
                  text2: 'Another node',
                },
              ],
            },
            {
              text2: 'custom icon',
              icon: 'fa fa-warning icon-state-warning',
            },
            {
              text2: 'disabled node',
              icon: 'fa fa-check icon-state-success',
              disabled: true,
            },
          ],
        },
        {
          text2: 'Same but with checkboxes',
          opened: true,
          children2: [
            {
              text2: 'initially selected',
              selected: true,
            },
            {
              text2: 'custom icon',
              icon: 'fa fa-warning icon-state-danger',
            },
            {
              text2: 'initially open',
              icon: 'fa fa-folder icon-state-default',
              opened: true,
              children2: [
                {
                  text2: 'Another node',
                },
              ],
            },
            {
              text2: 'custom icon',
              icon: 'fa fa-warning icon-state-warning',
            },
            {
              text2: 'disabled node',
              icon: 'fa fa-check icon-state-success',
              disabled: true,
            },
          ],
        },
        {
          text2: 'And wholerow selection',
        },
      ],
      asyncData: [],
      loadData(oriNode, resolve) {
        const id = oriNode.data.id ? oriNode.data.id : 0;
        setTimeout(() => {
          let data = [];
          if (id > 200) {
            data = [];
          } else {
            data = [
              {
                text: `New Item 1...${id}`,
                isLeaf: id > 100,
              },
              {
                text: `New Item 2...${id}`,
                isLeaf: id > 100,
              },
            ];
          }
          resolve(data);
        }, 500);
      },
    };
  },
  methods: {
    fileUpload(rtnFiles) {
      console.log('rtnFiles:', rtnFiles);
    },
    itemClick(node) {
      this.editingNode = node;
      this.editingItem = node.model;
      console.log(`${node.model.text} clicked !`);
    },
    itemDragStart(node) {
      console.log(`${node.model.text} drag start !`);
    },
    itemDragEnd(node) {
      console.log(`${node.model.text} drag end !`);
    },
    itemDropBefore(node, item, draggedItem) {
      if (!draggedItem) {
        item.addChild({
          text: 'newNode',
          value: 'newNode',
        });
      }
    },
    itemDrop(node, item, draggedItem) {
      console.log(item, draggedItem);
      /*
      const sortBy = (attr, rev) => {
        if (rev === undefined) {
          rev = 1;
        } else {
          rev = rev ? 1 : -1;
        }
        return (a, b) => {
          a = a[attr];
          b = b[attr];
          if (a < b) {
            return rev * -1;
          }
          if (a > b) {
            return rev * 1;
          }
          return 0;
        };
      };
      item.children.sort(sortBy('text', true));
      this.$refs.tree.handleRecursionNodeChildren(draggedItem, childrenItem => {
        childrenItem.selected = item.selected;
      });
      console.log(`${node.model.text} drop !`);
       */
    },
    inputKeyUp() {
      const text = this.searchText;
      const patt = new RegExp(text);
      this.$refs.tree.handleRecursionNodeChilds(this.$refs.tree, node => {
        if (text !== '' && node.model !== undefined) {
          const str = node.model.text;
          if (patt.test(str)) {
            node.$el.querySelector('.tree-anchor').style.color = 'red';
          } else {
            node.$el.querySelector('.tree-anchor').style.color = '#000';
          } // or other operations
        } else {
          node.$el.querySelector('.tree-anchor').style.color = '#000';
        }
      });
    },
    addChildNode() {
      if (this.editingItem.id !== undefined) {
        this.editingItem.addChild({
          text: 'newNode',
          value: 'newNode',
        });
      }
    },
    removeNode() {
      if (this.editingItem.id !== undefined) {
        const index = this.editingNode.parentItem.indexOf(this.editingItem);
        this.editingNode.parentItem.splice(index, 1);
      }
    },
    addBeforeNode() {
      SDLUtil.showLoadingBar(true);
      if (this.editingItem.id !== undefined) {
        this.editingItem.addBefore(
          {
            text: 'newNode',
            value: 'newNode',
          },
          this.editingNode,
        );
      }
    },
    addAfterNode() {
      if (this.editingItem.id !== undefined) {
        this.editingItem.addAfter(
          {
            text: 'newNode',
            value: 'newNode',
          },
          this.editingNode,
        );
      }
    },
    openChildren() {
      if (this.editingItem.id !== undefined) {
        this.editingItem.openChildren();
      }
    },
    closeChildren() {
      if (this.editingItem.id !== undefined) {
        this.editingItem.closeChildren();
      }
    },
    refreshNode() {
      this.asyncData = [this.$refs.tree2.initializeLoading()];
      this.$refs.tree2.handleAsyncLoad(this.asyncData, this.$refs.tree2);
    },
    customItemClick(node, item, e) {
      e.stopPropagation();
      const index = node.parentItem.indexOf(item);
      node.parentItem.splice(index, 1);
    },
    customItemClickWithCtrl() {
      console.log('click + ctrl');
    },
  },
  computed: {},
  components: {
    Tree,
  },
};
</script>
<style scoped>
.exam-tree {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

h1,
h2 {
  font-weight: normal;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}

div {
  display: block;
}

table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #eee;
  font-size: 14px;
}

table th {
  background: #eee;
  border-bottom: 1px solid #ccc;
  padding: 4px;
}

table td {
  border: 1px solid #eee;
  padding: 4px;
}
.icon-state-default {
  color: gray;
}
.icon-state-danger {
  color: red;
}
.icon-state-warning {
  color: yellow;
}
.icon-state-success {
  color: green;
}
</style>
