<script setup lang="ts">
import keyboardItem from './keyboard-item.vue'
import { key_space_name, key_space_value } from '.'
const props = defineProps<{
  keyList: anyObj[]
  disabled?: any
  // 开放：代表每个按键都可以随便按
  open?: boolean
}>()

const emit = defineEmits(['chooseAnswer'])

interface contentType {
  value: string
  count?: number
  selected?: boolean
  isLong?: boolean
  type?: string
  isSpecial?: boolean
  isIcon?: true
  iconName?: string
  iconHeight?: number
  iconWidth?: number
  onActive?: boolean
  countTotal?: number
  name?: string
  hasAnimation?: boolean
}

const keyboard = 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: 'Shift',
        isIcon: true,
        isSpecial: true,
        iconName: 'keyboard_upCase',
        iconHeight: 39,
        iconWidth: 30,
        onActive: false,
      },
      {
        isSpecial: true,
        value: '-',
      },
      {
        isSpecial: true,
        value: key_space_value,
        isLong: true,
        name: key_space_name,
      },
      {
        isSpecial: true,
        isIcon: true,
        iconName: 'keyboard_fenhao',
        iconHeight: 40,
        iconWidth: 14,
        value: "'",
      },
      {
        isSpecial: true,
        value: '.',
      },
    ],
  },
])
const onUp = ref(false) // 是否处于大写中

function handleClick(i: contentType) {
  if (props.disabled) return
  if (!i.count) return
  if (i.iconName === 'keyboard_upCase') {
    onUp.value = !onUp.value
  } else {
    emit('chooseAnswer', i)
  }
}

watch(
  () => onUp.value,
  nv => {
    keyboard.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
  const count = props.open ? 99999 : 0
  keyboard.value.forEach(item => {
    item.contentList.forEach(i => {
      i.count = count
    })
  })
}

// watch(
//   () => props.keyList,
//   nv => {
//     if (nv?.length) {
//       init()
//     } else {
//       clear()
//     }
//   },
// )

function init() {
  if (!props.keyList?.length) return
  clear()

  if (props.open) return

  props.keyList.forEach(key => {
    if (/^[A-Z]$/.test(key.value)) {
      // 有大写就把大写按钮置为可点击
      keyboard.value[3].contentList[0].count = 1
    }
    keyboard.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) {
//   keyboard.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>
<template>
  <div class="keyboard-list">
    <div v-for="item in keyboard" :key="item.type" class="keyboard-item-row">
      <keyboard-item
        v-for="i in item.contentList"
        :key="i.value"
        v-bind="i as any"
        @click="handleClick(i)"
      />
    </div>
  </div>
</template>
<style lang="scss" scoped>
* {
  box-sizing: border-box;
}
.keyboard-list {
  width: 100%;
  margin-left: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: 1.67vh;

  .keyboard-item-row {
    display: flex;
    justify-content: center;
    align-items: center;
    column-gap: 16px;
  }
}
</style>
