<template>
    <v-card class="mx-auto">
        <v-sheet class="pa-3 primary lighten-2">
            <v-text-field
                v-model="search"
                label="Поиск по названию главы"
                dark
                flat
                solo-inverted
                hide-details
                clearable
                clear-icon="mdi-close-circle-outline"
            >
            </v-text-field>
            <v-checkbox
                v-model="caseSensitive"
                dark
                hide-details
                label="С учётом регистра"
            >
            </v-checkbox>
        </v-sheet>
        <v-card-text>
            <v-treeview
                :active.sync="active"
                :filter="filter"
                :items="items"
                :open.sync="open"
                :search="search"
                activatable
                active-class="primary--text"
                open-on-click
            >
                <template v-slot:prepend="{ item }">
                    <v-icon
                        v-if="item.children"
                        v-text="`mdi-${item.id === 1 ? 'home-variant' : 'folder-network'}`"
                    >
                    </v-icon>
                </template>
            </v-treeview>
        </v-card-text>
    </v-card>
</template>

<script>
    export default {
        data: () => ({
            active: [],
            items: [],
            open: [1],
            search: null,
            caseSensitive: false
        }),

        mounted () {
        },

        computed: {
            filter () {
                return this.caseSensitive
                    ? (item, search, textKey) => item[textKey].indexOf(search) > -1
                    : undefined
            }
        },

        methods: {
        },

        watch: {
            active (val) {
                //if (val.length) alert("-" + val + "-");
            }
        }
    }
</script>

<style>
    /* Стили для того чтобы текст не вылезал за границы блока */
    .v-treeview-node__content, .v-treeview-node__label {
        flex-shrink: 1;
    }
    .v-treeview-node__root {
        height: auto;
    }
</style>
