<template>
  <Field
    class="base-input text-font-white"
    :label="label"
    :placeholder="placeholder"
    :value="value"
    @input="handleChange"
    :type="getInputType"
    :maxlength="maxlength"
    autocomplete="off"
  >
    <template #button>
      <div class="flex items-center">
        <img
          src="@/assets/icons/close.png"
          @click="handleClear"
          v-if="clearable && value && value.length !== 0"
          name="cross"
        />
        <slot name="button"></slot>
        <img
          v-if="type === 'password' && showEye"
          :src="showPwd ? eyeOpenIcon : eyeCloseIcon"
          @click="handleClickEye"
          name="cross"
          class="ml-1 eyeIcon"
        />
      </div>
    </template>
  </Field>
</template>

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

const eyeOpenIcon = require("@/assets/icons/eye_open.png");
const eyeCloseIcon = require("@/assets/icons/eye_close.png");

export default Vue.extend({
  components: {
    Field,
    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,
      eyeOpenIcon,
      eyeCloseIcon,
    };
  },
  computed: {
    getInputType(): string {
      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", "");
    },
  },
});
</script>

<style scoped lang="less">
@color1: #68739c;
@caretColor: #8899b3;
@textColor: #eef1f6;

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

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

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