<template>
  <div class="tabTree">
    <xl-tabs v-model="currentTab">
      <xl-tab-pane v-for="item in tabs" :key="item.key" :label="item.label" :name="item.key">
        <xl-tree :data="currentTree" @node-click="nodeClick" />
      </xl-tab-pane>
    </xl-tabs>
  </div>
</template>

<script>
export default {
  props: {
    tabs: {
      type: Array,
      default: () => []
    },
    value: {
      type: [String, Number, Array, Object],
      default: ''
    }
  },
  data() {
    return {
      currentTab: '',
      selectList: []
    }
  },
  computed: {
    currentTree() {
      if (this.currentTab) {
        const current = this.tabs.find(item => item.key === this.currentTab)
        return current.trees
      }
      return []
    }
  },
  watch: {
    currentTab: {
      handler(newV) {
        if (!newV) {
          this.currentTab = this.tabs[0].key
        }
      },
      immediate: true
    }
  },
  methods: {
    nodeClick({ label, id }, node) {
      if (node.isLeaf) {
        const fathers = this.getFather(node)
        fathers.push({ label, id })
        this.$emit('change', { tabKey: this.currentTab, tree: fathers })
      }
    },
    getFather(obj, list = []) {
      if (obj.parent && obj.parent.id > 0) {
        const { data } = obj.parent
        list.unshift({ id: data.id, label: data.label })
        return this.getFather(obj.parent, list)
      } else {
        return list
      }
    }
  }
}
</script>

<style >
.tabTree .el-tabs__nav-scroll {
    display: flex;
    justify-content: center;
}
</style>
