<template>
  <div class="keyboard-list">
    <div v-for="item in keyboardList" :key="item.type" class="keyboard-item">
      <div
        v-for="i in item.contentList"
        :key="i.value"
        :class="{
          'keyboard-item-content': true,
          isLong: i.isLong,
          top: i.type === 'top',
          bottom: i.type === 'bottom',
          isSpecial: i.isSpecial && i.count,
          onUpCase: onUp,
          hasCount: i.count,
          hasAnimation: i.hasAnimation,
        }"
        @click="handleClick(i)"
      >
        <!-- {{ i.value }} -->
        <!-- <Icon
                    v-if="i.iconName"
                    :name="i.iconName + (i.count ? '' : '_gray')"
                    :width="i.iconWidth"
                    :height="i.iconHeight"
                    :class="i.iconName"
                ></Icon> -->
        <div
          v-if="i.iconName"
          :class="['img', i.iconName]"
          :style="{
            width: (i.iconWidth as number) / 19.2 + 'vw',
            height: (i.iconHeight as number) / 19.2 + 'vw',
            background: `url(${OSS_URL}/icon/${i.iconName + (i.count ? '' : '_gray')}.png) 100% / contain  no-repeat`,
          }"
        ></div>
        <LineFont
          v-else
          :text="i.name ? i.name : i.value"
          size="40"
          :borderColor="i.count ? $font_color : '#B5B7B5'"
        ></LineFont>
        <div class="keyboard-item-content-bg">
          <div class="center-bg"></div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import type { contentType } from '../interface/index.ts'
import useCommonAudio from '@/hooks/useCommonAudio.ts'
import useAudio from '../hooks/useAudio.ts'
import { $font_color } from '@/styles/variate.ts'
const props = defineProps<{
  keyList: anyObj[]
}>()

const emit = defineEmits(['chooseAnswer'])

const OSS_URL = import.meta.env.VITE_OSS_URL
const sound = useCommonAudio(true)
const audio = useAudio()

const btn_del = `${OSS_URL}/xuexiaole_clinet/icon/btn_del.png`
const keyboardList = ref<
  {
    type: string
    contentList: contentType[]
  }[]
>([
  {
    type: 'oneLine',
    contentList: [
      {
        value: 'q',
        selected: false,
        isLong: false,
        type: 'bottom',
      },
      {
        value: 'w',
        selected: false,
      },
      {
        value: 'e',
        selected: false,
      },
      {
        value: 'r',
        selected: false,
      },
      {
        value: 't',
        selected: false,
        type: 'top',
      },
      {
        value: 'y',
        selected: false,
        type: 'bottom',
      },
      {
        value: 'u',
        selected: false,
      },
      {
        value: 'i',
        selected: false,
        type: 'top',
      },
      {
        value: 'o',
        selected: false,
      },
      {
        value: 'p',
        selected: false,
        type: 'bottom',
      },
    ],
  },
  {
    type: 'twoLine',
    contentList: [
      {
        value: 'a',
        selected: false,
      },
      {
        value: 's',
        selected: false,
      },
      {
        value: 'd',
        selected: false,
        type: 'top',
      },
      {
        value: 'f',
        selected: false,
        type: 'top',
      },
      {
        value: 'g',
        selected: false,
        type: 'bottom',
      },
      {
        value: 'h',
        selected: false,
        type: 'top',
      },
      {
        value: 'j',
        selected: false,
        type: 'top',
      },
      {
        value: 'k',
        selected: false,
      },
      {
        value: 'l',
        selected: false,
        type: 'top',
      },
    ],
  },
  {
    type: 'threeLine',
    contentList: [
      {
        value: 'z',
        selected: false,
      },
      {
        value: 'x',
        selected: false,
      },
      {
        value: 'c',
        selected: false,
      },
      {
        value: 'v',
        selected: false,
      },
      {
        value: 'b',
        selected: false,
        type: 'top',
      },
      {
        value: 'n',
        selected: false,
      },
      {
        value: 'm',
        selected: false,
      },
    ],
  },
  {
    type: 'fourLine',
    contentList: [
      {
        value: 'CapsLock',
        isIcon: true,
        isSpecial: true,
        iconName: 'keyboard_upCase',
        iconHeight: 50,
        iconWidth: 38,
        onActive: false,
      },
      {
        isSpecial: true,
        value: '-',
      },
      {
        isSpecial: true,
        value: ' ',
        isLong: true,
        name: 'space',
      },
      {
        isSpecial: true,
        isIcon: true,
        iconName: 'keyboard_fenhao',
        iconHeight: 40,
        iconWidth: 14,
        value: "'",
      },
      {
        isSpecial: true,
        value: '.',
      },
    ],
  },
])
const onUp = ref(false) // 是否处于大写中

function handleClick(i: contentType) {
  if (!i.count) return
  i.hasAnimation = true
  setTimeout(() => {
    i.hasAnimation = false
  }, 300)
  if (i.iconName === 'keyboard_upCase') {
    onUp.value = !onUp.value
  } else {
    emit('chooseAnswer', i)
  }
}

watch(
  () => onUp.value,
  nv => {
    keyboardList.value.forEach(item => {
      item.contentList.forEach(i => {
        i.value = !i.isSpecial ? (nv ? i.value.toUpperCase() : i.value.toLowerCase()) : i.value
      })
    })
  },
)

function clear() {
  onUp.value = false
  keyboardList.value.forEach(item => {
    item.contentList.forEach(i => {
      i.count = 0
    })
  })
}
function init() {
  if (props.keyList) {
    clear()
    props.keyList.forEach(key => {
      if (/^[A-Z]$/.test(key.value)) {
        // 有大写就把大写按钮置为可点击
        keyboardList.value[3].contentList[0].count = 1
      }
      keyboardList.value.forEach(item => {
        item.contentList.forEach(i => {
          if (i.value === key.value.toLowerCase()) {
            i.count ? i.count++ : (i.count = 1)
            i.countTotal ? i.countTotal++ : (i.countTotal = 1)
          }
        })
      })
    })
  }
}

function keyBoardInput(e: anyObj) {
  console.log(e.key)
  keyboardList.value.forEach(item => {
    item.contentList.forEach(i => {
      if (e.key === i.value || e.key === i.value.toLocaleLowerCase()) {
        handleClick(i)
      }
    })
  })
}

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

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

<style lang="scss" scoped>
* {
  box-sizing: border-box;
}
.keyboard-list {
  width: 100%;
  margin-left: 20px;
  .keyboard-item {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 1.33vh;
    &:last-child {
      margin: 0;
    }
    &-content {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-right: 6px;
      position: relative;
      width: 94px;
      height: 6.67vh;
      flex-shrink: 0;
      &:last-child {
        margin: 0;
      }
      .x-line-font {
        position: relative;
        z-index: 1;
        transform: translateY(-10px);
        cursor: pointer;
      }
      .img {
        position: relative;
        z-index: 2;
        &.keyboard_upCase {
          transform: translateY(-6px) !important;
        }
        &.keyboard_fenhao {
          transform: translateY(-18px) !important;
        }
      }
      &-bg {
        border-radius: 1.17vh;
        border: 0.33vh solid #b5b7b5;
        background: #d4d4d4;
        width: 94px;
        height: 6.67vh;
        flex-shrink: 0;
        position: absolute;
        z-index: 0;
        display: flex;
        justify-content: center;
        align-items: flex-start;
        cursor: pointer;

        .center-bg {
          width: 64px;
          height: 5.33vh;
          border-radius: 0.83vh;

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

          &::after,
          &::before {
            position: absolute;
            z-index: 1;
            content: '';
            width: 20px;
            height: 0;
            border-top: 0.25vh solid #b5b7b5;
          }
          &::after {
            right: -16px;
            top: 109%;
            transform: rotate(45deg);
          }
          &::before {
            left: -16px;
            top: 109%;
            transform: rotate(-45deg);
          }
        }
      }
      &.isSpecial {
        .x-line-font {
          transform: translateY(-6px) !important;
        }
        // 最后一层蓝色
        .keyboard-item-content-bg {
          border-color: #29b6b2;
          background-color: #60dbd8;
          .center-bg {
            border-color: #29b6b2;
            background-color: #9df9f7;
            &::after,
            &::before {
              border-color: #29b6b2;
            }
          }
        }
      }
      &.hasCount {
        .keyboard-item-content-bg {
          border-color: #bdb100;
          background-color: #e5d81c;
          .center-bg {
            border-color: #bdb100;
            background-color: #fff01f;
            &::after,
            &::before {
              border-color: #bdb100;
            }
          }
        }
      }
      &.isLong {
        width: 260px;
        .x-line-font {
          position: relative;
          z-index: 1;
          transform: translateY(-16px) !important;
        }
        .keyboard-item-content-bg {
          width: 260px;
          .center-bg {
            width: 232px;
          }
        }
      }
      &.top {
        .x-line-font {
          transform: translateY(-6px);
        }
      }
      &.bottom {
        .x-line-font {
          transform: translateY(-16px);
        }
      }

      &.onUpCase {
        .x-line-font {
          transform: translateY(-8px);
        }
      }
      &.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>
