<template>
  <v-card>
    <v-card-text>
      {{ category }}
      <radio-tree :items="categories" value-key="id" v-model="category" ref="radioTree"></radio-tree>
    </v-card-text>
    <v-card-actions>
      <v-btn @click.stop="nuke()" color="warning">Nuke</v-btn>
    </v-card-actions>
  </v-card>
</template>
<script>
import RadioTree from '@/components/RadioTree'
export default {
  components: { RadioTree },
  data: () => ({
    category: null,
    categories: [
      {
        id: 1,
        name: '1 Sample Category',
        children: [
          { id: 2, name: '1.1 Sample Category' },
          { 
            id: 3,
            name: '1.2 Sample Category',
            children: [
              { id: 13, name: '1.2.1 Sub-Sampler' },
              { id: 14, name: '1.2.2 Sub-Sampler' },
              { id: 15, name: '1.2.3 Sub-Sampler' }
            ]
          },
          { id: 4, name: '1.3 Sample Category' }
        ]
      },
      {
        id: 5,
        name: '2 Demo Category',
        children: [
          { id: 6, name: '2.1 Demo Category' },
          { id: 7, name: '2.2 Demo Category' },
          { id: 8, name: '2.3 Demo Category' },
          { id: 9, name: '2.4 Demo Category' },
          { id: 10, name: '2.5 Demo Category' }
        ]
      },
      {
        id: 11,
        name: '3 Another Category',
        children: [
          { id: 12, name: '3.1 Another Child' }
        ]
      }
    ]
  }),
  methods: {
    nuke (value) {
      // remove a targetted value (in this case, it has id: 4)
      const removed = this.categories[0].children.splice(2, 1)
      if (removed && removed.length && this.category && this.category.id === removed[0].id) {
        this.$refs.radioTree.verifySelected()
      }
    }
  }
}
</script>
<style>
</style>