<template>
  <fbg-tree ref="mainRef" v-bind="$attrs" v-if="$scopedSlots.default" :iconClass="iconClass" v-on="$listeners">
    <template  slot-scope="scope">
      <slot v-bind="scope"/>
    </template>
  </fbg-tree>
  <fbg-tree ref="mainRef" v-bind="$attrs" v-else :iconClass="iconClass" v-on="$listeners" />
</template>
<script>
import {Tree} from 'element-ui';
export default {
  props: {
    type: {
      type: String,
      default: ''
    }
  },
  components: {
    'fbg-tree': Tree
  },
  computed: {
    iconClass() {
      return this.type === 'file' ? 'fbg-file-icon':(this.type === 'plus' ? 'fbg-plus-icon' : '');
    }
  },
  mounted() {
    for (let key in this.$refs.mainRef) {
      if (typeof this.$refs.mainRef[key] === 'function' && !this[key]) {
        this[key] = (...args) => {
          return this.$refs.mainRef[key](...args);
        }
      }
    }
  },
  methods: {
    
  }
}
</script>
<style lang="scss">
.fbg {
  &-plus-icon {
    &::after {
      font-family: 'fbgiconfont';
      content: '\e6b6'
    }
  }
  &-plus-icon.expanded {
    transform: rotate(0deg)!important;
    &::after {
      font-family: 'fbgiconfont';
      content: '\e6b0'
    }
  }
  &-file-icon {
    &::after {
      font-family: 'fbgiconfont';
      content: '\e6ab'
    }
  }
  &-file-icon.expanded {
    transform: rotate(0deg)!important;
    &::after {
      font-family: 'fbgiconfont';
      content: '\e6b1'
    }
  }
}
</style>