<!--
 * @Description: In User Settings Edit
 * @Author: your name
 * @Date: 2018-08-13 20:18:10
 * @LastEditTime: 2018-08-13 20:18:10
 * @LastEditors: your name
 -->
<template>
<div class="zte-tree">
  <el-input
    v-if="filter"
    placeholder="输入关键字进行过滤"
    v-model.trim="filterText">
  </el-input>
  <div class="tree-container">
    <el-scrollbar :style="heightObj">
      <el-tree
        ref="tree"
        class="filter-tree"
        :data="data"
        :indent='12'
        :show-checkbox="showCheckbox"
        :node-key="nodeKey"
        :props="defaultProps"
        :check-on-click-node="clickCheck"
        :expand-on-click-node="clickExpand"
        :default-expand-all="expandAll"
        :filter-node-method="filterNode"
        :highlight-current="highlight"
        @node-click="nodeOriginClick">
      </el-tree>
    </el-scrollbar>
  </div>
</div>
</template>

<script>
import treeFilter from './mixins/treeFilter';

export default {
  name: 'zteTree',
  mixins: [treeFilter],
  props: {
    data: {
      type: Array,
      default: () => [],
    },
    clickExpand: {
      type: Boolean,
      default: true,
    },
    clickCheck: {
      type: Boolean,
      default: true,
    },
    expandAll: {
      type: Boolean,
      default: true,
    },
    nodeKey: {
      type: String,
      default: 'id',
    },
    parentId: {
      type: String,
      default: 'parentId',
    },
    childrenProp: {
      type: String,
      default: 'children',
    },
    labelProp: {
      type: String,
      default: 'name',
    },
    highlight: {
      type: Boolean,
      default: false,
    },
    showCheckbox: {
      type: Boolean,
      default: false,
    },
    editable: {
      type: Boolean,
      default: false,
    },
    filter: {
      type: Boolean,
      default: true,
    },
    height: {
      type: String,
    },
    selected: {
      type: String,
      default: '',
    },
    level: {
      type: Number,
    },
  },
  data() {
    return {
      filterText: '',
      defaultProps: {
        children: this.childrenProp,
        label: this.labelProp,
      },
      currencyNode: {},
    };
  },
  computed: {
    heightObj() {
      return this.height ? { height: this.height } : {};
    },
    refTree() {
      return this.$refs.tree;
    },
  },
  watch: {
    filterText(val) {
      this.filterTree(this.$refs.tree, this.data, val);
    },
    data() {
      this.$nextTick(() => {
        if (!this.filterFlag) {
          this.expandLevel(this.$refs.tree);
        } else {
          this.filterFlag = false;
        }
      });
    },
  },
  methods: {
    filterNode(value, data) {
      // 当过滤字段为空时不做任何处理
      if (!value) {
        return true;
      }
      return this.matchNode(true, value, data);
    },
    nodeOriginClick(data, node) {
      this.$emit('node-click', node);
    },
    getCheckedNodes(leafOnly) {
      return this.$refs.tree.getCheckedNodes(leafOnly);
    },
    getHalfCheckedNodes() {
      return this.$refs.tree.getHalfCheckedNodes();
    },
    setCheckedNodes(array) {
      this.$refs.tree.setCheckedNodes(array);
    },
    setCheckedkeys(array) {
      this.$refs.tree.setCheckedKeys(array);
    },
    getNode(node) {
      return this.$refs.tree.getNode(node);
    },
    getCurrentNode() {
      return this.$refs.tree.getCurrentNode();
    },
    setCurrentNode(node) {
      this.$refs.tree.setCurrentNode(node);
    },
    setCurrentKey(key) {
      this.$refs.tree.setCurrentKey(key);
    },
    remove(node) {
      this.$refs.tree.remove(node);
    },
  },
  mounted() {
    if (this.selected) {
      this.setCheckedkeys(this.selected.split('^'));
    }
  },
};
</script>
