<!DOCTYPE html>
<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="utf-8">
    <title>Liquor Tree: Basic Usage</title>
    <link rel="stylesheet" href="../assets/style.css">
    <script src="../assets/menu.js"></script>

    <!-- first import Vue -->
    <!-- <script src="https://unpkg.com/vue/dist/vue.js"></script> -->
    <script src="../assets/vue.js"></script>
    <script src="/liquor-tree.umd.js"></script>


    <style>
      .demo-tree {
        width: 50%;
      }

      .tree.tree-loading {
        width: 300px;
        height: 300px;
        background: #fff no-repeat url(/assets/img/loading.gif) center;
      }
    </style>
  </head>
  <body>
    <div class="hello">
      Basic Usage.
    </div>

    <div id="app">
      <div class="examples">
        <div class="example">
          <div class="example-description">
            <button @click="addRandomNode">Add Random Node</button>
            <button @click="exportTree">Export & Copy Tree Data -></button>
          </div>
          <div class="example-tree">
            <tree :data="treeData" ref="sourceTree" />
          </div>
        </div>

        <div class="example">
          <div class="example-description">
            Copied Tree from the right
          </div>
          <div class="example-tree">
            <tree ref="targetTree" />
          </div>
        </div>
      </div>
    </div>

    <script>
      let copyObject = obj => JSON.parse(JSON.stringify(obj))

      new Vue({
        el: '#app',
        data: () => ({
          treeData: getTreeData()
        }),

        methods: {
          exportTree() {
            let exportedTreeData = copyObject(
              this.$refs.sourceTree.toJSON()
            )

            let targetTree = this.$refs.targetTree.tree

            targetTree.setModel(exportedTreeData)
          },

          addRandomNode() {
            this.$refs.sourceTree.append(
              `New Node ${Math.random()}`
            )
          }
        }
      })

      function getTreeData() {
        return [{
            text: 'Item 1',
            state: {
              selected: true
            }
          },

          {
            text: 'Item 2',
            state: {
              expanded: true
            },
            children: [{
                text: '<b>Item 2.1</b>',
                state: {
                  checked: true
                }
              },
              {
                text: 'Item 2.2'
              },
              {
                text: 'Item 2.3',
                children: [{
                    text: 'Item 2.2.3.1'
                  },
                  {
                    text: 'Item 2.2.3.2'
                  },
                  {
                    text: 'Item 2.2.3.3'
                  },
                  {
                    text: 'Item 2.2.3.4',
                    children: [{
                        text: 'Item 2.2.3.4.1'
                      },
                      {
                        text: 'Item 2.2.3.4.2'
                      }
                    ]
                  }
                ]
              },
              {
                text: 'Item 2.4'
              }
            ]
          },

          {
            text: 'Item 3',
            state: {
              selected: true
            }
          },

          {
            text: 'Item 4'
          },

          {
            text: 'Item 5',
            state: {
              expanded: true,
              disabled: true
            },
            children: [{
                text: 'Item 5.1'
              },
              {
                text: 'Item 5.2'
              },
              {
                text: 'Item 5.3'
              }
            ]
          }
        ]
      }
    </script>

  </body>
</html>
