
<template>
  <div style="text-align:left;">
    <div v-for="item in data" :key="item[defaultProps.id]" :class="{ hidden: !item.expand&&item.children && item.children.length > 0 }">
      <div :class="[current[defaultProps.id||'id'] === item[defaultProps.id||'id'] ? 'style active' : 'style']" @click="() => { nodeClick(item)}"
          :style="{ 'padding-left': `${18 * depth}px` }">
        <span v-if="item.children && item.children.length > 0">
            <span v-if="item.expand" class="h-icon-webicon215"></span>
            <span v-else class="h-icon-webicon216"></span>
        </span>
        <span v-else style="display:inline-block;width:12px;height:0px"></span>
        <span v-if="item.icon" style="display:inline-block;font-size:12px;" :class="['iconfont', item.icon,item.icon==='iconfolder'?'file':'normal']"></span>
        <span class="content" :title="item.name">
          {{ item.name }}
        </span>
      </div>
      <HTree
        v-if="item.children"
        :data="item.children"
        :depth="depth + 1"
        @changeCurrent="changeCurrent"
        :current="currentId"
        :defaultProps="defaultProps"
      ></HTree>
    </div>
  </div>
</template>

<script>
import HTree from './tree.vue'
export default {
  name: 'HTree',
  components: {
    HTree
  },
  props: {
    data: {
      type: Array
    },
    depth: {
      type: Number,
      default: 1
    },
    current: {
      type: Object,
      default: () => {
        return {}
      }
    },
    defaultProps: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {}
  },
  created() {},
  computed: {
    currentId: {
      get() {
        return JSON.parse(JSON.stringify(this.current))
      },
      set(newValue) {
        this.$emit('changeCurrent', newValue)
        return newValue
      }
    }
  },
  methods: {
    nodeClick(node) {
      this.$emit("changeCurrent", node)
      node.expand = !node.expand
      this.currentId = node
    },
    changeCurrent(node) {
      this.currentId = node
    }
  }
}
</script>

<style scoped>
.style {
  /* width: 100%; */
  height: 34px;
  line-height: 34px;
  /* color: rgba(255, 255, 255, 0.75); */
  color: #606266;
  display: flex;
  cursor: pointer;
}
.style:hover {
  /* background-color: rgba(243, 243, 243, 0.23); */
  background-color: gold;
}
.active {
  /* background-color: rgba(243, 243, 243, 0.23); */
  background-color: gold;
}
.hidden {
  height: 34px;
  overflow: hidden;
}
.file {
  color: #ffcd2c;
  font-size: 16px !important;
}
.normal {
  color: rgba(255, 255, 255, 0.75);
}
.expand {
  font-size: 12px;
  color: #d4d4d4;
}
.content {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-left: 5px;
}
.h-icon-webicon216,
.h-icon-webicon215 {
  font-size: 12px;
}
</style>
