<template>
  <div class="keyboard">
    <div
      class="letter-item"
      @click="handleLetter(item, index)"
      :class="[item === '空格' ? 'space' : '', item === 'del' ? 'del' : '', letterIdx === index ? 'active' : '']"
      v-for="(item, index) of letter"
      :key="item"
      v-html="generateInnerHTML(item)"
    ></div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { letter } from '../Search/tabs'

function generateInnerHTML(item) {
  return item === 'del' ? `<img src="${require('@/assets/images/search/del.svg')}" alt="">` : item
}

const emits = defineEmits(['del', 'handle-letter'])
const timer = ref(null)
const letterIdx = ref(-1)
function handleLetter(item, index) {
  letterIdx.value = index
  clearTimeout(timer.value)
  timer.value = setTimeout(() => {
    letterIdx.value = -1
    clearTimeout(timer.value)
  }, 300)

  if (item !== '空格' && item !== 'del') {
    emits('handle-letter', item)
    return
  }

  item === 'del' && emits('del')
}
</script>

<style lang="scss" scoped>
.keyboard {
  display: flex;
  flex-wrap: wrap;
  padding-top: 40px;
  .letter-item {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 48px;
    height: 48px;
    text-align: center;
    line-height: 48px;
    background: #ffffff;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.03), inset 0px -1px 0px rgba(177, 189, 220, 0.1);
    border-radius: 8px;
    font-weight: 700;
    font-size: 18px;
    font-family: 'font_bold';
    color: rgba(0, 0, 0, 0.6);
    margin-right: 8px;
    margin-bottom: 8px;
    &:nth-child(21) {
      margin-left: 28px;
    }
    &.space {
      font-size: 14px;
    }
    &.del {
      width: 104px;
    }
    &.active {
      background: var(--search-keyboardActiveBg);
      color: #fff;
    }
  }
}
</style>
