<template>
  <li class="tree-item">
    <div class="cell" :class="{ bold: isFolder }" @click="toggle">
      <div class="cell-title">
        <app-link :data="item">{{ item.name }}</app-link>
      </div>
      <div class="cell-icon" v-if="isFolder">
        <van-icon name="arrow-up" v-if="isOpen" />
        <van-icon name="arrow-down" v-else />
      </div>
    </div>
    <ul v-show="isOpen" v-if="isFolder" class="tree-item-group">
      <tree-item v-for="(child, index) in item.children" :key="index" :item="child"></tree-item>
    </ul>
  </li>
</template>


<script>
import TreeItem from './TreeItem'
import AppLink from '@/components/Link'
export default {
  name: 'TreeItem',
  props: { item: Object },
  components: { TreeItem, AppLink },
  data: function () {
    return {
      isOpen: false
    }
  },
  computed: {
    isFolder: function () {
      return this.item.children && this.item.children.length
    }
  },
  methods: {
    toggle: function () {
      if (this.isFolder) {
        this.isOpen = !this.isOpen
      }
    }
  }
}
</script>

<style lang="scss">
.tree-item {
  .cell {
    display: flex;
    align-items: center;
    height: 0.52rem;
    border-bottom: 1px solid #999;
  }
  .cell-title {
    flex: 1;
    font-size: 0.13rem;
    font-weight: 400;
    color: #333;
    a {
      display: block;
      line-height: 0.52rem;
    }
  }
  .cell-icon {
    font-size: 0.14rem;
  }
  .tree-item-group {
    padding-left: 0.1rem;
  }
}
</style>
