
<template>
<div class="textfiled-input-container">
  <div class="textfiled-input-row">
    <!-- type=text -->
    <input
      class="textfiled-input"
      :maxlength="maxlength"
      :autofocus="autofocus"
      type="text"
      :name="name"
      :placeholder="placeholder"
      :disabled="disabled"
      v-model="currentValue"
      @focus="onFocus"
      @blur="onBlur"
      @return="onReturn"
      @input="onInput"
      @change="onChange"
      ref="input"/>

      <!-- clear -->
      <image class="textfiled-input__clear" @click="clear" v-if="isClearShow" 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 class="textfiled-captcha-container">
    <text class="textfiled-captcha-text" v-if="!isCodeSend" @click="getCaptcha">获取验证码</text>
    <text class="textfiled-captcha-count" v-if="isCodeSend">{{captchaTime}}s</text>
  </div>
</div>

</template>


<script>
export default {
  name: 'captchafield',
  created () {
    this.currentValue = (this.value === undefined || this.value === null) ? '' :  this.value
  },
  data(){
    return { 
      currentValue: '',
      isClearShow: false,
      isCodeSend: this.isCodeClick,
      captchaTime: this.time,
      isDisabled: this.disabled
    }
  },
  props: {
    value: [String, Number],
    name: String,
    placeholder: String,
    disabled: {
        type: Boolean,
        default: false
    },
    autofocus: {
      type: Boolean,
      default: false
    },
    maxlength: Number,
    time:{
      type: Number,
      default: 90
    },
    isCodeClick:{
        type: Boolean,
        default: false
    }
  },
  methods: {
    clear () {
      this.currentValue = '';
      this.pwdValue = '';
    },
    focus () {
      this.$refs.input.focus()
    },
    blur () {
      this.$refs.input.blur()
    },
    onFocus ($event) {
      if(this.currentValue !== ""){
        this.isClearShow = true;
      }
      this.$emit('onFocus', this.currentValue, $event)
    },
    onBlur ($event) {
      this.isClearShow = false;
      this.$emit('onBlur', this.currentValue, $event)
    },
    //weex不支持keyup事件
    onReturn ($event) {
      if ($event.key === 'Enter') {
        $event.target.blur()
        this.$emit('onEnter', this.currentValue, $event)
      }
    },
    onInput($event) {
      this.$emit('onInput', this.currentValue, $event)
    },
    onChange($event) {
      this.$emit('onChange', this.currentValue, $event)
    },
    countDown(){
        this.isCodeSend = true;
        let time = setInterval(() => {
            if (this.captchaTime === 1) {
                clearInterval(time);
                this.isCodeSend = false;
                this.captchaTime = this.time;
            } else {
                this.captchaTime--;
            }
        }, 1000)
    },
    getCaptcha(){
        this.$emit("sendCaptcha");
    }
  },
  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>
  .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 {
    height: 48px;
    font-size: 30px;
    color: #666;
    flex: 1;
  }
  .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>
