
<template>
  <el-tree
    :data="treeData"
    :props="treeProps"
    node-key="warehouseId"
    highlight-current
    @node-click="handleNodeClick"
    :expand-on-click-node="false"
    :default-expand-all="true"
    class="stock-tree"
  />
</template>

<script>
import { listWarehouse } from '@/api/wms/warehouse';

export default {
  name: "WarehouseTree",
  props: {
    treeProps: {
      type: Object,
      default: () => ({
        children: 'children',
        label: 'warehouseName',
        isLeaf: () => false
      })
    }
  },
  data() {
    return {
      treeData: []
    };
  },
  created() {
    this.getWarehouseTree();
  },
  methods: {
    getWarehouseTree() {
      listWarehouse().then(response => {
        this.treeData = this.handleTree(response.data, 'warehouseId', 'parentId');
      });
    },
    handleTree(data, id, parentId) {
      const cloneData = JSON.parse(JSON.stringify(data));
      return cloneData.filter(father => {
        const branchArr = cloneData.filter(child => father[id] === child[parentId]);
        if (branchArr.length > 0) father.children = branchArr;
        return father[parentId] === 0 || father[parentId] === null;
      });
    },
    handleNodeClick(node) {
      this.$emit('node-click', node);
    }
  }
};
</script>

<style scoped>
.stock-tree-card {
  height: 100%;
  border: none;
  box-shadow: none;
}
.stock-tree-title {
  font-weight: bold;
  font-size: 16px;
  padding: 8px 0;
}
.stock-tree {
  min-height: 500px;
  max-height: 80vh;
  overflow-y: auto;
}
</style>
