export default {
  name: 'TreeItem',
  props: {
    itemdata: Object,
  },
  data() {
    return {
    }
  },
  computed: {
    isFolder() {
      return this.itemdata.children && this.itemdata.children.length
    }
  },
  methods: {
    toggle() {
      if (this.isFolder) {
        this.itemdata.isOpen = !this.itemdata.isOpen
      }
    },
    changeType() {
      if (!this.isFolder) {
        this.itemdata.children = []
        this.addChild()
        this.itemdata.isOpen = true
      }
    },
    addChild() {
      this.itemdata.children.push({
        name: '새 카테고리'
      })
    }
  },
  template: `
    <li>
      <div :class="{ bold: isFolder }" @click="toggle" @dblclick="changeType"> {{ itemdata.name }} <span v-if="isFolder && itemdata.name">[{{ itemdata.isOpen ? '-' : '+' }}]</span> </div>
      <ul v-show="itemdata.isOpen" v-if="isFolder">
        <TreeItem class="item" v-for="itemdata in itemdata.children" :itemdata="itemdata"></TreeItem>
      </ul>
    </li>
  `
}