<template>
  <Popup
    :show="show"
    closeable
    :closeIcon="false"
    :mask="mask === true"
    :size="size"
    position="bottom"
    @close="onClose"
  >
    <NumberKeyBoardInner
      v-bind="props"
      @finish="onFinish"
      @input="emit('input', $event)"
      @delete="emit('delete')"
    />
  </Popup>
</template>

<script setup lang="ts">
import Popup from '../dialog/Popup.vue';
import type { NumberKeyBoardInnerProps } from './NumberKeyBoardInner.vue';
import NumberKeyBoardInner from './NumberKeyBoardInner.vue';


export interface NumberKeyBoardInstance {
  /**
   * 关闭键盘
   */
  close: () => void;
}
export interface NumberKeyBoardProps extends NumberKeyBoardInnerProps {
  /**
   * 是否显示键盘
   * @default false
   */
  show: boolean;
  /**
   * 是否显示键盘遮罩，显示遮罩时无法操作下方组件。
   * @default false
   */
  mask?: boolean;
  /**
   * 键盘大小
   * @default 'auto'
   */
  size?: string|number;
}

const emit = defineEmits([ 'delete', 'input', 'finish', 'update:show' ]);
const props = withDefaults(defineProps<NumberKeyBoardProps>(), {
  showSideButtons: false,
  keyPressedImpactFeedback: true,
  keyRandomOrder: false,
  showCloseButton: true,
  size: 'auto',
});

const onClose = () => {
  emit('update:show', false);
}
const onFinish = (value: string) => {
  emit('update:show', false);
  emit('finish');
}

defineExpose<NumberKeyBoardInstance>({
  close: onClose,
});

</script>