<!-- 注释 -->
<!-- 目前两个属性，一个model，用来绑定数据。另一个editable。控制是否可编辑 -->
<!--model属性绑定：{name:'root',children:[{name:'',children:[]},{name:'',children:[]}]-->
<template>
  <div>
    <li>
      <div
        :class="[{'folder':isFolder, 'glyphicon':isFolder,'test':isFolder}, isFolder?open ? 'glyphicon-folder-open' : 'glyphicon-folder-close':'']"
        @click="toggle" @dblclick="changeType">
        {{model.name}}
      </div>
      <ul v-show="open" v-if="isFolder">
        <item class="item" v-for="model in model.children" :model="model"></item>
        <li v-if="editable" class="add" @click="addChild">+</li>
      </ul>
    </li>
  </div>
</template>

<script>
  import Vue from 'vue'
  // define the item component
  export default{
    name: 'item',
    props: {
      model: Object,
      editable: false
    },
    data: function () {
      return {
        open: false
      }
    },
    computed: {
      isFolder: function () {
        return this.model.children &&
          this.model.children.length
      }
    },
    methods: {
      toggle: function () {
        ``
        if (this.isFolder) {
          this.open = !this.open
        }
      },
      changeType: function () {
        if (!this.editable) {
          return
        }
        if (!this.isFolder) {
          Vue.set(this.model, 'children', [])
          this.addChild()
          this.open = true
        }
      },
      addChild: function () {
        this.model.children.push({
          name: 'new stuff'
        })
      }
    }
  }
</script>

<style>
  body {
    font-family: Menlo, Consolas, monospace;
    color: #444;
  }

  .item {
    cursor: pointer;
  }

  .folder {
    font-weight: bold;
  }

  /*  .folder:before {

    }*/

  li {
    list-style-type: none;
  }

  ul {
    /*padding-left: 1.5em;*/
    /*line-height: 1.5em;*/
    /*list-style-type: dot;*/
  }

</style>