<!--
 * @Author: Do not edit
 * @Date: 2024-04-03 15:01:04
 * @LastEditTime: 2024-04-07 15:14:39
 * @LastEditors: DY
 * @Description:
-->
<template>
  <div>
    <div v-show="showKeyboard" >
      <SimpleKeyboard ref="refSimpleKeyboard" class="Keyboard" @onChange="onChangeKeyboard" @empty="empty" />
    </div>
  </div>
</template>
<script>
import SimpleKeyboard from './SKeyboard.vue'
export default {
  name: 'Keyboard',
  components: {
    SimpleKeyboard
  },
  data () {
    return {
      showKeyboard: false, // 键盘默认隐藏
      value: '',
      key: ''
    }
  },
  watch: {
    key (val) {
      this.key = val
      if (this.showKeyboard) {
        this.showKeyboard = false
        setTimeout(() => {
          this.showKeyboard = true
        }, 100)
      }
    }
  },
  methods: {
    // inpuit获取焦点显示虚拟键盘
    onInputFocus (res) {
      this.showKeyboard = true
    },
    // 给输入框赋值
    onChangeKeyboard (input) {
      this.$emit('input', { value: input, key: this.key })
    },
    // 隐藏键盘 父组件调用
    closeInputFocus () {
      this.showKeyboard = false
    },
    // 隐藏键盘 子组件调用
    closekeyboard () {
      this.showKeyboard = false
    },
    // 清空输入框
    empty () {
      this.$emit('input', { value: '', key: this.key })
    },
    // 给虚拟键盘赋当前输入框的值
    setKeyboardInput (input) {
      console.log('给虚拟键盘赋当前输入框的值', input)
      this.$refs.refSimpleKeyboard.onChangeFocus(input)
    }
  }
}
</script>
<style lang="less" scoped>
// 键盘样式
.Keyboard{
  position: absolute;
}
</style>
