<template>
  <div>
    <h1>tree 树形控件</h1>
    <p class="fbg-text">单页面应用单标签页组件</p>
    <h3 class="fbg-title">基础用法</h3>
    <demo :code="baseTreeStr">
      <p>default</p>
      <el-tree :data="data" type="default" :props="defaultProps"/>
      <p>file</p>
      <el-tree :data="data" type="file" :props="defaultProps"/>
      <p>plus</p>
      <el-tree :data="data" type="plus" :props="defaultProps"/>
    </demo>
    <h3 class="fbg-title">可选择</h3>
    <p class="fbg-text">适用于需要选择层级时使用。</p>
    <demo :code="baseTreeStr">
      <el-tree
        :props="props"
        :load="loadNode"
        lazy
        show-checkbox
        @check-change="handleCheckChange">
      </el-tree>
    </demo>
    <h3 class="fbg-title">默认展开和默认选中</h3>
    <p class="fbg-text">可将 Tree 的某些节点设置为默认展开或默认选中。</p>
    <demo :code="defaultOpenTreeStr">
      <el-tree
        :data="data"
        show-checkbox
        node-key="id"
        :default-expanded-keys="[2, 3]"
        :default-checked-keys="[5]"
        :props="defaultProps">
      </el-tree>
    </demo>
    <h3 class="fbg-title">禁用状态</h3>
    <p class="fbg-text">可将 Tree 的某些节点设置为禁用状态。</p>
    <demo :code="disabledTreeStr">
      <el-tree
        :data="disabledData"
        show-checkbox
        node-key="id"
        :default-expanded-keys="[2, 3]"
        :default-checked-keys="[5]">
      </el-tree>
    </demo>
    <h3 class="fbg-title">自定义节点内容</h3>
    <p class="fbg-text">节点的内容支持自定义，可以在节点区添加按钮或图标等内容。</p>
    <demo :code="defineTreeStr">
      <div class="block">
        <p>使用 render-content</p>
        <el-tree
          :data="defineData"
          show-checkbox
          node-key="id"
          default-expand-all
          :expand-on-click-node="false"
          :render-content="renderContent">
        </el-tree>
      </div>
      <div class="block">
        <p>使用 scoped slot</p>
        <el-tree
          :data="defineData"
          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>
                <el-button
                  type="text"
                  size="mini"
                  @click="() => append(data)">
                  Append
                </el-button>
                <el-button
                  type="text"
                  size="mini"
                  @click="() => remove(node, data)">
                  Delete
                </el-button>
              </span>
            </span>
        </el-tree>
      </div>
    </demo>
    <h3 class="fbg-title">节点过滤</h3>
    <p class="fbg-text">通过关键字过滤树节点。</p>
    <demo :code="filterTreeStr">
      <el-input
        placeholder="输入关键字进行过滤"
        v-model="filterText">
      </el-input>
      <el-tree
        class="filter-tree"
        :data="filterData"
        :props="defaultProps"
        default-expand-all
        :filter-node-method="filterNode"
        ref="tree">
      </el-tree>
    </demo>
    <h3 class="fbg-title">组件属性</h3>
    <table class="fbg-table">
      <thead>
        <tr>
          <th>参数</th>
          <th>说明</th>
          <th>类型</th>
          <th>可选值</th>
          <th>默认值</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>data</td>
          <td>展示数据</td>
          <td>Array</td>
          <td>--</td>
          <td>--</td>
        </tr>
        <tr>
          <td>empty-text</td>
          <td>内容为空的时候展示的文本</td>
          <td>String</td>
          <td>--</td>
          <td>--</td>
        </tr>
        <tr>
          <td>node-key</td>
          <td>每个树节点用来作为唯一标识的属性，整棵树应该是唯一的</td>
          <td>String</td>
          <td>--</td>
          <td>--</td>
        </tr>
        <tr>
          <td>props</td>
          <td>配置选项，具体看下表</td>
          <td>Object</td>
          <td>--</td>
          <td>--</td>
        </tr>
        <tr>
          <td>render-after-expand</td>
          <td>是否在第一次展开某个树节点后才渲染其子节点</td>
          <td>Boolean</td>
          <td>true | false</td>
          <td>false</td>
        </tr>
        <tr>
          <td>load</td>
          <td>加载子树数据的方法，仅当 lazy 属性为true 时生效</td>
          <td>Function(node, resolve)</td>
          <td>--</td>
          <td>--</td>
        </tr>
        <tr>
          <td>render-content</td>
          <td>树节点的内容区的渲染 Function</td>
          <td>Function(h, { node, data, store }</td>
          <td>--</td>
          <td>--</td>
        </tr>
        <tr>
          <td>highlight-current</td>
          <td>是否高亮当前选中节点，默认值是 false。</td>
          <td>Boolean</td>
          <td>true | false</td>
          <td>false</td>
        </tr>
        <tr>
          <td>default-expand-all</td>
          <td>是否默认展开所有节点</td>
          <td>Boolean</td>
          <td>true | false</td>
          <td>false</td>
        </tr>
        <tr>
          <td>expand-on-click-node</td>
          <td>是否在点击节点的时候展开或者收缩节点， 默认值为 true，如果为 false，则只有点箭头图标的时候才会展开或者收缩节点。</td>
          <td>Boolean</td>
          <td>true | false</td>
          <td>false</td>
        </tr>
       <tr>
          <td>check-on-click-node</td>
          <td>是否在点击节点的时候选中节点，默认值为 false，即只有在点击复选框时才会选中节点。</td>
          <td>Boolean</td>
          <td>true | false</td>
          <td>false</td>
        </tr>
       <tr>
          <td>auto-expand-parent</td>
          <td>展开子节点的时候是否自动展开父节点。</td>
          <td>Boolean</td>
          <td>true | false</td>
          <td>true</td>
        </tr>
       <tr>
          <td>default-expanded-keys</td>
          <td>默认展开的节点的 key 的数组。</td>
          <td>Array</td>
          <td>--</td>
          <td>--</td>
        </tr>
       <tr>
          <td>show-checkbox</td>
          <td>节点是否可被选择。</td>
          <td>Boolean</td>
          <td>true | false</td>
          <td>false</td>
        </tr>
       <tr>
          <td>check-strictly</td>
          <td>在显示复选框的情况下，是否严格的遵循父子不互相关联的做法，默认为 false。</td>
          <td>Boolean</td>
          <td>true | false</td>
          <td>false</td>
        </tr>
       <tr>
          <td>filter-node-method</td>
          <td>对树节点进行筛选时执行的方法，返回 true 表示这个节点可以显示，返回 false 则表示这个节点会被隐藏</td>
          <td>Function(value, data, node)</td>
          <td>--</td>
          <td>--</td>
        </tr>
       <tr>
          <td>accordion</td>
          <td>是否每次只打开一个同级树节点展开。</td>
          <td>Boolean</td>
          <td>true | false</td>
          <td>false</td>
        </tr>
       <tr>
          <td>indent</td>
          <td>相邻级节点间的水平缩进，单位为像素。</td>
          <td>Number</td>
          <td>--</td>
          <td>16</td>
        </tr>
       <tr>
          <td>icon-class</td>
          <td>自定义树节点的图标。</td>
          <td>String</td>
          <td>--</td>
          <td>--</td>
        </tr>
       <tr>
          <td>lazy</td>
          <td>是否懒加载子节点，需与 load 方法结合使用。</td>
          <td>Boolean</td>
          <td>true | false</td>
          <td>false</td>
        </tr>
       <tr>
          <td>draggable</td>
          <td>是否开启拖拽节点功能。</td>
          <td>Boolean</td>
          <td>true | false</td>
          <td>false</td>
        </tr>
       <tr>
          <td>allow-drag</td>
          <td>判断节点能否被拖拽。</td>
          <td>Function(node)</td>
          <td>--</td>
          <td>--</td>
        </tr>
       <tr>
          <td>allow-drop</td>
          <td>拖拽时判定目标节点能否被放置。type 参数有三种情况：'prev'、'inner' 和 'next'，分别表示放置在目标节点前、插入至目标节点和放置在目标节点后。</td>
          <td>Function(draggingNode, dropNode, type)</td>
          <td>--</td>
          <td>--</td>
        </tr>
      </tbody>
    </table>
    <h3 class="fbg-title">DATA 属性</h3>
    <table class="fbg-table">
      <thead>
        <tr>
          <th>参数</th>
          <th>说明</th>
          <th>类型</th>
          <th>可选值</th>
          <th>默认值</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>label</td>
          <td>指定节点标签为节点对象的某个属性值</td>
          <td>String, Function(data, node)</td>
          <td>--</td>
          <td>--</td>
        </tr>
        <tr>
          <td>children</td>
          <td>指定子树为节点对象的某个属性值</td>
          <td>String</td>
          <td>--</td>
          <td>--</td>
        </tr>
        <tr>
          <td>disabled</td>
          <td>指定节点选择框是否禁用为节点对象的某个属性值</td>
          <td>Boolean, Function(data, node)</td>
          <td>--</td>
          <td>--</td>
        </tr>
        <tr>
          <td>isLeaf</td>
          <td>指定节点是否为叶子节点，仅在指定了 lazy 属性的情况下生效</td>
          <td>Boolean, Function(data, node)</td>
          <td>--</td>
          <td>--</td>
        </tr>
      </tbody>
    </table>
    <h3 class="fbg-title">方法</h3>
    <table class="fbg-table">
      <thead>
        <tr>
          <th>方法名</th>
          <th>说明</th>
          <th>参数</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>filter</td>
          <td>对树节点进行筛选操作</td>
          <td>接收一个任意类型的参数，该参数会在 filter-node-method 中作为第一个参数</td>
        </tr>
        <tr>
          <td>updateKeyChildren</td>
          <td>通过 keys 设置节点子元素，使用此方法必须设置 node-key 属性</td>
          <td>(key, data) 接收两个参数，1. 节点 key 2. 节点数据的数组</td>
        </tr>
        <tr>
          <td>getCheckedNodes</td>
          <td>	若节点可被选择（即 show-checkbox 为 true），则返回目前被选中的节点所组成的数组</td>
          <td>(leafOnly, includeHalfChecked) 接收两个 boolean 类型的参数，1. 是否只是叶子节点，默认值为 false 2. 是否包含半选节点，默认值为 false</td>
        </tr>
        <tr>
          <td>setCheckedNodes</td>
          <td>设置目前勾选的节点，使用此方法必须设置 node-key 属性</td>
          <td>(nodes) 接收勾选节点数据的数组</td>
        </tr>
        <tr>
          <td>getCheckedKeys</td>
          <td>若节点可被选择（即 show-checkbox 为 true），则返回目前被选中的节点的 key 所组成的数组</td>
          <td>(leafOnly) 接收一个 boolean 类型的参数，若为 true 则仅返回被选中的叶子节点的 keys，默认值为 false</td>
        </tr>
        <tr>
          <td>setCheckedKeys</td>
          <td>通过 keys 设置目前勾选的节点，使用此方法必须设置 node-key 属性</td>
          <td>(keys, leafOnly) 接收两个参数，1. 勾选节点的 key 的数组 2. boolean 类型的参数，若为 true 则仅设置叶子节点的选中状态，默认值为 false
</td>
        </tr>
        <tr>
          <td>setChecked</td>
          <td>通过 key / data 设置某个节点的勾选状态，使用此方法必须设置 node-key 属性</td>
          <td>(key/data, checked, deep) 接收三个参数，1. 勾选节点的 key 或者 data 2. boolean 类型，节点是否选中 3. boolean 类型，是否设置子节点 ，默认为 false</td>
        </tr>
        <tr>
          <td>getHalfCheckedNodes</td>
          <td>若节点可被选择（即 show-checkbox 为 true），则返回目前半选中的节点所组成的数组</td>
          <td>--</td>
        </tr>
        <tr>
          <td>getHalfCheckedKeys</td>
          <td>若节点可被选择（即 show-checkbox 为 true），则返回目前半选中的节点的 key 所组成的数组</td>
          <td>--</td>
        </tr>
        <tr>
          <td>getCurrentKey</td>
          <td>获取当前被选中节点的 key，使用此方法必须设置 node-key 属性，若没有节点被选中则返回 null</td>
          <td>--</td>
        </tr>
        <tr>
          <td>setCurrentKey</td>
          <td>通过 key 设置某个节点的当前选中状态，使用此方法必须设置 node-key 属性</td>
          <td>(key) 待被选节点的 key，若为 null 则取消当前高亮的节点</td>
        </tr>
        <tr>
          <td>setCurrentNode</td>
          <td>通过 node 设置某个节点的当前选中状态，使用此方法必须设置 node-key 属性</td>
          <td>(node) 待被选节点的 node</td>
        </tr>
        <tr>
          <td>getNode</td>
          <td>根据 data 或者 key 拿到 Tree 组件中的 node</td>
          <td>(data) 要获得 node 的 key 或者 data</td>
        </tr>
        <tr>
          <td>remove</td>
          <td>删除 Tree 中的一个节点，使用此方法必须设置 node-key 属性</td>
          <td>(data) 要删除的节点的 data 或者 node</td>
        </tr>
        <tr>
          <td>append</td>
          <td>为 Tree 中的一个节点追加一个子节点</td>
          <td>(data, parentNode) 接收两个参数，1. 要追加的子节点的 data 2. 子节点的 parent 的 data、key 或者 node</td>
        </tr>
        <tr>
          <td>insertBefore</td>
          <td>为 Tree 的一个节点的前面增加一个节点</td>
          <td>(data, refNode) 接收两个参数，1. 要增加的节点的 data 2. 要增加的节点的后一个节点的 data、key 或者 node)</td>
        </tr>
        <tr>
          <td>insertAfter</td>
          <td>为 Tree 的一个节点的后面增加一个节点</td>
          <td>(data, refNode) 接收两个参数，1. 要增加的节点的 data 2. 要增加的节点的前一个节点的 data、key 或者 node</td>
        </tr>
      </tbody>
    </table>
    <h3 class="fbg-title">事件</h3>
    <table class="fbg-table">
      <thead>
        <tr>
          <th>事件名称</th>
          <th>说明</th>
          <th>参数</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>node-click</td>
          <td>节点被点击时的回调</td>
          <td>共三个参数，依次为：传递给 data 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身。</td>
        </tr>
        <tr>
          <td>node-contextmenu</td>
          <td>当某一节点被鼠标右键点击时会触发该事件</td>
          <td>共四个参数，依次为：event、传递给 data 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身。</td>
        </tr>
        <tr>
          <td>check-change</td>
          <td>节点选中状态发生变化时的回调</td>
          <td>共三个参数，依次为：传递给 data 属性的数组中该节点所对应的对象、节点本身是否被选中、节点的子树中是否有被选中的节点。</td>
        </tr>
        <tr>
          <td>check</td>
          <td>当复选框被点击的时候触发</td>
          <td>	共两个参数，依次为：传递给 data 属性的数组中该节点所对应的对象、树目前的选中状态对象，包含 checkedNodes、checkedKeys、halfCheckedNodes、halfCheckedKeys 四个属性。</td>
        </tr>
        <tr>
          <td>current-change</td>
          <td>当前选中节点变化时触发的事件</td>
          <td>共两个参数，依次为：当前节点的数据，当前节点的 Node 对象。</td>
        </tr>
        <tr>
          <td>node-expand</td>
          <td>节点被展开时触发的事件</td>
          <td>共三个参数，依次为：传递给 data 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身</td>
        </tr>
        <tr>
          <td>node-collapse</td>
          <td>节点被关闭时触发的事件</td>
          <td>共三个参数，依次为：传递给 data 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身。</td>
        </tr>
        <tr>
          <td>node-drag-start</td>
          <td>节点开始拖拽时触发的事件</td>
          <td>共两个参数，依次为：被拖拽节点对应的 Node、event。</td>
        </tr>
        <tr>
          <td>node-drag-enter</td>
          <td>拖拽进入其他节点时触发的事件</td>
          <td>共三个参数，依次为：被拖拽节点对应的 Node、所进入节点对应的 Node、event。</td>
        </tr>
        <tr>
          <td>node-drag-leave</td>
          <td>拖拽离开某个节点时触发的事件</td>
          <td>共三个参数，依次为：被拖拽节点对应的 Node、所离开节点对应的 Node、event。</td>
        </tr>
        <tr>
          <td>node-drag-over</td>
          <td>在拖拽节点时触发的事件（类似浏览器的 mouseover 事件）</td>
          <td>共三个参数，依次为：被拖拽节点对应的 Node、当前进入节点对应的 Node、event。</td>
        </tr>
        <tr>
          <td>node-drag-end</td>
          <td>拖拽结束时（可能未成功）触发的事件</td>
          <td>共四个参数，依次为：被拖拽节点对应的 Node、结束拖拽时最后进入的节点（可能为空）、被拖拽节点的放置位置（before、after、inner）、event。</td>
        </tr>
        <tr>
          <td>node-drop</td>
          <td>拖拽成功完成时触发的事件</td>
          <td>共四个参数，依次为：被拖拽节点对应的 Node、结束拖拽时最后进入的节点、被拖拽节点的放置位置（before、after、inner）、event</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>
<script>
import hljs from '../util/highlight';
export default {
  data() {
    let id = 1000; 
    return {
      count: 1,
      filterText: '',
      props: {
        label: 'name',
        children: 'zones'
      },
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      data: [{
        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'
        }]
      }],
      filterData: [{
        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'
        }]
      }],
      defineData: [{
        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'
        }]
      }],
      disabledData: [{
        id: 1,
        label: '一级 1',
        disabled: true,
        children: [{
          id: 4,
          label: '二级 1-1',
          children: [{
            id: 9,
            label: '三级 1-1-1'
          }, {
            id: 10,
            label: '三级 1-1-2'
          }]
        }]
      }, {
        id: 2,
        label: '一级 2',
        disabled: true,
        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'
        }]
      }],
      baseTreeStr:`
      <el-tree :data="data" type="default" :props="defaultProps"/>
      <el-tree :data="data" type="file" :props="defaultProps"/>
      <el-tree :data="data" type="plus" :props="defaultProps"/>
      <script>
      export default {
        data() {
          return {
            defaultProps: {
              children: 'children',
              label: 'label'
            },
            data: [{
              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'
              }]
            }]
          };
        }
      }
      <\/script>`,
      selectionTreeStr: `
      <el-tree
        :props="props"
        :load="loadNode"
        lazy
        show-checkbox
        @check-change="handleCheckChange">
      </el-tree>

      <script>
        export default {
          data() {
            return {
              props: {
                label: 'name',
                children: 'zones'
              },
              count: 1
            };
          },
          methods: {
            handleCheckChange(data, checked, indeterminate) {
              console.log(data, checked, indeterminate);
            },
            handleNodeClick(data) {
              console.log(data);
            },
            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);
            }
          }
        };
      <\/script>`,
      defaultOpenTreeStr: `
      <el-tree
        :data="data"
        show-checkbox
        node-key="id"
        :default-expanded-keys="[2, 3]"
        :default-checked-keys="[5]"
        :props="defaultProps">
      </el-tree>

      <script>
        export default {
          data() {
            return {
              data: [{
                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'
                }]
              }],
              defaultProps: {
                children: 'children',
                label: 'label'
              }
            };
          }
        };
      <\/script>`,
      disabledTreeStr: `
      <el-tree
        :data="data"
        show-checkbox
        node-key="id"
        :default-expanded-keys="[2, 3]"
        :default-checked-keys="[5]">
      </el-tree>

      <script>
        export default {
          data() {
            return {
              data: [{
                id: 1,
                label: '一级 1',
                disbaled: true,
                children: [{
                  id: 4,
                  label: '二级 1-1',
                  children: [{
                    id: 9,
                    label: '三级 1-1-1'
                  }, {
                    id: 10,
                    label: '三级 1-1-2'
                  }]
                }]
              }, {
                id: 2,
                label: '一级 2',
                disbaled: true,
                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'
                }]
              }],
              defaultProps: {
                children: 'children',
                label: 'label'
              }
            };
          }
        };
      <\/script>`,
      defineTreeStr: `
      <div class="block">
        <p>使用 render-content</p>
        <el-tree
          :data="data"
          show-checkbox
          node-key="id"
          default-expand-all
          :expand-on-click-node="false"
          :render-content="renderContent">
        </el-tree>
      </div>
      <div class="block">
        <p>使用 scoped slot</p>
        <el-tree
          :data="data"
          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>
              <el-button
                type="text"
                size="mini"
                @click="() => append(data)">
                Append
              </el-button>
              <el-button
                type="text"
                size="mini"
                @click="() => remove(node, data)">
                Delete
              </el-button>
            </span>
          </span>
        </el-tree>
      </div>
      <script>
        let id = 1000;
        export default {
          data() {
            return {
              data: [{
                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'
                }]
              }]
            };
          },
          methods: {
            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>
                    <el-button size="mini" type="text" on-click={ () => this.append(data) }>Append</el-button>
                    <el-button size="mini" type="text" on-click={ () => this.remove(node, data) }>Delete</el-button>
                  </span>
                </span>);
            }
          }
        };
      <\/script>`,
      filterTreeStr: `
      <el-input
        placeholder="输入关键字进行过滤"
        v-model="filterText">
      </el-input>
      <el-tree
        class="filter-tree"
        :data="filterData"
        :props="defaultProps"
        default-expand-all
        :filter-node-method="filterNode"
        ref="tree">
      </el-tree>
      <script>
      export default {
        data() {
          return {
            filterText: '',
            data: [{
              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'
              }]
            }]
          }
        },
        watch: {
          filterText(val) {
            this.$refs.tree.filter(val);
          }
        },
        methods: {
          filterNode(value, data) {
            if (!value) return true;
            return data.label.indexOf(value) !== -1;
          }
        }
      }
      <\/script>`
    };
  },
  mounted() {
    hljs.highlightCode();
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    }
  },
  methods: {
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    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>
            <el-button size="mini" type="text" on-click={ () => this.append(data) }>Append</el-button>
            <el-button size="mini" type="text" on-click={ () => this.remove(node, data) }>Delete</el-button>
          </span>
        </span>);
    },
    handleCheckChange(data, checked, indeterminate) {
      console.log(data, checked, indeterminate);
    },
    handleNodeClick(data) {
      console.log(data);
    },
    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);
    }
  }
}
</script>

