<style scoped>
ul {
  list-style: none;
  padding-left: 22px;
}

li > .node-content {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  height: 42px;
  /* line-height: 42px; */
}

li > .node-content > .fa {
  padding: 14px;
  font-size: 14px;
}

li.first-node:hover {
  background-color: #f9fbfa;
}

li.first-node > .node-content {
  padding-left: 6px;
}

li.first-node.open > .node-content {
  background-color: #41ce8a;
  border-radius: 4px;
  color: #fff;
  padding: 0 0 0 15px;
  box-shadow: 0px 2px 6px 0px rgba(41, 204, 122, 0.4);
}

li.node-li:not(.first-node) > .node-content:hover {
  color: #41ce8a;
  font-weight: 700;
}

ul.children-list {
  display: none;
}

li.node-li.open > ul.children-list {
  display: block;
}

li.node-li.open > .node-content > .fa:before {
  content: '\f068';
}

li.node-li > .node-content > .fa:before {
  content: '\f067';
}

@keyframes rotating {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
li.node-li.lazy > .node-content > .fa {
  animation: rotating 1.2s linear infinite;
}
li.node-li.lazy > .node-content > .fa:before {
  content: '\f110';
}

.fa.dot:before {
  content: '·';
  width: 6px;
  display: inline-block;
}

.node-content.active {
  color: #41ce8a;
  /* font-weight: 700; */
}
</style>

<template>
  <li class="node-li" :class="{ 'first-node': first, 'open': isOpen, 'lazy': isLazy }">
    <div class="node-content" @click="handleNodeClick" :class="{ 'active': isOpen }">
      <span>
        <i class="fa" v-if="!first" :class="{ 'fa-angle-right': ((node['isLeaf'] && node[props.children] && node[props.children].length) || !node['isLeaf']), 'dot': ((!node['isLeaf'] && node[props.children] && !node[props.children].length) || node['isLeaf']) }"></i> {{node[props.label]}}</span>
      <i class="fa" v-if="(node['isLeaf'] && node[props.children] && node[props.children].length) || !node['isLeaf']"></i>
    </div>
    <ul class="children-list" v-if="((node['isLeaf'] && node[props.children] && node[props.children].length) || !node['isLeaf']) && node[props.children] && node[props.children] && node[props.children].length">
      <time-tree-node :node="item" :props="props" :active="active" v-for="item in node[props.children]" :key="item[props.key]"></time-tree-node>
    </ul>
  </li>
</template>

<script>
import emitter from '@src/mixins/emitter.js'
import util from '@src/common/util.js'

export default {
  name: 'TimeTreeNode',
  componentName: 'TimeTreeNode',
  mixins: [emitter],
  data() {
    return {
      isLazy: false
    }
  },
  props: {
    node: {
      type: Object,
      required: true
    },
    props: {
      type: Object,
      default: function() {
        return {
          children: 'children',
          label: 'name',
          key: 'ID'
        }
      }
    },
    first: {
      type: Boolean,
      default: function() {
        return false
      }
    },
    active: {
      type: [String, Number],
      required: true
    }
  },
  computed: {
    isOpen() {
      if (this.node[this.props.key] === this.active) {
        return true
      }

      const _node = util.findTreeNode(this.node[this.props.children], this.props.key, this.active, this.props.children)
      return !!_node
    },
    isActive() {
      return this.node[this.props.key] === this.active
    },
    owner() {
      let parent = this.$parent || this.$root
      let name = parent.$options.componentName

      while (parent && (!name || name !== 'CatalogTree')) {
        parent = parent.$parent

        if (parent) {
          name = parent.$options.componentName
        }
      }

      if (parent) {
        return parent
      } else {
        return {}
      }
    }
  },
  methods: {
    async handleNodeClick() {
      if (
        !this.node['isLeaf'] &&
        this.node[this.props.key] !== this.active &&
        this.node[this.props.children] &&
        this.node[this.props.children].length === 0
      ) {
        this.isLazy = true
        await this.owner.handleLazy(this.node)

        this.isLazy = false
      }

      this.dispatch('TimeTree', 'node-click', this.node)
    }
  },
  created() {}
}
</script>
