<template>
  <div class="test-tree">
    <div class="block">
      <div class="title">
        标准
        <q-btn outline dense color="primary" @click="selectItem('tree1','2')">聚焦一个节点</q-btn>
      </div>
      <div class="con">
        <kyb-tree class="fit" ref="tree1" :node="node1" v-model="node1Value" />
        {{node1Value}}
      </div>
    </div>

    <div class="block">
      <div class="title">
        单选
        <q-btn outline dense color="primary" @click="node2Value=['2']">选中一个节点</q-btn>
        <q-btn outline dense color="primary" @click="node2Value=[]">清空选择</q-btn>
      </div>
      <div class="con">
        <kyb-tree class="fit" ref="tree2" :node="node2" select-type="one" v-model="node2Value"></kyb-tree>
        {{node2Value}}
        -- node2:
        <div>{{node2}}</div>
      </div>
    </div>

    <div class="block">
      <div class="title">
        多选
        <q-btn outline dense color="primary" @click="node3Value=['1','2','22']">选中某个节点</q-btn>
        <q-btn outline dense color="primary" @click="node3Value=[]">清空选择</q-btn>
        <q-btn outline dense color="primary" @click="node3Value=['1','3','4','7']">选中编号3和7</q-btn>
      </div>
      <div class="con">
        <kyb-tree class="fit" ref="tree3" :node="node3" select-type="more" v-model="node3Value" />
        {{node3Value}}
      </div>
    </div>
    <div class="block">
      <div class="title">服务器交互</div>
      <div class="con">
        <kyb-tree class="fit" entity="/common/Page" select-type="more" v-model="node4Value" />
        {{node4Value}}
      </div>
    </div>
    <div class="block">
      <div class="title">服务器交互(懒加载)</div>
      <div class="con">
        <kyb-tree
          class="fit"
          entity="/common/Page"
          lazy
          select-type="one"
          :select-list="['1','3','5','6']"
        />
      </div>
    </div>
  </div>
</template>
<style>
.test-tree .block {
  margin: 10px;
  border: 1px solid #ccc;
  float: left;
}
.test-tree .title {
  border-bottom: 1px solid #ccc;
  padding: 4px;
}
.test-tree .con {
  width: 300px;
  height: 300px;
}
</style>
<script>
// import KTest from 'components/k-test'
let tree = {
  _id: '1',
  name: 'joey',
  children: [
    { _id: '2', name: 'zhangshan', children: [{ _id: '22', name: 'xxx1' }] },
    { _id: '3', name: 'xxxr' },
    {
      _id: '4',
      name: 'xxxh',
      $disabled: true,
      children: [
        { _id: '5', name: 'xxx1', $disabled: true },
        { _id: '6', name: 'xxx2', $disabled: true },
        { _id: '7', name: 'xxx3', $disabled: true },
        { _id: '8', name: 'xxx4', $disabled: true }
      ]
    }
  ]
}
let d = {
  data: function() {
    return {
      treeId: this._uid + '_tree',
      node1Value: [],
      node2Value: [],
      node3Value: ['1', '3'],
      node4Value: [],
      node1: JSON.parse(JSON.stringify(tree)),
      node2: JSON.parse(JSON.stringify(tree)),
      node3: JSON.parse(JSON.stringify(tree))
    }
  },
  computed: {},
  methods: {
    selectItem(treeId, id) {
      let obj = this.$refs[treeId].getNodeByKey(id)
      if (obj) {
        obj.selectItem()
      }
    }
  }
}
export default d
</script>
