<!--
    <menu-button
        :show-text="true"
        :text="text"
        :options="options"
        @menuClick="handleMenuClick"
    >
    </menu-button>
-->
<template>
    <div class="menu-btn_wrapper">
        <a href="javascript:;" class="menu-btn" @click="handleAddBtnClick">
            <span class="more"  v-if="options.length > 1">...</span>
            <span :class="{ iconfont : !showText }"  v-else  v-html="text"></span>
        </a>
         <div v-transfer-dom>
            <popup
                v-model="isShowMenuPopup"
                :hide-on-blur="true">
                <div class="menu-list">
                    <ul class="flex flex-wrap">
                        <li class="flex-1of3 menu-item" v-for="(item,index) in options" :key="`menu_${index}`" @click="handleMenuItemClick(index)">
                            <i class="iconfont" v-html="item.icon"></i>
                            <p class="text">{{ item.text }}</p>
                        </li>
                    </ul>
                </div>
            </popup>
        </div>
    </div>
</template>

<script>
import { TransferDom, Popup } from 'vux'
export default {
    name: 'MenuButton',
    props: {
        // 是否显示文案 默认显示图标
        showText: {
            type: Boolean,
            default: false
        },
        // 默认是+号图标
        text: {
            type: String,
            default: '&#xe862;'
        },
        options: {
            type: Array,
            default: () => {
                return []
            }
        }
    },
    components: {
        Popup
    },
    data () {
        return {
            isShowMenuPopup: false
        }
    },
    directives: {
        TransferDom
    },
    computed: {},
    watch: {},
    filters: {},
    created () {},
    mounted () {},
    beforeDestroy () {},
    methods: {
        handleAddBtnClick () {
            let { options } = this
            if (options.length > 1) {
                this.isShowMenuPopup = true
            } else {
                this.$emit('menuClick', 0)
            }
        },
        handleMenuItemClick (index) {
            this.isShowMenuPopup = false
            this.$emit('menuClick', index)
        }
    }
}
</script>

<style lang="less" scoped>
.menu-btn_wrapper {
    position: absolute;
    bottom: 10vh;
    right: 30px;
    .menu-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 55px;
        height: 55px;
        border-radius: 50%;
        background: #4577BE;
        color: #fff;
        font-size: 16px;
        .iconfont {
            font-size: 24px;
        }
        .more {
            display: block;
            height: 55px;
            font-size: 30px;
            line-height: 42px;
        }
    }
}
.menu-list {
    background: #fff;
    .menu-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 15px 10px;
        .iconfont {
            font-size: 32px;
        }
        .text {
            font-size: 16px;
            margin-top: 8px;
        }
    }
}
</style>
