<template>
  <div v-if="isShow" class="next__test__box">
    <div class="next__test pointer" @click="props.handle.c">
      <text>重玩此关</text>
    </div>
    <div class="next__test pointer" @click="props.handle.a">
      <text>完美通关</text>
    </div>
    <div class="next__test pointer" @click="props.handle.b">
      <text>正常通关</text>
    </div>
  </div>
</template>
<script setup lang="ts">
import { useLearnWordStore } from '@/stores/learnWord/useLearnWordStore'
import { computed } from 'vue'
const props = defineProps<{
  handle: anyObj
}>()

const learnWordStore = useLearnWordStore()
const isShow = computed(() => learnWordStore.showTestButton)
</script>
<style lang="scss" scoped>
.next__test__box {
  display: flex;
  position: fixed;
  right: 40px;
  bottom: 3.33vh;
  z-index: 100;
  opacity: 0.99;

  .next__test {
    width: 180px;
    height: 8.33vh;
    background-color: #fff459;
    border-radius: 1.67vh;
    text-align: center;

    text {
      color: var(--unnamed, #736d20);
      text-align: center;
      font-family: $font-special;
      font-size: 2.67vh;
      font-style: normal;
      font-weight: 400;
      line-height: 8.33vh;
      /* 150% */
    }
    & + .next__test {
      margin-left: 40px;
    }
  }
}
</style>
