<template>
  <div class="search_tree_menu v-menu">
    <h2 class="v-title">{{ title }}</h2>

    <SearchInput v-model="search" />

    <div class="mt-12 t-right">
      <el-button v-if="$listeners.onCopy" type="warning" circle plain icon="el-icon-copy-document" size="mini" title="复制" @click="handleCopy" />
      <el-button v-if="$listeners.onEdit" type="primary" circle plain icon="el-icon-edit" size="mini" title="编辑" @click="handleEdit" />
      <el-button v-if="$listeners.onCreate" type="success" circle plain icon="el-icon-plus" size="mini" title="创建" @click="handleCreate" />
      <el-button v-if="$listeners.onDelete" type="danger" circle plain icon="el-icon-delete" size="mini" title="删除" @click="handleDelete" />
    </div>

    <div class="tree_layout">
      <ElTree
        ref="treeRef"
        default-expand-all
        :expand-on-click-node="false"
        highlight-current
        :props="{ label: 'name' }"
        v-bind="$attrs"
        :data="treeData"
        :node-key="treeNodeKey"
        :filter-node-method="filterNode"
        v-on="$listeners"
      />
    </div>
  </div>
</template>

<script>
import { SearchInput } from '../widget'

export default {
  components: { SearchInput },

  props: {
    title: { type: String },
    treeNodeKey: { type: String, default: 'id' },
    treeData: { type: Array, default: () => [] },
    treeProps: { type: Object, default: () => ({}) }
  },

  data: () => ({ search: '' }),

  watch: {
    search (v) {
      this.$refs.treeRef.filter(v)
    }
  },

  methods: {
    filterNode (value, data) {
      if (!value) return true
      return data.name.includes(value)
    },

    /**
     * (key) 待被选节点的 key，若为 null 则取消当前高亮的节点
     */
    setCurrentKey (key) {
      return this.$refs.treeRef.setCurrentKey(key)
    },

    getCurrentNode () {
      return this.$refs.treeRef.getCurrentNode()
    },

    handleCreate () {
      this.$emit('onCreate', this.getCurrentNode())
    },

    handleEdit () {
      const checkedTreeNode = this.getCurrentNode()
      if (!checkedTreeNode) return this.$message.error('请选择要修改的数据')
      this.$emit('onEdit', checkedTreeNode)
    },

    handleCopy () {
      const checkedTreeNode = this.getCurrentNode()
      if (!checkedTreeNode) return this.$message.error('请选择要复制的数据')
      this.$emit('onCopy', checkedTreeNode)
    },

    handleDelete () {
      const checkedTreeNode = this.getCurrentNode()
      if (!checkedTreeNode) return this.$message.error('请选择要删除的数据')
      this.$emit('onDelete', checkedTreeNode)
    }
  }
}
</script>

<style lang="scss">
.search_tree_menu .tree_layout {

  .el-tree-node__label {
    color: $--color-text-regular;
  }

  .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content .el-tree-node__label {
    color: $--color-primary;
  }

  .el-tree-node:focus > .el-tree-node__content,
  .el-tree-node__content:hover {
    background-color: #ecf8f9;
  }

  .el-tree__empty-text {
    font-size: 12px;
  }
}
</style>

<style lang="scss" scoped>
.search_tree_menu.v-menu {
  display: flex;
  flex-direction: column;

  .v-title {
    margin-bottom: 26px;
  }

  .tree_layout {
    flex: 1;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid #d8d8d8;
    overflow: overlay;
  }
}
</style>
