<template>
  <ElInput ref="input" :type="type" v-bind="$attrs" v-on="$listeners">
    <template v-slot:suffix>
      <XIcon @click="toggle" :icon="icon" class="x-login-password__view" :size="16">
      </XIcon>
    </template>
  </ElInput>
</template>

<script>
import {Input as ElInput} from 'element-ui';
import {XIcon} from '@newpearl/ui';
import {Visible, Invisible} from '@newpearl/icons';

export default {
  inheritAttrs: false,
  components: {
    ElInput,
    XIcon
  },
  data() {
    return {
      visible: false
    };
  },
  computed: {
    icon() {
      return this.visible ? Invisible : Visible;
    },
    type() {
      return this.visible ? 'text' : 'password';
    }
  },
  methods: {
    toggle() {
      this.visible = !this.visible;
    }
  }
};
</script>
