<template>
  <div ref="bgTableBtnsRef" class="bg-table-btns">
    <slot></slot>
    <el-popover :width="88" :popper-style="bgTablePopover" trigger="hover">
      <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,
  () => {
    setTimeout(() => {
      nextTick(() => {
        calcTabs();
        dealData();
      });
    }, 1000);
  },
  {
    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 (e.type.toString() == "Symbol(Comment)") {
      //v-for 再次遍历
    } else if (e.type.toString() == "Symbol(Fragment)") {
      let children = e.children || [];
      children.forEach((el) => {
        //注释和v-if忽略
        if (el.type.toString() == "Symbol(Comment)") {
          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 showMoreBtns = () => {
  calcTabs();
  dealData();
  nextTick(() => {
    updateSytle();
    if (state.timer) clearTimeout(state.timer);
    state.showMore = true;
  });
};
const hideMoreBtns = () => {
  if (state.timer) clearTimeout(state.timer);
  state.timer = setTimeout(() => {
    state.showMore = false;
  }, 50);
};
const updateSytle = () => {
  let { top, right } = lastEl.value.getBoundingClientRect();
  let { width } = window.document.body.getBoundingClientRect();
  state.style = {
    top: `${top + 16}px`,
    right: `${width - right - 16}px`,
  };
};

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: "88px",
  padding: "4px 0",
  minWidth: "60px",
};

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>
