export default {
    props: {
        menus: {
            type: Array,
            require: true
        }
    },

    data() {
        return {
            searchText: '',
            searchResult: [],
        };
    },

    methods: {

        renderSelect(menu) {
            return menu.map((p) => {
                return p.children ? this.renderSelectGroup(p) : this.renderSelectOption(p)
            })
        },

        renderSelectGroup(menu) {
            return (
                <a-select-opt-group key={menu.parents}>
                    <span slot="label">{menu.parents}</span>
                    {this.renderSelect(menu.children)}
                </a-select-opt-group>
            )
        },

        renderSelectOption(menu) {
            return (<a-select-option key={menu.id} value={
                JSON.stringify(menu)
            }>
                {menu.meta.title}
                <small style={{ display: 'block', color: '#aaa' }}>{menu.component}</small>
            </a-select-option>)
        },


        onSearch(value) {
            this.searchText = value

            const menus = this.$_.cloneDeep(this.menus)

            const search = (m) => {
                if (!value) return []
                return m.filter((p) => {
                    if (p.children) {
                        p.children = search(p.children)
                    } else {
                        return p.meta.title.indexOf(value) > -1 || (p.component || '').toLowerCase().indexOf(value.toLowerCase()) > -1
                    }
                    return p.children.length
                })
            }

            /**
             * 拆分层级,只留下 [父级-父级-...] [子级]
             * *******在更为复杂的目录下会出现父级联动错误的问题
             */
            const unzip = (m) => {
                const getSeed = (parent, seed) => {
                    if (parent.children) {
                        seed.parents.push(parent.meta.title)
                        seed.children = parent.children
                        parent.children.forEach(p => {
                            getSeed(p, seed)
                        })
                    }
                    return seed
                }
                const result = []
                m.forEach(p => {
                    const r = { parents: [], children: [] }
                    result.push(getSeed(p, r))
                })
                return result
            }

            this.searchResult = unzip(search(menus)).map(p => {
                return {
                    parents: p.parents.join('-'),
                    children: p.children
                }
            })
        },

        onSearchSelect(value, node) {
            this.searchText = '';
            this.onSearch(this.searchText);

            const menu = JSON.parse(node.componentOptions.propsData.value)

            this.openContentWindow({
                key: menu.id,
                title: menu.meta.title,
                icon: menu.meta.icon,
                path: menu.component,
            });
        },

    },

    render() {

        const props = {
            dropdownMatchSelectWidth: false,
            dropdownStyle: { width: '300px' },
            optionLabelProp: 'value',
            placeholder: '请输入检索关键字',
            value: this.searchText
        }

        const on = {
            search: this.onSearch,
            select: this.onSearchSelect
        }

        return (
            <a-auto-complete {...{ props, on }}>
                <template slot="dataSource">
                    {this.renderSelect(this.searchResult)}
                </template>
                <a-input>
                    <a-icon slot="suffix" type="search" class="certain-category-icon" />
                </a-input>
            </a-auto-complete>
        )

    }
}