<template>
    <div
        @mouseleave="hideSonBtns(btnId)"
        @mouseover="showSonBtns(btnId)"
        class="go_son_btns clearfix"
        style="display: none"
        :btnId="btnId"
    >
        <ul class="common_order_menu">
            <li v-if="item.imgType != 'splitLine'"
                :key="index"
                v-for="(item, index) of sonBtns"
                @click="clickSonBtns(item.id, $event, item)"
            >
                <div  class="clearfix">
                    <div class="pull-left btn-img">
                        <i :class="item.img" aria-hidden="true"></i>
                    </div>
                    <div class="pull-left margin-l-4">
                        <a
                            href="javascript:void(0);"
                            :title="item.text"
                            class="order_menuitem"
                        >{{ item.text }}</a
                        >
                    </div>
                </div>
            </li>
            <li v-else class="splitLine">
                <div style=""></div>
            </li>
        </ul>
    </div>
</template>

<script>
    export default {
        name: "go-son-btns",
        props: ["sonBtns", "btnId"],
        methods: {
            showSonBtns: function (btnId) {
                $(".go_son_btns[btnId='" + btnId + "']")
                    .show()
                    .css("top", 25)
                    .attr("showFlag", "true");
            },
            hideSonBtns: function (btnId) {
                $(".go_son_btns[btnId='" + btnId + "']").hide();
            },
            clickSonBtns: function (btnId, event, item) {
                //如果是点击分割条 则不需要触发事件
                if (item.imgType != "splitLine") {
                    this.$emit("btnClick", btnId);
                    event.cancelBubble = true;
                }
            }
        },
        mounted() {
        },
        components: {}
    };
</script>
