<template>
  <view :class="keyboardClass" :style="keyboardStyle">
    <view :class="bem.e('content')">
      <template v-if="type === 'number'">
        <view
          v-for="key in numberKeys"
          :key="key"
          :class="classNames(bem.e('key-wrapper'), bem.em('key-wrapper', key))"
          @click="onKeyClick(key)"
        >
          <view :class="bem.e('key')">
            {{ key }}
          </view>
        </view>
      </template>
      <template v-else-if="type === 'digit'">
        <view
          v-for="key in digitKeys"
          :key="key"
          :class="classNames(bem.e('key-wrapper'), bem.em('key-wrapper', key))"
          @click="onKeyClick(key)"
        >
          <view :class="bem.e('key')">
            {{ key }}
          </view>
        </view>
      </template>
      <template v-else-if="type === 'idcard'">
        <view
          v-for="key in idcardKeys"
          :key="key"
          :class="classNames(bem.e('key-wrapper'), bem.em('key-wrapper', key))"
          @click="onKeyClick(key)"
        >
          <view :class="bem.e('key')">
            {{ key }}
          </view>
        </view>
      </template>
      <template v-else-if="type === 'random'">
        <view
          v-for="key in randomKeys"
          :key="key"
          :class="classNames(bem.e('key-wrapper'), bem.em('key-wrapper', key))"
          @click="onKeyClick(key)"
        >
          <view :class="bem.e('key')">
            {{ key }}
          </view>
        </view>
      </template>
      <template v-else-if="type === 'plate'">
        <template v-if="mode === 'chinese'">
          <view
            v-for="(key, i) in chineseKeys"
            :key="key"
            :class="
              classNames(bem.e('key-wrapper'), bem.em('key-wrapper', key))
            "
            :style="`order: ${i}`"
            @click="onKeyClick(key)"
          >
            <view :class="bem.e('key')">
              {{ key }}
            </view>
          </view>
          <view
            :class="bem.e('intercept')"
            :style="`order: ${interceptOrder}`"
          ></view>
        </template>
        <template v-if="mode === 'english'">
          <view
            v-for="(key, i) in englishKeys"
            :key="key"
            :style="`order: ${i}`"
            :class="
              classNames(bem.e('key-wrapper'), bem.em('key-wrapper', key))
            "
            @click="onKeyClick(key)"
          >
            <view :class="bem.e('key')">
              {{ key }}
            </view>
          </view>
        </template>
        <view
          :class="toggleClass"
          :style="`order: ${interceptOrder}`"
          @click="onToggle"
        >
          <view :class="bem.e('key')">
            {{ toggleKey }}
          </view>
        </view>
      </template>
      <view :class="backspaceClass" style="order: 100" @click="onBackspace">
        <view :class="bem.e('key')">
          <sar-icon name="backspace" />
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts">
import { defineComponent as _defineComponent } from "vue";
import { computed, ref, watch } from "vue";
import { classNames, stringifyStyle, createBem } from "../utils";
import {
  numberKeys,
  digitKeys,
  idcardKeys,
  chineseKeys,
  englishKeys,
  getRandomKeys,
  keyboardProps
} from "./common";
import SarIcon from "../icon/icon.vue";
const __default__ = {
  options: {
    virtualHost: true,
    styleIsolation: "shared"
  }
};
export default /* @__PURE__ */ _defineComponent({
  ...__default__,
  __name: "keyboard",
  props: keyboardProps,
  emits: ["input", "delete"],
  setup(__props, { expose: __expose, emit: __emit }) {
    const props = __props;
    const emit = __emit;
    const bem = createBem("keyboard");
    const onKeyClick = (key) => {
      emit("input", key);
    };
    const onBackspace = () => {
      emit("delete");
    };
    __expose({
      shuffle() {
        randomKeys.value = getRandomKeys();
      },
      toggle() {
        onToggle();
      }
    });
    const randomKeys = ref([]);
    watch(
      () => props.type,
      () => {
        if (props.type === "random") {
          randomKeys.value = getRandomKeys();
        }
      },
      {
        immediate: true
      }
    );
    const mode = ref("chinese");
    const toggleKey = computed(() => {
      return {
        chinese: "ABC",
        english: "\u7701\u4EFD"
      }[mode.value];
    });
    const interceptOrder = computed(() => {
      if (mode.value === "english") {
        return englishKeys.length - 8;
      }
      const overflow = chineseKeys.length % 10;
      return chineseKeys.length - (overflow > 7 ? 0 : overflow + 1);
    });
    const onToggle = () => {
      mode.value = mode.value === "chinese" ? "english" : "chinese";
    };
    const keyboardClass = computed(() => {
      return classNames(bem.b(), bem.m(props.type), props.rootClass);
    });
    const keyboardStyle = computed(() => {
      return stringifyStyle(props.rootStyle);
    });
    const toggleClass = computed(() => {
      return classNames(bem.e("key-wrapper"), bem.em("key-wrapper", "toggle"));
    });
    const backspaceClass = computed(() => {
      return classNames(bem.e("key-wrapper"), bem.em("key-wrapper", "backspace"));
    });
    const __returned__ = { props, emit, bem, onKeyClick, onBackspace, randomKeys, mode, toggleKey, interceptOrder, onToggle, keyboardClass, keyboardStyle, toggleClass, backspaceClass, get classNames() {
      return classNames;
    }, get numberKeys() {
      return numberKeys;
    }, get digitKeys() {
      return digitKeys;
    }, get idcardKeys() {
      return idcardKeys;
    }, get chineseKeys() {
      return chineseKeys;
    }, get englishKeys() {
      return englishKeys;
    }, SarIcon };
    return __returned__;
  }
});
</script>

<style lang="scss">
@use './index.scss';
</style>