<template>
  <div>
    <el-input
      v-model="searchParams"
      placeholder="输入关键字进行过滤"
      style="margin-bottom: 10px;"
      @input="searchParamsChange"
    />
    <el-scrollbar :style="{height: height}">
      <el-tree
        ref="searchTree"
        :data="c_searchData"
        :empty-text="searchTreeEmptyText"
        :class="treeData.onlyOneSelected?'el-tree-check-none':''"
        :props="defaultProps"
        :expand-on-click-node="onClickNode"
        check-strictly
        :show-checkbox="showCheckbox"
        :highlight-current="highlightCurrent"
        node-key="id"
        @check="checkNode"
        @node-click="treeNodeClick"
      />
    </el-scrollbar>
  </div>
</template>

<script>
/* 接口*/
import { getPurcatalogCategoryTreeBySearch } from '@/api/common/tools'// 产品分类
export default {
  name: 'MaterialTypeTree',
  props: {
    height: { // 树容器高度
      type: String,
      default: ''
    },
    showCheckbox: { // 是否展示多选框
      type: Boolean,
      default: false
    },
    highlightCurrent: { // 高亮
      type: Boolean,
      default: false
    },
    onClickNode: { // 结点点击
      type: Boolean,
      default: false
    },
    selectCodes: { // 一选中结点
      type: Array,
      default: function() {
        return []
      }
    },
    singleChoice: { // 单选
      type: Boolean,
      default: false
    },
    treeData: { // 组件数据
      type: Object,
      default: function() {
        return {
          parentId: ''
        }
      }
    }
  },
  data() {
    return {
      searchParams: '',
      node: {}, // 当前选中结点
      resolve: null, // 当前选中结点的resolve
      isSearch: false, // 是否为搜索时
      kedNodes: [],
      defaultProps: {
        children: 'children',
        label: 'categoryName',
        isLeaf: 'categoryIsLeaf'
      },
      // ------搜索时的参数------
      searchTreeEmptyText: '', // 搜索查询的数据展示的文本
      searchData: [],
      selectData: {
        id: '', // 选中物资小类编码
        categoryName: '', // 选中物资小类名称
        categoryIsLeaf: '1' // 是否是叶子节点 1是 0不是
      }
    }
  },
  computed: {
    // 组装最外层
    c_searchData() {
      return [{
        id: '', // 选中物资小类编码
        categoryName: '物料库', // 选中物资小类名称
        categoryIsLeaf: '0',
        categoryParentId: null,
        children: [...this.searchData],
        disLevel: 0
      }]
    }
  },
  watch: {
    selectCodes(val) {
      this.$refs.tree.setCheckedKeys(val)
    }
  },
  created() {
    this.search()
  },
  methods: {
    searchParamsChange(v) {
      this.search(v)
    },
    // 过滤已选择的数据
    filterNode(value, data) {
      if (!value) return true
      // 过滤掉已选择的数据 && 搜索的数据
      return data.departname.includes(value.departname)
    },
    /*
     搜索
    */
    search(val) {
      this.isSearch = true
      this.searchData = []
      this.$emit('clearSelectTypeData')
      this.selectData.id = ''
      this.selectData.categoryName = ''
      this.selectData.categoryIsLeaf = ''
      this.searchTreeEmptyText = '拼命加载中...'
      const params = {
        // parentId: this.treeData.parentId
        categoryName: this.searchParams
      }
      getPurcatalogCategoryTreeBySearch(params).then(res => {
        this.searchTreeEmptyText = '暂无数据'
        this.searchData = res.data
      })
    },
    // 结点选中
    checkNode(checkedNodes, checkedKeys) {
      // 是否只能选最后一级且是单选则执行
      if (this.treeData.onlyOneSelected && checkedKeys.checkedKeys.length > 0) {
        this.$refs.tree.setCheckedKeys([checkedNodes.id])
        this.$refs.searchTree.setCheckedKeys([checkedNodes.id])
      }
      if (this.singleChoice) { // 单选
        this.$refs.tree.setCheckedNodes([])
        this.$refs.searchTree.setCheckedNodes([checkedNodes])
      }
    },
    // 树节点点击
    treeNodeClick(data) {
      this.selectData.id = data.id
      this.selectData.categoryName = data.categoryName
      this.selectData.categoryIsLeaf = data.categoryIsLeaf
      this.$emit('nodeClickData', this.selectData)
    },
    handelGetCheckedNodes() {
      if (this.isSearch) {
        // 搜索时
        return this.$refs.searchTree.getCheckedNodes()
      } else {
        // 非搜索时
        return this.$refs.tree.getCheckedNodes()
      }
    }
  }
}
</script>

<style scope>
.el-tree>.el-tree-node{
  min-width:100%;
  display: inline-block;
}
</style>

