<!--author: luoshuo-->
<template>
  <el-row class="el-Row">
    <el-col :span="4">
      <treeComponent :search=searchable :data='treeData' :nodeClick='showTree' :nodeKey="nodeKey"
       :showCheckBox=showCheckBox :expandAll=expandAll ref='tree' :highlight='true'
       :defaultCheckedKeys="defaultCheckedKeys"></treeComponent>
    </el-col>
    <el-col :span="2">
      <h3 style="padding-left:10px">{{msg}}</h3>
    </el-col>
    <el-col :span="18">
      <div class="container-fluid">
      <div class="panel panel-primary"><!-- 树形控件属性 -->
        <div class="panel-heading">树形控件属性：</div>
        <div class="panel-body">
          <table class="table">
            <thead>
              <tr>
                <td>参数名称</td>
                <td>使用说明</td>
                <td width="150">类型</td>
                <td>参数说明</td>
              </tr>
              </thead>
              <tbody>
              <tr>
                <td>data</td>
                <td>树形控件的数据；必填</td>
                <td>Array</td>
                <td>／</td>
              </tr>
              <tr>
                <td>nodeKey</td>
                <td>每个树节点用来作为唯一标识的属性，</br>整棵树应该是唯一的</td>
                <td>String</td>
                <td>/</td>
              </tr>
              <tr>
                <td>searchable</td>
                <td>是否可过滤；选填</td>
                <td>Boolean</td>
                <td>true || false；默认false</td>
              </tr>
              <tr>
                <td>showCheckBox</td>
                <td>是否有复选框；选填</td>
                <td>Boolean</td>
                <td>true || false；默认false</td>
              </tr>
              <tr>
                <td>expandAll</td>
                <td>是否展开所有节点；选填</td>
                <td>Boolean</td>
                <td>true || false；默认true</td>
              </tr>
              <tr>
                <td>highlight</td>
                <td>是否高亮当前选中节点；选填</td>
                <td>Boolean</td>
                <td>true || false；默认false</td>
              </tr>
              <tr>
                <td>defaultCheckedKeys</td>
                <td>默认勾选的节点的 key 的数组</td>
                <td>Array</td>
                <td>/</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
      <div class="panel panel-primary"><!-- 树形控件方法 -->
        <div class="panel-heading">树形控件方法：</div>
        <div class="panel-body">
          <table class="table">
            <thead>
            <tr>
              <td width="15%">名称</td>
              <td width="50%">说明</td>
              <td width="35%">参数</td>
            </tr>
            </thead>
            <tbody>
              <tr>
                <td>getCheckedNodes</td>
                <td>
                  若节点可被选择（即 show-checkbox 为 true），则返回目前被选中的节点所组成的数组。
                </td>
                <td>(leafOnly) 接收一个 boolean 类型的参数，若为 true 则仅返回被选中的叶子节点，默认值为 false</td>
              </tr>
              <tr>
                <td>setCheckedNodes</td>
                <td>
                  设置目前勾选的节点，使用此方法必须设置 node-key 属性。
                </td>
                <td>(nodes) 接收勾选节点数据的数组</td>
              </tr>
              <tr>
                <td>getCheckedKeys</td>
                <td>
                  若节点可被选择（即 show-checkbox 为 true），则返回目前被选中的节点所组成的数组。
                </td>
                <td>(leafOnly) 接收一个 boolean 类型的参数，若为 true 则仅返回被选中的叶子节点的 keys，默认值为 false</td>
              </tr>
              <tr>
                <td>setCheckedKeys</td>
                <td>
                  通过 keys 设置目前勾选的节点，使用此方法必须设置 node-key 属性。
                </td>
                <td>(keys, leafOnly) 接收两个参数，</br>
                1. 勾选节点的 key 的数组 </br>
                2. boolean 类型的参数，若为 true 则仅设置叶子节点的选中状态，默认值为 false</td>
              </tr>
              <tr>
                <td>setChecked</td>
                <td>
                  通过 key / data 设置某个节点的勾选状态，使用此方法必须设置 node-key 属性。
                </td>
                <td>(key/data, checked, deep) 三个参数，</br>
                  1. 勾选节点的 key 或者 data </br>
                  2. boolean 类型，节点是否选中 </br>
                  3. boolean 类型，是否设置子节点 ，默认为 false</td>
              </tr>
              </tbody>
            </table>
          </div>
      </div>
      <div class="panel panel-primary"><!-- 树形控件事件 -->
        <div class="panel-heading">树形控件事件：</div>
          <div class="panel-body">
            <table class="table">
              <thead>
              <tr>
                <td width="15%">事件名称</td>
                <td width="30%">说明</td>
                <td width="50%">回调参数</td>
              </tr>
              </thead>
              <tbody>
              <tr>
                <td>nodeClick</td>
                <td>
                  节点被点击时的回调
                </td>
                <td>共三个参数，依次为：传递给 data 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身。</td>
              </tr>
              <tr>
                <td>checkChange</td>
                <td>
                  节点选中状态发生变化时的回调
                </td>
                <td>共三个参数，依次为：传递给 data 属性的数组中该节点所对应的对象、节点本身是否被选中、节点的子树中是否有被选中的节点。</td>
              </tr>
              <tr>
                <td>currentChange</td>
                <td>
                  当前选中节点变化时触发的事件
                </td>
                <td>共两个参数，依次为：当前节点的数据，当前节点的 Node 对象。</td>
              </tr>
              <tr>
                <td>nodeExpand</td>
                <td>
                  节点被展开时触发的事件
                </td>
                <td>共三个参数，依次为：传递给 data 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身。</td>
              </tr>
              <tr>
                <td>nodeCollapse</td>
                <td>
                  节点被关闭时触发的事件
                </td>
                <td>共三个参数，依次为：传递给 data 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身。</td>
              </tr>
              </tbody>
            </table>
          </div>
        </div>
     </div>
    </el-col>
  </el-row>
</template>
<script>
import treeComponent from './Tree'
export default {
  data () {
    return {
      msg: '全国',
      nodeKey: 'id',
      defaultCheckedKeys: [],
      searchable: true, // 是否带搜索框
      showCheckBox: true, // 是否带复选框
      expandAll: true, // 是否展开所有节点
      treeData: []
    }
  },
  methods: {
    // 组织机构树初始化
    treeInit () {
      this.treeData = [{
        id: 1,
        label: '全国',
        children: [{
          id: 11,
          label: '北京'
        },
        {
          id: 12,
          label: '天津'
        },
        {
          id: 13,
          label: '上海'
        },
        {
          id: 14,
          label: '江苏',
          children: [{
            id: 141,
            label: '南京'
          }, {
            id: 142,
            label: '无锡'
          }, {
            id: 143,
            label: '徐州'
          }]
        },
        {
          id: 15,
          label: '安徽',
          children: [{
            id: 151,
            label: '合肥'
          }, {
            id: 152,
            label: '芜湖'
          }, {
            id: 153,
            label: '黄山'
          }]
        }]
      }]
    },
    showTree (data) {
      // 通过 key / data 设置某个节点的勾选状态，使用此方法必须设置 node-key 属性
      // this.$refs.tree.setChecked('安徽', true, false)
      //
      // 通过key设置选中节点
      // this.$refs.tree.setCheckedKeys([ 12, 14, 152 ])
      //
      // 获取选中节点的key
      // this.msg = this.$refs.tree.getCheckedKeys()
      //
      // 获取选中节点
      // this.msg = this.$refs.tree.getCheckedNodes()
      //
      // 设置选中节点
      // this.$refs.tree.setCheckedNodes([ { 'id': 11, 'label': '北京' }, {
      //   'id': 152,
      //   'label': '芜湖'
      // } ])
      this.msg = data.label
    }
  },
  mounted () {
    this.treeInit()
  },
  components: { treeComponent }
}
</script>

<style>
  .el-Row{
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
    padding-right: 10px;
  }
</style>

