<template>
  <el-input ref="inputRef" class="scanInput" v-bind="$attrs" @focus="setInputMethodToEnglish">
    <template #prefix>
      <img src="@/assets/icons/shaoma.svg" />
    </template>
    <template v-if="$attrs.showSuffix" #suffix>
      <i-ep-search @click.self="$emit('keydown')" />
    </template>
  </el-input>
</template>

<script lang="ts" setup>
const inputRef = ref<HTMLInputElement>();
const setInputMethodToEnglish = () => {
  // // 强制应用样式
  // if (inputRef.value) {
  //   inputRef.value.$el.querySelector("input").style.imeMode = "inactive";
  // }
  // const nativeInput = inputRef.value?.$el?.querySelector("input");
  // if (nativeInput) {
  //   nativeInput.setAttribute("inputmode", "latin");
  //   nativeInput.setAttribute("lang", "en");
  // }

  const input = inputRef.value?.$el?.querySelector("input");
  if (input) {
    input.setAttribute("inputmode", "latin");
    input.setAttribute("lang", "en");
    input.style.imeMode = "inactive";
  }
};
</script>

<style lang="scss" scoped>
.scanInput {
  height: 50px;
  border-radius: 76px;
  overflow: hidden;
  border: 1px solid #00000025;
  font-size: $f24;
  color: #00000080;

  :deep(.el-input__wrapper) {
    box-shadow: 0 0 0 0px var(--el-input-border-color, var(--el-border-color)) inset;
    cursor: default;

    .el-input__inner {
      cursor: default !important;
    }
  }

  :deep(.el-input-group__prepend) {
    border: 0px;
    background-color: white;
  }
}
</style>
