<template>
  <Field
    class="base-input text-white"
    :label="label"
    :placeholder="placeholder"
    v-model="theValue"
    :type="getInputType"
    :maxlength="maxlength"
    autocomplete="off"
  >
    <template #button>
      <div class="flex items-center h-6">
        <img
          src="@/assets/icons/close.png"
          @click="handleClear"
          v-if="clearable && value && value.length !== 0"
          name="cross"
        />
        <slot name="button"></slot>
        <IconVue
          size="14"
          :name="showPwd ? 'icon-xianshi1' : 'icon-yincang'"
          color="rgb(136,153,179)"
          v-if="type === 'password' && showEye"
          @click="handleClickEye"
        />
      </div>
    </template>
  </Field>
</template>

<script lang="ts">
import { PropType, defineComponent } from "vue";
import { Field, FieldType } from "vant";
import { tType } from "./types";
import IconVue from "../Icon.vue";

export default defineComponent({
  emits: ["change", "clear"],
  components: {
    Field,
    IconVue,
    // Icon,
  },
  props: {
    type: {
      type: String as PropType<tType>,
      default: "text",
    },
    placeholder: String,
    clearable: {
      type: Boolean,
      default: false,
    },
    value: String,
    maxlength: Number,
    label: {
      type: String,
      default: "",
    },
    showEye: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      showPwd: false,
    };
  },
  computed: {
    theValue: {
      get(): string | undefined {
        return this.value;
      },
      set(v: string) {
        this.handleChange(v);
      },
    },
    getInputType(): FieldType {
      if (this.type === "password") {
        return this.showPwd ? "text" : "password";
      } else {
        return this.type;
      }
    },
  },
  methods: {
    handleClickEye() {
      this.showPwd = !this.showPwd;
    },
    handleChange(value: string) {
      this.$emit("change", value);
    },
    handleClear() {
      this.$emit("change", "");
      this.$emit("clear");
    },
  },
});
</script>

<style scoped lang="less">
@color1: #68739c;
@caretColor: #8d92af;
@textColor: #1b1f37;

.base-input {
  background-color: transparent;
  // border-bottom: 1px solid @color1;
  caret-color: @caretColor;
  padding: 10px 0px;

  /deep/ input {
    color: @textColor;
  }
  .eyeContainer {
    width: 14px;
    height: 14px;
  }
  .eyeIcon {
    width: 14px;
  }
}

.base-input::after {
  left: 0;
  right: 0;
  border-bottom: 1px solid @color1;
}
</style>
