input

<template>
  <div class="common_conponents common_conponents_base_input">
    <div class="input_item_wrap" v-if="property.type === 'text' || property.type === 'password'">
      <div class="input_item clearfix" :style="cssText"
        :class="{'active': activeLight, 'noEnpty': value, 'error': property.errorFlag}">
        <div class="base_input_wrap">
          <div class="label">{{property.label}}</div>
          <div class="base_input">
            <input :type="property.type || 'text'" :value="value" :ref="property.name" autocomplete="off"
              :maxlength="property.maxlength || '100'" :placeholder="property.placeholder || ''"
              @input="handle('input',$event.target.value, $event)" @focus="handle('focus',$event.target.value, $event)"
              @blur="handle('blur', $event.target.value, $event)">
          </div>
          <div class="other_icon clearfix">
            <div class="clear_wrap icon_wrap" v-if="value && property.visibe && property.visibe.eye" @click="changeEye">
              <i class="iconfont "
                :class="property.type === 'password' ? 'iconic_see_pressed' : 'iconic_see_default'"></i>
            </div>
            <div class="eye_wrap icon_wrap" v-if="value && (property.visibe && property.visibe.clear)"
              @click="clearValue">
              <i class="iconfont iconic_clos"></i>
            </div>
          </div>
          <span class="tips" v-if="property.errorFlag">{{property.errorText}}</span>
        </div>
      </div>
    </div>
    <div class="input_item_wrap" v-if="property.type === 'divide'">
      <div class="input_item clearfix" :style="cssText"
        :class="{'active': activeLight, 'noEnpty': value, 'error': property.errorFlag}">
        <div class="base_input_wrap">
          <div class="label">{{property.label}}</div>
          <div class="input_num">
            <div class="num clearfix">
              <span v-for="(item, index) in codeLength" :key='index' :ref="'item' + index">
                <!-- {{value.charAt(index)}} -->
                <em v-if="value && value.length >= index">{{value.charAt(index)}}</em>
              </span>
            </div>
          </div>
          <div class="base_input" style="visible:hidden;opacity: 0;">
            <input :type="property.type || 'text'" :value="value" :ref="property.name" autocomplete="off"
              :maxlength="property.maxlength || '100'" :placeholder="property.placeholder || ''"
              @input="handle('input',$event.target.value=$event.target.value.replace(/[^\d]/g,''), $event)" @focus="handle('focus',$event.target.value, $event)"
              @blur="handle('blur', $event.target.value, $event)">
          </div>
          <span class="tips" v-if="property.errorFlag">{{property.errorText}}</span>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
  export default {
    name: 'baseInput',
    data() {
      return {
        codeLength: this.property.maxlength || 6,
        activeLight: false, // 是否获得焦点
      }
    },
    props: {
      property: {
        type: Object,
        default: () => {}
      },
      value: {
        type: [String, Number],
        default: '',
      },
      cssText: {
        type: Object,
        default: () => {},
      },
    },
    watch: {
      'value' (val) {
        if (this.property.type === 'divide') {
          let len = val.length
          if (len === this.codeLength) {
            console.log('输入完成')
          }
          for (let i = 0; i < this.codeLength; i++) {
            this.$nextTick(() => {
              if (this.$refs['item' + i]) {
                this.$refs['item' + i][0].className = ''
              }
            })
          }
          this.$nextTick(() => {
            // val && (this.$refs['item' + val.length-1][0].className = 'prev_span')
            if (val.length > 0) {
              this.$refs['item' + (val.length-1)][0].className = 'prev_span'
            }
            if (!(val.length >= this.codeLength)) {
              this.$refs['item' + val.length][0].className = 'input_span'
            }
          })
        }
      }
    },
    methods: {
      // 清除值
      clearValue() {
        this.$emit('input', '')
      },
      // 清除值
      changeEye() {
        this.property.type = this.property.type === 'password' ? 'text' : 'password'
      },
      // 向父组件派发input的各种事件
      handle(type, data, e) {
        if (type === 'focus') {
          this.activeLight = true
        } else if (type === 'blur') {
          this.activeLight = false
        }
        let obj = {
          handleType: type,
          value: data
        }
        if (type === 'input') {
          // this.clearErrorInfo(data)
        }
        this.$emit('input', data)
        this.$emit('onevents', obj)
      },
    },
  }
</script>