<script>
export default {
    name: 'WsButtonMap',
    props: {
        max: { // 最大显示数量
            type: Number,
            default: 3,
        },
        moreText: { // 更多按钮的文字
            type: String,
            default: '更多'
        }
    },
    methods: {
        part(size){
            // 过滤undefined的vnode
            var filt = this.$slots.default.filter((item)=>{
                return item.tag
            })

            var realSlots = filt.filter((item)=>{
                return !item.isComment;// && item.componentInstance;//过滤掉不显示的节点
            });

            if(realSlots.length == size){
                return [
                    realSlots
                ]
            }

            return [
                realSlots.slice(0, size - 1),
                realSlots.slice(size - 1, realSlots.length)
            ];
        }
    },
    render(h){
        var part = this.part(this.max);
        var moreItems = part[1] && part[1].map((item)=>{
            var listener = item.componentOptions.listeners && item.componentOptions.listeners.click;
            return <ws-dropdown-item command={listener}>{item.componentOptions.children[0].text}</ws-dropdown-item>
        });

        var more = <ws-dropdown class="more-btns" onCommand={(callback)=>{callback && callback()}}>
            <ws-button>
                {this.moreText}<i class="el-icon-arrow-down el-icon--right"></i>
            </ws-button>
            <ws-dropdown-menu slot="dropdown">
                {moreItems}
            </ws-dropdown-menu>
        </ws-dropdown>;

        return <div class="ws-button-map">
            <div ref="buttons">
                {part[0]}
                {moreItems && moreItems.length > 0 && more}
            </div>
        </div>
    },
}
</script>

<style lang="scss" scoped>
.more-btns{
    margin-left: 10px;
}

</style>
