<template>
  <el-dialog
    v-if="visible"
    :visible.sync="visible"
    :before-close="handleClose"
    :append-to-body="appendToBody"
    :title="title"
    width="60%">
    <el-input v-model="filterText" placeholder="输入关键字进行过滤"/>
    <el-scrollbar class="information" style="height: 500px; margin-top: 10px">
      <el-tree
        ref="tree"
        :data="tree"
        :props="defaultProp"
        :filter-node-method="filterNode"
        check-strictly
        default-expand-all
        expand-on-click-node
        check-on-click-node
        show-checkbox
        @node-click="handleNodeClick"/>
    </el-scrollbar>
    <span slot="footer" class="dialog-footer">
      <el-button @click="closeWindow">取 消</el-button>
      <el-button type="primary" @click="save">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import Pagination from '@/components/Pagination' // 通过 el-pagination二次打包
import { requestFN } from '@/utils/request'
import waves from '@/directive/waves' // waves directive
export default {
  components: { Pagination },
  directives: { waves },
  props: {
    title: {
      type: String,
      default: ''
    },
    appendToBody: {
      type: Boolean,
      default: false
    },
    limit: {
      type: Number,
      default: 1
    }
  },
  data() {
    return {
      visible: false,
      defaultProp: {
        value: 'id',
        children: 'nodes',
        label: 'name'
      },
      tree: [],
      filterText: '',
      treeClickCount: 0
    }
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val)
    }
  },
  methods: {
    init(e) {
      this.visible = true
      this.getTree()
    },
    handleClose() {
      this.visible = false
    },
    getTree() {
      requestFN(
        '/department/listTree'
      ).then((data) => {
        this.tree = JSON.parse(data.zTreeNodes)
        if (this.tree[0]) {
          this.tree[0].disabled = false
        }
      }).catch((e) => {
        this.$message.error(e)
      })
    },
    filterNode(value, data) {
      if (!value) return true
      return data.name.indexOf(value) !== -1
    },
    closeWindow() {
      this.visible = false
    },
    clear() {
      this.tree = []
    },
    save() {
      const list = this.$refs.tree.getCheckedNodes()
      if (list.length > this.limit) {
        this.$message.error('应该选择' + this.limit + '个,但是现在选择了' + list.length + '个')
        return
      }
      this.$emit('getResult', { info: this.$refs.tree.getCheckedNodes() })
      this.visible = false
    },
    // 节点点击事件
    handleNodeClick(data, node) {
      // 记录点击次数
      this.treeClickCount++
      // 单次点击次数超过2次不作处理,直接返回,也可以拓展成多击事件
      if (this.treeClickCount >= 2) {
        return
      }
      // 计时器,计算300毫秒为单位,可自行修改
      this.timer = window.setTimeout(() => {
        if (this.treeClickCount === 1) {
          // 把次数归零
          this.treeClickCount = 0
          // 单击事件处理
          this.console('单击事件,可在此处理对应逻辑')
        } else if (this.treeClickCount > 1) {
          // 把次数归零
          this.treeClickCount = 0
          // 双击事件
          this.$emit('getResult', { info: [data] })
          this.visible = false
        }
      }, 300)
    }
  }
}

</script>

<style scoped>
.information >>> .el-scrollbar__wrap {
  overflow-x: hidden;
}
</style>
