
<template>
<div class="textfiled-input-container">
  <div class="textfiled-input-row">

    <input
      class="textfiled-input"
      :maxlength="maxlength"
      :autofocus="autofocus"
      :type="inputType"
      :name="name"
      :placeholder="placeholder"
      :disabled="disabled"
      v-model="pwdValue"
      @focus="onPwdFocus"
      @blur="onPwdBlur"
      @return="onPwdReturn"
      @input="onPwdInput"
      @change="onPwdChange"
      :key="inputType"
      ref="input"/>
      <!-- 131269切换时数据不丢失 -->
      <!-- clear -->
      <div class="textfiled-input__clear-container" v-if="isClearShow">
        <image @click="clear" class="textfiled-input__clear" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAAACXBIWXMAAAsTAAALEwEAmpwYAAADQElEQVRIia3WS6jVVRTH8c/1XrT3QwxpoBFlpAWBcYUkykgskJ6kNLJsuGjgpLCa1SAtIgRZOqgowx4olTYoRcusoNRKUkKkyCLQqMDoccnu9TTY+9jh9j/nXs09+fP/r73+3732+q29V1+r1TKekZnnYhYuxlk4iu9wICJGxvUT9PUCZuZ5uB/3Yg76G6b9hi14HlsiomcEjcDMnIDA47gQLXyJ3fgWf+AiXIEbMLW6foaIiF3jBmbmFLyGmzGE1ciIONT0g7q4m/AwFmAEj0XEyjGBmTkVO3AlduK+bqAu8LvwHCZjTUREV2BmnoGPcC3WY2lE/D1eWAf0MryLy7F8dKSdwGexDJtx98korwv0U1yAuZ057Wu1WjJzliKKH3FVRBw9VVgH9A68pQhpsK3egWp/RJH8o6cDBhGxKTO3KkK6Fe/AQGaej0X4Qcnd6JX2Y61SYxtH2SbiKXwRES81cFdW4AMngIr8J2FDRAw3OPXjNizNzCUR8UoHbANuxyo0AXfgCG7JzIGIGB7AYDV+0OAgIo5l5ny8h3WZCRs7YJuVGmzyPZ6ZO7FYKbX9A7i02g80OVXH/Zk5F+9jnaLmwQpbFBHHuvniYH1ObwMn1Q+/9HASEV9n5gJFzYPYOw4Y/Fyfkyk5bB8153QY/zNqzlZUn2Fco4hh7RjAM+vzzzbwcP0wDYd6wNo5exVPYGsxpYjoBW2n7HAbuK9+mIMPG2B92KTU0nrlfB3JzHmKCjMzh7qURfu/x/FVG7i9Gu7EMw0Ok5ScvaycryMQEd9U6HZcp6EsMvMSZev3RMSv/Hu07cFszI6IvV1WetIjM1cqJbMsIla1I4SnlTtwhbJ1pwM2HQ8qrciJ6NsRTsAnytZFRKz5n7ABbMONOqI7AayTZmIXJuKeiHj7FGH9eAFLFFHN77zqRt/4C/FGfV12spHWi+BFRYAHcX1E/NQ5p6mnWYjXcbbSjS0fS0h1CxcrGpiGz7EwIo6Mntuta5upJHpQOYk+xpvKln+P3zEFMzCvwqYr9ba6LnKoaXFd+9IqpEV4SOlzeo2/lFQ8GRH7ek3s2Qh3wGdgPq5WOu8+HFN61N3Y1i7ssca4gKdz/AMrrmWzLf9vBgAAAABJRU5ErkJggg=="></image>
      </div>
  </div>
  <div class="textfiled-eye-container" @click="toggleEye">
    <image class="textfiled-icon-eye" v-if="!isPwdShow" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAeCAYAAABe3VzdAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDowMjM5RTVDNjExMkQxMUU4ODk4MkI1MzNCMjk3NjlBMyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDowMjM5RTVDNzExMkQxMUU4ODk4MkI1MzNCMjk3NjlBMyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjAyMzlFNUM0MTEyRDExRTg4OTgyQjUzM0IyOTc2OUEzIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjAyMzlFNUM1MTEyRDExRTg4OTgyQjUzM0IyOTc2OUEzIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+EtXgnwAAAd5JREFUeNrsl00oRFEUx+cNxkeaLJQaFFGzshTZYSEsxMJeFphkoazsbOyUxYyvWFmILJWPoixI1mbBlJJGFhQyzWLG87t11HjNm5lm3oxR79Wv05t73zn/e+45973RdF13FPPldBT5ZQu0BRaVwEAg4FT8hRCz2MYfbiHERFeBxZWquBI/pcBDaFa2UJkkjjLrEvckncAZOINu2Mu3SBE3CWNwB9MpBfp8vi9MH1zDCBxL+vN1DcIKRKCD+HHjBC3Zqw5RZZhz6IQgdPHwm8WZG4ADUEnx4j+UbK5m9i7GSQnmCHohCj1wiSMrxE3Aqohrw2cwm3OwVqUdnqACLmCTAJU5iCvH7Io4hyz8JdUzZltcJ21/JTXZAqdQDzGYhQ1WHs30jMMMwTZUSdn0w5YkoRVfzxkJNIr7KVzZ8ilYTsi8CrAGN/CZuP3SXB4YhgVwy9AcLKmGTCgjU5G/BPKAhnk3ijMsQG3xOCxCtWH4HlQzNUGNYUxt6zw+X01qXYl0M66ny2ADJixHTrpt88pRMQrthilqofuwo06EVOUgvjzMecy4i7PszkZ4kFoN59rxln7NiJgPuY1YIc7+HixGgTGxccs8qiaxEr/f77LSn2b/L7YF2gL/ucBvAQYAwBAw3EDG3PYAAAAASUVORK5CYII="></image>
    <image class="textfiled-icon-eye" v-if="isPwdShow" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAeCAYAAABe3VzdAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDoxMDcxMEM0NDEwQTAxMUU4OTZFMUY5QTZFREM3NTI0NSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDoxMDcxMEM0NTEwQTAxMUU4OTZFMUY5QTZFREM3NTI0NSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjEwNzEwQzQyMTBBMDExRTg5NkUxRjlBNkVEQzc1MjQ1IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjEwNzEwQzQzMTBBMDExRTg5NkUxRjlBNkVEQzc1MjQ1Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+XpwBmQAAAuhJREFUeNrsl21ojWEYx3cMzQcRykspJdSSRArzMrRD5IvQyDSLpZMPJEx5LZ+klrfTFvHBB8pLjMzmdVryGh+YJF9EKK1t1rBsx++q/4fH0/M852XnaHGe+u1+enbd9/2/7/u6r+s6oVgsltObnz45vfzJCvznBfZNtWM0GrVmGMyCxVAI4/TvTngOtXDD3iORSGcq84SSvcUIs12fD4chX5/b4Ra8gRYYDZNhpqPrKdgP7xGbfoHasXlwFobDO9gOt6HVa1ItZgyUwC6d2BVYj/3XtAlkosEaeA68gHXWJrMTjNGPZq29Qn+wzlWMEUtZoHbNjrMOfsFyuO4eFLuhNBuhWDv2CI7BVWy7XLZ5NMehDJ7Y+Ni0Jy2QgUI0e2Af3Icl7oG0gDVwxtW9CrZBB326fRZup3FTF2oKdm8TFijfOaFVHoQKr6PAroim3vX5C4yMd3TqP4TmMYw1/6bPvbhxUDt3XuI2wA4fcebwNR7z1nu4wAAvgdg1KxI0wF3swoECtfX2ZxmsgpMBF2Eq5Hl8D2uRf2jhW66PSDviBYoGddhNDArUI+Tse+FcnFua7/PdQlA1E22l/QkL4RCchmYfkV3YL+L1lVxmVKZTnblGmwTWJBqTRXeQD37WEVvEL9aR+z1NSQi2SVsDLkuu0qKlyrCvQB3pJrikjFEeIPIZ/EhQYKU7HjrEWdBulB8WYtcUeIt1A1fIZ6ptcIUdt50F7qUJiLPcvDsgQ72E6VDAmA0JlVsKrhZmKmAzPGSwQR6mViCsDhD3EcYz3nd3tIAZvH6ymAkTsHmQaqorgDtazEq47BHnLOCWKzTZQl4rm1zzSXVHrWBQSWbH2tbTYmEgzUUo0pGUpKFY2AJHvFJhT8otK04vOMqtncqnLXHKrVLZZqbc8pjUqudKmKTPHcoEVrB+k19Zppnm6GoX7gB8yEjB6rOjVmbNVsk/1y6EQ/BT+W6t3OHvlPzZX3VZgf+bwN8CDABE/DitG9AO0gAAAABJRU5ErkJggg=="></image>
  </div>
</div>

</template>


<script>
import Utils from '../utils';
export default {
  name: 'passwordfield',
  created () {
    this.currentValue = (this.value === undefined || this.value === null) ? '' :  this.value
  },
  data(){
    return { 
      currentValue: '',
      isClearShow: false,
      inputType: this.pwdShow?'text':'password',
      isPwdShow: this.pwdShow?true:false,
      pwdValue: '',
      isDisabled: this.disabled,
      isShow: true
    }
  },
  props: {
    value: [String, Number],
    name: String,
    placeholder: String,
    disabled: {
        type: Boolean,
        default: false
    },
    autofocus: {
      type: Boolean,
      default: false
    },
    maxlength: Number,
    pwdShow:{
        type: Boolean,
        default: false
    }
  },
  methods: {
    clear () {
      console.log('clear')
      this.currentValue = '';
      this.pwdValue = '';
    },
    focus () {
      this.$refs.input.focus()
    },
    blur () {
      this.$refs.input.blur()
    },
    onPwdFocus ($event) {
      this.currentValue = this.pwdValue;
      if(this.currentValue !== ""){
        this.isClearShow = true;
      }
      this.$emit('onFocus', this.currentValue, $event)
    },
    onPwdBlur ($event) {
      if(this.currentValue !== ""){
        this.isClearShow = true;
      }
      this.$emit('onBlur', this.currentValue, $event)
    //   this.$nextTick(() => {
    //     this.isClearShow = false;
    //   })
    },
    //weex不支持keyup事件
    onPwdReturn ($event) {
      this.currentValue = this.pwdValue;
      if ($event.key === 'Enter') {
        $event.target.blur()
        this.$emit('onEnter', this.currentValue, $event)
      }
    },
    onPwdInput($event) {
      this.currentValue = this.pwdValue;
      this.$emit('onInput', this.currentValue, $event)
    },
    onPwdChange($event) {
      this.currentValue = this.pwdValue;
      this.$emit('onChange', this.currentValue, $event)
    },
    toggleEye(){
      if(this.isPwdShow){
        /* 关闭密码 */
        this.inputType = 'password'
        this.currentValue = this.pwdValue;
        // 131269切换时数据不丢失
        // if(Utils.env.isWeb()){
        //   this.$nextTick( () => {
        //     this.$refs.input.focus();
        //     this.$refs.input.blur();
        //   })
        // }
      }else{
        /* 显示密码 */
        this.inputType = 'text'
        this.pwdValue = this.currentValue;
        // 131269切换时数据不丢失
        // if(Utils.env.isWeb()){
        //   this.$nextTick( () => {
        //     this.$refs.input.focus();
        //     this.$refs.input.blur();
        //   })
        // }
      }
      this.isPwdShow = !this.isPwdShow;
    }
  },
  watch: {
    value (val) {
      this.currentValue = val
    },
    currentValue (newVal) {
      if (newVal !== "" && !this.isDisabled) {
        this.isClearShow = true;
      }else{
        this.isClearShow = false;
      }
      this.$emit('input', this.currentValue);
    }
  }
}
</script>

<style scoped>
  /* .position-index{
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;;
  } */

  .textfiled-input-container{
    flex-direction: row;
    justify-content: space-between;
    height: 96px;
    padding-top: 24px;
    padding-bottom: 24px;
    border-bottom-width: 1px;
    border-bottom-color: #e8e8e8;
  }
  .textfiled-input-row{
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    flex: 1;
  }
  .textfiled-input {
    outline: none;
    height: 48px;
    font-size: 30px;
    color: #666;
    flex: 1;
  }
  .textfiled-input__clear-container{
    width: 40px;
    height: 40px;
  }
  .textfiled-input__clear{
    width: 32px;
    height: 32px;
    margin-left: 10px;
  }
  .textfiled-eye-container{
    margin-left: 20px;
    padding: 10px;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }
  .textfiled-icon-eye{
      width: 40px;
      height: 30px;
  }
  .textfiled-captcha-container{
    width: 160px;
    padding-left: 20px;
    margin-top: 10px;
    margin-left: 10px;
    margin-right: 10px;
    margin-bottom: 10px;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    border-left-width: 1px;
    border-left-color: #e8e8e8;
  }
  .textfiled-captcha-text{
    font-size: 28px;
    color: #3c94fe;
  }
  .textfiled-captcha-count{
    font-size: 28px;
    color: #666;
  }
</style>
``