<template>
  <div ref="triggerWrapper" class="g-container">
    <span ref="textBox" @mouseenter="isShow = true" @mouseleave="isShow = false">{{ text }}</span>

    <!-- <div v-show="isShow" class="popover">
            {{ levelInfo.stageName }}-{{ levelInfo.levelNum }}关
        </div> -->
  </div>
</template>
<script setup lang="ts">
defineProps<{
  text: string
  levelInfo: {
    levelNum: number
    levelType: number
    stageId: string
    stageName: string
  }
}>()

const isShow = ref(false)
const textBox = ref()
const triggerWrapper = ref()

onMounted(() => {})
</script>
<style scoped lang="scss">
* {
  box-sizing: border-box;
}
.g-container {
  position: relative;
  display: inline;
  span {
    position: relative;
    color: #8409d6;
    // cursor: url('~@/static/common/pointer.png'), auto;
    &:hover {
      border-bottom: 0.33vh solid #8409d6;
    }
  }
}
.popover {
  position: absolute;
  top: 4.17vh;
  left: 50%;
  transform: translateX(-40%);
  // background-image: url('~@/static/unity/gradeNum.png');
  background-repeat: no-repeat;
  background-size: cover;
  height: 7.83vh;
  width: 240px;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  box-sizing: border-box;
  padding-bottom: 0.42vh;
}
</style>
