<template>
    <div class="go-btn-group" :id="ctlId">
        <div
            :key="item.id"
            :class="item.active ? 'btn-item activeItem ' + type : 'btn-item ' + type"
            @click="clickBtnEv(item.id, $event)"
            v-for="item of groupBtns"
        >
            <div :btnId="item.id" class="goBtn clearfix">
                <div v-if="item.img != null && item.img.length > 0" class="btnImg pull-left">
                    <Icon :type="item.img"></Icon>
                </div>
                <div class="pull-left btn-text" :class="item.text == null ? 'btnLabel' : 'btnLabel has-text'"  v-if="item.text != null">
                    {{ item.text }}
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import {GoingUtils} from "goingutils";
    export default {
        name: "goGroupBtn",
        props: {
            type: {
                type: String,
                default: "square"
            },
            activeId: {
                type: String,
                default: ""
            },
            marginLeft: {
                type: Number,
                default: function () {
                    return 0;
                }
            },
            groupBtns: {
                type: Array,
                default: function () {
                    return [];
                }
            }
        },
        data: function () {
            return {
                ctlId: GoingUtils.getUUid(12)
            };
        },
        methods: {
            clickBtnEv: function (btnId, event) {
                $(event.target)
                    .closest(".go-btn-group")
                    .find(".activeItem")
                    .removeClass("activeItem");
                $(event.target)
                    .closest(".btn-item")
                    .addClass("activeItem");
                this.$emit("clickToolBtn", {btnId, event});
            }
        }
    };
</script>
