<template>
  <el-tree
    v-if="groups.length"
    ref="tree"
    :data="groups"
    class="c-tree-sidebar__main"
    node-key="path"
    highlight-current
    @node-click="onChange"
  />
  <div
    v-else
    class="u-bold u-text-center"
  >
    暂无部门，请先添加部门
  </div>
</template>

<script>
export default {
  name: 'AssignToGroup',
  props: {
    groups: {
      type: Array,
      required: true
    }
  },
  watch: {
    groups () {
      this.init()
    }
  },
  created () {
    this.init()
  },
  methods: {
    init () {
      const group = this.groups[0]
      if (group) {
        this.$nextTick(() => {
          this.$refs.tree.setCurrentKey(group.path)
        })
      }
      this.onChange(group)
    },
    onChange (group) {
      this.$emit('change', group?.path)
    }
  }
}
</script>
