<template>
    <Collapse v-if="list.length">
        <template slot="title">
            {{tab.title}}
        </template>
        <template slot="content" v-if="tab.type == 'member'">
            <MemberNode 
                v-for="(item, index) in list"
                :data="item"
                :key="index"
                @handleChecked="handleChecked"/>
        </template>
        <template slot="content" v-else-if="tab.type == 'list'">
            <ListNode 
                v-for="(item, index) in list"
                :data="item"
                :key="index"
                @handleChecked="handleChecked"/>
        </template>
        <template slot="content" v-else-if="tab.type == 'dept'">
            <DeptNode 
                v-for="(item, index) in list"
                :key="index"
                :data="item"
                :withMembers="false"
                :showExpand="false"
                @handleChecked="handleChecked" />
        </template>
    </Collapse>
</template>

<script>
import DeptNode from '../section/section-dept-node';
import MemberNode from '../section/section-member-node';
import ListNode from '../section/section-list-node';
import Collapse from '../../../base/collapse';

import Mixin from './mixin';

const types = {
    member: 0,
    dept: 1,
    list: 5
}

export default {
    name: "SearchCustomResult",
    inject: [ 'root' ],
    mixins: [Mixin],
    props: {
        tab: {
            type: Object,
            default() {
                return {}
            }
        }
    },
    components: {
        DeptNode,
        MemberNode,
        ListNode,
        Collapse
    },
    data() {
        return {
            list: []
        }
    },
    methods: {
        handleSearch() {
            return new Promise(resolve => {
                const { keyword }  = this.root;
                if (this.tab && typeof this.tab.onSearch === 'function') {
                    this.tab.onSearch(keyword, data => {
                        if (data instanceof Array) {
                            data.forEach(item => {
                                item.type = types[this.tab.type]
                            })
                            this.list = data;
                        } else this.list = [];
                        resolve();
                    })
                } else resolve();
            })
        }
    }
}
</script>