<template>
    <div class="ht-base-tree-search-demo">
        <ht-base-input v-model="value" placeholder="请搜索" search @on-search="searchFn($event,data)"></ht-base-input>
        <ht-base-tree :data="data"></ht-base-tree>
    </div>
</template>

<script>
    export default {
        name: 'HtBaseTreeSearchDemo',
        data() {
            return {
                value: '',
                data: [
                    {
                        title: '第一小节',
                        expand: true,
                        children: [
                            {
                                title: '第一小节1-0',
                                children: [
                                    {
                                        title: '小节内容-01'
                                    },
                                    {
                                        title: '小节内容-02'
                                    }
                                ]
                            },
                            {
                                title: '第一小节1-1',
                                children: [
                                    {
                                        title: '小节内容-01'
                                    },
                                    {
                                        title: '小节内容-02'
                                    }
                                ]
                            }
                        ]
                    }
                ]
            }
        },
        methods: {
            searchFn(val, data) {
                let expand = false;
                data.forEach((item) => {
                    if (item.children && this.searchFn(val, item.children)) {
                        this.$set(item, 'expand', true);
                        expand = true;
                    }
                    if (item.title.includes(val) && val !== '') {
                        this.$set(item, 'selected', true);
                        expand = true;
                    } else {
                        this.$set(item, 'selected', false);
                    }
                });
                return expand;
            }
        }
    }
</script>
<style>
    .ht-base-tree-search-demo {

    }
</style>

