<script lang="ts" setup>
import type { PropType } from 'vue'
// Prefer using the project's uni-app InputType if available so the prop matches framework expectations
import type { InputType as UniInputType } from '@uni-helper/uni-app-types'

// Supported input keyboard types (uni-app / web):
// text - 文本输入键盘（默认）
// number - 数字输入键盘
// idcard - 身份证输入键盘
// digit - 带小数点的数字键盘
// tel - 电话输入键盘
// safe-password - 密码安全输入键盘
// nickname - 昵称输入键盘
// password, email - 其它常见类型
// Compose our input types from the project's InputType and add a couple extra platform-specific keys
type _InputType = UniInputType | 'safe-password' | 'nickname'

const props = defineProps({
  value: {
    type: String,
    default: ""
  },
  type:{
    type: String as PropType<_InputType>,
    default: 'text'
  },
  placeholder: {
    type: String,
    default: ""
  },
  rootClass: {
    type: String,
    default: ""
  },
  readonly: {
    type: Boolean,
    default: false
  },
  inputDirection: {
    type: String as PropType<'text-left' | 'text-right' | 'text-center'>,
    default: 'text-left'
  }
})

const emits = defineEmits(["update:value"])

const innerValue = computed({
  get: () => props.value,
  set: (val) => {
    emits("update:value", val)
  }
})

</script>

<template>
  <view class="relative w-full" :class="rootClass">
    <input :type="type" v-model="innerValue" :placeholder="placeholder" confirm-type="done" :disabled="readonly"
      :placeholder-style="`color:#C5C8D1;font-size:30rpx;${inputDirection === 'text-right' ? 'text-align:right;' : inputDirection === 'text-center' ? 'text-align:center;' : 'text-align:left;'} `" />
    <view class="absolute top-0 left-0 w-full h-full" v-if="readonly"></view>
  </view>
</template>

<style lang="scss" scoped></style>
