<template>
  <div class="cursor-pointer w-[40px] h-[50px] leading-[50px] text-center" style="display: flex;display: -webkit-flex; align-items: center; -webkit-align-items: center; justify-content: center;-webkit-justify-content: center;">
    <!-- <svg-icon
      :icon-class="isFullscreen ? 'exit-fullscreen' : 'fullscreen'"
      @click="toggle"
    /> -->
    <!-- {{ isFullscreen }}
    <img :src="isFullscreen ? '@/assets/MenuIcon/top_qp.png' : '@/assets/MenuIcon/top_qp1.png'" alt=""> -->
    <img v-if="isFullscreen" src="@/assets/MenuIcon/top_qp1.png" alt="" @click="toggle" style="width:16px;height: 16px;">
    <img v-else src="@/assets/MenuIcon/top_qp.png" alt="" @click="toggle" style="width:16px;height: 16px;">
  </div>
</template>

<script setup lang="ts">
import { useFullscreen } from '@vueuse/core';

const { isFullscreen, toggle } = useFullscreen();
window.addEventListener('keydown', function (e:any) {
  e = e || window.event
  if (e.keyCode===122) {
    useFullscreen().toggle()
    e.preventDefault()
  }
})
</script>
