<!-- 
 * @name    按钮组件
 * @authors pen (you@example.org)
 * @date    2022-02-28 
 * @version 1.0.1
 *
 -->
 <template>
  <div ref="buttonGroup" class="btn_group_view" v-if="buttons.length">
    <template v-for="button in buttons">
      <!-- 普通按钮 -->
      <el-button
        @click="buttonClick(button)"
        v-if="
          !button.customSlot && !button.dropdownButtons && judgePrem(button)
        "
        :key="button.key"
        :class="{ btn_view_item: defaultClass }"
        :size="button.size ? button.size : buttonSize"
        :type="button.type"
        :plain="button.plain ? button.plain : buttonPlain"
        :round="button.round ? button.round : buttonRound"
        :circle="button.circle"
        :loading="button.loading"
        :disabled="button.disabled"
        :icon="button.icon"
        :autofocus="button.autofocus"
        :native-type="button.nativeType"
      >
        {{ button.text }}
      </el-button>
      <!-- 下拉按钮集 -->
      <el-popover
        v-else-if="button.dropdownButtons && button.dropdownButtons.length"
        placement="bottom"
        width="114"
        popper-class="dropdown_pop"
        trigger="click"
      >
        <ul class="box">
          <li
            class="show_hand"
            @click="buttonClick(item)"
            v-if="judgePrem(item)"
            v-for="(item, index) in button.dropdownButtons"
            :key="index"
          >
            {{ item.text }}
          </li>
        </ul>
        <el-button
          slot="reference"
          :style="button.dropdownStyle"
          :key="button.key"
          :class="{ btn_view_item: defaultClass }"
          :type="button.type"
          :size="button.size ? button.size : buttonSize"
          :native-type="button.nativeType"
          :loading="button.loading"
          :disabled="button.disabled"
          :plain="button.plain ? button.plain : buttonPlain"
          :autofocus="button.autofocus"
          :icon="button.icon"
          :round="button.round ? button.round : buttonRound"
          class="dropdown_buttons"
        >
          {{ button.dropdownText || '批量操作' }}
          <span class="middle_line">|</span> <i class="el-icon-arrow-down"></i
        ></el-button>
      </el-popover>
      <!-- 自定义slot -->
      <template v-else-if="button.customSlot && judgePrem(button)">
        <slot v-bind:customSlotData="button" :name="button.customSlot"></slot>
      </template>
    </template>
  </div>
</template>
<script>
export default {
  name: 'button-view',
  props: {
    buttons: {
      type: Array,
      default: () => []
    },
    defaultClass: {
      type: Boolean,
      default: true
    },
    buttonSize: String,
    buttonPlain: Boolean,
    buttonRound: Boolean
  },
  computed: {
    permissionsData() {
      return this.$store.state.permissions
    }
  },
  methods: {
    buttonClick(arg) {
      console.log(arg)
      this.$emit('button-click', arg)
    },
    // 判断权限是否显示
    judgePrem(button) {
      if (button.hasOwnProperty('premissionKey')) {
        return this.permissionsData[button.premissionKey]
      } else {
        return button.visible === undefined ? true : button.visible
      }
    }
  }
}
</script>
<style lang="less">
.dropdown_pop {
  min-width: 114px;
  padding: 8px 0;
}
</style>
<style lang="less">
// .btn_item {
//   display: inline-block;
// }
// .btn_item:not(:last-child) {
//   margin-right: 10px !important;
// }

// .btn_group_view .el-button:not(:last-child) {
//   margin-right: 10px;
// }
.btn_group_view {
  display: flex;
  align-items: center;
}
.dropdown_buttons {
  display: flex;
  align-items: center;
  padding-left: 10px;
  padding-right: 10px;
  margin-left: 10px;
  margin-right: 10px;
  .middle_line {
    padding: 0 6px 0 4px;
  }
}
.box {
  li {
    line-height: 36px;
    text-align: center;
    // padding-left: 16px;
  }
  li:hover {
    background: #f5f5f5;
  }
}
.btn_group_view .el-button {
  border-radius: 6px;
  line-height: 0;
  height: 32px;
}
// .btn_group_view .el-button:first-child {
//   // border-top-right-radius:3px;
//   // border-bottom-right-radius:3px;
//   border-radius: 6px;
//   line-height: 0;
//   height: 32px;
// }
// .btn_group_view .el-button:last-child {
//   border-radius: 6px;
//   line-height: 0;
//   height: 32px;
// }
// .btn_group_view .el-button:not(:first-child):not(:last-child) {
//   // border-top-right-radius:3px;
//   // border-bottom-right-radius:3px;
//   border-radius: 6px;
//   line-height: 0;
//   height: 32px;
// }
</style>
<style scoped lang="less">
.btn_view_item {
  border-radius: 6px;
  line-height: 0;
  height: 32px;
  /deep/ .el-icon-search {
    font-size: 14px;
  }
}
</style>
