<template>
  <ButtonGroup class="go-ivew-group" shape="circle" size="small">
    <Button
        :class="extClass"
      :type="sonItem.active ? 'primary' : 'default'"
      :disabled="disabled||sonItem.disabled"
      :key="sonItem.id"
      @click="btnClick(sonItem.id, sonItem.disabled, $event)"
      v-for="sonItem in item['btns']"
    >
      <span
        style="display: inline-block;position: relative;top:-1px;right:-2px;"
        ><Icon :type="sonItem.img"></Icon
      ></span>
      <span>{{ sonItem.text }}</span>
    </Button>
  </ButtonGroup>
</template>

<script>
    import btnMixin from './mixins/btnMixin';
    export default {
        name: "go-btn-group",
        mixins: [btnMixin],
        props: {
            item: {
                type: Object,
                default: () => {
                    return {};
                }
            }
        },
        computed:{
            extClass(){
                return this.disabled?'disabled':'';
            },
        },
        methods: {
        //点击按钮事件 并触发父节点传入的事件
            btnClick(btnId, disabled, event) {
                $(event.target)
            .closest(".ivu-btn-group")
            .find(".ivu-btn")
            .each(function(index, item) {
                $(item).removeClass("ivu-btn-primary");
            });
          //添加激活按钮状态
                $(event.target)
            .closest(".ivu-btn")
            .addClass("ivu-btn-primary");
          //如果是disabled则不
                if (!disabled) {
                    this.$emit("btnClick", btnId);
                }
            }
        },
        mounted() {},
        components: {}
    };
</script>
