<template>
  <div
    class="dev-main-item"
    :data-ref="itemObj.ref"
    :data-type="itemObj.type"
    :style="{ width: (100 / 24 * itemObj.options.span).toFixed(5) + '%'}"
    @click.stop="itemClick(itemObj)"
  >
    {{ itemObj.options.labelName }}

    <template>
      <template v-if="itemObj.options.filter == true">
        <el-input
          v-model="filterText"
          placeholder="输入关键字进行过滤"
        />
      </template>
      <el-tree
        ref="tree"
        class="filter-tree"
        :data="data"
        :empty-text="itemObj.options.emptyText"
        node-key="id"
        :props="props"
        :highlight-current="itemObj.options.highlight"
        :default-expand-all="itemObj.options.all"
        :expand-on-click-node="itemObj.options.expandNode"
        :check-on-click-node="itemObj.options.checkNode"
        :show-checkbox="itemObj.options.checkbox"
        :check-strictly="itemObj.options.strictly"
        :accordion="itemObj.options.accordion"
        :draggable="itemObj.options.draggable"
        :filter-node-method="filterNode"
      />
    </template>
  </div>
</template>

<script>
import ApDevItemBase from './base/ApDevItemBase'

export default {
  name: 'ApDevTree',
  extends: ApDevItemBase,
  data() {
    return {
      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'
            }]
          }]
        }
      ],
      props: {
        children: 'children',
        label: 'label'
      },
      filterText: ''
    }
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val)
    }
  },
  created() {
    // 默认参数
    this.defaultOptions = {
      span: 12,
      emptyText: '暂无数据', // 内容为空的时候展示的文本
      highlight: true, // 是否高亮当前选中节点
      all: false, // 默认展开所有节点
      expandNode: true, // 是否在点击节点的时候展开或者收缩节点(false 则只有点箭头图标的时候才会展开或者收缩)
      checkNode: true, // 是否在点击节点的时候选中节点(false 则只有在点击复选框时才会选中)
      strictly: false, // 在显示复选框的情况下，是否严格的遵循父子不互相关联的做法
      checkbox: false, // 可勾选
      accordion: false, // 手风琴模式
      draggable: false, // 拖拽
      filter: false // 节点过滤
    }
  },
  methods: {
    // 节点过滤
    filterNode(value, data) {
      if (!value) return true
      return data.label.indexOf(value) !== -1
    }
  }
}
</script>

<style scoped>

</style>
