<template>
  <div class="h-input">
    <div class="input-item" :style="{ background }" v-if="type == 'mobile'">
      <div class="code">+{{ MOBILE_CODE }}</div>
      <input
        :class="className"
        :style="style"
        :placeholder="placeholder"
        type="number"
        :value="modelValue"
        @input="onInput"
      />
    </div>
    <div
      class="input-item"
      :style="{ background }"
      v-else-if="type == 'password'"
    >
      <input
        :class="className"
        :style="style"
        :placeholder="placeholder"
        :type="passwordType"
        :maxlength="maxlength"
        :value="modelValue"
        autocomplete="off"
        @input="onInput"
      />
      <van-icon
        name="closed-eye"
        color="#6e6c6c"
        size="30px"
        v-show="!showPasswordVisible"
        @click="onShowPassword(true)"
      />
      <van-icon
        name="eye-o"
        color="#6e6c6c"
        size="30px"
        v-show="showPasswordVisible"
        @click="onShowPassword(false)"
      />
    </div>
    <div class="input-item" :style="{ background }" v-else>
      <input
        :class="className"
        :style="style"
        :placeholder="placeholder"
        :maxlength="maxlength"
        :type="type"
        :value="modelValue"
        @input="onInput"
      />
      <slot name="right" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from "vue";
import { MOBILE_CODE } from "@/common/config";

const props = defineProps({
  modelValue: { type: String, defaule: "", required: true },
  type: { type: String, default: "text", required: false },
  placeholder: { type: String, default: "", required: false },
  background: { type: String, default: "", required: false },
  color: { type: String, default: "#6e6c6c", required: false },
  center: { type: Boolean, default: false, required: false },
  className: { type: String, default: "", required: false },
  maxlength: { type: Number, default: 999, required: false },
});

const emit = defineEmits(["update:modelValue", "input", "blur", "code"]);

const showPasswordVisible = ref(false);
const passwordType = ref("password");
const onShowPassword = (status: boolean) => {
  showPasswordVisible.value = status;
  passwordType.value = status ? "text" : "password";
};
const onInput = (e: any) => {
  if (e.target.value.length > props.maxlength)
    e.target.value = e.target.value.slice(0, props.maxlength);
  emit("update:modelValue", e.target.value);
  emit("input", e.target.value);
};

const style: any = computed(() => {
  return {
    background: props.background,
    textAlign: props.center ? "center" : "left",
    color: props.color,
  };
});
</script>

<style lang="scss" scoped>
.h-input {
  .input-item {
    background: #141618;
    margin: 0.2rem 0;
    border-radius: 0.2rem;
    display: flex;
    align-items: center;
    padding: 0 0.4rem;
    .code {
      font-size: 0.35rem;
      margin-right: 0.2rem;
      // color: #6e6c6c;
      color: #fff;
    }
    input {
      color: #fff !important;
      background: #141618;
      box-sizing: border-box;
      width: 100%;
      border-radius: 6px;
      border: none;
      font-size: 0.5rem;
      padding: 0.3rem 0;
      flex: 1;
      font-size: 0.36rem;
    }
    ::-webkit-input-placeholder {
      /*Internet Explorer 10+*/
      color: #868686;
      font-size: 0.35rem;
    }
  }
}
</style>
