<template>
  <div class="bg-table-btns-more" :style="style" @click.stop>
    <bg-table-btn
      v-for="(item, index) in operations"
      :key="index"
      :disabled="isDisabled(item)"
      @click="clickAction(item)"
    >
      {{ getName(item) }}
    </bg-table-btn>
  </div>
</template>

<script>
export default {
  name: "BgTableBtnsMore",
  props: {
    operations: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      style: {},
    };
  },
  methods: {
    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;
      }
    },
    upStyle() {
      let { top, right } = this.$parent.$el.getBoundingClientRect();
      let { width } = window.document.body.getBoundingClientRect();

      this.style = {
        position: "fixed",
        top: `${top + 16}px`,
        right: `${width - right - 16}px`,
      };
    },
  },
  mounted() {
    document.body.append(this.$el);
    this.upStyle();
  },
  beforeDestroy() {
    this.$el && this.$el.remove();
  },
};
</script>
