<template>
	<el-input :model-value="value" :placeholder="placeholder" :maxlength="maxlength" :type="type"
	          @input="_onInput" :onpaste="`return ${this.paste}`" :oncontextmenu="`return ${this.paste}`" :oncopy="`return ${this.paste}`" :oncut="`return ${this.paste}`">
		<template v-if="prefix" #prefix><i :class="prefix"></i></template>
		<template #suffix><div @click="_changeType" class="hover8 fz14" :class="type == 'password' ? 'bIcon-hidePsw' : 'bIcon-psw'"></div></template>
	</el-input>
</template>

<script>
	export default {
		name: "st-password",
		emits:["update:modelValue"],
		props:{
			modelValue:String,
			prefix : {
				type : String ,
				default : "bIcon-passwordFill hover9"
			},
			placeholder : {
				type : String ,
				default : "请输入密码"
			},
			maxlength : {
				type : Number ,
				default : 20
			},
			paste : {
				type : Boolean,
				default : true
			}
		},
		data() {
			return {
				value : this.modelValue ,
				type : "password"
			}
		},
		methods: {
			_changeType(){
				this.type = this.type == "password" ? "text" : "password" ;
			},
			_onInput(value){
				this.value = value ? value.trim() : value ;
				this.$emit("update:modelValue" , this.value );
			}
		}
	}
</script>