<script setup lang="ts">
import { ref, onMounted, onUnmounted, nextTick } from 'vue'
import useAudio from '@/page/subject/learnWord/hardMode/hooks/useAudio'
import { $font_color } from '@/styles/variate'
import { px2vh } from '@/utils'

const props = defineProps<{
  value?: string
  type?: 'top' | 'bottom'
  isLong?: boolean
  isSpecial?: boolean
  count?: number
  name?: string
  iconName?: string
  iconWidth?: number
  iconHeight?: number
  onUp?: boolean
}>()

const emit = defineEmits(['click'])

const OSS_URL = import.meta.env.VITE_OSS_URL

defineOptions({ name: 'KeyboardItem' })

const hasAnimation = ref(false)
const sound = useAudio()
function click() {
  if (props.count === 0) return
  emit('click')
  // hasAnimation.value = true
  // setTimeout(() => {
  //   hasAnimation.value = false
  // }, 100)
  // sound.play('fill_in.mp3')
}

function keyBoardInput(e: anyObj) {
  if (props.count === 0) return
  if (e.key === props.value || e.key === props.value?.toLocaleLowerCase()) {
    click()
  }
}

onMounted(() => {
  nextTick(() => {
    window.addEventListener('keydown', keyBoardInput)
  })
})

onUnmounted(() => {
  window.removeEventListener('keydown', keyBoardInput)
})
</script>

<template>
  <div
    :class="{
      'keyboard-item': true,
      isLong: isLong,
      top: type === 'top',
      bottom: type === 'bottom',
      isSpecial: isSpecial && count,
      onUpCase: onUp,
      hasCount: count,
      hasAnimation: hasAnimation,
    }"
    @click="click"
  >
    <div
      v-if="iconName"
      :class="['img', iconName]"
      :style="{
        width: px2vh(iconWidth as number),
        height: px2vh(iconHeight as number),
        background: `url(${OSS_URL}/icon/${iconName + (count ? '' : '_gray')}.png) 100% / contain  no-repeat`,
      }"
    ></div>
    <LineFont
      v-else
      :text="name || (value as any)"
      size="30"
      :borderColor="count ? $font_color : '#B5B7B5'"
    />
    <div class="keyboard-item-bg">
      <div class="center-bg"></div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
$w: 7.5vh;
$h: 6.33vh;
$iw: 4.67vh;
$ih: $iw;

.keyboard-item {
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: $w;
  height: $h;
  flex-shrink: 0;
  &:last-child {
    margin: 0;
  }
  .x-line-font {
    position: relative;
    z-index: 1;
    transform: translateY(-0.83vh);
    cursor: pointer;
  }
  .img {
    position: relative;
    z-index: 2;
    &.icon_keyboard_remove {
      transform: translateY(-0.5vh) !important;
    }
    &.keyboard_upCase {
      transform: translateY(-0.5vh) !important;
    }
    &.keyboard_fenhao {
      transform: translateY(-1.5vh) !important;
    }
  }
  &-bg {
    border-radius: 1.17vh;
    border: 0.33vh solid #b5b7b5;
    background: #d4d4d4;
    width: $w;
    height: $h;
    flex-shrink: 0;
    position: absolute;
    z-index: 0;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    cursor: pointer;

    .center-bg {
      width: $iw;
      height: $ih;
      border-radius: 0.83vh;

      border: 0.33vh solid #b5b7b5;
      background-color: #eee;
      transform: translateY(-0.25vh);
      position: relative;
      z-index: 2;
      cursor: pointer;

      &::after,
      &::before {
        position: absolute;
        z-index: 1;
        content: '';
        width: 2vh;
        height: 0;
        border-top: 0.25vh solid #b5b7b5;
      }
      &::after {
        right: -1.33vh;
        top: 116%;
        transform: rotate(45deg);
      }
      &::before {
        left: -1.33vh;
        top: 116%;
        transform: rotate(-45deg);
      }
    }
  }
  &.isSpecial {
    .x-line-font {
      transform: translateY(-0.5vh) !important;
    }
  }
  &.hasCount {
    $border_c: #34c2bf;
    .keyboard-item-bg {
      border-color: $border_c;
      background-color: #60dbd9;
      box-shadow: 0 0.33vh 0.33vh 0 rgba(0, 0, 0, 0.25);
      .center-bg {
        border-color: $border_c;
        background-color: #9df9f7;
        &::after,
        &::before {
          border-color: $border_c;
        }
      }
    }

    &.isSpecial {
      $border_c: #24b660;
      .keyboard-item-bg {
        border-color: $border_c;
        background-color: #49d683;
        .center-bg {
          border-color: $border_c;
          background-color: #6ff0a4;
          &::after,
          &::before {
            border-color: $border_c;
          }
        }
      }
    }

    &.remove {
      $border_c: #d43f3f;
      .keyboard-item-bg {
        border-color: $border_c;
        background-color: #e56565;
        .center-bg {
          border-color: $border_c;
          background-color: #ffa3a3;
          &::after,
          &::before {
            border-color: $border_c;
          }
        }
      }
    }

    &.isLong {
      $border_c: #b7ab00;
      .keyboard-item-bg {
        border-color: $border_c;
        background-color: #e5d605;
        .center-bg {
          border-color: $border_c;
          background-color: #fff01f;
          &::after,
          &::before {
            border-color: $border_c;
          }
        }
      }
    }
  }

  &.isLong {
    $long_w: 21.67vh;
    width: $long_w;
    .x-line-font {
      position: relative;
      z-index: 1;
      transform: translateY(-1.33vh) !important;
    }

    .keyboard-item-bg {
      width: $long_w;
      .center-bg {
        width: 19.33vh;
      }
    }
  }
  &.top {
    .x-line-font {
      transform: translateY(-0.6vh);
    }
  }
  &.bottom {
    .x-line-font {
      transform: translateY(-1.33vh);
    }
  }

  &.onUpCase {
    .x-line-font {
      transform: translateY(-0.67vh);
    }
  }
  &.hasAnimation {
    // 动画效果
    animation: hit 0.3s cubic-bezier(0.39, 0.575, 0.565, 1) both;
  }
  @keyframes hit {
    0% {
      -webkit-transform: scale(0.8);
      transform: scale(0.8);
    }
    100% {
      -webkit-transform: scale(1);
      transform: scale(1);
    }
  }
}
</style>
