<template>
  <div class="button-set">
    <div class="btn-block">
      <el-button
        :scope="scope"
        v-for="(item, index) in btnData"
        @key="item.name"
        class="btn-def-show"
        v-if="index < option.showNum"
        :type="item.type"
        :icon="item.icon"
        :size="item.size"
        @click="item.handler(scope)"
        v-hasPermi="item.qx"
      >{{item.name}}</el-button>
    </div>

    <div class="hid-button" v-if="btnData && btnData.length > option.showNum">
      <el-popover width="100%" :trigger="option.trigger" :placement="option.placement">
        <div class="def-hidder">
          <el-button
            :scope="scope"
            v-for="(item, index) in btnData"
            @key="item.name"
            v-if="index >= option.showNum"
            :type="item.type"
            :icon="item.icon"
            :size="item.size"
            @click="item.handler(scope)"
            v-hasPermi="item.qx"
          >{{item.name}}</el-button>
        </div>

        <el-button type="text" icon="el-icon-more" size="mini" slot="reference">更多操作</el-button>
      </el-popover>
    </div>
  </div>
</template>
<script>
export default {
  name: "ButtonSet",
  props: {
    option: {
      type: Object,
      default: {
        isHidden: true,
        showNum: 3,
        appendId: "#realpagetable_1",
        trigger: "click",
        placement: "left"
      }
    },
    btnData: {
      type: Array,
      default: []
    },
    scope: {
      type: Object
    }
  },
  created() {},
  data() {
    return {
      dispatchShow: false
    };
  }
};
</script>
<style lang="scss">
.button-set {
  width: 100%;
  display: flex;
  .btn-def-show {
    margin: 0 10px;
  }
  .el-button + .el-button {
    margin-left: 0px;
    margin-right: 10px;
  }
}

.def-hidder {
  display: flex;
  flex-wrap: wrap;
  max-width: 400px;
  .el-button + .el-button {
    margin-left: 0px;
    margin-right: 10px;
  }
  .el-button + .el-button:nth-child(2) {
    margin-left: 10px;
    margin-right: 10px;
  }
}
</style>