<template>
  <div class="bg-table-btns">
    <bg-table-btn
      v-for="(item, index) in curOperations"
      :key="index"
      :disabled="isDisabled(item)"
      @click="clickAction(item)"
    >
      {{ getName(item) }}
    </bg-table-btn>
    <a
      class="bg-table-btn"
      @mouseenter="showMOreBtns"
      @mouseleave="hideMoreBtns"
      v-if="otherOperations.length > 0"
    >
      <!-- <i class="el-icon-more" /> -->
      <bg-icon style="font-size: 12px; color: #2b4695;" icon="#bg-ic-s-more" />
      <bg-table-btns-more
        :operations="otherOperations"
        @mouseenter="showMOreBtns"
        @mouseleave="hideMoreBtns"
        v-if="showMore"
      />
    </a>
  </div>
</template>

<script>
import BgTableBtnsMore from "./bg-table-btns-more.vue";

export default {
  name: "BgTableBtns",
  components: { BgTableBtnsMore },
  props: {
    operations: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      showMore: false,
      timer: null,
    };
  },
  computed: {
    curOperations() {
      return this.operations.slice(0, this.operations.length > 3 ? 2 : 3);
    },
    otherOperations() {
      return this.operations.slice(2, this.operations.length);
    },
  },
  methods: {
    hideBox() {
      this.showMore = false
    },
    isDisabled({ disabled }) {
      if (typeof disabled === "function") {
        return disabled();
      } else if (typeof disabled === "boolean") {
        return disabled;
      } else if (typeof disabled === "undefined") {
        return false;
      } else {
        return !!disabled;
      }
    },
    clickAction({ callback }) {
      typeof callback === "function" && callback();
    },
    getName({ name }) {
      if (typeof name === "function") {
        return name();
      } else {
        return name;
      }
    },
    showMOreBtns() {
      if (this.timer) clearTimeout(this.timer);

      this.showMore = true;
    },
    hideMoreBtns() {
      if (this.timer) clearTimeout(this.timer);

      this.timer = setTimeout(() => {
        this.showMore = false;
      }, 50);
    },
  },
};
</script>
