import {
    Widget,
    Decorators,
    VTapeLayout,
    CenterAdaptLayout,
    Searcher,
    SearchEditor,
    Func,
    concat,
    each,
    Router,
    MultiLayerSingleLevelTree,
} from '@fui/core';
import { demoConfig } from './config';

@Decorators.shortcut()
export class West extends Widget {
    static xtype = 'demo.west';
    static EVENT_VALUE_CHANGE = 'EVENT_VALUE_CHANGE';

    props = {
        baseCls: 'demo-west bi-border-right bi-card',
    };

    mounted() {
        this.searcher.setAdapter(this.tree);
    }

    render() {
        var self = this;

        // var selectedId = BI.Router.$router.currentRoute.params?.componentId;

        return {
            type: VTapeLayout.xtype,
            items: [
                {
                    type: CenterAdaptLayout.xtype,
                    items: [
                        {
                            type: Searcher.xtype,
                            el: {
                                type: SearchEditor.xtype,
                                watermark: '简单搜索',
                            },
                            width: 200,
                            isAutoSearch: false,
                            isAutoSync: false,
                            ref: function (ref) {
                                self.searcher = ref;
                            },
                            popup: {
                                type: MultiLayerSingleLevelTree.xtype,
                                cls: 'bi-card',
                                listeners: [
                                    {
                                        eventName: MultiLayerSingleLevelTree.EVENT_CHANGE,
                                        action: function (v) {},
                                    },
                                ],
                            },
                            onSearch: function (op, callback) {
                                var result = Func.getSearchResult(Demo.CONFIG, op.keyword, 'text');
                                var items = concat(result.match, result.find);
                                var children = [];
                                each(items, function (index, item) {
                                    var childList = Func.getSearchResult(Demo.CONFIG, item.id, 'pId');
                                    each(childList.match, function (index, child) {
                                        if (child.value) {
                                            children.push(child);
                                        }
                                    });
                                });
                                items = concat(items, children);
                                callback(items);
                            },
                        },
                    ],
                    height: 40,
                },
                {
                    type: MultiLayerSingleLevelTree.xtype,
                    listeners: [
                        {
                            eventName: MultiLayerSingleLevelTree.EVENT_CHANGE,
                            action: function (v) {
                                Router.$router.push({
                                    name: 'component',
                                    params: {
                                        componentId: v,
                                    },
                                });
                            },
                        },
                    ],
                    items: demoConfig,
                },
            ],
        };
    }
}