<template>
    <ul class="vue-tree-list">
        <!--
            :ids-with-parent="idsWithParent"
            :options="termOptions"
            :ids="ids"
            :state="state"
        -->
        <tree-item
            :is-multiple="isMultiple"
            :depth="0"
            v-for="(item, idx) in treeData"
            :model="item"
            :key="idx"
            :eventBus="eventBus"
            :options="defaultOptions">
        </tree-item>
    </ul>
</template>

<script>
import Item from './Item.vue'
import './css/vue-tree.css'

export default {
    name: 'VueTree',
    components: { 'tree-item': Item },

    // model: {
    //     prop: 'ids',
    //     event: 'change'
    // },

    props: {
        treeData: {
            type: Array,
            default: function () {
                return []
            }
        },
        eventBus: {
            type: Object,
            default: function () {
                return {}
            }
        },
        ids: {
            type: Array,
            default: function () {
                return []
            }
        },
        isMultiple: {
            type: Boolean,
            default: true
        }
    },

    data () {
        return {
            defaultOptions: {
                openIcon: 'icon-angle-right',
                closeIcon: 'icon-angle-down',
                halfCheckedIcon: 'icon-minus',
                checkedIcon: 'icon-check',
                uncheckedIcon: 'icon-uncheck',
                angleIcon: 'icon-angle'
            },
            termOptions: {},
            idsWithParent: [],
            state: 0,
            store: null
        }
    },

    created () {
        // this.initOptions()
        // this.idsWithParent = this.ids.slice(0)
    },

    watch: {},
    methods: {}
}
</script>
