<template>
   <div :id="id">
      <ul>
         <li>
            <p>基础用法</p>
            <poi-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></poi-tree>
         </li>
         <li>
            <p>可选择</p>
            <poi-tree
               :props="props"
               :load="loadNode"
               lazy
               show-checkbox
               @check-change="handleCheckChange">
            </poi-tree>
         </li>
         <li>
            <p>懒加载自定义叶子节点</p>
            <poi-tree
               :props="props"
               :load="loadNode2"
               lazy
               show-checkbox>
            </poi-tree>
         </li>
         <li>
            <p>默认展开和默认选中&&禁用状态</p>
            <poi-tree
               :data="data2"
               show-checkbox
               node-key="id"
               :default-expanded-keys="[2, 3]"
               :default-checked-keys="[5,6]"
               :props="defaultProps">
            </poi-tree>
         </li>
         <li>
            <p>树节点的选择</p>   
            <poi-tree
               :data="data2"
               show-checkbox
               default-expand-all
               node-key="id"
               ref="tree"
               highlight-current
               :props="defaultProps">
            </poi-tree>

            <div class="buttons mt15">
               <poi-button @click="getCheckedNodes">通过 node 获取</poi-button>
               <poi-button @click="getCheckedKeys">通过 key 获取</poi-button>
               <poi-button @click="setCheckedNodes">通过 node 设置</poi-button>
               <poi-button @click="setCheckedKeys">通过 key 设置</poi-button>
               <poi-button @click="resetChecked">清空</poi-button>
            </div>
         </li> 
         <li>
            <p>自定义节点内容</p>
            <div  class="custom-tree-container">
               <div class="block">
                  <p>使用 render-content</p>
                  <poi-tree
                     :data="data3"
                     show-checkbox
                     node-key="id"
                     default-expand-all
                     :expand-on-click-node="false"
                     :render-content="renderContent">
                  </poi-tree>
               </div>
               <div class="block">
                  <p>使用 scoped slot</p>
                  <poi-tree
                     :data="data4"
                     show-checkbox
                     node-key="id"
                     default-expand-all
                     :expand-on-click-node="false">
                     <span class="custom-tree-node" slot-scope="{ node, data }">
                        <span>{{ node.label }}</span>
                        <span>
                           <poi-button
                              type="text"
                              size="mini"
                              @click="() => append(data)">
                              Append
                           </poi-button>
                           <poi-button
                              type="text"
                              size="mini"
                              @click="() => remove(node, data)">
                              Delete
                           </poi-button>
                        </span>
                     </span>
                  </poi-tree>
               </div>
            </div>
         </li>

         <li>
            <p>节点过滤</p>
            <poi-input
               size="medium"
               style="width:300px"
               placeholder="输入关键字进行过滤"
               v-model="filterText">
            </poi-input>

            <poi-tree
               class="filter-tree"
               :data="data3"
               :props="defaultProps"
               default-expand-all
               :filter-node-method="filterNode"
               ref="tree">
            </poi-tree>
         </li>

         <li>
            <p>手风琴模式</p>
            <poi-tree
               :data="data"
               :props="defaultProps"
               accordion
               @node-click="handleNodeClick">
            </poi-tree>
         </li>
         <li>
            <p>可拖拽节点</p>
            <poi-tree
               :data="data3"
               node-key="id"
               default-expand-all
               @node-drag-start="handleDragStart"
               @node-drag-enter="handleDragEnter"
               @node-drag-leave="handleDragLeave"
               @node-drag-over="handleDragOver"
               @node-drag-end="handleDragEnd"
               @node-drop="handleDrop"
               draggable
               :allow-drop="allowDrop"
               :allow-drag="allowDrag">
            </poi-tree>

         </li>
      </ul>
   </div>
</template>
<script>
let id = 1000;
export default {
   data(){
      const data3 = [{
         id: 1,
         label: '一级 1',
         children: [{
            id: 4,
            label: '二级 1-1',
            children: [{
               id: 9,
               label: '三级 1-1-1'
            }, {
               id: 10,
               label: '三级 1-1-2'
            }]
         }]
         }, {
         id: 2,
         label: '一级 2',
         children: [{
            id: 5,
            label: '二级 2-1'
         }, {
            id: 6,
            label: '二级 2-2'
         }]
         }, {
         id: 3,
         label: '一级 3',
         children: [{
            id: 7,
            label: '二级 3-1'
         }, {
            id: 8,
            label: '二级 3-2'
         }]
      }];
      return{
         id:'treeText',
         data: [{
               label: '一级 1',
               children: [{
                  label: '二级 1-1',
                  children: [{
                  label: '三级 1-1-1'
                  }]
               }]
            }, {
               label: '一级 2',
               children: [{
                  label: '二级 2-1',
                  children: [{
                  label: '三级 2-1-1'
                  }]
               }, {
                  label: '二级 2-2',
                  children: [{
                  label: '三级 2-2-1'
                  }]
               }]
            }, {
               label: '一级 3',
               children: [{
                  label: '二级 3-1',
                  children: [{
                  label: '三级 3-1-1'
                  }]
               }, {
                  label: '二级 3-2',
                  children: [{
                  label: '三级 3-2-1'
                  }]
               }]
         }],
         data2: [{
               id: 1,
               label: '一级 1',
               children: [{
                  id: 4,
                  label: '二级 1-1',
                  children: [{
                     id: 9,
                     label: '三级 1-1-1',
                     disabled: true
                  }, {
                  id: 10,
                  label: '三级 1-1-2'
                  }]
               }]
            }, {
               id: 2,
               label: '一级 2',
               children: [{
                  id: 5,
                  label: '二级 2-1',
               }, {
                  id: 6,
                  label: '二级 2-2',
                  disabled: true
                  
               }]
            }, {
               id: 3,
               label: '一级 3',
               children: [{
                  id: 7,
                  label: '二级 3-1',
               disabled: true
               }, {
                  id: 8,
                  label: '二级 3-2'
               }]
         }],
         data3: JSON.parse(JSON.stringify(data3)),
         data4: JSON.parse(JSON.stringify(data3)),

         defaultProps: {
            children: 'children',
            label: 'label'
         },

         props: {
            label: 'name',
            children: 'zones',
            isLeaf: 'leaf'
         },
         count: 1,
         filterText:'',
         
         
      };
   },
   
   watch: {
      filterText(val) {
         this.$refs.tree.filter(val);
      }
   },
   methods: {
      handleNodeClick(data) {
         console.log(data);
      },
      handleCheckChange(data, checked, indeterminate) {
        console.log(data, checked, indeterminate);
      },
      loadNode(node, resolve) {
        if (node.level === 0) {
          return resolve([{ name: 'region1' }, { name: 'region2' }]);
        }
        if (node.level > 3) return resolve([]);

        var hasChild;
        if (node.data.name === 'region1') {
          hasChild = true;
        } else if (node.data.name === 'region2') {
          hasChild = false;
        } else {
          hasChild = Math.random() > 0.5;
        }

        setTimeout(() => {
          var data;
          if (hasChild) {
            data = [{
              name: 'zone' + this.count++
            }, {
              name: 'zone' + this.count++
            }];
          } else {
            data = [];
          }

          resolve(data);
        }, 500);
      },

      loadNode2(node, resolve) {
        if (node.level === 0) {
          return resolve([{ name: 'region' }]);
        }
        if (node.level > 1) return resolve([]);

        setTimeout(() => {
          const data = [{
            name: 'leaf',
            leaf: true
          }, {
            name: 'zone'
          }];

          resolve(data);
        }, 500);
      
      },

      //树节点的选择
      getCheckedNodes() {
        console.log(this.$refs.tree.getCheckedNodes());
      },
      getCheckedKeys() {
        console.log(this.$refs.tree.getCheckedKeys());
      },
      setCheckedNodes() {
        this.$refs.tree.setCheckedNodes([{
          id: 5,
          label: '二级 2-1'
        }, {
          id: 9,
          label: '三级 1-1-1'
        }]);
      },
      setCheckedKeys() {
        this.$refs.tree.setCheckedKeys([3]);
      },
      resetChecked() {
        this.$refs.tree.setCheckedKeys([]);
      },
      
      append(data) {
        const newChild = { id: id++, label: 'testtest', children: [] };
        if (!data.children) {
          this.$set(data, 'children', []);
        }
        data.children.push(newChild);
      },
      remove(node, data) {
        const parent = node.parent;
        const children = parent.data.children || parent.data;
        const index = children.findIndex(d => d.id === data.id);
        children.splice(index, 1);
      },
      renderContent(h, { node, data, store }) {
        return (
          <span class="custom-tree-node">
            <span>{node.label}</span>
            <span>
              <poi-button size="mini" type="text" on-click={ () => this.append(data) }>Append</poi-button>
              <poi-button size="mini" type="text" on-click={ () => this.remove(node, data) }>Delete</poi-button>
            </span>
          </span>);
      },
      
      filterNode(value, data) {
        if (!value) return true;
        return data.label.indexOf(value) !== -1;
      },

      //可拖拽节点
      handleDragStart(node, ev) {
        console.log('drag start', node);
      },
      handleDragEnter(draggingNode, dropNode, ev) {
        console.log('tree drag enter: ', dropNode.label);
      },
      handleDragLeave(draggingNode, dropNode, ev) {
        console.log('tree drag leave: ', dropNode.label);
      },
      handleDragOver(draggingNode, dropNode, ev) {
        console.log('tree drag over: ', dropNode.label);
      },
      handleDragEnd(draggingNode, dropNode, dropType, ev) {
        console.log('tree drag end: ', dropNode && dropNode.label, dropType);
      },
      handleDrop(draggingNode, dropNode, dropType, ev) {
        console.log('tree drop: ', dropNode.label, dropType);
      },
      allowDrop(draggingNode, dropNode, type) {
        if (dropNode.data.label === '二级 3-1') {
          return type !== 'inner';
        } else {
          return true;
        }
      },
      allowDrag(draggingNode) {
        return draggingNode.data.label.indexOf('三级 3-2-2') === -1;
      }
      
   }
};
</script>
<style scoped>
.mb15{
   margin-bottom: 15px;
}
.mt15{
   margin-top: 15px;
}

.custom-tree-container {
    display: flex;
    margin: -24px;
}
.block {
    flex: 1;
    padding: 8px 24px 24px;
}
.block:first-child {
    border-right: 1px solid #eff2f6;
}
.block>p {
    text-align: center;
    margin: 0;
    line-height: 4;
}
.page-container p {
    font-size: 14px;
    color: #5e6d82;
    line-height: 1.5em;
}



</style>


