<template>
  <div ref="bgTableBtnsRef" class="bg-table-btns">
    <slot></slot>
    <el-popover :popper-style="bgTablePopover" trigger="hover" :hide-after="50">
      <div class="more-box" :style="state.style">
        <span
          v-for="(item, index) in state.lastChildren"
          :key="'as' + index"
          :class="item.disabled ? 'disabled' : ''"
          @click="action(item.onClick, item.disabled)"
          >{{ item.name }}</span
        >
      </div>
      <template #reference>
        <span v-if="state.children.length - 1 > limit" id="more_btn" ref="lastEl" class="bg-table-btn more">
          <bg-icon style="font-size: 12px; color: #2b4695" icon="#bg-ic-s-more" />
        </span>
        <!-- 解决不需显示时警告问题 -->
        <span v-else></span>
      </template>
    </el-popover>
  </div>
</template>

<script setup>
import { reactive, ref, onBeforeMount, onMounted, toRefs, provide, useSlots, watch, nextTick } from "vue";
const slots = useSlots();

const props = defineProps({
  limit: {
    type: Number,
    default: 3,
  },
  tableData: {
    type: Array,
    default: () => [],
  },
});

const bgTableBtnsRef = ref(null);
const lastEl = ref(null);
const state = reactive({
  children: [],
  index: 0,
  lastChildren: [],
  style: {},
  timer: null,
  showMore: false,
});

watch(
  () => props.tableData,
  () => {
    nextTick(() => {
      calcTabs();
      dealData();
    });
  },
  {
    deep: true,
  }
);
const action = (event, disable) => {
  if (disable) {
    return;
  }
  event();
  state.showMore = false;
};

const calcTabs = () => {
  let tabSlots = slots.default() || [];
  let tempSlots = [];
  state.lastChildren = [];
  tabSlots.forEach((e) => {
    //注释和v-if忽略
    if (Object.prototype.toString.call(e.children) == "[object String]") {
      //v-for 再次遍历
    } else if (Object.prototype.toString.call(e.children) == "[object Array]") {
      let children = e.children || [];
      children.forEach((el) => {
        //注释和v-if忽略
        if (Object.prototype.toString.call(e.children) == "[object String]") {
          console.log(el.type);
        } else {
          tempSlots.push(el);
        }
      });
      //普通节点
    } else {
      tempSlots.push(e);
    }
  });
  //   debugger;
  if (tempSlots) {
    tempSlots.forEach((e, idx) => {
      if (idx + 2 > props.limit && tempSlots.length > props.limit && e.props) {
        // console.log(e);
        // console.log(e.props);

        state.lastChildren.push(e.props);
      }
    });
  }
};

const dealData = () => {
  let children = bgTableBtnsRef.value.children || [];
  state.children = children;
  if (children.length - 1 > props.limit) {
    children[props.limit - 1].style.display = "none";
    children[props.limit - 1].style.width = "0px";
    state.index = props.limit - 2;
    state.lastChildren[0].name = children[props.limit - 1].innerText;
  }
  for (let index = 0; index < children.length - 1; index++) {
    const e = children[index];
    if (index + 1 > props.limit && e.tagName == "A" && e.className.indexOf("bg-table-btn") !== -1) {
      e.style.display = "none";
      e.style.width = "0px";
      state.lastChildren[index - props.limit + 1].name = e.innerText;
    }
  }
};

const bgTablePopover = {
  width: "auto",
  maxWidth: "96px",
  padding: "4px 0",
  minWidth: "60px",
  marginTop: "-5px",
};

onMounted(() => {
  calcTabs();
  dealData();
});
</script>

<style scoped>
.more {
  position: relative;
  z-index: 200;
}

.more-box span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all;
  white-space: nowrap;
  padding: 10px 16px;
  color: #404a62;
  line-height: 1;
  font-size: 14px;
  cursor: pointer;
}
.more-box span:hover {
  background-color: #f2f3f7;
}
.more-box .disabled {
  color: #a9b1c7;
  cursor: not-allowed;
}
.more-box .disabled:hover {
  background-color: #f2f3f7;
  color: #a9b1c7;
}
.more-box span::before {
  display: none;
}
</style>
